Fix e2e (#7664)

shu-mutou · web-flow · commit d650d3823334 · 2023-03-28T00:02:21.000-07:00
* Fix e2e

At first, bump cypress from 9.7.0 to 10.0.0

* Enable e2e test on workflow

* Bump cypress to 10.1.0

* Bump cypress to 10.2.0

* Bump cypress to 10.8.0

* Bump cypress to 10.11.0

* Bump cypress/webpack-preprocessor to 5.14.0

* Bump cypress/webpack-preprocessor to 5.15.7

* Bump cypress to 11.2.0

* Bump cypress to 12.8.1 and cypress/webpack-preprocessor 5.17.0

* Bump babel staffs to latest

* Bump webpack-bundle-analyzer and webpack-dev-server to latest

* Fix typo

* Switch build target from ES2022 to ES2021

Because cypress does not seem to support ES2022.

* [DNM] Check `make serve`

* Change localhost to 127.0.0.1 in proxy.conf.json and proxy-https.conf.json

* Revert Check `make serve`

* Change `localhost` to `127.0.0.1` settings for cypress in package.json

* Set interval for wait-on to 5sec

* Set 127.0.0.1 instead of localhost for cypress in package.json. Again.

* Set testIsolation to false

* Increase interval for `wait-on` to 10sec.

Because it still outputs about 200 lines of useless log during starting up dashboard.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -73,7 +73,6 @@ jobs:
           fail-on-severity: critical
   e2e:
     name: End-to-end tests
-    if: ${{ false }}
     runs-on: ubuntu-latest
     env:
       NG_CLI_ANALYTICS: ci
diff --git a/modules/web/.gitignore b/modules/web/.gitignore
@@ -34,3 +34,7 @@ dist/
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# Cypress
+
+cypress/screenshots
diff --git a/modules/web/cypress.config.cjs b/modules/web/cypress.config.cjs
@@ -0,0 +1,30 @@
+// Copyright 2017 The Kubernetes Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  "e2e": {
+    "baseUrl": "http://localhost:8080",
+    "supportFile": "./cypress/support/index.ts",
+    "video": false,
+    "chromeWebSecurity": false,
+    "screenshotOnRunFailure": true,
+    "videoCompression": false,
+    "pageLoadTimeout": 10000,
+    "viewportHeight": 1080,
+    "viewportWidth": 1920,
+    "testIsolation": false,
+  },
+});
diff --git a/modules/web/cypress.json b/modules/web/cypress.json
diff --git a/modules/web/cypress/e2e/nav.cy.ts b/modules/web/cypress/e2e/nav.cy.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  *
  */
