Update Cypress to v12 (#1641)

Summary: Update Cypress from 9.x to 12.x, and perform all relevant
migrations.
Changes are the results of [10.0
migration](https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-100),
[11.0
migration](https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-110),
and [12.0
migration](https://docs.cypress.io/guides/references/migration-guide#Migrating-to-Cypress-120)
guides.
The reason for using `cypress.config.mjs` instead of `cypress.config.ts`
is that the latter is not working with Yarn 3 yet
([1](cypress-io/cypress#24209),
[2](cypress-io/cypress#22747),
[3](cypress-io/cypress#25958)). If that
changes, we can revisit.
Notably, one of the larger changes is that test isolation is now on by
default. This means the page is refreshed between each test rather than
each suite, so some tests needed to be reconfigured to work with that
paradigm.
Cypress' UI has gotten a major refresh as well, so I changed the
commands to account for it.

Relevant Issues: N/A

Type of change: /kind cleanup

Test Plan: Follow instructions in `src/ui/cypress/README.md`. In
particular, try `yarn run cypress:run:chrome`. All of the tests should
pass, totally headlessly.

Signed-off-by: Nick Lanam <[email protected]>

src/ui/.eslintrc.json

@@ -101,7 +101,8 @@
         "src/testing/**/*"
       ],
       "excludedFiles": [
-        "cypress/**/*"
+        "cypress/**/*",
+        "cypress.config.mjs"
       ],
       "env": {
         "node": true,
@@ -137,7 +138,8 @@
         "*.tsx"
       ],
       "excludedFiles": [
-        "cypress/**/*"
+        "cypress/**/*",
+        "cypress.config.mjs"
       ],
       "extends": [
         "airbnb-typescript/base",

src/ui/cypress.config.mjs

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2018- The Pixie 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { defineConfig } from 'cypress';
+// import loadPlugins from 'plugins/index';
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'cypress/integration/**/*.spec.{js,jsx,ts,tsx}',
+    supportFile: 'cypress/support/index.ts',
+    baseUrl: 'https://dev.withpixie.dev',
+    video: false, // Turn this on only if you are struggling to debug something, it only works locally and in Chrome.
+    setupNodeEvents(on/*, config*/) {
+      // Reduce motion
+      on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.family === 'chromium') {
+          if (browser.name === 'electron') {
+            // Electron doesn't seem to have a setting for this.
+            // https://www.electronjs.org/docs/latest/api/browser-window#new-browserwindowoptions
+            // launchOptions.preferences.SOMETHING = true;
+          } else {
+            launchOptions.args.push('--force-prefers-reduced-motion');
+          }
+        } else if (browser.family === 'firefox') {
+          launchOptions.preferences['ui.prefersReducedMotion'] = 1;
+        }
+        return launchOptions;
+      });
+    },
+  },
+});

src/ui/cypress/README.md

@@ -8,10 +8,10 @@ To run them, you need two things:
    To get this, load the UI, open the dev tools, and look for the `default-sessionSOME_NUMBER` cookie. That is what you'll use to set `CYPRESS_GOOGLE_SESSION_COOKIE`.
    The name of that cookie will set `CYPRESS_GOOGLE_SESSION_COOKIE_KEY`.
 
-Then, run this command:
-`CYPRESS_BASE_URL='https://dev.withpixie.dev' CYPRESS_GOOGLE_SESSION_COOKIE_KEY='default-sessionSOME_NUMBER' CYPRESS_GOOGLE_SESSION_COOKIE='paste-your-session-cookie-value-here' yarn cypress:open`
+Then, run this command to access Cypress' UI:
+`CYPRESS_BASE_URL='https://dev.withpixie.dev' CYPRESS_GOOGLE_SESSION_COOKIE_KEY='default-sessionSOME_NUMBER' CYPRESS_GOOGLE_SESSION_COOKIE='paste-your-session-cookie-value-here' yarn cypress open`
 
