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

.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,

.travis.yml

@@ -16,6 +16,6 @@ before_install:
 jobs:
     include:
         - name: "Build & Test"
-          script: commitlint-travis && yarn lint && npm-run-all clean build:i18n build:ci test
+          script: commitlint-travis && yarn lint && npm-run-all clean build:i18n build:ci test:ci
         - name: "E2E Tests"
           script: yarn test:e2e

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` to run 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.js` to run Jest only for that file and/or its related tests for debugging.
 
 For more script commands see `package.json`. Test coverage reports are available under reports/coverage.
 

build/jest/envGlobals.js

@@ -0,0 +1,15 @@
+const i18n = require('../../src/i18n/json/en-US.json');
+const fixture = require('./fixtureLoader');
+const Worker = require('./workerMock');
+
+global.EventEmitter = require('events');
+global.sinon = require('sinon');
+
+global.__ = function translate(key) {
+    return i18n[key] || key;
+};
+global.BoxSDK = () => ({});
+global.fixture = fixture;
+global.URL.createObjectURL = () => '';
+global.URL.revokeObjectURL = () => '';
+global.Worker = Worker;

build/jest/envSetup.js

@@ -0,0 +1,18 @@
+import '@testing-library/jest-dom';
+import Adapter from 'enzyme-adapter-react-16';
+import Enzyme, { mount, shallow } from 'enzyme';
+
+expect.extend({
+    toContainSelector(received, selector) {
+        return {
+            message: `expected ${received} ${this.isNot ? 'not ' : ''}to contain ${selector}`,
+            pass: !!received.querySelector(selector),
+        };
+    },
+});
+
+Enzyme.configure({ adapter: new Adapter() });
+
+// Make Enzyme functions available in all test files without importing
+global.shallow = shallow;
+global.mount = mount;

build/jest/envWindow.js

@@ -0,0 +1,35 @@
+Object.defineProperty(global.navigator, 'mimeTypes', {
+    configurable: true,
+    value: [],
+    writable: true,
+});
+
+Object.defineProperty(document, 'createRange', {
+    value: () => ({
+        commonAncestorContainer: {
+            nodeName: 'BODY',
+            ownerDocument: document,
+        },
+        createContextualFragment: fragment => {
+            const el = document.createElement('div');
+            el.innerHTML = fragment;
+            return el.children[0];
+        },
+        selectNode: () => {},
+        setStart: () => {},
+        setEnd: () => {},
+    }),
+});
+
+Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
+    get() {
+        return this.parentNode;
+    },
+});
+
+Object.defineProperty(HTMLMediaElement.prototype, 'duration', { writable: true });
+Object.defineProperty(HTMLMediaElement.prototype, 'ended', { writable: true });
+Object.defineProperty(HTMLMediaElement.prototype, 'load', { value: jest.fn() });
+Object.defineProperty(HTMLMediaElement.prototype, 'paused', { writable: true });
+Object.defineProperty(HTMLMediaElement.prototype, 'play', { value: jest.fn() });
+Object.defineProperty(HTMLMediaElement.prototype, 'played', { writable: true });

build/jest/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

build/jest/fixtureLoader.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const path = require('path');
+
+const readFixtureFile = filePath => fs.readFileSync(path.resolve('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 = {
+    cleanup: resetFixtureFile,
+    load: loadHTMLFixture,
+};

build/jest/i18nMock.js

@@ -0,0 +1 @@
+export default {};

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,24 @@
+const crypto = require('crypto');
+
+module.exports = {
+    getCacheKey(fileData, filePath, configStr, options) {
+        return crypto
+            .createHash('md5')
+            .update(fileData)
+            .update('\0', 'utf8')
+            .update(filePath)
+            .update('\0', 'utf8')
+            .update(configStr)
+            .update('\0', 'utf8')
+            .update(JSON.stringify(options))
+            .digest('hex');
+    },
+
+    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 @@
+module.exports = {};

build/jest/workerMock.js

@@ -0,0 +1,12 @@
+class Worker {
+    constructor(stringUrl) {
+        this.url = stringUrl;
+        this.onmessage = () => {};
+    }
+
+    postMessage(msg) {
+        this.onmessage(msg);
+    }
+}
+
+module.exports = Worker;

build/release.sh

@@ -78,7 +78,7 @@ reset_to_master() {
 
 build_lint_and_test() {
     # The build command includes linting
-    cmd yarn build && cmd yarn test || return 1
+    cmd yarn build && cmd yarn test:ci || return 1
 }
 
 increment_version() {