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;