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:
Phillip Kelley-Dotson 2021-06-25 09:48:22 -07:00 committed by GitHub
parent 9330c6ed0d
commit 95b9e2e185
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 35 additions and 39 deletions

View File

@ -34,36 +34,36 @@ describe('chart card view', () => {
it('should allow to favorite/unfavorite chart card', () => { it('should allow to favorite/unfavorite chart card', () => {
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-selected']") .find("[aria-label='favorite-selected']")
.should('not.exist'); .should('not.exist');
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.find("[data-test='favorite-unselected']") .find("[aria-label='favorite-unselected']")
.first() .first()
.click(); .click();
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-selected']") .find("[aria-label='favorite-selected']")
.should('be.visible'); .should('be.visible');
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-unselected']") .find("[aria-label='favorite-unselected']")
.should('not.exist'); .should('not.exist');
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-unselected']") .find("[aria-label='favorite-unselected']")
.should('not.exist'); .should('not.exist');
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-selected']") .find("[aria-label='favorite-selected']")
.click(); .click();
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-unselected']") .find("[aria-label='favorite-unselected']")
.should('be.visible'); .should('be.visible');
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-selected']") .find("[aria-label='favorite-selected']")
.should('not.exist'); .should('not.exist');
}); });

View File

@ -38,23 +38,23 @@ describe('Dashboard add to favorite', () => {
it('should allow favor/unfavor', () => { it('should allow favor/unfavor', () => {
if (!isFavoriteDashboard) { if (!isFavoriteDashboard) {
cy.get('[data-test="fave-unfave-icon"]') cy.get('[data-test="fave-unfave-icon"]')
.find('svg') .find('span')
.should('have.attr', 'data-test', 'favorite-unselected'); .should('have.attr', 'aria-label', 'favorite-unselected');
cy.get('[data-test="fave-unfave-icon"]').trigger('click'); cy.get('[data-test="fave-unfave-icon"]').trigger('click');
cy.get('[data-test="fave-unfave-icon"]') cy.get('[data-test="fave-unfave-icon"]')
.find('svg') .find('span')
.should('have.attr', 'data-test', 'favorite-selected') .should('have.attr', 'aria-label', 'favorite-selected')
.and('not.have.attr', 'data-test', 'favorite-unselected'); .and('not.have.attr', 'aria-label', 'favorite-unselected');
} else { } else {
cy.get('[data-test="fave-unfave-icon"]') cy.get('[data-test="fave-unfave-icon"]')
.find('svg') .find('span')
.should('have.attr', 'data-test', 'favorite-unselected') .should('have.attr', 'aria-label', 'favorite-unselected')
.and('not.have.attr', 'data-test', 'favorite-selected'); .and('not.have.attr', 'aria-label', 'favorite-selected');
cy.get('[data-test="fave-unfave-icon"]').trigger('click'); cy.get('[data-test="fave-unfave-icon"]').trigger('click');
cy.get('[data-test="fave-unfave-icon"]') cy.get('[data-test="fave-unfave-icon"]')
.find('svg') .find('span')
.should('have.attr', 'data-test', 'favorite-unselected') .should('have.attr', 'aria-label', 'favorite-unselected')
.and('not.have.attr', 'data-test', 'favorite-selected'); .and('not.have.attr', 'aria-label', 'favorite-selected');
} }
// reset to original fav state // reset to original fav state

View File

@ -34,36 +34,36 @@ describe('Dashboard card view', () => {
it('should allow to favorite/unfavorite dashboard card', () => { it('should allow to favorite/unfavorite dashboard card', () => {
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-selected']") .find("[aria-label='favorite-selected']")
.should('not.exist'); .should('not.exist');
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.find("[data-test='favorite-unselected']") .find("[aria-label='favorite-unselected']")
.first() .first()
.click(); .click();
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-selected']") .find("[aria-label='favorite-selected']")
.should('be.visible'); .should('be.visible');
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-unselected']") .find("[aria-label='favorite-unselected']")
.should('not.exist'); .should('not.exist');
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-unselected']") .find("[aria-label='favorite-unselected']")
.should('not.exist'); .should('not.exist');
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-selected']") .find("[aria-label='favorite-selected']")
.click(); .click();
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-unselected']") .find("[aria-label='favorite-unselected']")
.should('be.visible'); .should('be.visible');
cy.get("[data-test='card-actions']") cy.get("[data-test='card-actions']")
.first() .first()
.find("[data-test='favorite-selected']") .find("[aria-label='favorite-selected']")
.should('not.exist'); .should('not.exist');
}); });

View File

@ -41,11 +41,9 @@ test('render right content', () => {
const { rerender } = render(<FaveStar {...props} isStarred />); const { rerender } = render(<FaveStar {...props} isStarred />);
expect(screen.getByRole('button')).toBeInTheDocument(); expect(screen.getByRole('button')).toBeInTheDocument();
expect(screen.getByTestId('icon')).toBeInTheDocument(); expect(
expect(screen.getByTestId('icon')).toHaveAttribute( screen.getByRole('img', { name: 'favorite-selected' }),
'data-name', ).toBeInTheDocument();
'favorite-selected',
);
expect(props.saveFaveStar).toBeCalledTimes(0); expect(props.saveFaveStar).toBeCalledTimes(0);
userEvent.click(screen.getByRole('button')); userEvent.click(screen.getByRole('button'));
@ -53,11 +51,9 @@ test('render right content', () => {
expect(props.saveFaveStar).toBeCalledWith(props.itemId, true); expect(props.saveFaveStar).toBeCalledWith(props.itemId, true);
rerender(<FaveStar {...props} />); rerender(<FaveStar {...props} />);
expect(screen.getByTestId('icon')).toBeInTheDocument(); expect(
expect(screen.getByTestId('icon')).toHaveAttribute( screen.getByRole('img', { name: 'favorite-unselected' }),
'data-name', ).toBeInTheDocument();
'favorite-unselected',
);
expect(props.saveFaveStar).toBeCalledTimes(1); expect(props.saveFaveStar).toBeCalledTimes(1);
userEvent.click(screen.getByRole('button')); userEvent.click(screen.getByRole('button'));

View File

@ -21,7 +21,7 @@ import React, { useCallback } from 'react';
import { t, styled } from '@superset-ui/core'; import { t, styled } from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip'; import { Tooltip } from 'src/components/Tooltip';
import { useComponentDidMount } from 'src/common/hooks/useComponentDidMount'; import { useComponentDidMount } from 'src/common/hooks/useComponentDidMount';
import Icon from '../Icon'; import Icons from 'src/components/Icons';
interface FaveStarProps { interface FaveStarProps {
itemId: number; itemId: number;
@ -66,7 +66,7 @@ const FaveStar = ({
data-test="fave-unfave-icon" data-test="fave-unfave-icon"
role="button" role="button"
> >
<Icon name={isStarred ? 'favorite-selected' : 'favorite-unselected'} /> {isStarred ? <Icons.FavoriteSelected /> : <Icons.FavoriteUnselected />}
</StyledLink> </StyledLink>
); );