mirror of
https://github.com/element-hq/element-web
synced 2024-11-24 10:15:43 +03:00
Merge pull request #11869 from vector-im/travis/jest
Use Jest for tests
This commit is contained in:
Travis Ralston
GitHub
commit
2652060e38
11 changed files with 1491 additions and 849 deletions
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
};
|
||||
171
karma.conf.js
171
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);
|
||||
};
|
||||
40
package.json
40
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:multi": "yarn build:genfiles && karma start"
|
||||
"test": "jest"
|
||||
},
|
||||
"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).+$"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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');
|
||||
|
|
@ -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();
|
||||
14
test/jest-mocks.js
Normal file
14
test/jest-mocks.js
Normal file
|
|
@ -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(),
|
||||
})),
|
||||
});
|
||||
|
|
@ -1,30 +1,7 @@
|
|||
"use strict";
|
||||
|
||||
/**
|
||||
* 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.
|
||||
export function cleanLocalstorage() {
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue