Add visual regression tests with Cypress

.travis.yml

@@ -1,8 +1,13 @@
 language: node_js
-cache: yarn
+cache:
+  yarn: true
+  directories:
+    - ~/.cache
 node_js:
-  - 8
   - node
+install:
+  - npx lerna bootstrap
+
 
 notifications:
   email:

fixtures/sample/.gitignore

@@ -0,0 +1,2 @@
+cypress/screenshots
+__diff_output__

fixtures/sample/cypress.json

@@ -0,0 +1,3 @@
+{
+  "video": false
+}

fixtures/sample/cypress/fixtures/example.json

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

fixtures/sample/cypress/integration/sample.spec.js

@@ -0,0 +1,43 @@
+function testSlides() {
+  // Keep moving right and snapshoting until the hash doesn't change
+  cy.hash().then(currentHash => {
+    cy.matchImageSnapshot(currentHash.replace(".", "-"));
+    cy.get("body")
+      .type("{rightarrow}")
+      .wait(300)
+      .hash()
+      .then(nextHash => {
+        if (currentHash !== nextHash) {
+          testSlides();
+        }
+      });
+  });
+}
+
+const url = "http://localhost:8080";
+
+describe("Sample Deck", function() {
+  it("shows the correct slides", function() {
+    cy.visit(url);
+    testSlides();
+  });
+
+  it("works in presenter mode", function() {
+    cy.visit(`${url}/?mode=presenter#9`).wait(300);
+    // cy.clock(new Date(2018).getTime());
+
+    // Hide clock
+    cy.get("button")
+      .contains("start")
+      .then(([button]) => {
+        button.parentElement.style.display = "none";
+      });
+
+    cy.matchImageSnapshot("presenter-9");
+  });
+
+  it("works in grid mode", function() {
+    cy.visit(`${url}/?mode=grid#0`).wait(300);
+    cy.matchImageSnapshot("grid");
+  });
+});

fixtures/sample/cypress/plugins/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// 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)
+
+const {
+  addMatchImageSnapshotPlugin
+} = require("cypress-image-snapshot/plugin");
+
+module.exports = (on, config) => {
+  addMatchImageSnapshotPlugin(on, config);
+};

fixtures/sample/cypress/support/commands.js

@@ -0,0 +1,29 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+import { addMatchImageSnapshotCommand } from "cypress-image-snapshot/command";
+
+addMatchImageSnapshotCommand();

fixtures/sample/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')

fixtures/sample/package.json

@@ -4,11 +4,20 @@
   "version": "0.5.3",
   "scripts": {
     "build": "mdx-deck build sample.mdx",
-    "start": "mdx-deck sample.mdx"
+    "start": "mdx-deck sample.mdx",
+    "cypress:run": "cypress run",
+    "cypress:update": "cypress run --env updateSnapshots=true",
+    "test-wrapper": "fail-to-pr cypress run",
+    "test": "start-server-and-test start http-get://localhost:8080 test-wrapper",
+    "update-snapshots": "start-server-and-test start http-get://localhost:8080 cypress:update"
   },
   "devDependencies": {
+    "cypress": "^3.1.3",
+    "cypress-image-snapshot": "^3.0.0",
+    "fail-to-pr": "^1.0.2",
     "mdx-deck": "^1.7.7",
     "mdx-deck-code-surfer": "^0.5.3",
-    "raw-loader": "^0.5.1"
+    "raw-loader": "^0.5.1",
+    "start-server-and-test": "^1.7.11"
   }
 }

fixtures/sample/sample.mdx

@@ -5,6 +5,7 @@ import nightOwl from "prism-react-renderer/themes/nightOwl"
 export { components } from "mdx-deck-code-surfer"
 export const theme = {
   ...dark,
+  font: 'Arial',
   codeSurfer: {
     ...nightOwl,
     showNumbers: false
@@ -13,16 +14,14 @@ export const theme = {
 
 ## Code Surfer
 
-# <🏄/>
-
 ---
 
 <CodeSurfer
   title="Lines"
   code={require("!raw-loader!./snippets/1.mdx")}
   steps={[
     { notes: "Use ⬆️ and ⬇️ keys" },
-    { lines: [6], notes: "Highlight a single line ⬇️" },
+    { lines: [6], notes: "Highlight not a single line ⬇️" },
     { lines: [5, 7, 8], notes: "... or multiple lines ➡️" }
   ]}
 />

package.json

@@ -15,9 +15,9 @@
     "build:watch": "lerna exec yarn build:watch --no-private --parallel",
     "start": "lerna exec yarn start --scope",
     "start:fixture": "run-p build:watch \"start {1}-fixture\" --",
-    "format": "prettier --write '**/*.{js,jsx,css,md}'",
-    "format:check": "prettier-check '**/*.{js,jsx,css,md}'",
-    "test": "run-p format:check test:all",
+    "format": "prettier --write '**/*.{js,jsx,css,md}' --ignore-path .gitignore",
+    "format:check": "prettier-check '**/*.{js,jsx,css,md}' --ignore-path .gitignore",
+    "test": "run-s format:check build test:all",
     "test:all": "lerna run test",
     "build:website": "lerna exec yarn build --scope website",
     "publish:website": "run-s build build:website"