Merge pull request #11869 from vector-im/travis/jest

Use Jest for tests

.buildkite/pipeline.yaml

@@ -36,30 +36,21 @@ steps:
       - docker#v3.0.1:
           image: "node:12"
 
-  - label: ":karma: Tests"
+  - label: ":jest: Tests"
     agents:
       # We use a medium sized instance instead of the normal small ones because
       # webpack loves to gorge itself on resources.
       queue: "medium"
     command:
-      # Install chrome
-      - "echo '--- Installing Chrome'"
-      - "wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -"
-      - "sh -c 'echo \"deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main\" >> /etc/apt/sources.list.d/google.list'"
-      - "apt-get update"
-      - "apt-get install -y google-chrome-stable"
-      # Run tests
       - "echo '--- Fetching Dependencies'"
       - "./scripts/fetch-develop.deps.sh --depth 1"
       - "yarn install"
+      - "yarn build:genfiles"  # We have to build the app to make sure the autogenned files are present
       - "echo '+++ Running Tests'"
       - "yarn test"
-    env:
-      CHROME_BIN: "/usr/bin/google-chrome-stable"
     plugins:
       - docker#v3.0.1:
           image: "node:10"
-          propagate-environment: true
 
   - label: ":hammer: Package"
     command:

babel.config.js

