test(e2e): introduce cypress e2e testing (carbon-design-system#1451)

* chore(issue-templates): updating issue templates for the website

* chore(issue-templates): updating feature request based on feedback

* test(e2e): introduce cypress e2e testing

* test(e2e): change workflow to only run on upstream

* test(e2e): change workflow to only run on upstream

* chore(yarn): update yarn offline mirror

* fix(github-actions): fix e2e test script name

* chore(github-actions): add cache for gatsby builds

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.eslintignore

@@ -2,3 +2,4 @@
 /.cache/*
 /node_modules/*
 .github
+tests/e2e/cypress

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "plugins": ["react"],
+  "plugins": ["react", "cypress"],
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",

.github/workflows/e2e-tests-prod.yml

@@ -0,0 +1,34 @@
+name: e2e-tests-prod
+
+on:
+  schedule:
+    - cron: "0 */2 * * *"
+
+concurrency:
+  group: e2e-tests-prod-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  e2e-tests:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom-website'
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: ['14.x']
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Run e2e tests
+        run: yarn test:e2e:prod
+      - uses: act10ns/slack@v1
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}

.github/workflows/e2e-tests.yml

@@ -0,0 +1,57 @@
+name: e2e-tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+concurrency:
+  group: e2e-tests-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  e2e-tests:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom-website'
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: ['14.x']
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+          cache: yarn
+      - name: Caching Gatsby
+        id: gatsby-cache-build
+        uses: actions/cache@v2
+        with:
+          path: |
+            public
+            .cache
+          key: ${{ runner.os }}-gatsby-build-${{ github.run_id }}
+          restore-keys: |
+            ${{ runner.os }}-gatsby-build-
+      - name: Install dependencies
+        run: yarn install
+      - name: Set env vars
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: .env.production
+        env:
+          GATSBY_CPU_COUNT: 1
+      - name: Building Gatsby
+        run: yarn build
+        env:
+          GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES: true
+          CI: true
+      - name: Run e2e tests
+        run: yarn test:e2e:local
+      - uses: act10ns/slack@v1
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}

.gitignore

@@ -9,3 +9,7 @@ wiki-build
 *.log
 src/pages/developing/building-for-ibm-dotcom/index.mdx
 src/pages/developing/carbon-cdn-style-helpers/index.mdx
+
+# Cypress output files
+tests/e2e/cypress/screenshots
+tests/e2e/cypress/videos

.lintstagedrc

@@ -0,0 +1,9 @@
+{
+  "*.js": [
+    "eslint --fix",
+    "prettier --write"
+  ],
+  "*.{css,scss,json,html,yaml,md,mdx}": [
+    "prettier --write"
+  ]
+}

.prettierignore

@@ -3,3 +3,4 @@ node_modules
 .yarn
 .github
 public
+tests/e2e/cypress/fixtures

package.json

@@ -17,7 +17,11 @@
     "postinstall": "husky install",
     "postpublish": "pinst --enable",
     "prepublishOnly": "pinst --disable",
-    "serve": "gatsby serve"
+    "serve": "gatsby serve",
+    "test:e2e:local": "start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config video=false --config-file tests/e2e/cypress.json'",
+    "test:e2e:local:with-video": "start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config-file tests/e2e/cypress.json'",
+    "test:e2e:prod": "cypress run --config video=false --config-file tests/e2e/cypress-prod.json",
+    "test:e2e:run": "http-server -c-1 public --silent"
   },
   "dependencies": {
     "@carbon/icons-react": "^10.27.0",
@@ -38,23 +42,19 @@
     "@babel/plugin-proposal-class-properties": "^7.12.13",
     "@babel/plugin-transform-classes": "^7.12.13",
     "babel-preset-gatsby": "^1.14.0",
+    "cypress": "^9.4.1",
+    "cypress-wait-until": "^1.7.2",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
+    "http-server": "^14.1.0",
     "husky": "^7.0.2",
     "lint-staged": "^11.1.2",
-    "prettier": "^2.3.2"
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.{css,scss,json,html,yaml,md,mdx}": [
-      "prettier --write"
-    ]
+    "prettier": "^2.3.2",
+    "start-server-and-test": "^1.14.0"
   }
 }

tests/e2e/cypress-prod.json

@@ -0,0 +1,14 @@
+{
+  "baseUrl": "https://www.ibm.com/standards/carbon",
+  "browser": "chrome",
+  "headless": true,
+  "fixturesFolder": "tests/e2e/cypress/fixtures",
+  "screenshotsFolder": "tests/e2e/cypress/screenshots",
+  "videosFolder": "tests/e2e/cypress/videos",
+  "integrationFolder": "tests/e2e/cypress/integration",
+  "supportFile": "tests/e2e/cypress/support/index.js",
+  "pluginsFile": "tests/e2e/cypress/plugins/index.js",
+  "testFiles": "**/*.e2e.js",
+  "pageLoadTimeout": 60000,
+  "defaultCommandTimeout": 60000
+}

tests/e2e/cypress.json

@@ -0,0 +1,14 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "browser": "chrome",
+  "headless": true,
+  "fixturesFolder": "tests/e2e/cypress/fixtures",
+  "screenshotsFolder": "tests/e2e/cypress/screenshots",
+  "videosFolder": "tests/e2e/cypress/videos",
+  "integrationFolder": "tests/e2e/cypress/integration",
+  "supportFile": "tests/e2e/cypress/support/index.js",
+  "pluginsFile": "tests/e2e/cypress/plugins/index.js",
+  "testFiles": "**/*.e2e.js",
+  "pageLoadTimeout": 60000,
+  "defaultCommandTimeout": 60000
+}

tests/e2e/cypress/fixtures/ibm-common.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {}

tests/e2e/cypress/integration/homepage/homepage.e2e.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+describe('Homepage', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.viewport(1280, 780);
+
+    cy.waitUntil(() => cy.get('header').should('not.be.empty'));
+  });
+
+  it('should have a functioning left navigation', () => {
+    cy.get('.bx--side-nav__submenu').first().click();
+
+    cy.get('.bx--side-nav__link').first().should('be.visible').click();
+
+    cy.location('pathname').should('not.eq', '/');
+  });
+});

tests/e2e/cypress/plugins/index.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

tests/e2e/cypress/support/commands.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import 'cypress-wait-until';

tests/e2e/cypress/support/index.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './commands';
+
+beforeEach(() => {
+  // Block ibm-common.js
+  cy.intercept('https://1.www.s81c.com/common/stats/ibm-common.js', {
+    fixture: 'ibm-common.js',
+  });
+});