test: update karma runner (#2524)

* test: update karma runner

* fix: Promise polyfill for testrunner

karma.js

@@ -1,103 +0,0 @@
-const Server = require('karma').Server;
-const cfg = require('karma').config;
-const path = require('path');
-const proxy = require('html2canvas-proxy');
-const karmaConfig = cfg.parseConfig(path.resolve('./karma.conf.js'));
-const server = new Server(karmaConfig, (exitCode) => {
-    console.log('Karma has exited with ' + exitCode);
-    process.exit(exitCode)
-});
-
-const fs = require('fs');
-const express = require('express');
-const bodyParser = require('body-parser');
-const cors = require('cors');
-const filenamifyUrl = require('filenamify-url');
-
-const mkdirp = require('mkdirp');
-const screenshotFolder = './tmp/reftests';
-const metadataFolder = './tmp/reftests/metadata';
-
-mkdirp.sync(path.resolve(__dirname, screenshotFolder));
-mkdirp.sync(path.resolve(__dirname, metadataFolder));
-
-const CORS_PORT = 8081;
-const corsApp = express();
-corsApp.use('/proxy', proxy());
-corsApp.use('/cors', cors(), express.static(path.resolve(__dirname)));
-corsApp.use('/', express.static(path.resolve(__dirname, '/tests')));
-corsApp.use((error, req, res, next) => {
-    console.error(error);
-    next();
-});
-
-process.on('uncaughtException', (err) => {
-    if(err.errno === 'EADDRINUSE') {
-        console.warn(err);
-    } else {
-        console.log(err);
-        process.exit(1);
-    }
-});
-
-corsApp.listen(CORS_PORT, () => {
-    console.log(`CORS server running on port ${CORS_PORT}`);
-});
-
-const app = express();
-app.use(cors());
-app.use((req, res, next) => {
-    // IE9 doesn't set headers for cross-domain ajax requests
-    if(typeof(req.headers['content-type']) === 'undefined'){
-        req.headers['content-type'] = "application/json";
-    }
-    next();
-});
-app.use(
-    bodyParser.json({
-        limit: '15mb',
-        type: '*/*'
-    })
-);
-
-const prefix = 'data:image/png;base64,';
-
-const writeScreenshot = (buffer, body) => {
-    const filename = `${filenamifyUrl(
-        body.test.replace(/^\/tests\/reftests\//, '').replace(/\.html$/, ''),
-        {replacement: '-'}
-    )}!${[process.env.TARGET_BROWSER, body.platform.name, body.platform.version].join('-')}`;
-
-    fs.writeFileSync(path.resolve(__dirname, screenshotFolder, `${filename}.png`), buffer);
-    return filename;
-};
-
-app.post('/screenshot', (req, res) => {
-    if (!req.body || !req.body.screenshot) {
-        return res.sendStatus(400);
-    }
-
-    const buffer = new Buffer(req.body.screenshot.substring(prefix.length), 'base64');
-    const filename = writeScreenshot(buffer, req.body);
-    fs.writeFileSync(path.resolve(__dirname, metadataFolder, `${filename}.json`), JSON.stringify({
-        windowWidth: req.body.windowWidth,
-        windowHeight: req.body.windowHeight,
-        platform: req.body.platform,
-        devicePixelRatio: req.body.devicePixelRatio,
-        test: req.body.test,
-        id: process.env.TARGET_BROWSER,
-        screenshot: filename
-    }));
-    return res.sendStatus(200);
-});
-
-app.use((error, req, res, next) => {
-    console.error(error);
-    next();
-});
-
-const listener = app.listen(8000, () => {
-    server.start();
-});
-
-

package.json

@@ -28,8 +28,10 @@
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-flow": "^7.0.0",
     "@types/chai": "^4.1.7",
+    "@types/express": "^4.17.11",
     "@types/glob": "^7.1.1",
     "@types/jest": "^24.0.18",
+    "@types/karma": "^6.3.0",
     "@types/mocha": "^5.2.6",
     "@types/node": "^11.13.2",
     "@types/platform": "^1.3.2",
@@ -50,20 +52,20 @@
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.2.0",
     "eslint-plugin-prettier": "3.0.1",
-    "express": "^4.16.4",
+    "express": "^4.17.1",
     "filenamify-url": "1.0.0",
     "glob": "7.1.3",
     "html2canvas-proxy": "1.0.1",
     "jest": "^24.9.0",
     "jquery": "^3.5.1",
     "js-polyfills": "^0.1.42",
-    "karma": "^4.0.1",
+    "karma": "^6.3.2",
-    "karma-chrome-launcher": "^2.2.0",
+    "karma-chrome-launcher": "^3.1.0",
     "karma-edge-launcher": "^0.4.2",
-    "karma-firefox-launcher": "^1.1.0",
+    "karma-firefox-launcher": "^2.1.0",
     "karma-ie-launcher": "^1.0.0",
-    "karma-junit-reporter": "^1.2.0",
+    "karma-junit-reporter": "^2.0.1",
-    "karma-mocha": "^1.3.0",
+    "karma-mocha": "^2.0.1",
     "karma-safarinative-launcher": "^1.1.0",
     "karma-sauce-launcher": "^2.0.2",
     "mocha": "^6.1.4",
@@ -88,7 +90,8 @@
     "uglify-js": "^3.5.11",
     "uglifyjs-webpack-plugin": "^1.1.2",
     "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^3.3.12",
+    "yargs": "^17.0.1"
   },
   "scripts": {
     "prebuild": "rimraf dist/ && rimraf build/ && mkdirp dist && mkdirp build",
@@ -103,10 +106,10 @@
     "lint": "eslint src/**/*.ts",
     "test": "npm run lint && npm run unittest && npm run karma",
     "unittest": "jest",
-    "karma": "node karma",
+    "karma": "ts-node tests/karma",
     "watch": "rollup -c rollup.config.ts -w",
     "watch:unittest": "mocha --require ts-node/register --watch-extensions ts -w src/**/__tests__/*.ts",
-    "start": "node tests/server"
+    "start": "ts-node tests/server --port=8080 --cors=8081"
   },
   "homepage": "https://html2canvas.hertzen.com",
   "license": "MIT",