@@ -1,4 +1,4 @@
-{
+module.exports = {
   "sourceMaps": true,
   "presets": [
     ["@babel/preset-env", {
@@ -22,4 +22,4 @@
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-transform-runtime"
   ]
-}
+};

karma.conf.js

@@ -1,171 +0,0 @@
-// karma.conf.js - the config file for karma, which runs our tests.
-
-var path = require('path');
-var webpack = require('webpack');
-var wp_config = require('./webpack.config');
-
-/*
- * We use webpack to build our tests. It's a pain to have to wait for webpack
- * to build everything; however it's the easiest way to load our dependencies
- * from node_modules.
- *
- * If you run karma in multi-run mode (with `yarn test-multi`), it will watch
- * the tests for changes, and webpack will rebuild using a cache. This is much quicker
- * than a clean rebuild.
- */
-
-// the name of the test file. By default, a special file which runs all tests.
-var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
-
-process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
-process.env.Q_DEBUG = 1;
-
-const webpack_config = wp_config({}, {mode: "development"});
-
-/* the webpack config is based on the real one, to (a) try to simulate the
- * deployed environment as closely as possible, and (b) to avoid a shedload of
- * cut-and-paste.
- */
-
-// find out if we're shipping olm, and where it is, if so.
-const olm_entry = webpack_config.entry['olm'];
-
-// remove the default entries - karma provides its own (via the 'files' and
-// 'preprocessors' config below)
-delete webpack_config['entry'];
-
-// make sure we're flagged as development to avoid wasting time optimising
-webpack_config.mode = 'development';
-
-// disable parsing for sinon, because it
-// tries to do voodoo with 'require' which upsets
-// webpack (https://github.com/webpack/webpack/issues/304)
-webpack_config.module.noParse.push(/sinon\/pkg\/sinon\.js$/);
-
-// ?
-webpack_config.resolve.alias['sinon'] = 'sinon/pkg/sinon.js';
-
-webpack_config.resolve.modules = [
-    path.resolve('./test'),
-    "node_modules"
-];
-
-module.exports = function (config) {
-    const myconfig = {
-        // frameworks to use
-        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['mocha'],
-
-        // list of files / patterns to load in the browser
-        files: [
-            testFile,
-
-            // make the images available via our httpd. They will be avaliable
-            // below http://localhost:[PORT]/base/. See also `proxies` which
-            // defines alternative URLs for them.
-            //
-            // This isn't required by any of the tests, but it stops karma
-            // logging warnings when it serves a 404 for them.
-            {
-                pattern: 'node_modules/matrix-react-sdk/res/img/*',
-                watched: false, included: false, served: true, nocache: false,
-            },
-            {
-                pattern: 'res/**',
-                watched: false, included: false, served: true, nocache: false,
-            },
-        ],
-
-        proxies: {
-            // redirect img links to the karma server. See above.
-            "/img/": "/base/node_modules/matrix-react-sdk/res/img/",
-            "/themes/": "/base/res/themes/",
-            "/welcome.html": "/base/res/welcome.html",
-            "/welcome/": "/base/res/welcome/",
-        },
-
-        // preprocess matching files before serving them to the browser
-        // available preprocessors:
-        // https://npmjs.org/browse/keyword/karma-preprocessor
-        preprocessors: {
-            '{src,test}/**/*.js': ['webpack', 'sourcemap'],
-        },
-
-        // test results reporter to use
-        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['logcapture', 'spec', 'summary'],
-
-        specReporter: {
-            suppressErrorSummary: false, // do print error summary
-            suppressFailed: false, // do print information about failed tests
-            suppressPassed: false, // do print information about passed tests
-            showSpecTiming: true, // print the time elapsed for each spec
-        },
-
-        client: {
-            captureLogs: true,
-        },
-
-        // web server port
-        port: 9876,
-
-        // enable / disable colors in the output (reporters and logs)
-        colors: true,
-
-        // level of logging
-        // possible values: config.LOG_DISABLE || config.LOG_ERROR ||
-        // config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-        logLevel: config.LOG_INFO,
-
-        // enable / disable watching file and executing tests whenever any file
-        // changes
-        autoWatch: true,
-
-        // start these browsers
-        // available browser launchers:
-        // https://npmjs.org/browse/keyword/karma-launcher
-        browsers: [
-            'Chrome',
-            //'PhantomJS',
-            //'ChromeHeadless'
-        ],
-
-        customLaunchers: {
-            'VectorChromeHeadless': {
-                base: 'Chrome',
-                flags: [
-                    '--no-sandbox',
-                    // See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
-                    '--headless',
-                    '--disable-gpu',
-                    // Without a remote debugging port, Google Chrome exits immediately.
-                    '--remote-debugging-port=9222',
-                ],
-            }
-        },
-
-        // Continuous Integration mode
-        // if true, Karma captures browsers, runs the tests and exits
-        // singleRun: false,
-
-        // Concurrency level
-        // how many browser should be started simultaneous
-        concurrency: Infinity,
-
-        webpack: webpack_config,
-
-        webpackMiddleware: {
-            stats: {
-                // don't fill the console up with a mahoosive list of modules
-                chunks: false,
-            },
-        },
-    };
-
-    // include the olm loader if we have it.
-    if (olm_entry) {
-        myconfig.files.unshift(olm_entry);
-    }
-
-    config.set(myconfig);
-};

package.json

@@ -18,7 +18,6 @@
     "scripts",
     "docs",
     "release.sh",
-    "karma.conf.js",
     "deploy",
     "CHANGELOG.md",
     "CONTRIBUTING.rst",
@@ -57,8 +56,7 @@
     "lint:ts": "echo 'We don't actually have a typescript linter at this layer because tslint is being removed from our stack. Presumably your TS is fine.'",
     "lint:types": "tsc --noEmit",
     "lint:style": "stylelint 'res/css/**/*.scss'",
-    "test": "yarn build:genfiles && karma start --single-run=true --autoWatch=false --browsers VectorChromeHeadless",
+    "test": "jest"
-    "test:multi": "yarn build:genfiles && karma start"
   },
   "dependencies": {
     "browser-request": "^0.3.3",
@@ -99,7 +97,9 @@
     "@types/react-dom": "^16.9.4",
     "autoprefixer": "^9.7.3",
     "babel-eslint": "^10.0.3",
+    "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
+    "canvas": "^2.6.1",
     "chokidar": "^2.0.4",
     "concurrently": "^4.0.1",
     "cpx": "^1.3.2",
@@ -116,28 +116,20 @@
     "eslint-plugin-jest": "^23.0.4",
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-react-hooks": "^2.2.0",
-    "expect": "^1.16.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "fake-indexeddb": "^3.0.0",
     "file-loader": "^5.0.2",
     "fs-extra": "^0.30.0",
     "html-webpack-plugin": "^3.2.0",
+    "jest": "^24.9.0",
+    "jest-environment-jsdom-fourteen": "^1.0.1",
     "json-loader": "^0.5.3",
-    "karma": "^3.1.2",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-cli": "^1.0.1",
-    "karma-logcapture-reporter": "0.0.1",
-    "karma-mocha": "^1.3.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.31",
-    "karma-summary-reporter": "^1.5.1",
-    "karma-webpack": "4.0.0-beta.0",
     "loader-utils": "^1.2.3",
     "matrix-mock-request": "^1.2.3",
     "matrix-react-test-utils": "^0.2.2",
     "mini-css-extract-plugin": "^0.8.0",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
-    "mocha": "^5.2.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-extend": "^1.0.5",
     "postcss-import": "^12.0.1",
@@ -198,5 +190,25 @@
       "app": "electron_app"
     },
     "afterSign": "scripts/electron_afterSign.js"
+  },
+  "jest": {
+    "testEnvironment": "jest-environment-jsdom-fourteen",
+    "testMatch": [
+      "<rootDir>/test/**/*-test.js"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/node_modules/matrix-react-sdk/test/setupTests.js"
+    ],
+    "moduleNameMapper": {
+      "\\.(gif|png|svg|ttf|woff2)$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/imageMock.js",
+      "\\$webapp/i18n/languages.json": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/languages.json",
+      "^browser-request$": "<rootDir>/node_modules/matrix-react-sdk/__mocks__/browser-request.js",
+      "^react$": "<rootDir>/node_modules/react",
+      "^react-dom$": "<rootDir>/node_modules/react-dom"
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!matrix-js-sdk).+$",
+      "/node_modules/(?!matrix-react-sdk).+$"
+    ]
   }
 }

