From 2f06fda17c3d040e74b5ac08058997b3e0cfdacd Mon Sep 17 00:00:00 2001 From: Lee Moody Date: Thu, 13 May 2021 17:53:23 +0100 Subject: [PATCH] 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 | 37 +++---------- lib/plugins/bundle-javascript.js | 58 ++++++++++++++++++++ npm-shrinkwrap.json | 90 ++++---------------------------- package.json | 5 +- 4 files changed, 75 insertions(+), 115 deletions(-) create mode 100644 lib/plugins/bundle-javascript.js diff --git a/config/karma.config.js b/config/karma.config.js index bbfb16bc..04d8289a 100644 --- a/config/karma.config.js +++ b/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: { diff --git a/lib/plugins/bundle-javascript.js b/lib/plugins/bundle-javascript.js new file mode 100644 index 00000000..8e1f8e21 --- /dev/null +++ b/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} 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); + }; + }] +}; diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 88debb2f..a6f54fa9 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -29,13 +29,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", @@ -58,7 +55,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", @@ -7191,17 +7188,6 @@ "node": ">= 10" } }, - "node_modules/karma-babel-preprocessor": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/karma-babel-preprocessor/-/karma-babel-preprocessor-8.0.1.tgz", - "integrity": "sha512-5upyawNi3c7Gg6tPH1FWRVTmUijGf3v1GV4ScLM/2jKdDP18SlaKlUpu8eJrRI3STO8qK1bkqFcdgAA364nLYQ==", - "engines": { - "node": ">=6" - }, - "peerDependencies": { - "@babel/core": "7" - } - }, "node_modules/karma-browserstack-launcher": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/karma-browserstack-launcher/-/karma-browserstack-launcher-1.6.0.tgz", @@ -7234,26 +7220,6 @@ "which": "bin/which" } }, - "node_modules/karma-esbuild": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/karma-esbuild/-/karma-esbuild-2.1.3.tgz", - "integrity": "sha512-N9iuctHHu6Uj+uYqgZO9mDxcW1Kb11nipKNLpxfPSlbHz3Ux3b8/tVaE7cqoTd5CR5EKaPB0LU0jkOXDqDXG7A==", - "dependencies": { - "chokidar": "^3.5.1", - "source-map": "0.6.1" - }, - "peerDependencies": { - "esbuild": ">=0.8.45" - } - }, - "node_modules/karma-esbuild/node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/karma-mocha": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/karma-mocha/-/karma-mocha-2.0.1.tgz", @@ -7274,14 +7240,6 @@ "sinon": "*" } }, - "node_modules/karma-sourcemap-loader": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.8.tgz", - "integrity": "sha512-zorxyAakYZuBcHRJE+vbrK2o2JXLFWK8VVjiT/6P+ltLBUGUvqTEkUiQ119MGdOrK7mrmxXHZF1/pfT6GgIZ6g==", - "dependencies": { - "graceful-fs": "^4.1.2" - } - }, "node_modules/karma/node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -14853,15 +14811,15 @@ "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==" }, "node_modules/sinon": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/sinon/-/sinon-10.0.0.tgz", - "integrity": "sha512-XAn5DxtGVJBlBWYrcYKEhWCz7FLwZGdyvANRyK06419hyEpdT0dMc5A8Vcxg5SCGHc40CsqoKsc1bt1CbJPfNw==", + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/sinon/-/sinon-9.2.4.tgz", + "integrity": "sha512-zljcULZQsJxVra28qIAL6ow1Z9tpattkCTEJR4RBP3TGc00FcttsP5pK284Nas5WjMZU5Yzy3kAIp3B3KRf5Yg==", "dependencies": { "@sinonjs/commons": "^1.8.1", "@sinonjs/fake-timers": "^6.0.1", "@sinonjs/samsam": "^5.3.1", "diff": "^4.0.2", - "nise": "^4.1.0", + "nise": "^4.0.4", "supports-color": "^7.1.0" }, "funding": { @@ -23882,12 +23840,6 @@ } } }, - "karma-babel-preprocessor": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/karma-babel-preprocessor/-/karma-babel-preprocessor-8.0.1.tgz", - "integrity": "sha512-5upyawNi3c7Gg6tPH1FWRVTmUijGf3v1GV4ScLM/2jKdDP18SlaKlUpu8eJrRI3STO8qK1bkqFcdgAA364nLYQ==", - "requires": {} - }, "karma-browserstack-launcher": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/karma-browserstack-launcher/-/karma-browserstack-launcher-1.6.0.tgz", @@ -23916,22 +23868,6 @@ } } }, - "karma-esbuild": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/karma-esbuild/-/karma-esbuild-2.1.3.tgz", - "integrity": "sha512-N9iuctHHu6Uj+uYqgZO9mDxcW1Kb11nipKNLpxfPSlbHz3Ux3b8/tVaE7cqoTd5CR5EKaPB0LU0jkOXDqDXG7A==", - "requires": { - "chokidar": "^3.5.1", - "source-map": "0.6.1" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - } - } - }, "karma-mocha": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/karma-mocha/-/karma-mocha-2.0.1.tgz", @@ -23946,14 +23882,6 @@ "integrity": "sha1-TjRD8oMP3s/2JNN0cWPxIX2qKpo=", "requires": {} }, - "karma-sourcemap-loader": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/karma-sourcemap-loader/-/karma-sourcemap-loader-0.3.8.tgz", - "integrity": "sha512-zorxyAakYZuBcHRJE+vbrK2o2JXLFWK8VVjiT/6P+ltLBUGUvqTEkUiQ119MGdOrK7mrmxXHZF1/pfT6GgIZ6g==", - "requires": { - "graceful-fs": "^4.1.2" - } - }, "keyv": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.0.3.tgz", @@ -29546,15 +29474,15 @@ "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==" }, "sinon": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/sinon/-/sinon-10.0.0.tgz", - "integrity": "sha512-XAn5DxtGVJBlBWYrcYKEhWCz7FLwZGdyvANRyK06419hyEpdT0dMc5A8Vcxg5SCGHc40CsqoKsc1bt1CbJPfNw==", + "version": "9.2.4", + "resolved": "https://registry.npmjs.org/sinon/-/sinon-9.2.4.tgz", + "integrity": "sha512-zljcULZQsJxVra28qIAL6ow1Z9tpattkCTEJR4RBP3TGc00FcttsP5pK284Nas5WjMZU5Yzy3kAIp3B3KRf5Yg==", "requires": { "@sinonjs/commons": "^1.8.1", "@sinonjs/fake-timers": "^6.0.1", "@sinonjs/samsam": "^5.3.1", "diff": "^4.0.2", - "nise": "^4.1.0", + "nise": "^4.0.4", "supports-color": "^7.1.0" }, "dependencies": { diff --git a/package.json b/package.json index 6ac97777..9af265cd 100644 --- a/package.json +++ b/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",