-You can use `... yarn cypress:run` instead if you want to run the tests immediately and headlessly.
+You can use `... yarn cypress:run:chrome` (or `... yarn cypress:run:firefox`) instead if you want to run the tests immediately and headlessly.
 
 If you don't want to set these environment variables every time, you can override everything except the base URL in `cypress.env.json` (copy from `cypress.template.env.json`):
 ```json

src/ui/cypress/integration/admin/api-and-deployment-keys.spec.ts

@@ -129,5 +129,5 @@ function keyTests(prefix: string, url: string) {
   });
 }
 
-keyTests('API', '/admin/api-keys');
-keyTests('Deployment', '/admin/deployment-keys');
+keyTests('API', '/admin/keys/api');
+keyTests('Deployment', '/admin/keys/deployment');

src/ui/cypress/integration/live/keyboard-shortcuts.spec.ts

@@ -24,9 +24,7 @@ describe('Live view keyboard shortcuts', () => {
 
   const modalTitle = 'Available Shortcuts';
 
-  // Note: this is a before, not a beforeEach.
-  // Each test needs to close whatever its shortcut opened to reset properly and test that.
-  before(() => {
+  beforeEach(() => {
     cy.loginGoogle();
     cy.visit('/');
 
@@ -36,10 +34,6 @@ describe('Live view keyboard shortcuts', () => {
     cy.wait('@exec-auto');
   });
 
-  beforeEach(() => {
-    cy.loginGoogle();
-  });
-
   it('Opens shortcut help from profile menu', () => {
     cy.get('header.MuiPaper-root > .MuiToolbar-root > *:last-child').as('profile-menu-trigger');
     cy.get('@profile-menu-trigger').click();
@@ -62,13 +56,11 @@ describe('Live view keyboard shortcuts', () => {
     // Note: the way :nth-child works is weird; n+2 means "everything after the first child"
     cy.contains(modalTitle).parent().find('> div:nth-child(n+2)').as('rows');
     cy.get('@rows').should('have.length', 5);
-    cy.get('@rows').within(() => {
-      cy.contains('Show/hide script editor').should('exist');
-      cy.contains('Show/hide data drawer').should('exist');
-      cy.contains('Show/hide command palette').should('exist');
-      cy.contains('Execute current Live View script').should('exist');
-      cy.contains('Show all keyboard shortcuts').should('exist');
-    });
+    cy.get('@rows').contains('Show/hide script editor').should('exist');
+    cy.get('@rows').contains('Show/hide data drawer').should('exist');
+    cy.get('@rows').contains('Show/hide command palette').should('exist');
+    cy.get('@rows').contains('Execute current Live View script').should('exist');
+    cy.get('@rows').contains('Show all keyboard shortcuts').should('exist');
     cy.get('body').type('{esc}');
     cy.contains(modalTitle).should('not.exist');
   });

src/ui/cypress/integration/live/navbars.spec.ts

@@ -24,13 +24,13 @@ describe('Live View navbars', () => {
   before(() => {
     cy.loginGoogle();
     stubExecuteScript();
-    cy.visit('/');
   });
 
   beforeEach(() => {
     // Re-apply one-time intercepts each run.
     cy.loginGoogle();
     stubExecuteScript();
+    cy.visit('/');
     cy.get('.MuiToolbar-root').as('topbar');
   });
 
@@ -42,7 +42,7 @@ describe('Live View navbars', () => {
     it('Has the right contents', () => {
       cy.get('@topbar').should('exist').within(() => {
         cy.get('a[href="/"]').should('exist');
-        cy.contains('Cluster:').find('+span').should(($span) => expect($span.text()).not.to.be.empty);
+        cy.contains('cluster:').find('+span').should(($span) => expect($span.text()).not.to.be.empty);
         // Items that have tooltips: the share/edit/move/run buttons.
         // The sidebar expander also has an aria-label but isn't a Material tooltip.
         // The trigger for the Command Palette sets aria-label in the same way.

src/ui/cypress/integration/live/share-dialog.spec.ts

@@ -48,7 +48,7 @@ describe('Share dialog', () => {
       ]);
     });
 
-    // TODO(nick,PC-1450): This only tests for a Google org; need to test email/password too.
+    // TODO(NickLanam): This only tests for a Google org; need to test email/password too.
     cy.location('href').then((href) => {
       cy.get('@copy-to-clipboard').should('be.calledOnceWithExactly', href);
     });

src/ui/cypress/integration/live/sidebar-scripts.spec.ts

@@ -19,17 +19,13 @@
 import { stubExecuteScript, waitExecuteScript } from 'support/utils/grpc';
 
 describe('Sidebar script shortcuts', () => {
-  before(() => {
-    cy.loginGoogle();
-    stubExecuteScript().as('exec-auto');
-    cy.visit('/');
-  });
-
   beforeEach(() => {
-    // Once in before all for the auto exec;
+    // Once for the auto exec;
     // Once each for the manual clicks that fire more requests.
     // Remember, Cypress intercepts only trigger once each by default.
     cy.loginGoogle();
+    stubExecuteScript().as('exec-auto');
+    cy.visit('/');
   });
 
   it('Auto-runs cluster script before anything is pressed', () => {

src/ui/cypress/integration/unauthenticated/credits.spec.ts

@@ -17,8 +17,7 @@
  */
 
 describe('Credits view', () => {
-  // Only need to load the page once for this test suite.
-  before(() => {
+  beforeEach(() => {
     cy.visit('/credits');
   });
 

src/ui/cypress/support/utils/grpc.ts

@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Interception, RouteHandler } from 'cypress/types/net-stubbing';
+import type { Interception, RouteHandler } from 'cypress/types/net-stubbing';
 
 import { deserializeExecuteScriptRequest, deserializeExecuteScriptResponse } from 'app/testing/utils/grpc';
 import { ExecuteScriptRequest, ExecuteScriptResponse } from 'app/types/generated/vizierapi_pb';

src/ui/cypress/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["es5", "dom"],
+    "lib": ["es5", "es6", "dom", "es2016", "es2017", "es2018", "es2019", "es2020"],
     "types": ["cypress"],
     "baseUrl": ".",
     "paths": {

src/ui/package.json

@@ -38,15 +38,15 @@
     "compression-webpack-plugin": "^4.0.0",
     "concurrently": "^6.2.0",
     "css-loader": "^5.2.6",
-    "cypress": "^9.3.0",
+    "cypress": "^12.17.2",
     "esbuild": "^0.18.2",
     "esbuild-jest": "^0.5.0",
     "esbuild-loader": "^3.0.1",
     "eslint": "^8.42.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-import-resolver-node": "^0.3.7",
     "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-cypress": "^2.13.3",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-react": "^7.32.2",
@@ -158,8 +158,10 @@
     "coverage_ci": "jest --coverage --maxWorkers=4",
     "license_check": "yarn pnpify license-checker --relativeLicensePath",
     "lint": "yarn typecheck && eslint -c .eslintrc.json .",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run"
+    "cypress:open:chrome": "cypress open --e2e --browser chrome",
+    "cypress:open:firefox": "cypress open --e2e --browser firefox",
+    "cypress:run:chrome": "cypress run --e2e --browser chrome",
+    "cypress:run:firefox": "cypress run --e2e --browser firefox"
   },
   "resolutions": {
     "@types/react": "^18.0.9",