tests/karma.ts

@@ -0,0 +1,32 @@
+import {screenshotApp, corsApp} from './server';
+import {Server} from 'http';
+import {config as KarmaConfig, Server as KarmaServer, TestResults} from 'karma';
+import * as path from 'path';
+
+const karmaTestRunner = (): Promise<void> =>
+    new Promise<void>((resolve, reject) => {
+        const karmaConfig = KarmaConfig.parseConfig(path.resolve(__dirname, '../karma.conf.js'), {});
+        const server = new KarmaServer(karmaConfig, (exitCode: number) => {
+            if (exitCode > 0) {
+                reject(`Karma has exited with ${exitCode}`);
+            } else {
+                resolve();
+            }
+        });
+        server.on('run_complete', (_browsers: any, _results: TestResults) => {
+            server.stop();
+        });
+        server.start();
+    });
+const servers: Server[] = [];
+
+servers.push(screenshotApp.listen(8000));
+servers.push(corsApp.listen(8081));
+
+karmaTestRunner().then(() => {
+    servers.forEach(server => server.close());
+}).catch(e => {
+    console.error(e);
+    process.exit(1);
+});
+

tests/server.js

@@ -1,24 +0,0 @@
-const express = require('express');
-const cors = require('cors');
-const path = require('path');
-const fs = require('fs');
-const serveIndex = require('serve-index');
-const proxy = require('html2canvas-proxy');
-
-const PORT = 8080;
-const CORS_PORT = 8081;
-
-const app = express();
-app.use('/', serveIndex(path.resolve(__dirname, '../'), {icons: true}));
-app.use('/', express.static(path.resolve(__dirname, '../')));
-app.listen(PORT, () => {
-    console.log(`Server running on port ${PORT}`);
-});
-
-const corsApp = express();
-corsApp.use('/proxy', proxy());
-corsApp.use('/cors', cors(), express.static(path.resolve(__dirname, '../')));
-corsApp.use('/', express.static(path.resolve(__dirname, '.')));
-corsApp.listen(CORS_PORT, () => {
-    console.log(`CORS server running on port ${CORS_PORT}`);
-});

