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..9ed0a57 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,8 @@ "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", + "puppeteer": "^1.11.0", "react-dev-utils": "^6.1.1", "redux-mock-store": "^1.5.1", "style-loader": "^0.22.1",