test: percy visual testing (#1053)

* test: percy visual testing init * Try PR checks with custom command * Only run percy visual tests for PWA on merge for now
OHIF · Oct 15, 2019 · 8a7706b · 8a7706b
1 parent c217b8b
commit 8a7706b
Show file tree

Hide file tree

Showing 11 changed files with 521 additions and 51 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -344,6 +344,7 @@ workflows:
           build: npx cross-env QUICK_BUILD=true yarn run build
           start: yarn run test:e2e:serve
           wait-on: 'http://localhost:3000'
+          command: 'yarn run test:e2e:ci'
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
           post-steps:

diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+PERCY_TOKEN=<your token here>
diff --git a/.gitignore b/.gitignore
@@ -21,6 +21,7 @@ npm-debug.log
 package-lock.json
 yarn-error.log
 .DS_Store
+.env
 
 # Common Example Data Directories
 sampledata/

diff --git a/.webpack/webpack.base.js b/.webpack/webpack.base.js
@@ -1,3 +1,6 @@
+// ~~ ENV
+const dotenv = require('dotenv');
+//
 const path = require('path');
 const webpack = require('webpack');
 const PACKAGE = require('../platform/viewer/package.json');
@@ -12,6 +15,9 @@ const NODE_ENV = process.env.NODE_ENV;
 const QUICK_BUILD = process.env.QUICK_BUILD;
 const BUILD_NUM = process.env.CIRCLE_BUILD_NUM || '0';
 
+//
+dotenv.config();
+
 module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
   if (!process.env.NODE_ENV) {
     throw new Error('process.env.NODE_ENV not set');

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "test:unit": "jest --collectCoverage",
     "test:unit:ci": "lerna run test:unit:ci --parallel --stream",
     "test:e2e": "lerna run test:e2e --stream",
+    "test:e2e:ci": "lerna run test:e2e:ci --stream",
     "test:e2e:dist": "lerna run test:e2e:dist --stream",
     "test:e2e:serve": "lerna run test:e2e:serve --stream",
     "see-changed": "lerna changed",
@@ -49,6 +50,7 @@
     "@babel/plugin-transform-runtime": "^7.5.0",
     "@babel/preset-env": "^7.5.0",
     "@babel/preset-react": "^7.0.0",
+    "@percy/cypress": "^2.2.0",
     "babel-eslint": "9.x",
     "babel-loader": "^8.0.6",
     "babel-plugin-inline-react-svg": "1.1.0",
@@ -57,6 +59,7 @@
     "copy-webpack-plugin": "^5.0.3",
     "cross-env": "^5.2.0",
     "css-loader": "^3.2.0",
+    "dotenv": "^8.1.0",
     "eslint": "5.16.0",
     "eslint-config-react-app": "^4.0.1",
     "eslint-plugin-flowtype": "2.x",

diff --git a/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js
@@ -5,6 +5,8 @@ describe('OHIFStandaloneViewer', () => {
 
   it('loads route with at least 2 rows', () => {
     cy.screenshot();
+    cy.percySnapshot();
+
     cy.get('#studyListData tr')
       .its('length')
       .should('be.gt', 2);

diff --git a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js
@@ -12,6 +12,8 @@ describe('OHIF Study Viewer Page', () => {
 
   it('checks if series thumbnails are being displayed', () => {
     cy.screenshot();
+    cy.percySnapshot();
+
     cy.get('.ThumbnailEntryContainer')
       .its('length')
       .should('be.gt', 1);

diff --git a/platform/viewer/cypress/plugins/index.js b/platform/viewer/cypress/plugins/index.js
@@ -7,10 +7,10 @@
 // You can read more here:
 // https://on.cypress.io/plugins-guide
 // ***********************************************************
+let percyHealthCheck = require('@percy/cypress/task');
 
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
-
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
@@ -24,4 +24,6 @@ module.exports = (on, config) => {
       return args;
     }
   });
+
+  on('task', percyHealthCheck);
 };
diff --git a/platform/viewer/cypress/support/commands.js b/platform/viewer/cypress/support/commands.js
@@ -1,3 +1,4 @@
+import '@percy/cypress';
 import { DragSimulator } from '../helpers/DragSimulator.js';
 import {
   initCornerstoneToolsAliases,

diff --git a/platform/viewer/package.json b/platform/viewer/package.json
@@ -27,7 +27,7 @@
     "dev:viewer": "yarn run dev",
     "start": "yarn run dev",
     "test:e2e": "cypress open",
-    "test:e2e:ci": "cypress run",
+    "test:e2e:ci": "percy exec -- cypress run",
     "test:e2e:dist": "start-server-and-test test:e2e:serve http://localhost:3000 test:e2e:ci",
     "test:e2e:serve": "serve -n -l 3000 -s dist",
     "test:unit": "jest --watchAll",