chore: selectors refactor in SQLLab test suite (Cypress) (#10944)

* changed selectors for not skipped tests in sqllab suite * linter fixes * linter fixes
apache · Sep 21, 2020 · dc893fe · dc893fe
1 parent a8f5029
commit dc893fe
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 20 deletions.
diff --git 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('.SqlEditorTabs .ddbtn-tab svg').first().click();
+        // first item is close
+        cy.get('[data-test="close-tab-menu-option"]').click();
 
-      cy.get('.SqlEditorTabs > ul > li').should(
-        'have.length',
-        initialTabCount - 1,
-      );
-    });
+        cy.get('[data-test="sql-editor-tabs"]').should(
+          'have.length',
+          initialTabCount - 1,
+        );
+      });
   });
 });
diff --git 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 && (
             <DropdownButton
+              data-test="dropdown-toggle-button"
               bsSize="small"
               id={`ddbtn-tab-${i}`}
               title={' '}
@@ -321,6 +322,7 @@ class TabbedSqlEditors extends React.PureComponent {
                 className="close-btn"
                 eventKey="1"
                 onClick={() => this.removeQueryEditor(qe)}
+                data-test="close-tab-menu-option"
               >
                 <div className="icon-container">
                   <i className="fa fa-close" />
@@ -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}
         <Tab
           title={
             <div>
-              <i className="fa fa-plus-circle" />
+              <i data-test="add-tab-icon" className="fa fa-plus-circle" />
               &nbsp;
             </div>
           }