-import {NavbarPage} from '../../pages/navbarPage';
+import {NavbarPage} from '../pages/navbarPage';
 
 describe('Navbar', () => {
   before(() => {
diff --git a/modules/web/cypress/e2e/userpanel.cy.ts b/modules/web/cypress/e2e/userpanel.cy.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  *
  */
-import {UserpanelPage} from '../../pages/userpanelPage';
+import {UserpanelPage} from '../pages/userpanelPage';
 
 describe('Userpanel', () => {
   before(() => {
diff --git a/modules/web/cypress/support/index.ts b/modules/web/cypress/support/index.ts
@@ -17,3 +17,7 @@
 before(() => {
   cy.clearCookies();
 });
+
+afterEach(() => {
+  cy.screenshot();
+});
diff --git a/modules/web/package.json b/modules/web/package.json
@@ -30,9 +30,9 @@
     "check:ts": "gts lint",
     "test": "npx jest -c jest.config.js",
     "coverage": "npx jest -c jest.config.js --coverage",
-    "cypress": "wait-on -v http-get://localhost:9000/api/v1/node http://localhost:8000/config http://localhost:8080 && npx cypress run",
+    "cypress": "wait-on -v -i 10000 http-get://127.0.0.1:9000/api/v1/node http://127.0.0.1:8000/config http://127.0.0.1:8080 && npx cypress run",
     "e2e": "concurrently -kill-others --success first \"yarn start\" \"yarn cypress\"",
-    "e2e:headed": "concurrently -kill-others --success first \"yarn start:e2e\" \"wait-on http://localhost:8080 && npx cypress run --headed\"",
+    "e2e:headed": "concurrently -kill-others --success first \"yarn start:e2e\" \"wait-on -i 10000 http://127.0.0.1:8080 && npx cypress run --headed\"",
     "analyze": "ng build --stats-json && webpack-bundle-analyzer dist/stats.json"
   },
   "lint-staged": {
@@ -88,10 +88,10 @@
     "@angular/cli": "15.1.5",
     "@angular/compiler-cli": "15.1.4",
     "@angular/language-service": "15.1.4",
-    "@babel/core": "7.19.1",
-    "@babel/preset-env": "7.19.1",
-    "@babel/register": "7.18.9",
-    "@cypress/webpack-preprocessor": "5.12.2",
+    "@babel/core": "7.21.3",
+    "@babel/preset-env": "7.20.2",
+    "@babel/register": "7.21.0",
+    "@cypress/webpack-preprocessor": "5.17.0",
     "@types/d3": "7.4.0",
     "@types/d3-scale": "4.0.2",
     "@types/file-saver": "2.0.5",
@@ -105,7 +105,7 @@
     "@typescript-eslint/parser": "5.38.0",
     "codelyzer": "6.0.2",
     "concurrently": "7.6.0",
-    "cypress": "9.7.0",
+    "cypress": "12.8.1",
     "cypress-fail-fast": "5.0.1",
     "del": "6.1.1",
     "eslint": "8.33.0",
@@ -145,8 +145,8 @@
     "ts-node": "10.9.1",
     "typescript": "4.9.5",
     "wait-on": "6.0.1",
-    "webpack-bundle-analyzer": "4.7.0",
-    "webpack-dev-server": "4.11.1"
+    "webpack-bundle-analyzer": "4.8.0",
+    "webpack-dev-server": "4.13.1"
   },
   "overrides": {
     "colors": "1.4.0"
diff --git a/modules/web/proxy-https.conf.json b/modules/web/proxy-https.conf.json
@@ -1,18 +1,18 @@
 {
   "/api": {
-    "target": "https://localhost:9001",
+    "target": "https://127.0.0.1:9001",
     "secure": false,
     "ws": true,
     "changeOrigin": true
   },
   "/config": {
-    "target": "https://localhost:8001",
+    "target": "https://127.0.0.1:8001",
     "secure": false,
     "ws": true,
     "changeOrigin": true
   },
   "/systembanner": {
-    "target": "https://localhost:8001",
+    "target": "https://127.0.0.1:8001",
     "secure": false,
     "ws": true,
     "changeOrigin": true
diff --git a/modules/web/proxy.conf.json b/modules/web/proxy.conf.json
@@ -1,14 +1,14 @@
 {
   "/api": {
-    "target": "http://localhost:9000",
+    "target": "http://127.0.0.1:9000",
     "secure": false
   },
   "/config": {
-    "target": "http://localhost:8000",
+    "target": "http://127.0.0.1:8000",
     "secure": false
   },
   "/systembanner": {
-    "target": "http://localhost:8000",
+    "target": "http://127.0.0.1:8000",
     "secure": false
   }
 }
diff --git a/modules/web/tsconfig.json b/modules/web/tsconfig.json
@@ -17,8 +17,8 @@
       ]
     },
     "outDir": ".tmp/out-tsc",
-    "moduleResolution": "Node",
-    "target": "ES2022",
+    "moduleResolution": "node",
+    "target": "ES2021",
     "module": "ES2020",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
diff --git a/modules/web/yarn.lock b/modules/web/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`* limitations under the License.`
`15`	`15`	`*`
`16`	`16`	`*/`
`17`		`-import {NavbarPage} from '../../pages/navbarPage';`
	`17`	`+import {NavbarPage} from '../pages/navbarPage';`
`18`	`18`
`19`	`19`	`describe('Navbar', () => {`
`20`	`20`	`before(() => {`
Original file line number	Diff line number	Diff line change
`@@ -1,14 +1,14 @@`
`1`	`1`	`{`
`2`	`2`	`"/api": {`
`3`		`- "target": "http://localhost:9000",`
	`3`	`+ "target": "http://127.0.0.1:9000",`
`4`	`4`	`"secure": false`
`5`	`5`	`},`
`6`	`6`	`"/config": {`
`7`		`- "target": "http://localhost:8000",`
	`7`	`+ "target": "http://127.0.0.1:8000",`
`8`	`8`	`"secure": false`
`9`	`9`	`},`
`10`	`10`	`"/systembanner": {`
`11`		`- "target": "http://localhost:8000",`
	`11`	`+ "target": "http://127.0.0.1:8000",`
`12`	`12`	`"secure": false`
`13`	`13`	`}`
`14`	`14`	`}`