Minimal setup (test an external web page)

a0d5f5dc · Loïs Poujade · a0d5f5dc · a0d5f5dc · a0d5f5dc · a0d5f5dc
Verified Commit a0d5f5dc authored 2 years ago by Loïs Poujade
--- a/.gitignore
+++ b/.gitignore
+node_modules/
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
+upstream_tests:
+  image: registry.gitlab.com/gitlab-ci-utils/docker-puppeteer:latest
+  before_script:
+    - npm ci
+  script:
+    - npm run test:ci
--- a/__tests__/main.js
+++ b/__tests__/main.js
+describe('Open example', () => {
+  beforeAll(async () => {
+    await page.goto('https://example.org');
+  });
+  it('has the correct page title', async () => {
+    const title = await page.title();
+    expect(title).toBe('Example Domain');
+  });
+  it('has the main text', async () => {
+    await expect(page).toMatchElement('a[href="https://www.iana.org/domains/example"]');
+  });
+});
--- a/jest-puppeteer.config.js
+++ b/jest-puppeteer.config.js
+module.exports = {
+  launch: {
+    headless: process.env.HEADLESS !== 'false',
+  },
+  server: [{
+    command: 'npm run server -- -p 4488',
+    host: '127.0.0.1',
+    launchTimeout: 5000,
+    port: 4488,
+  }],
+};
--- a/jest.json
+++ b/jest.json
+{
+  "collectCoverage": false,
+  "testMatch": [
+    "<rootDir>/**/__tests__/**/*.{js,jsx}",
+    "<rootDir>/src/**/?(*.)(spec|test|unit).{js,jsx}"
+  ],
+  "preset": "jest-puppeteer"
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "mirador",
+  "version": "0.0.0",
+  "description": "test",
+  "scripts": {
+    "server": "node_modules/.bin/http-server --cors",
+    "test:ci": "jest -c jest.json --ci --reporters=default --watchAll=false --runInBand"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+    "http-server": "^14.1.0",
+    "jest": "^27.5.1",
+    "jest-fetch-mock": "^3.0.0",
+    "jest-puppeteer": "^6.1.0",
+    "puppeteer": "^13.5.1"
+  }
+}
--- a/setupJest.js
+++ b/setupJest.js
+// Setup Jest to mock fetch
+import { JSDOM } from 'jsdom'; // eslint-disable-line import/no-extraneous-dependencies
+import fetch from 'jest-fetch-mock'; // eslint-disable-line import/no-extraneous-dependencies
+import Enzyme from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies
+import Adapter from 'enzyme-adapter-react-16'; // eslint-disable-line import/no-extraneous-dependencies
+const jsdom = new JSDOM('<!doctype html><html><body><div id="main"></div></body></html>', { url: 'https://localhost' });
+const { window } = jsdom;
+jest.setTimeout(10000);
+window.HTMLCanvasElement.prototype.getContext = () => {};
+jest.setMock('isomorphic-unfetch', fetch);
+require('jest-fetch-mock').enableMocks(); // eslint-disable-line import/no-extraneous-dependencies
+global.window = window;
+global.navigator = {
+  userAgent: 'node.js',
+};
+/* eslint-disable  require-jsdoc, class-methods-use-this */
+class IntersectionObserverPolyfill {
+  observe() {
+  }
+  disconnect() {
+  }
+}
+/* eslint-enable  require-jsdoc, class-methods-use-this */
+global.IntersectionObserver = IntersectionObserverPolyfill;
+/** */
+function Path2D() {
+}
+global.Path2D = Path2D;
+/**
+ * copy object property descriptors from `src` to `target`
+ * @param {*} src
+ * @param {*} target
+ */
+const copyProps = (src, target) => {
+  Object.defineProperties(target, {
+    ...Object.getOwnPropertyDescriptors(src),
+    ...Object.getOwnPropertyDescriptors(target),
+  });
+};
+/*
+  avoid 'ReferenceError: HTMLElement is not defined'
+  see https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md
+  for further information
+*/
+copyProps(window, global);
+Enzyme.configure({ adapter: new Adapter() });
+jest.mock('react-i18next', () => ({
+  // this mock makes sure any components using the translate HoC receive the t function as a prop
+  withTranslation: () => (Component) => {
+    Component.defaultProps = { // eslint-disable-line no-param-reassign
+      ...Component.defaultProps, t: k => k,
+    };
+    return Component;
+  },
+}));