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 ? : }
);