From 6994b77289f89bf2d73cd6c0e505e146799cc1f6 Mon Sep 17 00:00:00 2001
From: Christopher Johnson <chjohnson39@gmail.com>
Date: Fri, 14 Dec 2018 14:59:57 +0100
Subject: [PATCH] adds cypress testing closes #85

---
 .gitignore                                    |  1 +
 minimal_redux_poc/.eslintignore               |  1 +
 minimal_redux_poc/.gitignore                  |  3 ++-
 .../integration/mirador/basic.test.js         | 21 ----------------
 .../config_updating_from_instance.test.js     | 17 -------------
 .../mirador/window_actions.test.js            | 15 -----------
 .../__tests__/integration/vanilla-js.test.js  | 17 -------------
 .../integration/vanilla-js/README.md          |  8 ------
 minimal_redux_poc/cypress.json                |  1 +
 .../cypress/fixtures/example.json             |  5 ++++
 .../cypress/integration/mirador-base.spec.js  | 15 +++++++++++
 .../integration/mirador-config.spec.js        | 12 +++++++++
 .../cypress/integration/vanilla.spec.js       | 13 ++++++++++
 minimal_redux_poc/cypress/plugins/index.js    | 17 +++++++++++++
 .../public}/mirador/index.html                |  0
 .../public/vanilla}/index.html                |  0
 minimal_redux_poc/cypress/support/commands.js | 25 +++++++++++++++++++
 minimal_redux_poc/cypress/support/index.js    | 20 +++++++++++++++
 minimal_redux_poc/jest-puppeteer.config.js    |  9 -------
 minimal_redux_poc/package.json                | 11 +++++---
 20 files changed, 120 insertions(+), 91 deletions(-)
 delete mode 100644 minimal_redux_poc/__tests__/integration/mirador/basic.test.js
 delete mode 100644 minimal_redux_poc/__tests__/integration/mirador/config_updating_from_instance.test.js
 delete mode 100644 minimal_redux_poc/__tests__/integration/mirador/window_actions.test.js
 delete mode 100644 minimal_redux_poc/__tests__/integration/vanilla-js.test.js
 delete mode 100644 minimal_redux_poc/__tests__/integration/vanilla-js/README.md
 create mode 100644 minimal_redux_poc/cypress.json
 create mode 100644 minimal_redux_poc/cypress/fixtures/example.json
 create mode 100644 minimal_redux_poc/cypress/integration/mirador-base.spec.js
 create mode 100644 minimal_redux_poc/cypress/integration/mirador-config.spec.js
 create mode 100644 minimal_redux_poc/cypress/integration/vanilla.spec.js
 create mode 100644 minimal_redux_poc/cypress/plugins/index.js
 rename minimal_redux_poc/{__tests__/integration => cypress/public}/mirador/index.html (100%)
 rename minimal_redux_poc/{__tests__/integration/vanilla-js => cypress/public/vanilla}/index.html (100%)
 create mode 100644 minimal_redux_poc/cypress/support/commands.js
 create mode 100644 minimal_redux_poc/cypress/support/index.js
 delete mode 100644 minimal_redux_poc/jest-puppeteer.config.js

diff --git a/.gitignore b/.gitignore
index 646ac51..46ad1e5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
 node_modules/
+.idea
diff --git a/minimal_redux_poc/.eslintignore b/minimal_redux_poc/.eslintignore
index 0cdbd50..6166930 100644
--- a/minimal_redux_poc/.eslintignore
+++ b/minimal_redux_poc/.eslintignore
@@ -1,3 +1,4 @@
 dist/
 config/
 coverage/
+
diff --git a/minimal_redux_poc/.gitignore b/minimal_redux_poc/.gitignore
index a7e5fab..8b9706d 100644
--- a/minimal_redux_poc/.gitignore
+++ b/minimal_redux_poc/.gitignore
@@ -1,3 +1,4 @@
 dist/
 coverage/
