Add E2E test for Statement (#1196)

* test: add use database filter and search function * test: add select columns test * fix: missing fields in slowquery * fix: lower case field names in tests * update * update tiup reboot * test: slow query available fields * test: move available fields tests to compatibility test * chore: remove test log * update slowquery * update slow query e2e test * update export slow query csv * add missing regex * update slow query table order * update apiURL * fix time-range selector * update comment * slow query detail * update slow query detail page e2e * update slow query detail page * add statement e2e test * update yarn.lock * update statement list * update statement list * update statement * update statement list * update statement list * update statement list * update statement * update statement list * update statement list * update statement * test statement * test statement * update statement * update statement * resolve comments * fix typo * update statement config * update statement default max size value * remove useless e2e data value Co-authored-by: Suhaha <[email protected]>
pingcap · Mar 22, 2022 · e74efa7 · e74efa7
1 parent ed6c9e2
commit e74efa7
Show file tree

Hide file tree

Showing 24 changed files with 1,308 additions and 54 deletions.
diff --git a/Makefile b/Makefile
@@ -81,6 +81,6 @@ test_e2e_compat_features:
 
 test_e2e_common_features:
 	cd ui &&\
-	yarn run:e2e-test:common-features TIDB_VERSION=$(TIDB_VERSION)
+	yarn run:e2e-test:common-features --env TIDB_VERSION=$(TIDB_VERSION)
 
 test_e2e: test_e2e_compat_features test_e2e_common_features
diff --git a/ui/cypress/fixtures/uri.json b/ui/cypress/fixtures/uri.json
@@ -2,5 +2,7 @@
   "root": "/",
   "login": "/signin",
   "overview": "/overview",
-  "slow_query": "/slow_query"
+  "slow_query": "/slow_query",
+  "statement": "/statement",
+  "configuration": "/configuration"
 }
diff --git a/ui/cypress/integration/components.js b/ui/cypress/integration/components.js
@@ -0,0 +1,29 @@
+// Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
+
+export const testBaseSelectorOptions = (optionsList, dataE2EValue) => {
+  cy.get(`[data-e2e=${dataE2EValue}]`)
+    .click()
+    .then(() => {
+      cy.get('[data-e2e=multi_select_options]')
+        .should('have.length', optionsList.length)
+        .each(($option, $idx) => {
+          cy.wrap($option).should('have.text', optionsList[$idx])
+        })
+    })
+}
+
+export const checkAllOptionsInBaseSelector = (dataE2EValue) => {
+  cy.get(`[data-e2e=${dataE2EValue}]`)
+    .click()
+    .then(() => {
+      if (cy.get('.ant-dropdown').should('exist')) {
+        cy.get('.ant-dropdown').within(() => {
+          cy.get('[role=columnheader]')
+            .eq(0)
+            .within(() => {
+              cy.get('.ant-checkbox').click()
+            })
+        })
+      }
+    })
+}
diff --git a/ui/cypress/integration/slow_query/01-list.spec.js b/ui/cypress/integration/slow_query/01-list.spec.js
@@ -1,7 +1,12 @@
 // Copyright 2022 PingCAP, Inc. Licensed under Apache-2.0.
 
 import dayjs from 'dayjs'
-import { validateCSVList, deleteDownloadsFolder } from '../utils'
+import {
+  restartTiUP,
+  validateSlowQueryCSVList,
+  deleteDownloadsFolder,
+} from '../utils'
+import { testBaseSelectorOptions } from '../components'
 
 const neatCSV = require('neat-csv')
 const path = require('path')
@@ -13,13 +18,7 @@ describe('SlowQuery list page', () => {
     })
 
     // Restart tiup
-    cy.exec(
-      `bash ../scripts/start_tiup.sh ${Cypress.env('TIDB_VERSION')} restart`,
-      { log: true }
-    )
-
-    // Wait TiUP Playground
-    cy.exec('bash ../scripts/wait_tiup_playground.sh 1 300 &> wait_tiup.log')
+    restartTiUP()
 
     deleteDownloadsFolder()
   })
