From 95b9e2e1852897acd25212ee845f8c8721656976 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Fri, 25 Jun 2021 09:48:22 -0700 Subject: [PATCH] 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 --- .../integration/chart_list/card_view.test.ts | 16 +++++++------- .../integration/dashboard/fav_star.test.js | 22 +++++++++---------- .../dashboard_list/card_view.test.ts | 16 +++++++------- .../src/components/FaveStar/FaveStar.test.tsx | 16 +++++--------- .../src/components/FaveStar/index.tsx | 4 ++-- 5 files changed, 35 insertions(+), 39 deletions(-) diff --git a/superset-frontend/cypress-base/cypress/integration/chart_list/card_view.test.ts b/superset-frontend/cypress-base/cypress/integration/chart_list/card_view.test.ts index 22da71912a..6910b23b2f 100644 --- a/superset-frontend/cypress-base/cypress/integration/chart_list/card_view.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/chart_list/card_view.test.ts @@ -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'); }); diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/fav_star.test.js b/superset-frontend/cypress-base/cypress/integration/dashboard/fav_star.test.js index 812a3c9e78..a20b1eb3f5 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard/fav_star.test.js +++ b/superset-frontend/cypress-base/cypress/integration/dashboard/fav_star.test.js @@ -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 diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard_list/card_view.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard_list/card_view.test.ts index 841fb560b1..35f11a17ea 100644 --- a/superset-frontend/cypress-base/cypress/integration/dashboard_list/card_view.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/dashboard_list/card_view.test.ts @@ -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'); }); diff --git a/superset-frontend/src/components/FaveStar/FaveStar.test.tsx b/superset-frontend/src/components/FaveStar/FaveStar.test.tsx index 443cb1e41c..b3f038f41e 100644 --- a/superset-frontend/src/components/FaveStar/FaveStar.test.tsx +++ b/superset-frontend/src/components/FaveStar/FaveStar.test.tsx @@ -41,11 +41,9 @@ test('render right content', () => { const { rerender } = render(); 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(); - 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')); diff --git a/superset-frontend/src/components/FaveStar/index.tsx b/superset-frontend/src/components/FaveStar/index.tsx index 8a0903372f..f6f8c9ec5e 100644 --- a/superset-frontend/src/components/FaveStar/index.tsx +++ b/superset-frontend/src/components/FaveStar/index.tsx @@ -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" > - + {isStarred ? : } );