Fix CI tests

There's a bunch of generated files that webpack relies on to work, and Karma works off webpack. To make both happy we've added
a new `build:genfiles` script which takes care of this for us. We also have to install and build our other layers to get the
same effect (like generating the react-sdk's component index, while we still have one).

This commit also fixes all the imports in the tests because they were just wrong. They should have been caught in the ES6ification
earlier, but were missed.

.buildkite/pipeline.yaml

@@ -27,8 +27,10 @@ steps:
 
   - label: "🛠 Build"
     command:
-      # TODO: This probably needs to be more sophisticated than "just install stuff"
+      - "echo '--- Fetching Dependencies'"
+      - "./scripts/fetch-develop.deps.sh --depth 1"
       - "yarn install"
+      - "echo '+++ Building Project'"
       - "yarn build"
     plugins:
       - docker#v3.0.1:

karma.conf.js

@@ -2,7 +2,7 @@
 
 var path = require('path');
 var webpack = require('webpack');
-var webpack_config = require('./webpack.config');
+var wp_config = require('./webpack.config');
 
 /*
  * We use webpack to build our tests. It's a pain to have to wait for webpack
@@ -20,6 +20,8 @@ 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.
@@ -35,12 +37,6 @@ delete webpack_config['entry'];
 // make sure we're flagged as development to avoid wasting time optimising
 webpack_config.mode = 'development';
 
-// add ./test as a search path for js
-webpack_config.module.rules.unshift({
-    test: /\.js$/, use: "babel-loader",
-    include: [path.resolve('./src'), path.resolve('./test')],
-});
-
 // disable parsing for sinon, because it
 // tries to do voodoo with 'require' which upsets
 // webpack (https://github.com/webpack/webpack/issues/304)
@@ -54,8 +50,6 @@ webpack_config.resolve.modules = [
     "node_modules"
 ];
 
-webpack_config.devtool = 'inline-source-map';
-
 module.exports = function (config) {
     const myconfig = {
         // frameworks to use
@@ -64,7 +58,6 @@ module.exports = function (config) {
 
         // list of files / patterns to load in the browser
         files: [
-            'node_modules/babel-polyfill/browser.js',
             testFile,
 
             // make the images available via our httpd. They will be avaliable

package.json

@@ -35,10 +35,11 @@
     "reskindex": "reskindex -h src/header",
     "reskindex:watch": "reskindex -h src/header -w",
     "clean": "rimraf lib webapp electron_app/dist",
-    "build": "yarn clean && yarn build:res && yarn build:compile && yarn build:types && yarn build:bundle",
+    "build": "yarn clean && yarn build:genfiles && yarn build:compile && yarn build:types && yarn build:bundle",
     "build:res": "node scripts/copy-res.js",
+    "build:genfiles": "yarn reskindex && yarn build:res",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
-    "build:compile": "yarn reskindex && babel -d lib --verbose --extensions \".ts,.js\" src",
+    "build:compile": "babel -d lib --verbose --extensions \".ts,.js\" src",
     "build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production",
     "build:electron": "yarn build && yarn install:electron && electron-builder -wml --ia32 --x64",
     "build:electron:linux": "yarn build && electron-builder -l --x64",
@@ -56,8 +57,8 @@
     "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": "karma start --single-run=true --autoWatch=false --browsers VectorChromeHeadless",
+    "test": "yarn build:genfiles && karma start --single-run=true --autoWatch=false --browsers VectorChromeHeadless",
-    "test:multi": "karma start"
+    "test:multi": "yarn build:genfiles && karma start"
   },
   "dependencies": {
     "browser-request": "^0.3.3",

scripts/fetch-develop.deps.sh

@@ -78,6 +78,7 @@ dodep matrix-org matrix-js-sdk
 pushd matrix-js-sdk
 yarn link
 yarn install
+yarn build
 popd
 
 yarn link matrix-js-sdk
@@ -95,6 +96,7 @@ pushd matrix-react-sdk
 yarn link
 yarn link matrix-js-sdk
 yarn install
+yarn build
 popd
 
 yarn link matrix-react-sdk

test/app-tests/joining.js

@@ -18,28 +18,25 @@ limitations under the License.
 
 import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
 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 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";
 
-require('skin-sdk');
 
-const jssdk = require('matrix-js-sdk');
-
-const sdk = require('matrix-react-sdk');
 const MatrixChat = sdk.getComponent('structures.MatrixChat');
 const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
 const RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar');
 const RoomView = sdk.getComponent('structures.RoomView');
 
-const React = require('react');
-const ReactDOM = require('react-dom');
-const ReactTestUtils = require('react-dom/test-utils');
-const expect = require('expect');
-import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
-import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
-import {sleep} from "../test-utils";
-
-const test_utils = require('../test-utils');
-const MockHttpBackend = require('matrix-mock-request');
-
 const HS_URL='http://localhost';
 const IS_URL='http://localhost';
 const USER_ID='@me:localhost';

test/app-tests/loading.js

@@ -18,23 +18,18 @@ limitations under the License.
 
 import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
 import WebPlatform from '../../src/vector/platform/WebPlatform';
-
+import '../skin-sdk';
-import 'skin-sdk';
-
 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 jssdk from 'matrix-js-sdk';
+import * as sdk from 'matrix-react-sdk';
-
-import 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';
 import MockHttpBackend from 'matrix-mock-request';
 import {parseQs, parseQsFromFragment} from '../../src/vector/url_utils';

test/skin-sdk.js

@@ -4,5 +4,6 @@
  * Skins the react-sdk with the vector components
  */
 
-const sdk = require('matrix-react-sdk');
+import * as sdk from "matrix-react-sdk";
-sdk.loadSkin(require('../src/component-index'));
+import * as skin from "../src/component-index";
+sdk.loadSkin(skin);