mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
test: update karma runner (#2524)
* test: update karma runner * fix: Promise polyfill for testrunner
This commit is contained in:
Niklas von Hertzen
GitHub
parent
ba172678f0
commit
ff35c7dbd3
103
karma.js
103
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();
|
||||
});
|
||||
|
||||
|
||||
30272
package-lock.json
generated
30272
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
21
package.json
21
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-chrome-launcher": "^2.2.0",
|
||||
"karma": "^6.3.2",
|
||||
"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-mocha": "^1.3.0",
|
||||
"karma-junit-reporter": "^2.0.1",
|
||||
"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",
|
||||
|
||||
32
tests/karma.ts
Normal file
32
tests/karma.ts
Normal file
@ -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);
|
||||
});
|
||||
|
||||
@ -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}`);
|
||||
});
|
||||
93
tests/server.ts
Normal file
93
tests/server.ts
Normal file
@ -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}`);
|
||||
});
|
||||
}
|
||||
@ -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(
|
||||
JSON.stringify({
|
||||
screenshot: canvas.toDataURL(),
|
||||
test: url,
|
||||
platform: {
|
||||
name: platform.name,
|
||||
version: platform.version
|
||||
},
|
||||
devicePixelRatio: window.devicePixelRatio || 1,
|
||||
windowWidth: window.innerWidth,
|
||||
windowHeight: window.innerHeight
|
||||
})
|
||||
);
|
||||
xhr.send(JSON.stringify(request));
|
||||
});
|
||||
};
|
||||
|
||||
@ -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 (
|
||||
contentWindow
|
||||
const canvas: HTMLCanvasElement = await 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, {
|
||||
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');
|
||||
}
|
||||
...(contentWindow.h2cOptions || {})
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
if (window.__karma__) {
|
||||
return uploadResults(canvas, url);
|
||||
}
|
||||
})
|
||||
);
|
||||
try {
|
||||
(canvas.getContext('2d') as CanvasRenderingContext2D).getImageData(
|
||||
0,
|
||||
0,
|
||||
canvas.width,
|
||||
canvas.height
|
||||
);
|
||||
} catch (e) {
|
||||
throw new Error('Canvas is tainted');
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
if (window.__karma__) {
|
||||
return uploadResults(canvas, url);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
13
tests/types.ts
Normal file
13
tests/types.ts
Normal file
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user