mirror of https://github.com/apache/superset.git
refactor: icon to icons for favestar component (#15371)
* initial commit * initial commit * fix cypress test * fix favstar cypress test * fix card view * fix other card view
This commit is contained in:
parent
9330c6ed0d
commit
95b9e2e185
|
@ -34,36 +34,36 @@ describe('chart card view', () => {
|
|||
it('should allow to favorite/unfavorite chart card', () => {
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-selected']")
|
||||
.find("[aria-label='favorite-selected']")
|
||||
.should('not.exist');
|
||||
cy.get("[data-test='card-actions']")
|
||||
.find("[data-test='favorite-unselected']")
|
||||
.find("[aria-label='favorite-unselected']")
|
||||
.first()
|
||||
.click();
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-selected']")
|
||||
.find("[aria-label='favorite-selected']")
|
||||
.should('be.visible');
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-unselected']")
|
||||
.find("[aria-label='favorite-unselected']")
|
||||
.should('not.exist');
|
||||
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-unselected']")
|
||||
.find("[aria-label='favorite-unselected']")
|
||||
.should('not.exist');
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-selected']")
|
||||
.find("[aria-label='favorite-selected']")
|
||||
.click();
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-unselected']")
|
||||
.find("[aria-label='favorite-unselected']")
|
||||
.should('be.visible');
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-selected']")
|
||||
.find("[aria-label='favorite-selected']")
|
||||
.should('not.exist');
|
||||
});
|
||||
|
||||
|
|
|
@ -38,23 +38,23 @@ describe('Dashboard add to favorite', () => {
|
|||
it('should allow favor/unfavor', () => {
|
||||
if (!isFavoriteDashboard) {
|
||||
cy.get('[data-test="fave-unfave-icon"]')
|
||||
.find('svg')
|
||||
.should('have.attr', 'data-test', 'favorite-unselected');
|
||||
.find('span')
|
||||
.should('have.attr', 'aria-label', 'favorite-unselected');
|
||||
cy.get('[data-test="fave-unfave-icon"]').trigger('click');
|
||||
cy.get('[data-test="fave-unfave-icon"]')
|
||||
.find('svg')
|
||||
.should('have.attr', 'data-test', 'favorite-selected')
|
||||
.and('not.have.attr', 'data-test', 'favorite-unselected');
|
||||
.find('span')
|
||||
.should('have.attr', 'aria-label', 'favorite-selected')
|
||||
.and('not.have.attr', 'aria-label', 'favorite-unselected');
|
||||
} else {
|
||||
cy.get('[data-test="fave-unfave-icon"]')
|
||||
.find('svg')
|
||||
.should('have.attr', 'data-test', 'favorite-unselected')
|
||||
.and('not.have.attr', 'data-test', 'favorite-selected');
|
||||
.find('span')
|
||||
.should('have.attr', 'aria-label', 'favorite-unselected')
|
||||
.and('not.have.attr', 'aria-label', 'favorite-selected');
|
||||
cy.get('[data-test="fave-unfave-icon"]').trigger('click');
|
||||
cy.get('[data-test="fave-unfave-icon"]')
|
||||
.find('svg')
|
||||
.should('have.attr', 'data-test', 'favorite-unselected')
|
||||
.and('not.have.attr', 'data-test', 'favorite-selected');
|
||||
.find('span')
|
||||
.should('have.attr', 'aria-label', 'favorite-unselected')
|
||||
.and('not.have.attr', 'aria-label', 'favorite-selected');
|
||||
}
|
||||
|
||||
// reset to original fav state
|
||||
|
|
|
@ -34,36 +34,36 @@ describe('Dashboard card view', () => {
|
|||
it('should allow to favorite/unfavorite dashboard card', () => {
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-selected']")
|
||||
.find("[aria-label='favorite-selected']")
|
||||
.should('not.exist');
|
||||
cy.get("[data-test='card-actions']")
|
||||
.find("[data-test='favorite-unselected']")
|
||||
.find("[aria-label='favorite-unselected']")
|
||||
.first()
|
||||
.click();
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-selected']")
|
||||
.find("[aria-label='favorite-selected']")
|
||||
.should('be.visible');
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-unselected']")
|
||||
.find("[aria-label='favorite-unselected']")
|
||||
.should('not.exist');
|
||||
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-unselected']")
|
||||
.find("[aria-label='favorite-unselected']")
|
||||
.should('not.exist');
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-selected']")
|
||||
.find("[aria-label='favorite-selected']")
|
||||
.click();
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-unselected']")
|
||||
.find("[aria-label='favorite-unselected']")
|
||||
.should('be.visible');
|
||||
cy.get("[data-test='card-actions']")
|
||||
.first()
|
||||
.find("[data-test='favorite-selected']")
|
||||
.find("[aria-label='favorite-selected']")
|
||||
.should('not.exist');
|
||||
});
|
||||
|
||||
|
|
|
@ -41,11 +41,9 @@ test('render right content', () => {
|
|||
|
||||
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(
|
||||
screen.getByRole('img', { name: 'favorite-selected' }),
|
||||
).toBeInTheDocument();
|
||||
|
||||
expect(props.saveFaveStar).toBeCalledTimes(0);
|
||||
userEvent.click(screen.getByRole('button'));
|
||||
|
@ -53,11 +51,9 @@ test('render right content', () => {
|
|||
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(
|
||||
screen.getByRole('img', { name: 'favorite-unselected' }),
|
||||
).toBeInTheDocument();
|
||||
|
||||
expect(props.saveFaveStar).toBeCalledTimes(1);
|
||||
userEvent.click(screen.getByRole('button'));
|
||||
|
|
|
@ -21,7 +21,7 @@ import React, { useCallback } from 'react';
|
|||
import { t, styled } from '@superset-ui/core';
|
||||
import { Tooltip } from 'src/components/Tooltip';
|
||||
import { useComponentDidMount } from 'src/common/hooks/useComponentDidMount';
|
||||
import Icon from '../Icon';
|
||||
import Icons from 'src/components/Icons';
|
||||
|
||||
interface FaveStarProps {
|
||||
itemId: number;
|
||||
|
@ -66,7 +66,7 @@ const FaveStar = ({
|
|||
data-test="fave-unfave-icon"
|
||||
role="button"
|
||||
>
|
||||
<Icon name={isStarred ? 'favorite-selected' : 'favorite-unselected'} />
|
||||
{isStarred ? <Icons.FavoriteSelected /> : <Icons.FavoriteUnselected />}
|
||||
</StyledLink>
|
||||
);
|
||||
|
||||
|
|
Loading…
Reference in New Issue