Browser testing (#291)

* ci: add browser tests with cypress

- single test that uses the current fixtures
- add test:e2e to package scripts

* ci: add e2e job for github actions

* ci: fix job name

* chore: fix lint issues

* ci: remove firefox from cypress to check error

* ci: change cyress-io/github-action version

* ci: test e2e failing test

* test: fix failing before all - should fail in CI

- combination of promise and cypress commands caused tests to be skipped
- moved helpers to e2e folder instead of cypress commands

* ci: test e2e passing test

* ci: move code coverage to e2e

* ci: forgot to set coverage=true

* ci: run codecov separately from install

* ci: break code coverage into 2 jobs

install and then run

* test: move tests from unit to e2e

* chore: add e2e test to test script

* ci: set node 14 only for checking basics

- lint
- types
- unit tests
- build

* Move to Cypress 7.1.0

Co-authored-by: Stefan Cameron <stefan@stefcameron.com>

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
   },
   extends: [
     'eslint:recommended',
+    'plugin:cypress/recommended',
     'prettier', // ALWAYS LAST: disable style rules that conflict with prettier
   ],
   plugins: ['import'],

.github/workflows/ci.yml

@@ -8,13 +8,13 @@ on:
 
 jobs:
   test:
-    name: Lint & Test
+    name: Check lint/types/unit-test/build
     runs-on: ubuntu-latest
     env:
       CI: true
     strategy:
       matrix:
-        node: [12, 14]
+        node: [14]
     steps:
       - uses: actions/checkout@master
 
@@ -38,21 +38,39 @@ jobs:
       - name: Install packages
         run: yarn --frozen-lockfile
 
-      - name: Install Codecov globally
-        run: |
-          yarn global add codecov
-          echo "$(yarn global bin)" >> $GITHUB_PATH
-
       - name: Lint
         run: |-
           yarn format:check;
           yarn lint;
 
       - name: Test
         run: |-
-          yarn test:coverage;
           yarn test:types;
-          codecov;
+          yarn test:unit;
 
       - name: Build # Tests to see if a build can succeed
         run: yarn build
+  E2E:
+    runs-on: ubuntu-latest
+    name: e2e
+    strategy:
+      matrix:
+        browser: [chrome, firefox]
+    container:
+      image: cypress/included:7.1.0
+      options: --user 1001
+    env:
+      CYPRESS_BROWSER: ${{ matrix.browser }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Test E2E
+        uses: cypress-io/github-action@v2.6.1
+        with:
+          browser: ${{ matrix.browser }}
+          env: coverage=true
+      - name: Install code coverage
+        run: |-
+          yarn global add codecov;
+          echo "$(yarn global bin)" >> $GITHUB_PATH;
+      - name: Code coverage
+        run: codecov;

cypress.json

@@ -0,0 +1,8 @@
+{
+    "viewportHeight": 600,
+    "viewportWidth": 800,
+    "video": false,
+    "integrationFolder": "test/e2e",
+    "testFiles": "**/*.e2e.js"
+  }
+

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/plugins/index.js

@@ -0,0 +1,36 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // enable coverage
+  require('@cypress/code-coverage/task')(on, config);
+  // instrument code
+  on(
+    'file:preprocessor',
+    require('@cypress/code-coverage/use-browserify-istanbul')
+  );
+  // fetch fixtures
+  on('task', {
+    getFixtures() {
+      return require('../../test/fixtures/index');
+    },
+  });
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config;
+};

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+import '@cypress/code-coverage/support';
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/test-sandbox.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cypress test sandbox</title>
+  </head>
+  <body> </body>
+</html>

package.json

@@ -28,10 +28,11 @@
     "format:watch": "onchange \"{*,src/**/*,test/**/*,.github/workflows/*}.+(js|yml)\" -- prettier --write {{changed}}",
     "lint": "eslint \"*.js\" \"src/**/*.js\" \"test/**/*.js\"",
     "start": "yarn compile:cjs && budo -l -d -o test/debug.js -- -t brfs",
-    "test": "yarn format:check && yarn lint && yarn test:unit && yarn test:types",
-    "test:coverage": "jest --coverage",
+    "test": "yarn format:check && yarn lint && yarn test:types && yarn test:unit && yarn test:e2e",
     "test:types": "tsc index.d.ts",
     "test:unit": "jest",
+    "test:e2e": "cypress run",
+    "test:e2e:dev": "cypress open",
     "prepare": "yarn build",
     "release": "yarn build && changeset publish"
   },
@@ -54,6 +55,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/preset-env": "^7.13.15",
     "@changesets/cli": "^2.16.0",
+    "@cypress/code-coverage": "^3.9.4",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
@@ -67,8 +69,10 @@
     "browserify": "^17.0.0",
     "budo": "^11.6.4",
     "cross-env": "^7.0.3",
+    "cypress": "^7.1.0",
     "eslint": "^7.24.0",
     "eslint-config-prettier": "^8.2.0",
+    "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "^2.22.1",
     "jest": "^26.6.3",
     "jest-watch-typeahead": "^0.6.2",

test/e2e/e2e.helpers.js

@@ -0,0 +1,21 @@
+export function setupTestWindow(done) {
+  cy.visit('./cypress/test-sandbox.html');
+  cy.window().then(done);
+}
+export function getFixtures(done) {
+  cy.task('getFixtures').then(done);
+}
+export function getIdsFromElementsArray(elements) {
+  return elements.map((el) => el.getAttribute('id'));
+}
+export function removeAllChildNodes(parent) {
+  while (parent.firstChild) {
+    parent.removeChild(parent.firstChild);
+  }
+}
+export function setupFixture(content) {
+  const container = document.createElement('div');
+  container.innerHTML = content;
+  document.body.append(container);
+  return { container };
+}