test(jest): Migrate all unit tests from Karma to Jest

.eslintrc.js

@@ -5,10 +5,13 @@ module.exports = {
     globals: {
         __: false,
         __I18N__: false,
+        __NAME__: false,
+        __VERSION__: false,
         ActiveXObject: false,
         DocumentTouch: false,
-        Assert: false,
+        fail: false,
         fixture: false,
+        jest: false,
         pdfjsLib: false,
         pdfjsViewer: false,
         sinon: false,

README.md

@@ -406,10 +406,10 @@ Install the following plugins in your preferred editor
 - `yarn build` to generate resource bundles and JS webpack bundles.
 - `yarn start` to only generate JS webpack bundles on file changes.
 - `yarn start:dev` to launch a webpack-dev-server instance for local development.
-- `yarn test` launches karma tests with PhantomJS.
-- `yarn test -- --src=PATH/TO/SRC/FILENAME` launches test only for `src/lib/PATH/TO/SRC/__tests__/FILENAME-test.js` instead of all tests. For example, `yarn test -- --src=viewers/media/MediaBase` launches tests for `src/lib/viewers/media/__tests__/MediaBase-test.js`. This also works for directories, e.g. `yarn test -- --src=viewers/doc/`.
-- `yarn test:watch` launches karma tests with PhantomJS for debugging. Open the URL mentioned in the console.
-- `yarn test:watch -- --src=path/to/src/FILENAME` launches debugging for `src/lib/path/to/src/__tests__/FILENAME-test.js` instead of all tests. Open the URL mentioned in the console.
+- `yarn test` to run all unit tests with Jest.
+- `yarn test path/to/filename.js` launches Jest only for that file and/or its related tests.
+- `yarn test:watch` to run all unit tests with Jest for debugging.
+- `yarn test:watch path/to/src/FILENAME` to run specific unit tests with Jest.
 
 For more script commands see `package.json`. Test coverage reports are available under reports/coverage.
 

build/jest/envConsole.js

@@ -0,0 +1,12 @@
+const consoleLogFn = global.console.log;
+
+function consoleLog(message, ...args) {
+    // Workaround tos suppress AJV console log messages from Box3d Runtime
+    if (typeof message === 'string' && message.indexOf('$ref: all keywords') >= 0) {
+        return;
+    }
+
+    consoleLogFn(message, ...args);
+}
+
+global.console.log = consoleLog;

build/jest/envGlobals.js

@@ -0,0 +1,44 @@
+const fixtureLoader = require('./fixtureLoader');
+const i18n = require('../../src/i18n/json/en-US.json');
+
+// These should be updated to match the Preview version in package.json whenever a file in that third party directory
+// is updated. Also, update the matching configuration in constants.js, which is needed for main preview functionality
+const MEDIA_STATIC_ASSETS_VERSION = '2.14.0';
+const MODEL3D_STATIC_ASSETS_VERSION = '1.12.0';
+const TEXT_STATIC_ASSETS_VERSION = '0.114.0';
+
+/* eslint-disable import/no-dynamic-require */
+global.Box3D = require(`../../src/third-party/model3d/${MODEL3D_STATIC_ASSETS_VERSION}/box3d-runtime.min.js`);
+global.Papa = require(`../../src/third-party/text/${TEXT_STATIC_ASSETS_VERSION}/papaparse.min.js`);
+global.Remarkable = require(`../../src/third-party/text/${TEXT_STATIC_ASSETS_VERSION}/remarkable.min.js`);
+global.shaka = require(`../../src/third-party/media/${MEDIA_STATIC_ASSETS_VERSION}/shaka-player.compiled.js`);
+global.THREE = require(`../../src/third-party/model3d/${MODEL3D_STATIC_ASSETS_VERSION}/three.min.js`);
+/* eslint-enable import/no-dynamic-require */
+
+global.EventEmitter = require('events');
+global.sinon = require('sinon');
+
+global.__ = function translate(key) {
+    return i18n[key] || key;
+};
+global.BoxSDK = () => ({});
+global.document.createRange = () => ({
+    selectNode: () => {},
+    setEnd: () => {},
+    setStart: () => {},
+    commonAncestorContainer: {
+        nodeName: 'BODY',
+        ownerDocument: document,
+    },
+    createContextualFragment: fragment => fragment,
+});
+global.fixture = {
+    cleanup: fixtureLoader.resetFixtureFile,
+    load: fixtureLoader.loadHTMLFixture,
+};
+global.pdfjsLib = {
+    GlobalWorkerOptions: {},
+};
+global.pdfjsViewer = {};
+global.URL.createObjectURL = () => '';
+global.URL.revokeObjectURL = () => '';

build/jest/envSetup.js

@@ -0,0 +1,10 @@
+import '@testing-library/jest-dom';
+
+expect.extend({
+    toContainSelector(received, selector) {
+        return {
+            message: `expected ${received} ${this.isNot ? 'not ' : ''}to contain ${selector}`,
+            pass: !!received.querySelector(selector),
+        };
+    },
+});

build/jest/enzymeAdapter.js

@@ -0,0 +1,25 @@
+import Enzyme, { mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+// make Enzyme functions available in all test files without importing
+global.shallow = shallow;
+global.mount = mount;
+
+if (window.document) {
+    window.document.createRange = () => ({
+        commonAncestorContainer: {
+            nodeName: 'BODY',
+            ownerDocument: document,
+        },
+        createContextualFragment: fragment => {
+            const el = document.createElement('div');
+            el.innerHTML = fragment;
+            return el.children[0];
+        },
+        selectNode: () => {},
+        setStart: () => {},
+        setEnd: () => {},
+    });
+}

build/jest/fileMock.js

@@ -0,0 +1,3 @@
+// __mocks__/fileMock.js
+
+module.exports = 'test-file-stub';

build/jest/fixtureLoader.js

@@ -0,0 +1,20 @@
+const fs = require('fs');
+
+const readFixtureFile = filePath => fs.readFileSync(`src/lib/${filePath}`, 'utf8');
+
+const resetFixtureFile = () => {
+    document.body.innerHTML = '';
+};
+
+const setHTMLFixture = htmlContent => {
+    document.body.outerHTML = htmlContent;
+};
+
+const loadHTMLFixture = filePath => {
+    return setHTMLFixture(readFixtureFile(filePath));
+};
+
+module.exports = {
+    loadHTMLFixture,
+    resetFixtureFile,
+};

build/jest/i18nMock.js

@@ -0,0 +1,2 @@
+const messages = {};
+export default messages;

build/jest/markupGlobal.js

@@ -0,0 +1,7 @@
+Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
+    get() {
+        return this.parentNode;
+    },
+});
+Object.defineProperty(HTMLMediaElement.prototype, 'load', { value: jest.fn() });
+Object.defineProperty(HTMLMediaElement.prototype, 'play', { value: jest.fn() });

build/jest/react-intl-mock.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const intlMock = {
+    formatMessage: message => message.defaultMessage || message.message,
+    formatDate: date => date,
+};
+
+export const FormattedDate = () => <div />;
+FormattedDate.displayName = 'FormattedDate';
+
+export const FormattedTime = () => <div />;
+FormattedTime.displayName = 'FormattedTime';
+
+export const FormattedMessage = () => <div />;
+FormattedMessage.displayName = 'FormattedMessage';
+
+export const addLocaleData = () => {};
+
+export const createIntl = () => intlMock;
+
+export const defineMessages = messages => messages;
+
+export const intlShape = {};
+
+export const injectIntl = Component => {
+    const WrapperComponent = props => {
+        const injectedProps = { ...props, intl: intlMock };
+        return <Component {...{ ...injectedProps }} />;
+    };
+    WrapperComponent.displayName = Component.displayName || Component.name || 'Component';
+    return WrapperComponent;
+};

build/jest/stringLoader.js

@@ -0,0 +1,9 @@
+module.exports = {
+    process: content => {
+        // escape newlines
+        const json = JSON.stringify(content)
+            .replace(/\u2028/g, '\\u2028')
+            .replace(/\u2029/g, '\\u2029');
+        return `module.exports = ${json};`;
+    },
+};

build/jest/styleMock.js

@@ -0,0 +1,3 @@
+// __mocks__/styleMock.js
+
+module.exports = {};

build/jest/workerGlobal.js

@@ -0,0 +1,13 @@
+class Worker {
+    constructor(stringUrl) {
+        this.url = stringUrl;
+        this.onmessage = () => {};
+    }
+
+    postMessage(msg) {
+        this.onmessage(msg);
+    }
+}
+
+global.Worker = Worker;
+window.Worker = Worker;