From abfd3734cfa3ac3baffee9b54bdd30cabd0d768b Mon Sep 17 00:00:00 2001 From: Bruno Motta Date: Thu, 25 Feb 2021 20:47:28 -0300 Subject: [PATCH] test: tests for component FaveStar (#13320) * test for FaveStar * removing comment --- .../src/components/FaveStar/FaveStar.test.tsx | 104 ++++++++++++++++++ .../{FaveStar.tsx => FaveStar/index.tsx} | 89 ++++++++------- 2 files changed, 152 insertions(+), 41 deletions(-) create mode 100644 superset-frontend/src/components/FaveStar/FaveStar.test.tsx rename superset-frontend/src/components/{FaveStar.tsx => FaveStar/index.tsx} (54%) diff --git a/superset-frontend/src/components/FaveStar/FaveStar.test.tsx b/superset-frontend/src/components/FaveStar/FaveStar.test.tsx new file mode 100644 index 0000000000..e7c1773dfd --- /dev/null +++ b/superset-frontend/src/components/FaveStar/FaveStar.test.tsx @@ -0,0 +1,104 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { render, screen } from 'spec/helpers/testing-library'; +import userEvent from '@testing-library/user-event'; +import FaveStar from '.'; + +jest.mock('../Icon', () => ({ + __esModule: true, + default: ({ name }: { name: string }) => ( +
+ ), +})); + +jest.mock('src/common/components/Tooltip', () => ({ + Tooltip: (props: any) =>
, +})); + +test('render right content', () => { + const props = { + itemId: 3, + saveFaveStar: jest.fn(), + }; + + const { rerender } = render(); + expect(screen.getByRole('button')).toBeInTheDocument(); + expect(screen.getByTestId('icon')).toBeInTheDocument(); + expect(screen.getByTestId('icon')).toHaveAttribute( + 'data-name', + 'favorite-selected', + ); + + expect(props.saveFaveStar).toBeCalledTimes(0); + userEvent.click(screen.getByRole('button')); + expect(props.saveFaveStar).toBeCalledTimes(1); + expect(props.saveFaveStar).toBeCalledWith(props.itemId, true); + + rerender(); + expect(screen.getByTestId('icon')).toBeInTheDocument(); + expect(screen.getByTestId('icon')).toHaveAttribute( + 'data-name', + 'favorite-unselected', + ); + + expect(props.saveFaveStar).toBeCalledTimes(1); + userEvent.click(screen.getByRole('button')); + expect(props.saveFaveStar).toBeCalledTimes(2); + expect(props.saveFaveStar).toBeCalledWith(props.itemId, false); +}); + +test('render content on tooltip', () => { + const props = { + itemId: 3, + showTooltip: true, + saveFaveStar: jest.fn(), + }; + + render(); + + expect(screen.getByTestId('tooltip')).toBeInTheDocument(); + expect(screen.getByTestId('tooltip')).toHaveAttribute( + 'id', + 'fave-unfave-tooltip', + ); + expect(screen.getByTestId('tooltip')).toHaveAttribute( + 'title', + 'Click to favorite/unfavorite', + ); + expect(screen.getByRole('button')).toBeInTheDocument(); +}); + +test('Call fetchFaveStar only on the first render', () => { + const props = { + itemId: 3, + fetchFaveStar: jest.fn(), + saveFaveStar: jest.fn(), + isStarred: false, + showTooltip: false, + }; + + const { rerender } = render(); + expect(props.fetchFaveStar).toBeCalledTimes(1); + expect(props.fetchFaveStar).toBeCalledWith(props.itemId); + + rerender(); + expect(props.fetchFaveStar).toBeCalledTimes(1); +}); diff --git a/superset-frontend/src/components/FaveStar.tsx b/superset-frontend/src/components/FaveStar/index.tsx similarity index 54% rename from superset-frontend/src/components/FaveStar.tsx rename to superset-frontend/src/components/FaveStar/index.tsx index 28c9708813..913084cd7a 100644 --- a/superset-frontend/src/components/FaveStar.tsx +++ b/superset-frontend/src/components/FaveStar/index.tsx @@ -16,17 +16,19 @@ * specific language governing permissions and limitations * under the License. */ -import React from 'react'; + +import React, { useCallback } from 'react'; import { t, styled } from '@superset-ui/core'; import { Tooltip } from 'src/common/components/Tooltip'; -import Icon from './Icon'; +import { useComponentDidMount } from 'src/common/hooks/useComponentDidMount'; +import Icon from '../Icon'; interface FaveStarProps { itemId: number; - fetchFaveStar?: (id: number) => void; - saveFaveStar(id: number, isStarred: boolean): any; - isStarred: boolean; + isStarred?: boolean; showTooltip?: boolean; + saveFaveStar(id: number, isStarred: boolean): any; + fetchFaveStar?: (id: number) => void; } const StyledLink = styled.a` @@ -35,45 +37,50 @@ const StyledLink = styled.a` padding: 0 0 0 0.5em; `; -export default class FaveStar extends React.PureComponent { - componentDidMount() { - if (this.props.fetchFaveStar) { - this.props.fetchFaveStar(this.props.itemId); +const FaveStar = ({ + itemId, + isStarred, + showTooltip, + saveFaveStar, + fetchFaveStar, +}: FaveStarProps) => { + useComponentDidMount(() => { + if (fetchFaveStar) { + fetchFaveStar(itemId); } - } + }); - onClick = (e: React.MouseEvent) => { - e.preventDefault(); - this.props.saveFaveStar(this.props.itemId, this.props.isStarred); - }; + const onClick = useCallback( + (e: React.MouseEvent) => { + e.preventDefault(); + saveFaveStar(itemId, !!isStarred); + }, + [isStarred, itemId, saveFaveStar], + ); - render() { - const content = ( - + + + ); + + if (showTooltip) { + return ( + - - + {content} + ); - - if (this.props.showTooltip) { - return ( - - {content} - - ); - } - - return content; } -} + + return content; +}; +export default FaveStar;