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 7674acbc18..268c3623b6 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 @@ -27,40 +27,42 @@ describe('chart card view', () => { }); it('should load cards', () => { - cy.get('.chart-list-view'); - cy.get('.ant-card').should('be.visible'); - cy.get('.ant-card').should('have.length', 25); + cy.get('[data-test="chart-list-view"]'); + cy.get('[data-test="styled-card"]').should('be.visible'); + cy.get('[data-test="styled-card"]').should('have.length', 25); }); it('should allow to favorite/unfavorite chart card', () => { - cy.get('.ant-card .card-actions') + cy.get("[data-test='card-actions']") .first() .find("[data-test='favorite-selected']") .should('not.exist'); - cy.get(".ant-card .card-actions [data-test='favorite-unselected']") + cy.get("[data-test='card-actions']") + .find("[data-test='favorite-unselected']") .first() .click(); - cy.get('.ant-card .card-actions') + cy.get("[data-test='card-actions']") .first() .find("[data-test='favorite-selected']") - .should('exist'); - cy.get('.ant-card .card-actions') + .should('be.visible'); + cy.get("[data-test='card-actions']") .first() .find("[data-test='favorite-unselected']") .should('not.exist'); - cy.get('.ant-card .card-actions') + cy.get("[data-test='card-actions']") .first() .find("[data-test='favorite-unselected']") .should('not.exist'); - cy.get(".ant-card .card-actions [data-test='favorite-selected']") + cy.get("[data-test='card-actions']") .first() + .find("[data-test='favorite-selected']") .click(); - cy.get('.ant-card .card-actions') + cy.get("[data-test='card-actions']") .first() .find("[data-test='favorite-unselected']") - .should('exist'); - cy.get('.ant-card .card-actions') + .should('be.visible'); + cy.get("[data-test='card-actions']") .first() .find("[data-test='favorite-selected']") .should('not.exist'); @@ -71,37 +73,45 @@ describe('chart card view', () => { cy.get('.Select__control').last().should('be.visible'); cy.get('.Select__control').last().click(); cy.get('.Select__menu').contains('Alphabetical').click(); - cy.get('.chart-list-view').should('be.visible'); - cy.get('.ant-card').first().contains('% Rural'); + cy.get('[data-test="chart-list-view"]').should('be.visible'); + cy.get('[data-test="styled-card"]').first().contains('% Rural'); // sort Recently Modified cy.get('.Select__control').last().should('be.visible'); cy.get('.Select__control').last().click(); cy.get('.Select__menu').contains('Recently Modified').click(); - cy.get('.chart-list-view').should('be.visible'); - cy.get('.ant-card').first().contains('Unicode Cloud'); - cy.get('.ant-card').last().contains('Life Expectancy VS Rural %'); + cy.get('[data-test="chart-list-view"]').should('be.visible'); + cy.get('[data-test="styled-card"]').first().contains('Unicode Cloud'); + cy.get('[data-test="styled-card"]') + .last() + .contains('Life Expectancy VS Rural %'); }); it('should delete correctly', () => { // show delete modal - cy.get('.ant-dropdown-trigger').last().trigger('mouseover'); - cy.get('.ant-dropdown-menu-item').contains('Delete').should('exist'); - cy.get('.ant-dropdown-menu-item').contains('Delete').click(); - cy.get('.modal-dialog').should('be.visible'); - cy.get('.modal-dialog .btn-danger').should('have.attr', 'disabled'); - cy.get(".modal-dialog input[id='delete']").type('DELETE'); - cy.get('.modal-dialog .btn-danger').should('not.have.attr', 'disabled'); - cy.get('.modal-dialog .btn-default').contains('Cancel').click(); + cy.get('[data-test="more-horiz"]').last().trigger('mouseover'); + cy.get('[data-test="chart-list-delete-option"]').should('be.visible'); + cy.get('[data-test="chart-list-delete-option"]').contains('Delete').click(); + cy.get('[data-test="Please Confirm-modal-header"]').should('be.visible'); + cy.get('[data-test="modal-delete-button"]').should('have.attr', 'disabled'); + cy.get('[data-test="Please Confirm-modal-header"]').should('be.visible'); + cy.get("[data-test='delete-modal-input']").type('DELETE'); + cy.get('[data-test="modal-delete-button"]').should( + 'not.have.attr', + 'disabled', + ); + cy.get('[data-test="modal-cancel-button"]').click(); }); it('should edit correctly', () => { // show edit modal - cy.get('.ant-dropdown-trigger').last().trigger('mouseover'); - cy.get('.ant-dropdown-menu-item').contains('Edit').should('exist'); - cy.get('.ant-dropdown-menu-item').contains('Edit').click(); - cy.get('.modal-dialog').should('be.visible'); - cy.get('.modal-dialog input[name="name"]').should('not.have.value'); - cy.get('.modal-dialog .btn-default').contains('Cancel').click(); + cy.get('[data-test="more-horiz"]').last().trigger('mouseover'); + cy.get('[data-test="chart-list-edit-option"]').should('be.visible'); + cy.get('[data-test="chart-list-edit-option"]').click(); + cy.get('[data-test="properties-edit-modal"]').should('be.visible'); + cy.get('[data-test="properties-name-input"]').should('not.have.value'); + cy.get('[data-test="properties-modal-cancel-button"]') + .contains('Cancel') + .click(); }); }); diff --git a/superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts b/superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts index 07f24916b6..a70ccaa463 100644 --- a/superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts @@ -30,10 +30,10 @@ describe('chart card view filters', () => { // filter by owners cy.get('.Select__control').first().click(); cy.get('.Select__menu').contains('alpha user').click(); - cy.get('.ant-card').should('not.exist'); + cy.get('[data-test="styled-card"]').should('not.exist'); cy.get('.Select__control').first().click(); cy.get('.Select__menu').contains('gamma user').click(); - cy.get('.ant-card').should('not.exist'); + cy.get('[data-test="styled-card"]').should('not.exist'); }); it('should filter by created by correctly', () => { @@ -43,30 +43,36 @@ describe('chart card view filters', () => { cy.get('.ant-card').should('not.exist'); cy.get('.Select__control').eq(1).click(); cy.get('.Select__menu').contains('gamma user').click(); - cy.get('.ant-card').should('not.exist'); + cy.get('[data-test="styled-card"]').should('not.exist'); }); it('should filter by viz type correctly', () => { // filter by viz type cy.get('.Select__control').eq(2).click(); cy.get('.Select__menu').contains('area').click({ timeout: 5000 }); - cy.get('.ant-card').its('length').should('be.gt', 0); - cy.get('.ant-card').contains("World's Pop Growth").should('exist'); + cy.get('[data-test="styled-card"]').its('length').should('be.gt', 0); + cy.get('[data-test="styled-card"]') + .contains("World's Pop Growth") + .should('be.visible'); cy.get('.Select__control').eq(2).click(); cy.get('.Select__control').eq(2).type('world_map{enter}'); - cy.get('.ant-card').should('have.length', 1); - cy.get('.ant-card').contains('% Rural').should('exist'); + cy.get('[data-test="styled-card"]').should('have.length', 1); + cy.get('[data-test="styled-card"]') + .contains('% Rural') + .should('be.visible'); }); it('should filter by datasource correctly', () => { // filter by datasource cy.get('.Select__control').eq(3).click(); cy.get('.Select__menu').contains('unicode_test').click(); - cy.get('.ant-card').should('have.length', 1); - cy.get('.ant-card').contains('Unicode Cloud').should('exist'); - cy.get('.Select__control').eq(3).click(); - cy.get('.Select__control').eq(3).type('energy_usage{enter}{enter}'); - cy.get('.ant-card').its('length').should('be.gt', 0); + cy.get('[data-test="styled-card"]').should('have.length', 1); + cy.get('[data-test="styled-card"]') + .contains('Unicode Cloud') + .should('be.visible'); + cy.get('.Select__control').eq(2).click(); + cy.get('.Select__control').eq(2).type('energy_usage{enter}{enter}'); + cy.get('[data-test="styled-card"]').its('length').should('be.gt', 0); }); }); @@ -82,42 +88,44 @@ describe('chart list view filters', () => { // filter by owners cy.get('.Select__control').first().click(); cy.get('.Select__menu').contains('alpha user').click(); - cy.get('.table-row').should('not.exist'); + cy.get('[data-test="table-row"]').should('not.exist'); cy.get('.Select__control').first().click(); cy.get('.Select__menu').contains('gamma user').click(); - cy.get('.table-row').should('not.exist'); + cy.get('[data-test="table-row"]').should('not.exist'); }); it('should filter by created by correctly', () => { // filter by created by cy.get('.Select__control').eq(1).click(); cy.get('.Select__menu').contains('alpha user').click(); - cy.get('.table-row').should('not.exist'); + cy.get('[data-test="table-row"]').should('not.exist'); cy.get('.Select__control').eq(1).click(); cy.get('.Select__menu').contains('gamma user').click(); - cy.get('.table-row').should('not.exist'); + cy.get('[data-test="table-row"]').should('not.exist'); }); it('should filter by viz type correctly', () => { // filter by viz type cy.get('.Select__control').eq(2).click(); cy.get('.Select__menu').contains('area').click({ timeout: 5000 }); - cy.get('.table-row').its('length').should('be.gt', 0); - cy.get('.table-row').contains("World's Pop Growth").should('exist'); + cy.get('[data-test="table-row"]').its('length').should('be.gt', 0); + cy.get('[data-test="table-row"]') + .contains("World's Pop Growth") + .should('exist'); cy.get('.Select__control').eq(2).click(); cy.get('.Select__control').eq(2).type('world_map{enter}'); - cy.get('.table-row').should('have.length', 1); - cy.get('.table-row').contains('% Rural').should('exist'); + cy.get('[data-test="table-row"]').should('have.length', 1); + cy.get('[data-test="table-row"]').contains('% Rural').should('exist'); }); it('should filter by datasource correctly', () => { // filter by datasource cy.get('.Select__control').eq(3).click(); cy.get('.Select__menu').contains('unicode_test').click(); - cy.get('.table-row').should('have.length', 1); - cy.get('.table-row').contains('Unicode Cloud').should('exist'); + cy.get('[data-test="table-row"]').should('have.length', 1); + cy.get('[data-test="table-row"]').contains('Unicode Cloud').should('exist'); cy.get('.Select__control').eq(3).click(); cy.get('.Select__control').eq(3).type('energy_usage{enter}{enter}'); - cy.get('.table-row').its('length').should('be.gt', 0); + cy.get('[data-test="table-row"]').its('length').should('be.gt', 0); }); }); diff --git a/superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts b/superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts index 1aedf2a157..1930fa3ab2 100644 --- a/superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts +++ b/superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts @@ -27,24 +27,25 @@ describe('chart list view', () => { }); it('should load rows', () => { - cy.get('.chart-list-view'); - cy.get('table[role="table"]').should('be.visible'); - + cy.get('[data-test="listview-table"]').should('be.visible'); // check chart list view header - cy.get('th[role="columnheader"]:nth-child(2)').contains('Chart'); - cy.get('th[role="columnheader"]:nth-child(3)').contains( - 'Visualization Type', - ); - cy.get('th[role="columnheader"]:nth-child(4)').contains('Dataset'); - cy.get('th[role="columnheader"]:nth-child(5)').contains('Modified By'); - cy.get('th[role="columnheader"]:nth-child(6)').contains('Last Modified'); - cy.get('th[role="columnheader"]:nth-child(7)').contains('Created By'); - cy.get('th[role="columnheader"]:nth-child(8)').contains('Actions'); - cy.get('.table-row').should('have.length', 25); + cy.get('[data-test="sort-header"]').eq(1).contains('Chart'); + cy.get('[data-test="sort-header"]').eq(2).contains('Visualization Type'); + cy.get('[data-test="sort-header"]').eq(3).contains('Dataset'); + cy.get('[data-test="sort-header"]').eq(4).contains('Modified By'); + cy.get('[data-test="sort-header"]').eq(5).contains('Last Modified'); + cy.get('[data-test="sort-header"]').eq(6).contains('Created By'); + cy.get('[data-test="sort-header"]').eq(7).contains('Actions'); + cy.get('[data-test="table-row"]').should('have.length', 25); }); it('should sort correctly', () => { - cy.get('th[role="columnheader"]:nth-child(2)').click(); - cy.get('.table-row td:nth-child(2):eq(0)').contains('% Rural'); + cy.get('[data-test="sort-header"]').eq(2).click(); + cy.get('[data-test="sort-header"]').eq(2).click(); + cy.get('[data-test="table-row"]') + .first() + .find('[data-test="table-row-cell"]') + .find('[data-test="cell-text"]') + .contains('% Rural'); }); }); diff --git a/superset-frontend/src/components/dataViewCommon/TableCollection.tsx b/superset-frontend/src/components/dataViewCommon/TableCollection.tsx index c0a857c053..3ec1525c3a 100644 --- a/superset-frontend/src/components/dataViewCommon/TableCollection.tsx +++ b/superset-frontend/src/components/dataViewCommon/TableCollection.tsx @@ -291,7 +291,7 @@ export default function TableCollection({ const columnCellProps = cell.column.cellProps || {}; return (