mirror
/
html2canvas
mirror of https://github.com/niklasvh/html2canvas.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

test: update karma runner (#2524) 

* test: update karma runner

* fix: Promise polyfill for testrunner
This commit is contained in:
Niklas von Hertzen 2021-05-08 18:32:03 +08:00 committed by GitHub
parent ba172678f0
commit ff35c7dbd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 26988 additions and 3651 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
karma.js
View File

@ -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
View File

File diff suppressed because it is too large Load Diff

21
package.json
View File

@ -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
View 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);
});

24
tests/server.js
View File

@ -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
View 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}`);
});
}

81
tests/testrunner.ts
View File

@ -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
View 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;
}