tests/server.ts

@@ -0,0 +1,93 @@
+import * as express from 'express';
+const cors = require('cors');
+const path = require('path');
+const serveIndex = require('serve-index');
+const proxy = require('html2canvas-proxy');
+import yargs from 'yargs';
+import {ScreenshotRequest} from './types';
+const fs = require('fs');
+const bodyParser = require('body-parser');
+const filenamifyUrl = require('filenamify-url');
+const mkdirp = require('mkdirp');
+
+export const app = express();
+app.use('/', serveIndex(path.resolve(__dirname, '../'), {icons: true}));
+app.use('/', express.static(path.resolve(__dirname, '../')));
+
+export const corsApp = express();
+corsApp.use('/proxy', proxy());
+corsApp.use('/cors', cors(), express.static(path.resolve(__dirname, '../')));
+corsApp.use('/', express.static(path.resolve(__dirname, '.')));
+
+export const screenshotApp = express();
+screenshotApp.use(cors());
+screenshotApp.use((req: express.Request, _res: express.Response, next: express.NextFunction) => {
+    // IE9 doesn't set headers for cross-domain ajax requests
+    if (typeof req.headers['content-type'] === 'undefined') {
+        req.headers['content-type'] = 'application/json';
+    }
+    next();
+});
+screenshotApp.use(
+    bodyParser.json({
+        limit: '15mb',
+        type: '*/*'
+    })
+);
+
+const prefix = 'data:image/png;base64,';
+const screenshotFolder = '../tmp/reftests';
+const metadataFolder = '../tmp/reftests/metadata';
+
+mkdirp.sync(path.resolve(__dirname, screenshotFolder));
+mkdirp.sync(path.resolve(__dirname, metadataFolder));
+
+const writeScreenshot = (buffer: Buffer, body: ScreenshotRequest) => {
+    const filename = `${filenamifyUrl(body.test.replace(/^\/tests\/reftests\//, '').replace(/\.html$/, ''), {
+        replacement: '-'
+    })}!${[process.env.TARGET_BROWSER, body.platform.name, body.platform.version].join('-')}`;
+
+    fs.writeFileSync(path.resolve(__dirname, screenshotFolder, `${filename}.png`), buffer);
+    return filename;
+};
+
+screenshotApp.post('/screenshot', (req: express.Request<{}, void, ScreenshotRequest>, res: express.Response) => {
+    if (!req.body || !req.body.screenshot) {
+        return res.sendStatus(400);
+    }
+
+    const buffer = Buffer.from(req.body.screenshot.substring(prefix.length), 'base64');
+    const filename = writeScreenshot(buffer, req.body);
+    fs.writeFileSync(
+        path.resolve(__dirname, metadataFolder, `${filename}.json`),
+        JSON.stringify({
+            windowWidth: req.body.windowWidth,
+            windowHeight: req.body.windowHeight,
+            platform: req.body.platform,
+            devicePixelRatio: req.body.devicePixelRatio,
+            test: req.body.test,
+            id: process.env.TARGET_BROWSER,
+            screenshot: filename
+        })
+    );
+    return res.sendStatus(200);
+});
+
+screenshotApp.use((error: Error, _req: express.Request, _res: express.Response, next: express.NextFunction) => {
+    console.error(error);
+    next();
+});
+
+const args = yargs(process.argv.slice(2)).number(['port', 'cors']).argv;
+
+if (args.port) {
+    app.listen(args.port, () => {
+        console.log(`Server running on port ${args.port}`);
+    });
+}
+
+if (args.cors) {
+    corsApp.listen(args.cors, () => {
+        console.log(`CORS server running on port ${args.cors}`);
+    });
+}

