Experiment/add cypress for e2e tests (#8282)

* chore(react): add cypress and initial accordion test

* wip: check in work

* wip: check in work

* chore: check in work

* chore(project): run cypress in ci

* testing(accordion): enable percy snapshots, configure cypress eslint plugin

* chore(eslint): revert readme changes

* chore(cli): move '@percy/cli' dep from react to cli package

* chore(yarn): include cache from '@percy/cli' install

* chore(project): update yarn cache checksums

* chore: clear cache

* chore: add cache

* chore: fix yarn cache

* chore: i think i finally fixed the cache

* fix(cli): modify command for percy e2e

* fix(project): update to cypress v7, retool configuration

* chore(project): move percy cli dep to root

* chore(project): turn off cypress videos and snapshots in CI

* chore(cypress): update command syntax

* chore(cypress): update command syntax

* fix(ci): correct command for jest e2e tests

* chore: run yarn dedupe

Co-authored-by: Josh Black <[email protected]>

config/eslint-config-carbon/base.js

@@ -13,6 +13,7 @@ module.exports = {
     'eslint:recommended',
     require.resolve('./rules/best-practices'),
     require.resolve('./plugins/jsdoc'),
+    require.resolve('./plugins/cypress'),
   ],
   rules: {
     // Handle cases where we are destructuring but may not be using the initial

config/eslint-config-carbon/package.json

@@ -35,6 +35,7 @@
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "^2.20.0",
     "eslint-plugin-jsdoc": "^20.3.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",

config/eslint-config-carbon/plugins/cypress.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * 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';
+
+module.exports = {
+  plugins: ['eslint-plugin-cypress'],
+  overrides: [
+    {
+      files: ['*-test.e2e.js'],
+      extends: ['plugin:cypress/recommended'],
+    },
+  ],
+};

package.json

@@ -27,7 +27,7 @@
     "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
     "sync": "carbon-cli sync",
     "test": "cross-env BABEL_ENV=test jest",
-    "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+    "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern='e2e/' --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
   },
   "resolutions": {
     "ast-types": "^0.14.0",
@@ -48,6 +48,7 @@
     "@carbon/cli": "workspace:packages/cli",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
+    "@percy/cli": "^1.0.0-beta.48",
     "@testing-library/dom": "^7.26.6",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.1",

packages/cli/src/commands/ci-check.js

@@ -24,6 +24,7 @@ async function check(args, env) {
     `yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures)/**' 'packages/**/*.scss'`,
     `cross-env BABEL_ENV=test yarn test --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`,
     `cross-env BABEL_ENV=test yarn test:e2e --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`,
+    `cross-env PERCY_TOKEN=dd3392142006a6483c8f524697f39f052755fa9dc087ff4437cac3d64227abdd yarn run percy exec -- yarn workspace carbon-components-react test:e2e`,
   ];
 
   try {

packages/react/.gitignore

@@ -2,4 +2,8 @@
 storybook-static
 
 # Generated metadata
-react-docgen.json
+react-docgen.json
+
+# Cypress artifacts
+cypress/videos
+cypress/screenshots

packages/react/cypress.json

@@ -0,0 +1,9 @@
+{
+  "componentFolder": "src",
+  "env": {
+    "coverage": false
+  },
+  "fixturesFolder": false,
+  "nodeVersion": "system",
+  "testFiles": "**/*-test.e2e.js"
+}

packages/react/cypress/plugins/index.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * 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 = (on, config) => {
+  if (config.testingType === 'component') {
+    const { startDevServer } = require('@cypress/webpack-dev-server');
+    const webpackConfig = require('../../webpack.config.js');
+
+    on('dev-server:start', (options) =>
+      startDevServer({ options, webpackConfig })
+    );
+  }
+
+  return config;
+};

packages/react/cypress/support/index.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// https://github.com/dmtrKovalenko/cypress-real-events
+import 'cypress-real-events/support';
+
+// https://github.com/testing-library/cypress-testing-library
+import '@testing-library/cypress/add-commands';
+
+// https://github.com/percy/percy-cypress
+import '@percy/cypress';

packages/react/package.json

@@ -35,7 +35,8 @@
     "prepublish": "yarn build",
     "start": "yarn storybook",
     "storybook": "rimraf node_modules/.cache/storybook && start-storybook -p 9000 -s ./.storybook/assets",
-    "snapshot": "build-storybook && percy-storybook --widths=320,1280"
+    "snapshot": "build-storybook && percy-storybook --widths=320,1280",
+    "test:e2e": "cypress run-ct --config video=false,screenshotOnRunFailure=false"
   },
   "peerDependencies": {
     "carbon-components": "^10.30.0",
@@ -74,6 +75,9 @@
     "@babel/preset-env": "^7.14.0",
     "@babel/preset-react": "^7.13.13",
     "@carbon/test-utils": "^10.15.0",
+    "@cypress/react": "^5.4.0",
+    "@cypress/webpack-dev-server": "^1.1.5",
+    "@percy/cypress": "^3.1.0",
     "@percy/storybook": "^3.3.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
@@ -85,6 +89,7 @@
     "@storybook/react": "^5.3.21",
     "@storybook/source-loader": "^5.3.21",
     "@storybook/theming": "^6.2.9",
+    "@testing-library/cypress": "^7.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-dev-expression": "^0.2.2",
     "babel-plugin-react-docgen": "^4.2.1",
@@ -97,6 +102,8 @@
     "core-js": "^3.6.5",
     "cross-env": "^5.2.0",
     "css-loader": "^3.4.2",
+    "cypress": "^7.2.0",
+    "cypress-real-events": "^1.3.0",
     "gzip-size": "^6.0.0",
     "lcov2badge": "^0.1.0",
     "mini-css-extract-plugin": "^0.9.0",
@@ -120,6 +127,7 @@
     "string-replace-loader": "^2.1.0",
     "terser-webpack-plugin": "^2.3.2",
     "webpack": "^4.41.5",
+    "webpack-dev-server": "^3.11.2",
     "whatwg-fetch": "^2.0.3"
   },
   "sideEffects": false,

packages/react/src/components/Accordion/__tests__/Accordion-test.e2e.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * 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 'carbon-components/scss/components/accordion/_accordion.scss';
+
+import React from 'react';
+import { mount } from '@cypress/react';
+import { default as Accordion, AccordionItem } from '..';
+
+describe('Accordion', () => {
+  beforeEach(() => {
+    mount(
+      <Accordion>
+        <AccordionItem title="Section 1">Panel 1</AccordionItem>
+        <AccordionItem title="Section 2">Panel 2</AccordionItem>
+        <AccordionItem title="Section 3">Panel 3</AccordionItem>
+      </Accordion>
+    );
+  });
+
+  it('should render', () => {
+    cy.findByText(/Section 1/).should('be.visible');
+    cy.findByText(/Section 2/).should('be.visible');
+    cy.findByText(/Section 3/).should('be.visible');
+
+    cy.findByText(/Panel 1/).should('not.be.visible');
+    cy.findByText(/Panel 2/).should('not.be.visible');
+    cy.findByText(/Panel 3/).should('not.be.visible');
+
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+  });
+
+  it('should tab between items and open on space', () => {
+    // in order for realPress('Tab') to work, something must be focused first.
+    // cy.get('body').focus() does not work
+    // cy.get('body').realClick() does not work because the click seems to be happen at the center of the element, which opens an accordion item
+    cy.findByRole('button', { name: /Section 1/i }).focus();
+
+    cy.realPress('Tab');
+    cy.findByRole('button', { name: /Section 2/i }).should('be.focused');
+
+    cy.realPress('Tab');
+    cy.findByRole('button', { name: /Section 3/i })
+      .should('be.focused')
+      .realPress('Space');
+    cy.findByText(/Panel 1/).should('not.be.visible');
+    cy.findByText(/Panel 2/).should('not.be.visible');
+    cy.findByText(/Panel 3/).should('be.visible');
+    // snapshots should always be taken _after_ an assertion that
+    // a element/component should be visible. This is to ensure
+    // the DOM has settled and the element has fully loaded.
+    cy.percySnapshot();
+
+    cy.realPress(['Shift', 'Tab']);
+    cy.realPress('Space');
+    cy.realPress(['Shift', 'Tab']);
+    cy.realPress('Space');
+
+    cy.findByText(/Panel 1/).should('be.visible');
+    cy.findByText(/Panel 2/).should('be.visible');
+    cy.findByText(/Panel 3/).should('be.visible');
+  });
+});

packages/react/webpack.config.js

@@ -0,0 +1,25 @@
+'use strict';
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          presets: [require.resolve('./scripts/env.js')],
+        },
+      },
+      {
+        test: /\.s?css$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+          },
+        ],
+      },
+    ],
+  },
+};