Fix Dev UI Cypress E2E tests (#6967)

* Start the API Server from the UI component itself

* Store Cypress screenshots and videos as test artifacts upon test failures

This should make it easier to understand and investigate.

* Increase timeout to find element via getByDataCy

The default timeout used to cause certain flakiness at times.

* Install Terminal Report Plugin [1] to log useful information about Cypress runs

It outputs actions, intercepted requests, console messages and errors directly to stdout in a convenient format.

[1] https://github.com/archfz/cypress-terminal-report

* Revert "Increase timeout to find element via getByDataCy"

This reverts commit 410b5c6c3f.

* Intercept network calls when clearing or saving DevState and wait until we get successful responses

In some cases, clicking too quickly led to inconsistent behavior, where for example the Containers tab would not be up-to-date yet

* Disable Angular telemetry when running 'ng serve'
This commit is contained in:
Armel Soro
2023-07-15 11:56:29 +02:00
committed by GitHub
parent bc168518d1
commit c0af267fd5
7 changed files with 188 additions and 3 deletions

View File

@@ -102,5 +102,8 @@
}
}
}
},
"cli": {
"analytics": false
}
}

View File

@@ -3,7 +3,7 @@ import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
require('cypress-terminal-report/src/installLogsPrinter')(on);
},
},
viewportWidth: 1080,

View File

@@ -45,12 +45,19 @@ Cypress.Commands.add('selectTab', (n: number) => {
});
Cypress.Commands.add('setDevfile', (devfile: string) => {
cy.intercept('GET', '/api/v1/devstate/chart').as('getDevStateChart');
cy.intercept('PUT', '/api/v1/devstate/devfile').as('applyDevState');
cy.get('[data-cy="yaml-input"]').type(devfile);
cy.get('[data-cy="yaml-save"]').click();
cy.wait(['@applyDevState', '@getDevStateChart']);
});
Cypress.Commands.add('clearDevfile', () => {
cy.intercept('GET', '/api/v1/devstate/chart').as('getDevStateChart');
cy.intercept('DELETE', '/api/v1/devstate/devfile').as('clearDevState');
cy.intercept('PUT', '/api/v1/devstate/devfile').as('applyDevState');
cy.get('[data-cy="yaml-clear"]', { timeout: 60000 }).click();
cy.wait(['@clearDevState', '@applyDevState', '@getDevStateChart']);
});
declare namespace Cypress {

View File

@@ -13,6 +13,10 @@
// https://on.cypress.io/configuration
// ***********************************************************
// Cypress terminal report is an open source Cypress plugin that outputs actions,
// intercepted requests, console messages and errors directly to stdout in a convenient format.
require('cypress-terminal-report/src/installLogsCollector')();
// Import commands.js using ES2015 syntax:
import './commands'

137
ui/package-lock.json generated
View File

@@ -32,6 +32,7 @@
"@types/jasmine": "~4.3.0",
"angular-cli-ghpages": "^1.0.5",
"cypress": "^12.11.0",
"cypress-terminal-report": "^5.3.2",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
@@ -6272,6 +6273,127 @@
"node": "^14.0.0 || ^16.0.0 || >=18.0.0"
}
},
"node_modules/cypress-terminal-report": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/cypress-terminal-report/-/cypress-terminal-report-5.3.2.tgz",
"integrity": "sha512-0Gf/pXjrYpTkf2aR3LAFGoxEM0KulWsMKCu+52YJB6l7GEP2RLAOAr32tcZHZiL2EWnS0vE4ollomMzGvCci0w==",
"dev": true,
"dependencies": {
"chalk": "^4.0.0",
"fs-extra": "^10.1.0",
"safe-json-stringify": "^1.2.0",
"semver": "^7.3.5",
"tv4": "^1.3.0"
},
"peerDependencies": {
"cypress": ">=10.0.0"
}
},
"node_modules/cypress-terminal-report/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/cypress-terminal-report/node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/cypress-terminal-report/node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/cypress-terminal-report/node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"node_modules/cypress-terminal-report/node_modules/fs-extra": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
"integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
"dev": true,
"dependencies": {
"graceful-fs": "^4.2.0",
"jsonfile": "^6.0.1",
"universalify": "^2.0.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/cypress-terminal-report/node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/cypress-terminal-report/node_modules/jsonfile": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
"dev": true,
"dependencies": {
"universalify": "^2.0.0"
},
"optionalDependencies": {
"graceful-fs": "^4.1.6"
}
},
"node_modules/cypress-terminal-report/node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/cypress-terminal-report/node_modules/universalify": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
"integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
"dev": true,
"engines": {
"node": ">= 10.0.0"
}
},
"node_modules/cypress/node_modules/@types/node": {
"version": "14.18.43",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.43.tgz",
@@ -12481,6 +12603,12 @@
}
]
},
"node_modules/safe-json-stringify": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/safe-json-stringify/-/safe-json-stringify-1.2.0.tgz",
"integrity": "sha512-gH8eh2nZudPQO6TytOvbxnuhYBOvDBBLW52tz5q6X58lJcd/tkmqFR+5Z9adS8aJtURSXWThWy/xJtJwixErvg==",
"dev": true
},
"node_modules/safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -13787,6 +13915,15 @@
"node": "*"
}
},
"node_modules/tv4": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/tv4/-/tv4-1.3.0.tgz",
"integrity": "sha512-afizzfpJgvPr+eDkREK4MxJ/+r8nEEHcmitwgnPUqpaP+FpwQyadnxNoSACbgc/b1LsZYtODGoPiFxQrgJgjvw==",
"dev": true,
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/tweetnacl": {
"version": "0.14.5",
"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",

View File

@@ -37,6 +37,7 @@
"@types/jasmine": "~4.3.0",
"angular-cli-ghpages": "^1.0.5",
"cypress": "^12.11.0",
"cypress-terminal-report": "^5.3.2",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",