Add Happo integration via the happo-cypress library

This commit was prepared by following the README instructions from
https://github.com/happo/happo-cypress

The only thing I added to make things work that isn't recorded in the
patch is an .env file consisting of

HAPPO_API_KEY=<redacted>
HAPPO_API_SECRET=<redacted>

To get these happo tokens, I first signed up for a free trial account at
https://happo.io/signup. I then copied account tokens from
https://happo.io/account and entered them in the .env file.

Without the tokens, happo will not run.

.happo.js

@@ -0,0 +1,20 @@
+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',
+    }),
+    'chrome-mobile': new RemoteBrowserTarget('chrome', {
+      viewport: '375x768',
+    }),
+    edge: new RemoteBrowserTarget('edge', {
+      viewport: '1024x768',
+    }),
+    firefox: new RemoteBrowserTarget('firefox', {
+      viewport: '1024x768',
+    }),
+  },
+};

cypress/integration/app_spec.js

@@ -57,9 +57,14 @@ describe('TodoMVC - React', function() {
   it('adds 2 todos', function() {
     cy.get('.new-todo')
       .type('learn testing{enter}')
-      .type('be cool{enter}');
+      .type('be cool{enter}')
+      .happoScreenshot({ component: 'New todo' });
 
     cy.get('.todo-list li').should('have.length', 2);
+    cy.get('body').happoScreenshot({
+      component: 'App',
+      variant: 'two items added',
+    });
   });
 
   context('No Todos', function() {
@@ -70,6 +75,10 @@ describe('TodoMVC - React', function() {
       // so as to make our testing intentions as clear as possible.
       //
       // http://on.cypress.io/get
+      cy.get('body').happoScreenshot({
+        component: 'App',
+        variant: 'empty',
+      });
       cy.get('.todo-list li').should('not.exist');
       cy.get('.main').should('not.exist');
       cy.get('.footer').should('not.exist');
@@ -108,6 +117,11 @@ describe('TodoMVC - React', function() {
       cy.get('@todos')
         .eq(2)
         .should('have.class', 'completed');
+
+      cy.get('body').happoScreenshot({
+        component: 'App',
+        variant: 'all items completed',
+      });
     });
 
     it('should allow me to clear the complete state of all items', function() {
@@ -127,6 +141,11 @@ describe('TodoMVC - React', function() {
       cy.get('@todos')
         .eq(2)
         .should('not.have.class', 'completed');
+
+      cy.get('body').happoScreenshot({
+        component: 'App',
+        variant: 'all items uncompleted',
+      });
     });
   });
 
@@ -152,15 +171,24 @@ describe('TodoMVC - React', function() {
       cy.get('@secondTodo')
         .find('label')
         .should('not.be.visible');
+
+      cy.get('body').happoScreenshot({
+        component: 'App',
+        variant: 'editing item',
+      });
     });
   });
 
   context('Counter', function() {
     it('should display the current number of todo items', function() {
       cy.createTodo(TODO_ITEM_ONE);
-      cy.get('.todo-count').contains('1 item left');
+      cy.get('.todo-count')
+        .contains('1 item left')
+        .happoScreenshot({ component: 'Counter', variant: '1 item left' });
       cy.createTodo(TODO_ITEM_TWO);
-      cy.get('.todo-count').contains('2 items left');
+      cy.get('.todo-count')
+        .contains('2 items left')
+        .happoScreenshot({ component: 'Counter', variant: '2 items left' });
     });
   });
 });

cypress/plugins/index.js

@@ -10,10 +10,8 @@
 
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
+const happoTask = require('happo-cypress/task');
 
-/* eslint-disable no-unused-vars */
 module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}
-/* eslint-enable no-unused-vars */
+  on('task', happoTask);
+};

cypress/support/commands.js

@@ -10,6 +10,8 @@
 // You can read more about custom commands here:
 // https://on.cypress.io/commands
 // ***********************************************
+//
+import 'happo-cypress';
 
 Cypress.Commands.add('createDefaultTodos', function () {