test(e2e): introduce cypress for web components & react storybook (#7096)

### Related Ticket(s)

Refs #6139

### Description

This PR fully moves the existing `test-e2e` package to a dedicated cypress test setup for web components and react storybooks. A few tests have been included for `masthead`, `locale-modal`, and `leadspace`. They are largely focused on snapshot testing, though percy has been disabled for now as rendering of dynamic states are still not supported in percy for web components (see percy/cli#280).

Actual cypress tests can be created now though, and also the current tests uses the built-in cypress screenshot feature:

![image](https://user-images.githubusercontent.com/1641214/132697052-2943ccdf-81c5-450d-999e-c39e557a3d05.png)

And video that shows how the tests are run:

https://user-images.githubusercontent.com/1641214/132697174-a778c055-d3d8-4e01-877d-bd58c2aa7491.mp4

### Changelog

**New**

- Cypress testing for web components and react storybook

**Changed**

- disabled video recording by default to speed up tests

**Removed**

- Removed `test-e2e` package

Author: jeffchew

.eslintignore

@@ -12,6 +12,7 @@ packages/react/ssr-tests/nextjs/.next
 packages/react/src/internal/vendor
 packages/react/tests/e2e/dist
 packages/react/tests/e2e/cypress
+packages/react/tests/e2e-storybook/cypress
 
 # storybook-addon-theme
 packages/storybook-addon-theme/es
@@ -59,3 +60,5 @@ packages/web-components/storybook-static
 packages/web-components/storybook-static-react
 packages/web-components/src/internal/vendor
 packages/web-components/tests/e2e/dist
+packages/web-components/tests/e2e/cypress
+packages/web-components/tests/e2e-storybook/cypress

.eslintrc

@@ -105,7 +105,8 @@
     {
       "files": [
         "packages/react/tests/e2e/**/*.e2e.js",
-        "packages/react/tests/e2e/**/*.cdn.e2e.js"
+        "packages/react/tests/e2e/**/*.cdn.e2e.js",
+        "packages/react/src/components/**/*.e2e.js"
       ],
       "extends": [
         "plugin:cypress/recommended"

packages/react/.env.example

@@ -27,3 +27,6 @@ DDS_AUDIO_PLAYER=<Boolean flag to turn on/off the Audio Player>
 
 # Selenium
 SELENIUM_HOST=<Host URL to test, e.g. https://www.ibm.com/standards/carbon/react>
+
+# Storybook e2e host
+C4IBM_E2E_STORYBOOK_HOST=<Host to prepend to e2e tests>

packages/react/.gitignore

@@ -14,3 +14,5 @@ src/internal/vendor
 # e2e tests
 tests/e2e/cypress/screenshots
 tests/e2e/cypress/videos
+tests/e2e-storybook/cypress/screenshots
+tests/e2e-storybook/cypress/videos

packages/react/package.json

@@ -37,8 +37,12 @@
     "storybook": "start-storybook -p 9000",
     "test:e2e:build": "node ./tests/e2e/build/build-examples.js",
     "test:e2e:run": "http-server -c-1 tests/e2e/dist --silent",
-    "test:e2e:test": "start-server-and-test 'yarn test:e2e:run' 8080 'percy exec --config tests/e2e/.percy.json -- cypress run --config-file tests/e2e/cypress.json'",
-    "test:e2e:test:no-percy": "start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config-file tests/e2e/cypress.json'",
+    "test:e2e:test": "start-server-and-test 'yarn test:e2e:run' 8080 'percy exec --config tests/e2e/.percy.json -- cypress run --config video=false --config-file tests/e2e/cypress.json'",
+    "test:e2e:test:no-percy": "start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config video=false --config-file tests/e2e/cypress.json'",
+    "test:e2e-storybook:run": "http-server -c-1 storybook-static --silent -p 8081",
+    "test:e2e-storybook:test": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'percy exec --config tests/e2e-storybook/.percy.json -- cypress run --config video=false --config-file tests/e2e-storybook/cypress.json'",
+    "test:e2e-storybook:test:no-percy": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'cypress run --config video=false --config-file tests/e2e-storybook/cypress.json'",
+    "test:e2e-storybook:test:no-percy:with-video": "start-server-and-test 'yarn test:e2e-storybook:run' 8081 'cypress run --config-file tests/e2e-storybook/cypress.json'",
     "test:unit": "jest",
     "test:unit:updateSnapshot": "jest -u",
     "test:a11y": "gulp test:a11y",

packages/react/src/components/CalloutQuote/__tests__/CalloutQuote.e2e.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright IBM Corp. 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Sets the host to run tests
+ *
+ * @type {string|string}
+ * @private
+ */
+const _host =
+  (process && process.env.C4IBM_E2E_STORYBOOK_HOST) || 'http://localhost:8081';
+
+/**
+ * Sets the correct path
+ *
+ * @type {string}
+ * @private
+ */
+const _path = '/iframe.html?id=components-callout-quote--default';
+
+/* eslint-disable cypress/no-unnecessary-waiting */
+describe('CalloutQuote | default', () => {
+  it('should load the g100 theme', () => {
+    cy.visit(`${_host}/${_path}&theme=g100`);
+    cy.viewport(1280, 780);
+
+    cy.window().then(win => {
+      win.document.documentElement.setAttribute(
+        'storybook-carbon-theme',
+        'g100'
+      );
+      cy.wait(500);
+      cy.screenshot();
+
+      // Take a snapshot for visual diffing
+      cy.percySnapshot('CalloutQuote | default | g100 theme', {
+        widths: [1280],
+      });
+    });
+  });
+
+  it('should load the g90 theme', () => {
+    cy.visit(`${_host}/${_path}&theme=g90`);
+    cy.viewport(1280, 780);
+
+    cy.window().then(win => {
+      win.document.documentElement.setAttribute(
+        'storybook-carbon-theme',
+        'g90'
+      );
+      cy.wait(500);
+
+      cy.screenshot();
+      // Take a snapshot for visual diffing
+      cy.percySnapshot('CalloutQuote | default | g90 theme', {
+        widths: [1280],
+      });
+    });
+  });
+
+  it('should load the g10 theme', () => {
+    cy.visit(`${_host}/${_path}&theme=g10`);
+    cy.viewport(1280, 780);
+
+    cy.window().then(win => {
+      win.document.documentElement.setAttribute(
+        'storybook-carbon-theme',
+        'g10'
+      );
+      cy.wait(500);
+
+      cy.screenshot();
+      // Take a snapshot for visual diffing
+      cy.percySnapshot('CalloutQuote | default | g10 theme', {
+        widths: [1280],
+      });
+    });
+  });
+});