migrate cypress

.gitignore

@@ -55,3 +55,6 @@ fabric.properties
 
 # Android studio 3.1+ serialized cache file
 .idea/caches/build_file_checksums.ser
+
+# ui
+.pnpm-debug.log

scripts/start_tiup.sh

@@ -4,6 +4,7 @@ tidb_version=$1
 without_ngm=${2:-false}
 mode=${3:-"start"}
 
+# TIUP_BIN_DIR=$TIUP_HOME/bin/tiup
 TIUP_BIN_DIR=$HOME/.tiup/bin/tiup
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
 

ui-new/.gitignore

@@ -3,4 +3,13 @@ dist
 build
 
 .eslintcache
-.pnpm-debug.log
+
+# testing
+coverage
+cypress/downloads
+cypress/videos
+cypress/screeshots
+cypress/integration/1-getting-started
+cypress/integration/2-advanced-examples
+.nyc_output
+*.log

ui-new/package.json

@@ -10,7 +10,7 @@
     "prepare": "cd .. && husky install ui-new/.husky",
     "build:lib": "pnpm -r --filter @pingcap/tidb-dashboard-lib build",
     "dev": "pnpm build:lib && pnpm -r --parallel dev",
-    "dev:no_watch_api": "WATCH_API=0 pnpm dev",
+    "dev:watch_api": "WATCH_API=1 pnpm dev",
     "build": "pnpm -r build"
   },
   "devDependencies": {

ui-new/packages/tidb-dashboard-client/gulpfile.esm.js

@@ -20,10 +20,11 @@ task('tsc:build', shell.task('tsc'))
 
 ///////////////////////////
 
-if (process.env.WATCH_API === '0') {
-  task('dev', series('tsc:build'))
-} else {
+if (process.env.WATCH_API === '1') {
   task('dev', series('swagger:gen', parallel('swagger:watch', 'tsc:watch')))
+} else {
+  // WATCH_API = 0
+  task('dev', series('swagger:gen', 'tsc:build'))
 }
 
 task('build', series('swagger:gen', 'tsc:build'))

ui-new/packages/tidb-dashboard-for-op/builder.js

@@ -11,10 +11,10 @@ const { build } = require('esbuild')
 const postCssPlugin = require('@baurine/esbuild-plugin-postcss3')
 const autoprefixer = require('autoprefixer')
 const { yamlPlugin } = require('esbuild-plugin-yaml')
-// const babelPlugin = require('@baurine/esbuild-plugin-babel')
+const babelPlugin = require('@baurine/esbuild-plugin-babel')
 
 const isDev = process.env.NODE_ENV !== 'production'
-// const isE2E = process.env.E2E_TEST === 'true'
+const isE2E = process.env.E2E_TEST === 'true'
 
 // load env
 const envFile = isDev ? './.env.development' : './.env.production'
@@ -149,18 +149,18 @@ const esbuildParams = {
   define: genDefine(),
   inject: ['./process-shim.js'] // fix runtime crash
 }
-// if (isE2E) {
-//   // use babel and istanbul to report test coverage for e2e test
-//   esbuildParams.plugins.push(
-//     babelPlugin({
-//       filter: /\.tsx?/,
-//       config: {
-//         presets: ['@babel/preset-react', '@babel/preset-typescript'],
-//         plugins: ['istanbul'],
-//       },
-//     })
-//   )
-// }
+if (isE2E) {
+  // use babel and istanbul to report test coverage for e2e test
+  esbuildParams.plugins.push(
+    babelPlugin({
+      filter: /\.tsx?/,
+      config: {
+        presets: ['@babel/preset-react', '@babel/preset-typescript'],
+        plugins: ['istanbul'],
+      },
+    })
+  )
+}
 
 function buildHtml(inputFilename, outputFilename) {
   let result = fs.readFileSync(inputFilename).toString()

ui-new/packages/tidb-dashboard-for-op/cypress.json

@@ -0,0 +1,14 @@
+{
+  "defaultCommandTimeout": 10000,
+  "responseTimeout": 60000,
+  "requestTimeout": 60000,
+  "screenshotOnRunFailure": true,
+  "video": true,
+  "env": {
+    "FEATURE_VERSION": "6.0.0",
+    "TIDB_VERSION": "latest",
+    "ALLOW_SCREENSHOT": false
+  },
+  "experimentalSessionSupport": true,
+  "ignoreTestFiles": ["**/__snapshots__/*", "**/__image_snapshots__/*"]
+}

ui-new/packages/tidb-dashboard-for-op/cypress/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:cypress/recommended"]
+}

ui-new/packages/tidb-dashboard-for-op/cypress/README.md

@@ -0,0 +1,66 @@
+# E2E Test
+
+Since there are some features is different from version to version, we have `make e2e_compat_features_test` and `make e2e_common_features_test` to test features compatibility in different versions and common features in all versions, respectively.
+
+## Install Cypress
+
+The Cypress has been added to package.json, so just run `pnpm i` to install it. We use [email protected] here since the version>8.5.0 has an unstable server connection error, the related issue can be referred [here](https://github.com/cypress-io/cypress/issues/18464).
+
+## Run Test
+
+**Prerequisite**: TiDB Dashboard server has to be started before run cypress test.
+
+### Open Test Runner to Run Test Locally
+
+#### Test E2E with FEATURE_VERSION >= 5.3.0
+
+```shell
+# start frontend server
+cd ui-new && pnpm dev
+# start backend server
+make dev && make run
+# open cypress test runner
+cd ui-new && pnpm open:cypress
+```
+
+#### Test E2E with FEATURE_VERSION < 5.3.0
+
+```shell
+# start frontend server
+cd ui-new && pnpm dev
+# start backend server
+make dev && make run FEATURE_VERSION=5.0.0
+# open cypress test runner
+cd ui-new && pnpm open:cypress --env FEATURE_VERSION=5.0.0
+```
+
+Run test by choosing test file under `/integration` on cypress test runner, cypress will open a broswer to run e2e test.
+
+### Run on CI
+
+```shell
+# start frontend server
+make ui
+# start backend server
+UI=1 make && make run FEATURE_VERSION=${FEATURE_VERSION}
+# run e2e_compat_features and e2e_common_features tests
+make e2e_test FEATURE_VERSION=${FEATURE_VERSION}
+```
+
+### Upload Visual Test Snapshots
+
+> TODO: Use the official cypress docker image to make sure visual test stable between operating systems.
+
+Since there was no cypress image of m1 before. So we use github actions to generate the snapshots that we need for visual tests.
+
+#### How to generate snapshots in GitHub Actions
+
+1. Go to [tidb-dashboard Actions - Upload E2E Snapshots](https://github.com/pingcap/tidb-dashboard/actions/workflows/upload-e2e-snapshots.yaml)
+
+2. Click "Run workflow"
+
+3. Enter which git SHA you want the test to run on
+
+4. Specify the test specs to generate the snapshots, base path is `${PROJECT_DIR}/ui/cypress/integration`
+
+5. Enter the action after all jobs finished, download the e2e-snapshots artifact below.

ui-new/packages/tidb-dashboard-for-op/cypress/fixtures/topsql_instance:end=1641934800&start=1641916800.json

@@ -0,0 +1,7 @@
+{
+  "data": [
+    { "instance": "127.0.0.1:10080", "instance_type": "tidb" },
+    { "instance": "127.0.0.1:20160", "instance_type": "tikv" }
+  ],
+  "status": "ok"
+}