ci: generate random app name in Cypress test (grafana#463)

* chore: remove uuid4 and generate random app name in tests manually

* chore: update cypress to 8.6.0

* chore: add failure threshold of 5% for cypress snapshot

* chore: update cypress

* chore: add an explanation on how to update cypress

.github/workflows/cypress-tests.yml

@@ -9,7 +9,7 @@ on:
 jobs:
   cypress-tests:
     runs-on: ubuntu-latest
-    container: cypress/included:8.4.1
+    container: cypress/included:8.6.0
     steps:
       - name: Checkout
         uses: actions/checkout@v2

cypress/README.md

@@ -57,3 +57,14 @@ Feel free to add any tips as you learn about them.
 ## References
 https://www.thisdot.co/blog/how-to-set-up-screenshot-comparison-testing-with-cypress-inside-an-nx
 https://www.youtube.com/watch?v=1XQbGtRITys&list=PLP9o9QNnQuAYhotnIDEUQNXuvXL7ZmlyZ&index=14
+
+# Updating cypress
+There are 3 places to update:
+
+- `package.json`
+- `scripts/cypress-screenshots.sh`
+- `.github/workflows/cypress-tests.yml`
+
+They should be ALL in sync, otherwise you gonna have weird failures, specially with snapshot tests.
+
+Don't forget to regenerate the snapshots (`yarn cy:ss`).

cypress/integration/e2e.ts

@@ -1,8 +1,18 @@
 // Following tests should have NO mocking involved.
 // The objective involve validating server/webapp interaction is working correctly
-import { v4 as uuidv4 } from 'uuid';
+
 import * as moment from 'moment';
 
+function randomName() {
+  const letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  const num = 5;
+
+  return Array(num)
+    .fill(0)
+    .map(() => letters.substr(Math.floor(Math.random() * num + 1), 1))
+    .join('');
+}
+
 describe('E2E Tests', () => {
   // TODO:
   // instead of generating a new application
@@ -16,7 +26,7 @@ describe('E2E Tests', () => {
   const t4 = moment().startOf('day').add(10, 'minutes').unix();
 
   before(() => {
-    appName = uuidv4();
+    appName = randomName();
 
     // populate the db with 2 items
     //

cypress/support/commands.js

@@ -28,6 +28,7 @@ import '@testing-library/cypress/add-commands';
 import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 
 addMatchImageSnapshotCommand({
+  failureThreshold: 0.05,
   capture: 'viewport',
 });
 

cypress/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["es5", "dom"],
+    "target": "es2015",
+    "lib": ["es2015", "dom"],
     "types": ["cypress", "@testing-library/cypress"]
   },
   "include": ["**/*.ts"]

package.json

@@ -46,7 +46,7 @@
     "conventional-changelog-cli": "^2.1.1",
     "copy-webpack-plugin": "^6.3.2",
     "css-loader": "^4.0.0",
-    "cypress": "^8.3.0",
+    "cypress": "^8.6.0",
     "cypress-image-snapshot": "^4.0.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
@@ -82,7 +82,6 @@
     "sync-request": "^6.1.0",
     "ts-jest": "^27.0.5",
     "typescript": "^4.4.3",
-    "uuid": "^8.3.2",
     "webpack": "~5.51.1",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.8.0",

scripts/cypress-screenshots.sh

@@ -13,5 +13,5 @@ docker run \
   -e CYPRESS_VIDEO=true \
   -e CYPRESS_COMPARE_SNAPSHOTS=true \
   -e CYPRESS_updateSnapshots="$CYPRESS_updateSnapshots" \
-  -v $PWD:/cypress -w /cypress cypress/included:8.4.1
+  -v $PWD:/cypress -w /cypress cypress/included:8.6.0
 

yarn.lock

@@ -3674,10 +3674,10 @@ cypress-image-snapshot@^4.0.1:
     pkg-dir "^3.0.0"
     term-img "^4.0.0"
 
-cypress@^8.3.0:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.5.0.tgz#5712ca170913f8344bf167301205c4217c1eb9bd"
-  integrity sha512-MMkXIS+Ro2KETn4gAlG3tIc/7FiljuuCZP0zpd9QsRG6MZSyZW/l1J3D4iQM6WHsVxuX4rFChn5jPFlC2tNSvQ==
+cypress@^8.6.0:
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.6.0.tgz#8d02fa58878b37cfc45bbfce393aa974fa8a8e22"
+  integrity sha512-F7qEK/6Go5FsqTueR+0wEw2vOVKNgk5847Mys8vsWkzPoEKdxs+7N9Y1dit+zhaZCLtMPyrMwjfA53ZFy+lSww==
   dependencies:
     "@cypress/request" "^2.88.6"
     "@cypress/xvfb" "^1.2.4"