test/all-tests.js

@@ -1,13 +0,0 @@
-// all-tests.js
-//
-// Our master test file: uses the webpack require API to find our test files
-// and run them
-
-// ideally these unit tests could be run under nodejs rather than in a browser
-// via karma, but having two separate test frameworks in the same project
-// seems confusing
-const unit_tests = require.context('./unit-tests', true, /\.js$/);
-unit_tests.keys().forEach(unit_tests);
-
-const app_tests = require.context('./app-tests', true, /\.jsx?$/);
-app_tests.keys().forEach(app_tests);

test/app-tests/joining-test.js

@@ -21,15 +21,16 @@ import WebPlatform from '../../src/vector/platform/WebPlatform';
 import * as sdk from "matrix-react-sdk";
 import * as jssdk from "matrix-js-sdk";
 import "../skin-sdk";
+import "../jest-mocks";
 import React from "react";
 import ReactDOM from "react-dom";
 import ReactTestUtils from "react-dom/test-utils";
-import expect from "expect";
 import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
 import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
 import {sleep} from "../test-utils";
 import * as test_utils from "../test-utils";
 import MockHttpBackend from "matrix-mock-request";
+import "fake-indexeddb/auto";
 
 
 const MatrixChat = sdk.getComponent('structures.MatrixChat');

test/app-tests/loading-test.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2020 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,15 +20,14 @@ limitations under the License.
 import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
 import WebPlatform from '../../src/vector/platform/WebPlatform';
 import '../skin-sdk';
+import "../jest-mocks";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react-dom/test-utils';
-import expect from 'expect';
 import MatrixReactTestUtils from 'matrix-react-test-utils';
 import * as jssdk from 'matrix-js-sdk';
 import * as sdk from 'matrix-react-sdk';
 import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg';
-import * as languageHandler from 'matrix-react-sdk/src/languageHandler';
 import {VIEWS} from 'matrix-react-sdk/src/components/structures/MatrixChat';
 import dis from 'matrix-react-sdk/src/dispatcher';
 import * as test_utils from '../test-utils';
@@ -36,21 +36,13 @@ import {parseQs, parseQsFromFragment} from '../../src/vector/url_utils';
 import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
 import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
 import {sleep} from "../test-utils";
+import "fake-indexeddb/auto";
+import {cleanLocalstorage} from "../test-utils";
+import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
 
 const DEFAULT_HS_URL='http://my_server';
 const DEFAULT_IS_URL='http://my_is';
 
