Experiment/add cypress for e2e tests

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,8 @@
     "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:jest": "cross-env BABEL_ENV=test jest --testPathPattern='e2e/' --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'",
+    "test:e2e:cypress": "lerna run test:e2e:cypress"
   },
   "resolutions": {
     "ast-types": "^0.14.0",

packages/cli/package.json

@@ -28,6 +28,7 @@
     "@octokit/plugin-retry": "^3.0.7",
     "@octokit/plugin-throttling": "^2.6.0",
     "@octokit/rest": "^16.28.1",
+    "@percy/cli": "^1.0.0-beta.48",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.1.0",

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

@@ -23,7 +23,8 @@ async function check(args, env) {
   const tasks = [
     `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 BABEL_ENV=test yarn test:e2e:jest --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`,
+    `cross-env PERCY_TOKEN=dd3392142006a6483c8f524697f39f052755fa9dc087ff4437cac3d64227abdd yarn run percy exec -- yarn test:e2e:cypress`,
   ];
 
   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,10 @@
+{
+  "componentFolder": "src",
+  "experimentalComponentTesting": true,
+  "env": {
+    "coverage": false
+  },
+  "fixturesFolder": false,
+  "nodeVersion": "system",
+  "testFiles": "**/*-test.e2e.js"
+}

packages/react/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+const preprocessor = require('@cypress/react/plugins/load-webpack');
+const percyHealthCheck = require('@percy/cypress/task');
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  config.env.webpackFilename = 'webpack.config.js';
+  preprocessor(on, config);
+
+  on('task', percyHealthCheck);
+  return config;
+};

packages/react/cypress/support/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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 '@cypress/react/support';
+
+// 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": "cypress run"
   },
   "peerDependencies": {
     "carbon-components": "^10.30.0",
@@ -74,6 +75,8 @@
     "@babel/preset-env": "^7.10.0",
     "@babel/preset-react": "^7.10.0",
     "@carbon/test-utils": "^10.15.0",
+    "@cypress/react": "^4.16.4",
+    "@percy/cypress": "^2.3.4",
     "@percy/storybook": "^3.3.1",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^17.0.0",
@@ -84,6 +87,7 @@
     "@storybook/react": "^5.3.19",
     "@storybook/source-loader": "^5.3.19",
     "@storybook/theming": "^6.1.18",
+    "@testing-library/cypress": "^7.0.5",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-dev-expression": "^0.2.2",
@@ -97,6 +101,8 @@
     "core-js": "^3.6.5",
     "cross-env": "^5.2.0",
     "css-loader": "^3.4.2",
+    "cypress": "^6.5.0",
+    "cypress-real-events": "^1.3.0",
     "gzip-size": "^6.0.0",
     "lcov2badge": "^0.1.0",
     "mini-css-extract-plugin": "^0.9.0",

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