mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
test: tests for component FaveStar (#13320)
* test for FaveStar * removing comment
This commit is contained in:
parent
33bec57619
commit
abfd3734cf
104
superset-frontend/src/components/FaveStar/FaveStar.test.tsx
Normal file
104
superset-frontend/src/components/FaveStar/FaveStar.test.tsx
Normal file
@ -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);
|
||||||
|
});
|
@ -16,17 +16,19 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
|
||||||
|
import React, { useCallback } from 'react';
|
||||||
import { t, styled } from '@superset-ui/core';
|
import { t, styled } from '@superset-ui/core';
|
||||||
import { Tooltip } from 'src/common/components/Tooltip';
|
import { Tooltip } from 'src/common/components/Tooltip';
|
||||||
import Icon from './Icon';
|
import { useComponentDidMount } from 'src/common/hooks/useComponentDidMount';
|
||||||
|
import Icon from '../Icon';
|
||||||
|
|
||||||
interface FaveStarProps {
|
interface FaveStarProps {
|
||||||
itemId: number;
|
itemId: number;
|
||||||
fetchFaveStar?: (id: number) => void;
|
isStarred?: boolean;
|
||||||
saveFaveStar(id: number, isStarred: boolean): any;
|
|
||||||
isStarred: boolean;
|
|
||||||
showTooltip?: boolean;
|
showTooltip?: boolean;
|
||||||
|
saveFaveStar(id: number, isStarred: boolean): any;
|
||||||
|
fetchFaveStar?: (id: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const StyledLink = styled.a`
|
const StyledLink = styled.a`
|
||||||
@ -35,45 +37,50 @@ const StyledLink = styled.a`
|
|||||||
padding: 0 0 0 0.5em;
|
padding: 0 0 0 0.5em;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default class FaveStar extends React.PureComponent<FaveStarProps> {
|
const FaveStar = ({
|
||||||
componentDidMount() {
|
itemId,
|
||||||
if (this.props.fetchFaveStar) {
|
isStarred,
|
||||||
this.props.fetchFaveStar(this.props.itemId);
|
showTooltip,
|
||||||
|
saveFaveStar,
|
||||||
|
fetchFaveStar,
|
||||||
|
}: FaveStarProps) => {
|
||||||
|
useComponentDidMount(() => {
|
||||||
|
if (fetchFaveStar) {
|
||||||
|
fetchFaveStar(itemId);
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
|
|
||||||
onClick = (e: React.MouseEvent) => {
|
const onClick = useCallback(
|
||||||
e.preventDefault();
|
(e: React.MouseEvent) => {
|
||||||
this.props.saveFaveStar(this.props.itemId, this.props.isStarred);
|
e.preventDefault();
|
||||||
};
|
saveFaveStar(itemId, !!isStarred);
|
||||||
|
},
|
||||||
|
[isStarred, itemId, saveFaveStar],
|
||||||
|
);
|
||||||
|
|
||||||
render() {
|
const content = (
|
||||||
const content = (
|
<StyledLink
|
||||||
<StyledLink
|
href="#"
|
||||||
href="#"
|
onClick={onClick}
|
||||||
onClick={this.onClick}
|
className="fave-unfave-icon"
|
||||||
className="fave-unfave-icon"
|
data-test="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
|
{content}
|
||||||
name={
|
</Tooltip>
|
||||||
this.props.isStarred ? 'favorite-selected' : 'favorite-unselected'
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</StyledLink>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
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;
|
Loading…
Reference in New Issue
Block a user