-expect.extend({
-    toStartWith(prefix) {
-        expect.assert(
-            this.actual.startsWith(prefix),
-            'expected %s to start with %s',
-            this.actual, prefix,
-        );
-        return this;
-    }
-});
-
 describe('loading:', function() {
     let parentDiv;
     let httpBackend;
@@ -65,7 +57,6 @@ describe('loading:', function() {
     let tokenLoginCompletePromise;
 
     beforeEach(function() {
-        test_utils.beforeEach(this);
         httpBackend = new MockHttpBackend();
         jssdk.request(httpBackend.requestFn);
         parentDiv = document.createElement('div');
@@ -76,10 +67,6 @@ describe('loading:', function() {
 
         windowLocation = null;
         matrixChat = null;
-
-        languageHandler.setMissingEntryGenerator(function(key) {
-            return key.split('|', 2)[1];
-        });
     });
 
     afterEach(async function() {
@@ -93,14 +80,12 @@ describe('loading:', function() {
         // unmounting should have cleared the MatrixClientPeg
         expect(MatrixClientPeg.get()).toBe(null);
 
-        // chrome seems to take *ages* to delete the indexeddbs.
-        this.timeout(10000);
-
         // clear the indexeddbs so we can start from a clean slate next time.
         await Promise.all([
             test_utils.deleteIndexedDB('matrix-js-sdk:crypto'),
             test_utils.deleteIndexedDB('matrix-js-sdk:riot-web-sync'),
         ]);
+        cleanLocalstorage();
         console.log(`${Date.now()}: loading: afterEach complete`);
     });
 
@@ -318,7 +303,7 @@ describe('loading:', function() {
             localStorage.setItem("mx_last_room_id", "!last_room:id");
 
             // Create a crypto store as well to satisfy storage consistency checks
-            const cryptoStore = new jssdk.IndexedDBCryptoStore(
+            const cryptoStore = new IndexedDBCryptoStore(
                 indexedDB,
                 "matrix-js-sdk:crypto",
             );
@@ -476,7 +461,7 @@ describe('loading:', function() {
                 assertAtLoadingSpinner(matrixChat);
 
                 httpBackend.when('POST', '/register').check(function(req) {
-                    expect(req.path).toStartWith(DEFAULT_HS_URL);
+                    expect(req.path.startsWith(DEFAULT_HS_URL)).toBe(true);
                     expect(req.queryParams.kind).toEqual('guest');
                 }).respond(200, {
                     user_id: "@guest:localhost",
@@ -489,7 +474,7 @@ describe('loading:', function() {
             }).then(() => {
                 return expectAndAwaitSync({isGuest: true});
             }).then((req) => {
-                expect(req.path).toStartWith(DEFAULT_HS_URL);
+                expect(req.path.startsWith(DEFAULT_HS_URL)).toBe(true);
 
                 // once the sync completes, we should have a welcome page
                 httpBackend.verifyNoOutstandingExpectation();

test/jest-mocks.js

@@ -0,0 +1,14 @@
+// https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // deprecated
+        removeListener: jest.fn(), // deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});

test/test-utils.js

@@ -1,30 +1,7 @@
-"use strict";
+export function cleanLocalstorage() {
-
-/**
- * Perform common actions before each test case, e.g. printing the test case
- * name to stdout.
- * @param {Mocha.Context} context  The test context
- */
-export function beforeEach(context) {
-    const desc = context.currentTest.fullTitle();
-    console.log();
-    console.log(desc);
-    console.log(new Array(1 + desc.length).join("="));
-
-    // some tests store things in localstorage. Improve independence of tests
-    // by making sure that they don't inherit any old state.
     window.localStorage.clear();
 }
 
-/**
- * returns true if the current environment supports webrtc
- */
-export function browserSupportsWebRTC() {
-    const n = global.window.navigator;
-    return n.getUserMedia || n.webkitGetUserMedia ||
-        n.mozGetUserMedia;
-}
-
 export function deleteIndexedDB(dbName) {
     return new Promise((resolve, reject) => {
         if (!window.indexedDB) {

webpack.config.js

@@ -94,15 +94,6 @@ module.exports = (env, argv) => ({
                 loader: 'babel-loader',
                 options: {
                     cacheDirectory: true,
-
-                    // These two options are needed to load the babelrc file and
-                    // apply it to node_modules (ie: react-sdk and js-sdk). We
-                    // could put the babel config in this block instead, but we
-                    // publish riot-web to npm for some reason and that seems to
-                    // ship a lib directory. Therefore, we need the babel config
-                    // in a place where babel and babel-loader can reach it.
-                    babelrc: true,
-                    configFile: path.resolve(__dirname, ".babelrc"),
                 }
             },
             {