feat: use happo instead of Percy for e2e snapshots

bcgov · Jul 2, 2020 · a244a00 · a244a00
1 parent 15d8e90
commit a244a00
Show file tree

Hide file tree

Showing 10 changed files with 445 additions and 587 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -445,44 +445,6 @@ jobs:
             make test PSQL="psql -h localhost" CI_NO_PIPELINE=true
             popd
 
-  e2e:
-    machine:
-      image: ubuntu-1604:201903-01
-    working_directory: ~/cas-ciip-portal
-    steps:
-      - attach_workspace:
-          at: ~/
-      - run:
-          name: "Checkout Submodules"
-          command: |
-            git submodule update --init
-      - run:
-          name: start postgres
-          command: |
-            source ~/.bashrc
-            pg_ctl start
-            createdb `whoami`
-      - run:
-          name: deploy schemas and data
-          command: |
-            source ~/.bashrc
-            ./.bin/deploy-data.sh -dev
-      - run:
-          name: Create Mailhog server via docker image
-          command: docker run -d -p 1025:1025 -p 8025:8025 mailhog/mailhog
-      - run:
-          name: run end-to-end tests with cypress
-          environment:
-            SMTP_CONNECTION_STRING: smtp://@localhost:1025
-            SENDER_EMAIL: BCCAS <example@cas.com>
-            ADMIN_EMAIL: GHG Regulator <GHGRegulator@gov.bc.ca>
-          command: |
-            source ~/.asdf/asdf.sh
-            pushd app
-            NO_PDF=true NO_MATHJAX=true yarn start & yarn wait-on http://localhost:3004
-            yarn test:e2e
-            popd
-
   e2e-snapshots:
     machine:
       image: ubuntu-1604:201903-01
@@ -509,7 +471,7 @@ jobs:
           name: Create Mailhog server via docker image
           command: docker run -d -p 1025:1025 -p 8025:8025 mailhog/mailhog
       - run:
-          name: run end-to-end tests with percy and cypress
+          name: run end-to-end tests with happo and cypress
           environment:
             SMTP_CONNECTION_STRING: smtp://@localhost:1025
             SENDER_EMAIL: BCCAS <example@cas.com>
@@ -576,22 +538,9 @@ workflows:
       - deploy-test-data:
           requires:
             - tools
-      - e2e:
-          requires:
-            - compile
-          filters:
-            branches:
-              ignore:
-                - develop
-                - master
       - e2e-snapshots:
           requires:
             - compile
-          filters:
-            branches:
-              only:
-                - develop
-                - master
       - sqitch-plan-ends-with-tag:
           filters:
             branches:

diff --git a/app/.happo.js b/app/.happo.js
@@ -0,0 +1,11 @@
+const { RemoteBrowserTarget } = require('happo.io');
+
+module.exports = {
+  apiKey: process.env.HAPPO_API_KEY,
+  apiSecret: process.env.HAPPO_API_SECRET,
+  targets: {
+    chrome: new RemoteBrowserTarget('chrome', {
+      viewport: '1024x768',
+    }),
+  },
+};
diff --git a/app/cypress/integration/analyst-diffing.spec.js b/app/cypress/integration/analyst-diffing.spec.js
@@ -43,6 +43,6 @@ describe('When reviewing a submitted application as an analyst', () => {
     cy.get('.fuel').get('.diffTo').contains('10');
     cy.get('.production').get('.diffTo').contains('800');
     // Take snapshot
-    cy.percySnapshot();
+    // cy.percySnapshot();
   });
 });