tests/testrunner.ts

@@ -3,7 +3,10 @@ import {testList, ignoredTests} from '../build/reftests';
 import {default as platform} from 'platform';
 // @ts-ignore
 import Promise from 'es6-promise';
+import {ScreenshotRequest} from './types';
 
+// @ts-ignore
+window.Promise = Promise;
 const testRunnerUrl = location.href;
 const hasHistoryApi = typeof window.history !== 'undefined' && typeof window.history.replaceState !== 'undefined';
 
@@ -21,20 +24,20 @@ const uploadResults = (canvas: HTMLCanvasElement, url: string) => {
         };
         xhr.onerror = reject;
 
+        const request: ScreenshotRequest = {
+            screenshot: canvas.toDataURL(),
+            test: url,
+            platform: {
+                name: platform.name,
+                version: platform.version
+            },
+            devicePixelRatio: window.devicePixelRatio || 1,
+            windowWidth: window.innerWidth,
+            windowHeight: window.innerHeight
+        };
+
         xhr.open('POST', 'http://localhost:8000/screenshot', true);
-        xhr.send(
+        xhr.send(JSON.stringify(request));
-            JSON.stringify({
-                screenshot: canvas.toDataURL(),
-                test: url,
-                platform: {
-                    name: platform.name,
-                    version: platform.version
-                },
-                devicePixelRatio: window.devicePixelRatio || 1,
-                windowWidth: window.innerWidth,
-                windowHeight: window.innerHeight
-            })
-        );
     });
 };
 
@@ -76,40 +79,38 @@ testList
                 }
                 document.body.removeChild(testContainer);
             });
-            it('Should render untainted canvas', () => {
+
+            it('Should render untainted canvas', async () => {
                 const contentWindow = testContainer.contentWindow;
                 if (!contentWindow) {
                     throw new Error('Window not found for iframe');
                 }
 
-                return (
+                const canvas: HTMLCanvasElement = await contentWindow
-                    contentWindow
+                    // @ts-ignore
+                    .html2canvas(contentWindow.forceElement || contentWindow.document.documentElement, {
+                        removeContainer: true,
+                        backgroundColor: '#ffffff',
+                        proxy: 'http://localhost:8081/proxy',
                         // @ts-ignore
-                        .html2canvas(contentWindow.forceElement || contentWindow.document.documentElement, {
+                        ...(contentWindow.h2cOptions || {})
-                            removeContainer: true,
+                    });
-                            backgroundColor: '#ffffff',
-                            proxy: 'http://localhost:8081/proxy',
-                            // @ts-ignore
-                            ...(contentWindow.h2cOptions || {})
-                        })
-                        .then((canvas: HTMLCanvasElement) => {
-                            try {
-                                (canvas.getContext('2d') as CanvasRenderingContext2D).getImageData(
-                                    0,
-                                    0,
-                                    canvas.width,
-                                    canvas.height
-                                );
-                            } catch (e) {
-                                return Promise.reject('Canvas is tainted');
-                            }
 
-                            // @ts-ignore
+                try {
-                            if (window.__karma__) {
+                    (canvas.getContext('2d') as CanvasRenderingContext2D).getImageData(
-                                return uploadResults(canvas, url);
+                        0,
-                            }
+                        0,
-                        })
+                        canvas.width,
-                );
+                        canvas.height
+                    );
+                } catch (e) {
+                    throw new Error('Canvas is tainted');
+                }
+
+                // @ts-ignore
+                if (window.__karma__) {
+                    return uploadResults(canvas, url);
+                }
             });
         });
     });

tests/types.ts

@@ -0,0 +1,13 @@
+export interface PlatformDetails {
+    name: string;
+    version: string;
+}
+
+export interface ScreenshotRequest {
+    screenshot: string;
+    test: string;
+    platform: PlatformDetails;
+    devicePixelRatio: number;
+    windowWidth: number;
+    windowHeight: number;
+}