diff --git a/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js b/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js index 49629f443a..b598cb8d8f 100644 --- a/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js +++ b/superset-frontend/cypress-base/cypress/integration/sqllab/tabs.test.js @@ -24,33 +24,39 @@ describe('SqlLab query tabs', () => { }); it('allows you to create a tab', () => { - cy.get('.SqlEditorTabs > ul > li').then(tabList => { + cy.get('[data-test="sql-editor-tabs"]').then(tabList => { const initialTabCount = tabList.length; // add tab - cy.get('.SqlEditorTabs > ul > li').last().click(); + cy.get('[data-test="add-tab-icon"]').click(); // wait until we find the new tab - cy.get(`.SqlEditorTabs > ul > li:eq(${initialTabCount - 1})`).contains( - 'Untitled Query', - ); + cy.get('[data-test="sql-editor-tabs"]') + .children() + .eq(initialTabCount - 1) + .contains(`Untitled Query ${initialTabCount + 1}`); + cy.get('[data-test="sql-editor-tabs"]') + .children() + .eq(initialTabCount) + .contains(`Untitled Query ${initialTabCount + 2}`); }); }); - it('allows you to close a tab', () => { - cy.get('.SqlEditorTabs > ul > li').then(tabListA => { - const initialTabCount = tabListA.length; + cy.get('[data-test="sql-editor-tabs"]') + .children() + .then(tabListA => { + const initialTabCount = tabListA.length; - // open the tab dropdown to remove - cy.get('.SqlEditorTabs > ul > li .dropdown-toggle').click({ - force: true, + // open the tab dropdown to remove + cy.get('[data-test="dropdown-toggle-button"]').click({ + force: true, + }); + + // first item is close + cy.get('[data-test="close-tab-menu-option"]').click(); + + cy.get('[data-test="sql-editor-tabs"]').should( + 'have.length', + initialTabCount - 1, + ); }); - - // first item is close - cy.get('.SqlEditorTabs .ddbtn-tab svg').first().click(); - - cy.get('.SqlEditorTabs > ul > li').should( - 'have.length', - initialTabCount - 1, - ); - }); }); }); diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx index 4d1ff64104..3316e76dcf 100644 --- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx +++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx @@ -312,6 +312,7 @@ class TabbedSqlEditors extends React.PureComponent { <> {isSelected && ( this.removeQueryEditor(qe)} + data-test="close-tab-menu-option" >
@@ -396,12 +398,13 @@ class TabbedSqlEditors extends React.PureComponent { onSelect={this.handleSelect.bind(this)} id="a11y-query-editor-tabs" className="SqlEditorTabs" + data-test="sql-editor-tabs" > {editors} - +  
}