diff --git a/app/cypress/integration/application-form-validation.spec.js b/app/cypress/integration/application-form-validation.spec.js
@@ -88,7 +88,7 @@ describe('When reviewing a submitted application as an analyst', () => {
       '#root_operationalRepresentative_mailingAddress_postalCode +div .error-detail'
     ).contains('Format should be A1A 1A1');
 
-    cy.percySnapshot('admin');
+    // Cy.percySnapshot('admin');
 
     // Fix invalid data
     cy.get('#root_operationalRepresentative_mailingAddress_postalCode')
@@ -110,7 +110,7 @@ describe('When reviewing a submitted application as an analyst', () => {
     cy.get(
       '#root_sourceTypes_0_gases_0_annualEmission +div .error-detail'
     ).contains('is a required property');
-    cy.percySnapshot('Emissions form');
+    // Cy.percySnapshot('Emissions form');
 
     // Fix invalid data
     cy.get('#root_sourceTypes_0_gases_0_annualEmission').type('42');
@@ -132,7 +132,7 @@ describe('When reviewing a submitted application as an analyst', () => {
     cy.get('#root_0_emissionCategoryRowId +div .error-detail').contains(
       'is a required property'
     );
-    cy.percySnapshot('fuel');
+    // Cy.percySnapshot('fuel');
 
     // Fix invalid data
     cy.get('#root_0_fuelRowId').type('Diesel');
@@ -159,7 +159,7 @@ describe('When reviewing a submitted application as an analyst', () => {
     cy.get('#root_0_productEmissions +div .error-detail').contains(
       'is a required property'
     );
-    cy.percySnapshot('production');
+    // Cy.percySnapshot('production');
 
     // Fix invalid data
     cy.get('#root_0_productRowId').clear().type('Aluminum');

diff --git a/app/cypress/integration/application-production.spec.js b/app/cypress/integration/application-production.spec.js
@@ -32,7 +32,7 @@ describe('The production tab', () => {
     cy.get('#root_0_productUnits').invoke('val').should('contain', 'tonnes');
     cy.get('#root_0_productAmount');
     cy.get('#root_0_productEmissions');
-    cy.percySnapshot();
+    // Cy.percySnapshot();
   });
 
   it('Should not show amount, units or emissions when requiresProductAmount and requiresEmissionAllocation are false', () => {
@@ -42,6 +42,6 @@ describe('The production tab', () => {
     cy.get('#root_0_productUnits').should('not.exist');
     cy.get('#root_0_productAmount').should('not.exist');
     cy.get('#root_0_productEmissions').should('not.exist');
-    cy.percySnapshot();
+    // Cy.percySnapshot();
   });
 });
diff --git a/app/cypress/integration/index.spec.js b/app/cypress/integration/index.spec.js
@@ -4,15 +4,10 @@ describe('The index page', () => {
     cy.get('#page-content');
     cy.get('header').contains('Register');
     cy.get('header').contains('Login');
+    cy.get('header').happoScreenshot({component: 'Header'});
     cy.get('#page-content').contains('Register and Apply');
     cy.get('#page-content').contains(
       'Already have an account? Click here to login.'
     );
   });
-
-  it('matches the snapshot', () => {
-    cy.visit('/');
-    cy.get('#page-content');
-    cy.percySnapshot();
-  });
 });
diff --git a/app/cypress/plugins/index.js b/app/cypress/plugins/index.js
@@ -1,6 +1,5 @@
-const percyHealthCheck = require('@percy/cypress/task');
+const happoTask = require('happo-cypress/task');
 
-module.exports = (on, _config) => {
-  on('task', percyHealthCheck);
-  require('cypress-plugin-retries/lib/plugin')(on);
+module.exports = (on) => {
+  on('task', happoTask);
 };
diff --git a/app/cypress/support/commands.js b/app/cypress/support/commands.js
@@ -1,4 +1,4 @@
-import '@percy/cypress';
+import 'happo-cypress';
 
 Cypress.Commands.add('login', (username, password) => {
   // Open the login page, fill in the form with username and password and submit.

diff --git a/app/package.json b/app/package.json
@@ -6,7 +6,7 @@
     "pretest": "npm run build:relay",
     "test": "jest",
     "pretest:e2e-snapshots": "node cypress/support/listAuthenticatedPages.js",
-    "test:e2e-snapshots": "percy exec -- cypress run",
+    "test:e2e-snapshots": "yarn happo-cypress -- -- cypress run",
     "pretest:e2e": "node cypress/support/listAuthenticatedPages.js",
     "test:e2e": "cypress run",
     "precypress": "node cypress/support/listAuthenticatedPages.js",
@@ -175,7 +175,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.3",
-    "@percy/cypress": "^2.3.1",
     "@storybook/addon-a11y": "^5.3.19",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-cssresources": "^5.3.19",
@@ -220,6 +219,8 @@
     "eslint-plugin-shopify": "^35.0.0",
     "graphql-query-test-mock": "^0.12.0",
     "graphql-tag-pluck": "^0.8.5",
+    "happo-cypress": "^1.6.1",
+    "happo.io": "^5.6.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^25.5.4",
     "jest-canvas-mock": "^2.1.2",