test: tests for component FaveStar (#13320)

* test for FaveStar

* removing comment

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 }) => (
+    <div data-test="icon" data-name={name} />
+  ),
+}));
+
+jest.mock('src/common/components/Tooltip', () => ({
+  Tooltip: (props: any) => <div data-test="tooltip" {...props} />,
+}));
+
+test('render right content', () => {
+  const props = {
+    itemId: 3,
+    saveFaveStar: jest.fn(),
+  };
+
+  const { rerender } = render(<FaveStar {...props} isStarred />);
+  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(<FaveStar {...props} />);
+  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(<FaveStar {...props} />);
+
+  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(<FaveStar {...props} />);
+  expect(props.fetchFaveStar).toBeCalledTimes(1);
+  expect(props.fetchFaveStar).toBeCalledWith(props.itemId);
+
+  rerender(<FaveStar {...{ ...props, itemId: 2 }} />);
+  expect(props.fetchFaveStar).toBeCalledTimes(1);
+});

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<FaveStarProps> {
-  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 = (
-      <StyledLink
-        href="#"
-        onClick={this.onClick}
-        className="fave-unfave-icon"
-        data-test="fave-unfave-icon"
+  const content = (
+    <StyledLink
+      href="#"
+      onClick={onClick}
+      className="fave-unfave-icon"
+      data-test="fave-unfave-icon"
+      role="button"
+    >
+      <Icon name={isStarred ? 'favorite-selected' : 'favorite-unselected'} />
+    </StyledLink>
+  );
+
+  if (showTooltip) {
+    return (
+      <Tooltip
+        id="fave-unfave-tooltip"
+        title={t('Click to favorite/unfavorite')}
       >
-        <Icon
-          name={
-            this.props.isStarred ? 'favorite-selected' : 'favorite-unselected'
-          }
-        />
-      </StyledLink>
+        {content}
+      </Tooltip>
     );
-
-    if (this.props.showTooltip) {
-      return (
-        <Tooltip
-          id="fave-unfave-tooltip"
-          title={t('Click to favorite/unfavorite')}
-        >
-          {content}
-        </Tooltip>
-      );
-    }
-
-    return content;
   }
-}
+
+  return content;
+};
+export default FaveStar;