Fix test task for IE11 / viewport dependent tests (#1022)

* Fix test task for IE11

- Downgrade Sinon, sinon@10 drops IE11 support (there is a PR to
correct the site, which still says IE11 is supported).
- Bundle test JavaScript in the same way as the Build Service v3,
targeting es5. Previously es6+ syntax caused errors in IE11.
- Correct sourcemaps. Previously sourcemap related data was incorrectly
added to the page as text, pushing test DOM down, causing errors for
some component tests that depend on scroll position.
- Bundle and serve source javascript but do not include it. This
ensures when source code changes test code is processed again. I'm
unsure why this is required on top of watching the files, there may
be more efficient config to trigger test rebuilds on source file
changes.

config/karma.config.js

@@ -4,6 +4,7 @@ const process = require('process');
 const path = require('path');
 const fileHelpers = require('../lib/helpers/files');
 const karmaSass = require('../lib/plugins/dart-sass-karma');
+const karmaJavaScript = require('../lib/plugins/bundle-javascript');
 const { camelCase } = require('lodash');
 
 module.exports.getBaseKarmaConfig = function (opts = { sassIncludePaths: []}) {
@@ -50,19 +51,19 @@ module.exports.getBaseKarmaConfig = function (opts = { sassIncludePaths: []}) {
 					pattern: 'main.js',
 					watched: true,
 					included: false,
-					served: false
+					served: true
 				},
 				{
 					pattern: 'src/**/*.js',
 					watched: true,
 					included: false,
-					served: false
+					served: true
 				},
 				{
 					pattern: 'src/**/*.scss',
 					watched: true,
 					included: false,
-					served: false
+					served: true
 				},
 			],
 
@@ -73,39 +74,15 @@ module.exports.getBaseKarmaConfig = function (opts = { sassIncludePaths: []}) {
 			plugins: [
 				'karma-*',
 				karmaSass,
-				'@financial-times/karma-proclaim'
+				'@financial-times/karma-proclaim',
+				karmaJavaScript
 			],
 
 			// web server port
 			port: 9876,
 
-			// preprocess matching files before serving them to the browser
-			// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-			babelPreprocessor: {
-				options: {
-					presets: [
-						[
-							require.resolve('@babel/preset-env'),
-							{
-								// https://docs.google.com/document/d/1z6kecy_o9qHYIznTmqQ-IJqre72jhfd0nVa4JMsS7Q4/
-								"targets": {
-									"safari": "11",
-									"ios": "9",
-									"ie": "11",
-									"samsung": "9"
-								}
-							}
-						]
-					],
-					configFile: false,
-					envName: 'development',
-					inputSourceMap: true,
-					sourceMaps: 'inline',
-					sourceType: 'script'
-				},
-			},
 			preprocessors: {
-				'test/**/*.js': ['esbuild', 'babel', 'sourcemap'],
+				'**/*.js': ['javascript'],
 				'main.scss': ['scss']
 			},
 			scssPreprocessor: {

lib/plugins/bundle-javascript.js

@@ -0,0 +1,58 @@
+"use strict";
+
+const esbuild = require('esbuild');
+const babel = require('@babel/core');
+
+/**
+  * Creates a bundle using `esbuild` using the `entryPointPath` as the entrypoint of the bundle.
+ *
+ * @param {String} entryPointPath The path where the index.js resides within.
+ * @returns {Promise<String>} The bundled JavaScript as a string
+ */
+async function bundleJavascript(entryPointPath) {
+	const bundle = await esbuild.build({
+		sourcemap: 'inline',
+		format: 'iife',
+		target: 'es2020',
+		minify: false,
+		bundle: true,
+		write: false,
+		splitting: false,
+		platform: 'browser',
+		logLevel: 'silent',
+		entryPoints: [entryPointPath]
+	});
+
+	const bundleString = Buffer.from(bundle.outputFiles[0].contents).toString('utf-8');
+
+	const compiledBundle = await babel.transformAsync(bundleString, {
+		presets: [require.resolve('@babel/preset-env')],
+		sourceMaps: 'inline'
+	});
+
+	const bundlefinal = await esbuild.build({
+		sourcemap: 'inline',
+		format: 'iife',
+		target: 'es5',
+		minify: false,
+		bundle: true,
+		write: false,
+		splitting: false,
+		platform: 'browser',
+		logLevel: 'silent',
+		stdin: {
+			contents: compiledBundle.code
+		}
+	});
+
+	return Buffer.from(bundlefinal.outputFiles[0].contents).toString('utf-8');
+}
+
+module.exports = {
+	'preprocessor:javascript': ['factory', function bundleJavaScriptFactory() {
+		return async function (content, file, done) {
+			const bundle = await bundleJavascript(file.path);
+			done(null, bundle);
+		};
+	}]
+};

package.json

@@ -34,13 +34,10 @@
 		"globby": "^11.0.3",
 		"is-ci": "^3.0.0",
 		"karma": "^6.3.2",
-		"karma-babel-preprocessor": "^8.0.1",
 		"karma-browserstack-launcher": "^1.6.0",
 		"karma-chrome-launcher": "^3.1.0",
-		"karma-esbuild": "^2.1.3",
 		"karma-mocha": "^2.0.1",
 		"karma-sinon": "^1.0.5",
-		"karma-sourcemap-loader": "^0.3.8",
 		"listr": "^0.14.3",
 		"listr-multiline-renderer": "^1.1.0",
 		"lodash": "^4.17.21",
@@ -63,7 +60,7 @@
 		"sass-true": "^6.0.1",
 		"semver": "^7.3.5",
 		"serve-handler": "^6.1.3",
-		"sinon": "^10.0.0",
+		"sinon": "^9.0.0",
 		"snyk": "^1.563.0",
 		"strip-ansi": "^6.0.0",
 		"stylelint": "^13.12.0",