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

.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],
+      });
+    });
+  });
+});