feat: Onboard cypress with component test runner (#34)

* feat: Onboard cypress with component test runner

* Backfill on missing gestures tests. Was not able to get panning to work since triggering mousedown and mousemove are not propagating the event to the gesture handler.

* Add styles to rendered charts

Co-authored-by: Norbert Nader <nnader@amazon.com>

.github/workflows/run-tests.yml

@@ -16,7 +16,31 @@ jobs:
         run: |
           yarn install
           yarn build
+          ./packages/components/node_modules/cypress/bin/cypress install
 
       - name: Run unit tests
         run: yarn test
 
+      - name: cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          command: yarn test:cypress-ct
+          working-directory: packages/components
+      # after the test run completes
+      # store videos and any screenshots
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: packages/components/cypress/screenshots
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-videos
+          path: packages/components/cypress/videos
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-snapshots
+          path: packages/components/cypress/snapshots
+

.gitignore

@@ -37,7 +37,8 @@ UserInterfaceState.xcuserstate
 __diff_output__
 
 # Cypress screenshots
-cypress/screenshots
+**/cypress/screenshots
+**/cypress/videos
 
 # Local development hard-coded credentials for use with the AWS SDK.
 creds.json

packages/components/cypress.json

@@ -0,0 +1,12 @@
+{
+  "component": {
+    "videoUploadOnPasses": false,
+    "video": true,
+    "viewportWidth": 400,
+    "viewportHeight": 500,
+    "watchForFileChanges": true,
+    "defaultCommandTimeout": 8000,
+    "componentFolder": "src",
+    "testFiles": "**/*.spec.component.ts"
+  }
+}

packages/components/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"
+}

packages/components/cypress/plugins/index.js

@@ -0,0 +1,16 @@
+const { startDevServer } = require('@cypress/webpack-dev-server')
+const webpackConfig = require('@vue/cli-service/webpack.config.js')
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+
+module.exports = (on, config) => {
+  on('dev-server:start', options =>
+    startDevServer({
+      options,
+      webpackConfig
+    })
+  )
+
+  addMatchImageSnapshotPlugin(on, config);
+
+  return config
+}

packages/components/cypress/support/chartCommands.ts

@@ -0,0 +1,15 @@
+export const addChartCommands = () => {
+  Cypress.Commands.add(
+    'matchImageSnapshotOnCI',
+    { prevSubject: 'optional' },
+    (subject, nameOrOptions?: string | Object) => {
+      if (!Cypress.env('disableSnapshotTests')) {
+        if (subject) {
+          cy.wrap(subject).matchImageSnapshot(nameOrOptions);
+        } else {
+          cy.matchImageSnapshot(nameOrOptions);
+        }
+      }
+    }
+  );
+};

packages/components/cypress/support/commands.js

@@ -0,0 +1,9 @@
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+import { addChartCommands } from './chartCommands';
+
+addChartCommands();
+
+addMatchImageSnapshotCommand({
+  failureThreshold: 0.025,
+  failureThresholdType: 'percent',
+});

packages/components/cypress/support/index.d.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable<Subject> {
+    /**
+     * Custom command to wait until a chart is done with it's initial rendering
+     */
+    matchImageSnapshotOnCI(nameOrOptions?: string | Object): void;
+  }
+}

packages/components/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'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

packages/components/cypress/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": "../node_modules",
+    "target": "es5",
+    "lib": ["es2019", "dom"],
+    "types": ["cypress", "@types/cypress-image-snapshot"]
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}

packages/components/package.json

@@ -18,27 +18,38 @@
     "build": "stencil build",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec",
-    "test.watch": "stencil test --spec --watchAll"
+    "test.watch": "stencil test --spec --watchAll",
+    "test:cypress-ct": "cypress run-ct",
+    "test:cypress-ct-dev": "cypress open-ct --env disableSnapshotTests=true"
   },
   "peerDependencies": {
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0"
   },
   "dependencies": {
-    "@iot-app-kit/core": "^0.0.1",
-    "@iot-app-kit/related-table": "^1.0.0",
     "@awsui/collection-hooks": "^1.0.0",
     "@awsui/components-react": "^3.0.0",
     "@awsui/design-tokens": "^3.0.0",
+    "@iot-app-kit/core": "^0.0.1",
+    "@iot-app-kit/related-table": "^1.0.0",
     "@stencil/core": "^2.7.0",
     "@synchro-charts/core": "^1.0.8",
     "styled-components": "^5.3.0"
   },
   "devDependencies": {
+    "@cypress/vue": "^3.1.0",
+    "@cypress/webpack-dev-server": "^1.8.0",
     "@rollup/plugin-replace": "^3.0.0",
     "@stencil/router": "^1.0.1",
+    "@types/cypress-image-snapshot": "^3.1.6",
     "@types/react": ">=16.9.0",
-    "@types/react-dom": ">=16.9.0"
+    "@types/react-dom": ">=16.9.0",
+    "@vue/cli-plugin-typescript": "^4.5.15",
+    "@vue/cli-service": "^4.5.15",
+    "@vue/compiler-dom": "^3.2.26",
+    "cypress": "7.7.0",
+    "cypress-image-snapshot": "^4.0.1",
+    "vue": "^3.2.26"
   },
   "license": "Apache-2.0"
 }

packages/components/src/components/iot-connector/iot-connector.spec.component.ts

@@ -0,0 +1,28 @@
+import { renderChart, testChartContainerClassNameSelector } from '@iot-app-kit/components/src/testing/renderChart';
+import { SECOND_IN_MS } from '@iot-app-kit/core/src/common/time';
+
+describe('handles gestures', () => {
+  it('zooms in and out', () => {
+    renderChart();
+
+    cy.wait(SECOND_IN_MS * 2);
+
+    cy.get(testChartContainerClassNameSelector).dblclick();
+
+    cy.wait(SECOND_IN_MS * 2);
+
+    cy.matchImageSnapshotOnCI('zooms in');
+
+    cy.get(testChartContainerClassNameSelector).dblclick({ shiftKey: true });
+
+    cy.wait(SECOND_IN_MS * 2);
+
+    cy.get(testChartContainerClassNameSelector).dblclick({ shiftKey: true });
+
+    cy.wait(SECOND_IN_MS * 2);
+
+    cy.matchImageSnapshotOnCI('zooms out');
+  });
+
+  // TODO: Panning - can not get the chart to pan with cypress trigger https://docs.cypress.io/api/commands/trigger#Usage
+});

packages/components/src/components/iot-connector/iot-connector.spec.ts

@@ -101,15 +101,3 @@ it('updates with new query', async () => {
     ],
   });
 });
-
-//TODO: Backfill these tests.
-// Onboard cypress and try the component test runner https://www.cypress.io/blog/2021/04/06/introducing-the-cypress-component-test-runner/
-describe('handles gestures', () => {
-  it('panning', () => {
-    //TODO: Make sure data is requested for new viewport range when panning back in time
-  });
-
-  it('zooming', () => {
-    //TODO: Make sure correct resolution is displayed for selected viewport range based on resolution mapping
-  });
-});