@@ -206,7 +205,10 @@ describe('SlowQuery list page', () => {
 
     describe('Filter slow query by changing database', () => {
       it('No database selected by default', () => {
-        cy.get('[data-e2e=base_select_input]').should('has.text', '')
+        cy.get('[data-e2e=base_select_input_text]').should(
+          'has.text',
+          'All Databases'
+        )
       })
 
       it('Show all databases', () => {
@@ -216,14 +218,7 @@ describe('SlowQuery list page', () => {
 
         cy.wait('@databases').then((res) => {
           const databaseList = res.response.body
-          cy.get('[data-e2e=base_selector]')
-            .click()
-            .then(() => {
-              cy.get('[data-e2e=multi_select_options]').should(
-                'have.length',
-                databaseList.length
-              )
-            })
+          testBaseSelectorOptions(databaseList, 'execution_database_name')
         })
       })
 
@@ -239,11 +234,11 @@ describe('SlowQuery list page', () => {
         // global and use database queries will be listed
         cy.get('[data-automation-key=query]').should('has.length', 3)
 
-        cy.get('[data-e2e=base_select_input]')
-          .click()
+        cy.get('[data-e2e=base_select_input_text]')
+          .click({ force: true })
           .then(() => {
             cy.get('.ms-DetailsHeader-checkTooltip')
-              .click()
+              .click({ force: true })
               .then(() => {
                 // global query will not be listed
                 cy.get('[data-automation-key=query]').should('has.length', 2)
@@ -308,7 +303,8 @@ describe('SlowQuery list page', () => {
               .eq(1)
               .click()
               .then(() => {
-                cy.get('[data-automation-key=query]').should('has.length', 3)
+                cy.reload()
+                cy.get('[data-e2e=slow_query_limit_select]').contains('200')
               })
           })
       })
@@ -331,7 +327,7 @@ describe('SlowQuery list page', () => {
           })
       })
 
-      it('Hover on columns selector and check selected fileds ', () => {
+      it('Hover on columns selector and check selected fields ', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
@@ -352,11 +348,11 @@ describe('SlowQuery list page', () => {
           })
       })
 
-      it('Select all column fileds', () => {
+      it('Select all column fields', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
-            cy.get('[data-e2e=slow_query_schema_table_column_tile]')
+            cy.get('[data-e2e=column_selector_title]')
               .check()
               .then(() => {
                 cy.get('[role=columnheader]')
@@ -370,7 +366,7 @@ describe('SlowQuery list page', () => {
         cy.get('[data-e2e=columns_selector_popover]')
           .trigger('mouseover')
           .then(() => {
-            cy.get('[data-e2e=slow_query_schema_table_column_reset]')
+            cy.get('[data-e2e=column_selector_reset]')
               .click()
               .then(() => {
                 cy.get('[role=columnheader]')
@@ -422,7 +418,7 @@ describe('SlowQuery list page', () => {
               .then(() => {
                 cy.get('[data-automation-key=query]')
                   .eq(0)
-                  .find('[data-e2e=text_wrap_multiline]')
+                  .find('[data-e2e=syntax_highlighter_original]')
               })
 
             cy.get('[data-e2e=slow_query_show_full_sql]')
@@ -431,7 +427,7 @@ describe('SlowQuery list page', () => {
                 cy.get('[data-automation-key=query]')
                   .eq(0)
                   .trigger('mouseover')
-                  .find('[data-e2e=text_wrap_singleline_with_tooltip]')
+                  .find('[data-e2e=syntax_highlighter_compact]')
               })
           })
       })
@@ -581,7 +577,7 @@ describe('SlowQuery list page', () => {
             cy.readFile(downloadedFilename, { timeout: 15000 })
               // parse CSV text into objects
               .then(neatCSV)
-              .then(validateCSVList)
+              .then(validateSlowQueryCSVList)
           })
         })
     })

diff --git a/ui/cypress/integration/slow_query/02-detail.spec.js b/ui/cypress/integration/slow_query/02-detail.spec.js
@@ -20,7 +20,7 @@ describe('Slow query detail page E2E test', () => {
     it('Check sql and default format', () => {
       // sql is collapsed by default
       cy.get('[data-e2e=expandText]').eq(0).should('have.text', 'Expand')
-      cy.get('[data-e2e=slow_query_detail_page_query]')
+      cy.get('[data-e2e=statement_query_detail_page_query]')
         .eq(0)
         .find('[data-e2e=syntax_highlighter_compact]')
         .and('have.text', 'SELECT sleep(1.2);')
@@ -32,7 +32,7 @@ describe('Slow query detail page E2E test', () => {
 
       // sql is collapsed by default
       cy.get('[data-e2e=collapseText]').eq(0).should('have.text', 'Collapse')
-      cy.get('[data-e2e=slow_query_detail_page_query]')
+      cy.get('[data-e2e=statement_query_detail_page_query]')
         .eq(0)
         .find('[data-e2e=syntax_highlighter_original]')
         .and('have.text', 'SELECT\n  sleep(1.2);')
@@ -79,7 +79,7 @@ describe('Slow query detail page E2E test', () => {
 
       cy.wait('@slow_query_detail').then((res) => {
         const responseBody = res.response.body
-        cy.get('[data-e2e=slow_query_detail_page_query]')
+        cy.get('[data-e2e=statement_query_detail_page_query]')
           .eq(1)
           .and('have.text', responseBody.plan)
       })