-
+videos/
+screenshots/
diff --git a/minimal_redux_poc/__tests__/integration/mirador/basic.test.js b/minimal_redux_poc/__tests__/integration/mirador/basic.test.js
deleted file mode 100644
index 421aa78..0000000
--- a/minimal_redux_poc/__tests__/integration/mirador/basic.test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-describe('Basic end to end Mirador', () => {
-  beforeAll(async () => {
-    await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
-  });
-  it('has the correct page title', async () => {
-    const title = await page.title();
-    expect(title).toBe('Mirador');
-  });
-  it('loads a manifest and displays it', async () => {
-    await expect(page).toFill('#manifestURL', 'https://purl.stanford.edu/sn904cj3429/iiif/manifest');
-    await expect(page).toClick('#fetchBtn');
-    // TODO: Refactor the app so we get rid of the wait
-    await page.waitFor(1000);
-    await expect(page).toMatchElement('li', { text: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest' });
-    await expect(page).toMatchElement(
-      'h3',
-      "Peter's San Francisco Locator. The Birds-Eye-View Map of the Exposition City. Published by Locator Publishing Co",
-    );
-    await expect(page).toMatchElement('div', /Color/);
-  });
-});
diff --git a/minimal_redux_poc/__tests__/integration/mirador/config_updating_from_instance.test.js b/minimal_redux_poc/__tests__/integration/mirador/config_updating_from_instance.test.js
deleted file mode 100644
index 6190e90..0000000
--- a/minimal_redux_poc/__tests__/integration/mirador/config_updating_from_instance.test.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/* global miradorInstance */
-
-describe('Config updating from instance', () => {
-  beforeAll(async () => {
-    await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
-  });
-  it('can modify the config via api', async () => {
-    await page.evaluate(() => {
-      const a = miradorInstance.actions.updateConfig({ foo: 'bat' });
-      miradorInstance.store.dispatch(a);
-    });
-    const config = await page.evaluate(() => (
-      miradorInstance.store.getState().config
-    ));
-    await expect(config.foo).toBe('bat');
-  });
-});
diff --git a/minimal_redux_poc/__tests__/integration/mirador/window_actions.test.js b/minimal_redux_poc/__tests__/integration/mirador/window_actions.test.js
deleted file mode 100644
index e16d8b4..0000000
--- a/minimal_redux_poc/__tests__/integration/mirador/window_actions.test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-describe('Window actions', () => {
-  beforeAll(async () => {
-    await page.goto('http://127.0.0.1:4488/__tests__/integration/mirador/');
-  });
-  it('opens a window and closes it', async () => {
-    await expect(page).toFill('#manifestURL', 'https://purl.stanford.edu/sn904cj3429/iiif/manifest');
-    await expect(page).toClick('#fetchBtn');
-    // TODO: Refactor the app so we get rid of the wait
-    await page.waitFor(1000);
-    await expect(page).toClick('li button');
-    await expect(page).toMatchElement('.mirador-window');
-    await expect(page).toClick('.mirador-window-close');
-    await expect(page).not.toMatchElement('.mirador-window');
-  });
-});
diff --git a/minimal_redux_poc/__tests__/integration/vanilla-js.test.js b/minimal_redux_poc/__tests__/integration/vanilla-js.test.js
deleted file mode 100644
index e74fd04..0000000
--- a/minimal_redux_poc/__tests__/integration/vanilla-js.test.js
+++ /dev/null
@@ -1,17 +0,0 @@
-describe('Plain JavaScript example', () => {
-  beforeAll(async () => {
-    await page.goto('http://127.0.0.1:4488/__tests__/integration/vanilla-js/');
-  });
-  it('has the correct page title', async () => {
-    const title = await page.title();
-    expect(title).toBe('Examples');
-  });
-  it('loads a manifest and displays it', async () => {
-    await expect(page).toFill('#manifestURL', 'https://purl.stanford.edu/sn904cj3429/iiif/manifest');
-    await expect(page).toClick('#fetchBtn');
-    // TODO: Refactor the app so we get rid of the wait
-    await page.waitFor(1000);
-    const manifest = await page.$eval('#exampleManifest', e => e.innerHTML);
-    await expect(manifest).toMatch(/http:\/\/iiif\.io\/api\/presentation\/2\/context\.json/);
-  });
-});
diff --git a/minimal_redux_poc/__tests__/integration/vanilla-js/README.md b/minimal_redux_poc/__tests__/integration/vanilla-js/README.md
deleted file mode 100644
index abe90a0..0000000
--- a/minimal_redux_poc/__tests__/integration/vanilla-js/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-## Notes
-To load external manifests, you will need to run the example pages from a serve. One easy way to do this is to run PythonHTTPServer:
-`python -m SimpleHTTPServer`
-
-To inspect the Mirador 3 prototype in the web console with (code completion), you can refer to it as:
-`m3core`
-
-This name is found in the `minimal_redux_poc/webpack.config.js` as the value of the `library` property.
diff --git a/minimal_redux_poc/cypress.json b/minimal_redux_poc/cypress.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/minimal_redux_poc/cypress.json
@@ -0,0 +1 @@
+{}
diff --git a/minimal_redux_poc/cypress/fixtures/example.json b/minimal_redux_poc/cypress/fixtures/example.json
new file mode 100644
index 0000000..da18d93
--- /dev/null
+++ b/minimal_redux_poc/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"
+}
\ No newline at end of file
diff --git a/minimal_redux_poc/cypress/integration/mirador-base.spec.js b/minimal_redux_poc/cypress/integration/mirador-base.spec.js
new file mode 100644
index 0000000..a7ae09f
--- /dev/null
+++ b/minimal_redux_poc/cypress/integration/mirador-base.spec.js
@@ -0,0 +1,15 @@
+/* global cy */
+describe('Mirador Base', () => {
+  it('Visits Mirador Base', () => {
+    cy.visit('http://localhost:4444/cypress/public/mirador/');
+    cy.get('title').should('contain', 'Mirador');
+    cy.get('#manifestURL').type('https://purl.stanford.edu/sn904cj3429/iiif/manifest');
+    cy.get('#fetchBtn').click();
+    cy.get('li').should('contain', 'https://purl.stanford.edu/sn904cj3429/iiif/manifest');
+    cy.get('h3').should('contain', 'Peter\'s San Francisco Locator. The Birds-Eye-View Map of the Exposition City. Published by Locator Publishing Co');
+    cy.get('li>button').click();
+    cy.get('.mirador-window>img').should('have.attr', 'src', 'https://stacks.stanford.edu/image/iiif/sn904cj3429%2F12027000/full/!400,400/0/default.jpg');
+    cy.get('.mirador-window-close').click();
+    cy.get('mirador-window').should('not.exist');
+  });
+});
diff --git a/minimal_redux_poc/cypress/integration/mirador-config.spec.js b/minimal_redux_poc/cypress/integration/mirador-config.spec.js
new file mode 100644
index 0000000..04e46f3
--- /dev/null
+++ b/minimal_redux_poc/cypress/integration/mirador-config.spec.js
@@ -0,0 +1,12 @@
+/* global cy */
+describe('Config updating from instance', () => {
+  it('can modify the config via api', () => {
+    cy.visit('http://localhost:4444/cypress/public/mirador/');
+    cy.window().then((win) => {
+      const a = win.miradorInstance.actions.updateConfig({ foo: 'bat' });
+      win.miradorInstance.store.dispatch(a);
+      const configFromState = win.miradorInstance.store.getState().config;
+      expect(configFromState.foo).to.equal('bat');
+    });
+  });
+});
diff --git a/minimal_redux_poc/cypress/integration/vanilla.spec.js b/minimal_redux_poc/cypress/integration/vanilla.spec.js
new file mode 100644
index 0000000..3a05ed0
--- /dev/null
+++ b/minimal_redux_poc/cypress/integration/vanilla.spec.js
@@ -0,0 +1,13 @@
+/* global cy */
+describe('Plain JavaScript example', () => {
+  it('has the correct page title', () => {
+    cy.visit('http://localhost:4444/cypress/public/vanilla/');
+    cy.get('title').should('contain', 'Examples');
+  });
+  it('loads a manifest and displays it', () => {
+    cy.visit('http://localhost:4444/cypress/public/vanilla/');
+    cy.get('#manifestURL').type('https://purl.stanford.edu/sn904cj3429/iiif/manifest');
+    cy.get('#fetchBtn').click();
+    cy.get('#exampleManifest').should('contain', 'http://iiif.io/api/presentation/2/context.json');
+  });
+});
diff --git a/minimal_redux_poc/cypress/plugins/index.js b/minimal_redux_poc/cypress/plugins/index.js
new file mode 100644
index 0000000..dffed25
--- /dev/null
+++ b/minimal_redux_poc/cypress/plugins/index.js
@@ -0,0 +1,17 @@
+// ***********************************************************
+// 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)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};
diff --git a/minimal_redux_poc/__tests__/integration/mirador/index.html b/minimal_redux_poc/cypress/public/mirador/index.html
similarity index 100%
rename from minimal_redux_poc/__tests__/integration/mirador/index.html
rename to minimal_redux_poc/cypress/public/mirador/index.html
diff --git a/minimal_redux_poc/__tests__/integration/vanilla-js/index.html b/minimal_redux_poc/cypress/public/vanilla/index.html
similarity index 100%
rename from minimal_redux_poc/__tests__/integration/vanilla-js/index.html
rename to minimal_redux_poc/cypress/public/vanilla/index.html
diff --git a/minimal_redux_poc/cypress/support/commands.js b/minimal_redux_poc/cypress/support/commands.js
new file mode 100644
index 0000000..c1f5a77
--- /dev/null
+++ b/minimal_redux_poc/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// 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) => { ... })
diff --git a/minimal_redux_poc/cypress/support/index.js b/minimal_redux_poc/cypress/support/index.js
new file mode 100644
index 0000000..37a498f
--- /dev/null
+++ b/minimal_redux_poc/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')
diff --git a/minimal_redux_poc/jest-puppeteer.config.js b/minimal_redux_poc/jest-puppeteer.config.js
deleted file mode 100644
index e8fa2f0..0000000
--- a/minimal_redux_poc/jest-puppeteer.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-module.exports = {
-  launch: {
-    headless: process.env.CI === 'true',
-  },
-  server: {
-    command: 'npm run server -- -p 4488',
-    port: 4488,
-  },
-};
diff --git a/minimal_redux_poc/package.json b/minimal_redux_poc/package.json
index 17b98a3..ea1e97b 100644
--- a/minimal_redux_poc/package.json
+++ b/minimal_redux_poc/package.json
@@ -4,9 +4,14 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "cypress:open": "npm run pretest & cypress open && npm run posttest",
+    "cypress:run": "cypress run cypress.json",
     "lint": "node_modules/.bin/eslint ./",
+    "pretest": "npm run server:e2e",
+    "posttest": "kill $(lsof -t -i:4444)",
     "server": "node_modules/.bin/http-server",
-    "test": "npm run build && npm run lint && jest -c jest.json",
+    "server:e2e": "http-server -p 4444 &",
+    "test": "npm run build && npm run lint && jest -c jest.json && npm run cypress:run",
     "test:coverage": "jest -c jest.json --coverage",
     "test:watch": "jest -c jest.json --watch",
     "build": "webpack --mode=production",
@@ -47,6 +52,7 @@
     "babel-plugin-named-asset-import": "^0.2.3",
     "concurrently": "^4.0.1",
     "css-loader": "^1.0.0",
+    "cypress": "^3.1.2",
     "enzyme": "^3.4.4",
     "enzyme-adapter-react-16": "^1.2.0",
     "eslint": "^5.10.0",
@@ -61,8 +67,7 @@
     "http-server": "^0.11.1",
     "jest": "^22.4.4",
     "jest-fetch-mock": "^1.5.0",
-    "jest-puppeteer": "^3.0.1",
-    "puppeteer": "^1.4.0",
+    "jest-puppeteer": "^3.7.0",
     "react-dev-utils": "^6.1.1",
     "redux-mock-store": "^1.5.1",
     "style-loader": "^0.22.1",