html2canvas/tests/testrunner.js

import {expect} from 'chai';
import parseRefTest from '../scripts/parse-reftest';
import reftests from './reftests';
import querystring from 'querystring';
import platform from 'platform';
import Promise from 'promise-polyfill';

const DOWNLOAD_REFTESTS = false;
const query = querystring.parse(location.search.replace(/^\?/, ''));

const downloadResult = (filename, data) => {
    const downloadUrl = URL.createObjectURL(new Blob([data], {type: 'text/plain'}));
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = filename;

    setTimeout(() => {
        a.click();
        URL.revokeObjectURL(downloadUrl);
        document.body.removeChild(a);
    }, 100);

    document.body.appendChild(a);
};

const assertPath = (result, expected, desc) => {
    expect(result.length).to.equal(expected.length, `${desc} path length`);

    expected.forEach((e, i) => {
        const r = result[i];
        expect(r.type).to.equal(e.type, `${desc} type`);
        if (Array.isArray(r)) {
            assertPath(r, e, desc);
        } else {
            switch (r.type) {
                case 'Circle':
                    expect(r.x).to.be.closeTo(e.x, 10, `${desc} Circle #${i + 1} x`);
                    expect(r.y).to.be.closeTo(e.y, 10, `${desc} Circle #${i + 1} y`);
                    expect(r.r).to.be.closeTo(e.r, 5, `${desc} Circle #${i + 1} r`);
                    break;
                case 'Vector':
                    expect(r.x).to.be.closeTo(e.x, 10, `${desc} vector #${i + 1} x`);
                    expect(r.y).to.be.closeTo(e.y, 10, `${desc} vector #${i + 1} y`);
                    break;
                case 'BezierCurve':
                    expect(r.x0).to.be.closeTo(e.x0, 10, `${desc} beziercurve #${i + 1} x0`);
                    expect(r.y0).to.be.closeTo(e.y0, 10, `${desc} beziercurve #${i + 1} y0`);
                    expect(r.x1).to.be.closeTo(e.x1, 10, `${desc} beziercurve #${i + 1} x1`);
                    expect(r.y1).to.be.closeTo(e.y1, 10, `${desc} beziercurve #${i + 1} y1`);
                    expect(r.cx0).to.be.closeTo(e.cx0, 10, `${desc} beziercurve #${i + 1} cx0`);
                    expect(r.cy0).to.be.closeTo(e.cy0, 10, `${desc} beziercurve #${i + 1} cy0`);
                    expect(r.cx1).to.be.closeTo(e.cx1, 10, `${desc} beziercurve #${i + 1} cx1`);
                    expect(r.cy1).to.be.closeTo(e.cy1, 10, `${desc} beziercurve #${i + 1} cy1`);
                    break;
                default:
                    throw new Error(`Unknown path type ${r.type}`);
            }
        }
    });
};

(() => {
    const testRunnerUrl = location.href;
    const hasHistoryApi =
        typeof window.history !== 'undefined' && typeof window.history.replaceState !== 'undefined';

    if (typeof reftests === 'undefined') {
        it('Test harness prerequisite check', () => {
            throw new Error(
                'No reftests list defined, run "npm run create-reftest-list" to create it'
            );
        });
    } else {
        Object.keys(reftests.testList)
            .filter(test => {
                return (
                    !Array.isArray(reftests.ignoredTests[test]) ||
                    reftests.ignoredTests[test].indexOf(platform.name) === -1
                );
            })
            .forEach(url => {
                describe(url, function() {
                    this.timeout(60000);
                    this.retries(2);
                    const windowWidth = 800;
                    const windowHeight = 600;
                    const testContainer = document.createElement('iframe');
                    const REFTEST = reftests.testList[url];
                    testContainer.width = windowWidth;
                    testContainer.height = windowHeight;
                    testContainer.style.visibility = 'hidden';
                    testContainer.style.position = 'fixed';
                    testContainer.style.left = '10000px';

                    before(done => {
                        testContainer.onload = () => done();

                        testContainer.src = url + '?selenium&run=false&reftest&' + Math.random();
                        if (hasHistoryApi) {
                            // Chrome does not resolve relative background urls correctly inside of a nested iframe
                            try {
                                history.replaceState(null, '', url);
                            } catch (e) {}
                        }

                        document.body.appendChild(testContainer);
                    });
                    after(() => {
                        if (hasHistoryApi) {
                            try {
                                history.replaceState(null, '', testRunnerUrl);
                            } catch (e) {}
                        }
                        document.body.removeChild(testContainer);
                    });
                    it('Should render untainted canvas', () => {
                        return testContainer.contentWindow
                            .html2canvas(
                                testContainer.contentWindow.forceElement ||
                                    testContainer.contentWindow.document.documentElement,
                                {
                                    removeContainer: true,
                                    backgroundColor: '#ffffff',
                                    proxy: 'http://localhost:8081/proxy',
                                    ...(testContainer.contentWindow.h2cOptions || {})
                                }
                            )
                            .then(canvas => {
                                try {
                                    canvas
                                        .getContext('2d')
                                        .getImageData(0, 0, canvas.width, canvas.height);
                                } catch (e) {
                                    return Promise.reject('Canvas is tainted');
                                }

                                const delta = 10;

                                if (REFTEST && query.refTest === 'true') {
                                    const RESULTS = parseRefTest(result);
                                    REFTEST.forEach(({action, line, ...args}, i) => {
                                        const RESULT = RESULTS[i];
                                        expect(RESULT.action).to.equal(action, `Line ${line}`);

                                        const desc = `Line ${line} ${action}`;

                                        switch (action) {
                                            case 'Window':
                                                expect(RESULT.width).to.equal(
                                                    args.width,
                                                    `${desc} width`
                                                );
                                                expect(RESULT.height).to.be.closeTo(
                                                    args.height,
                                                    delta,
                                                    `${desc} height`
                                                );
                                                break;

                                            case 'Rectangle':
                                                expect(RESULT.x).to.equal(args.x, `${desc} x`);
                                                expect(RESULT.y).to.equal(args.y, `${desc} y`);
                                                expect(RESULT.width).to.equal(
                                                    args.width,
                                                    `${desc} width`
                                                );
                                                expect(RESULT.height).to.be.closeTo(
                                                    args.height,
                                                    delta,
                                                    `${desc} height`
                                                );
                                                break;

                                            case 'Fill':
                                                expect(RESULT.color).to.equal(
                                                    args.color,
                                                    `${desc} color`
                                                );
                                                break;

                                            case 'Opacity':
                                                expect(RESULT.opacity).to.equal(
                                                    args.opacity,
                                                    `${desc} opacity`
                                                );
                                                break;

                                            case 'Text':
                                                expect(RESULT.font).to.equal(
                                                    args.font,
                                                    `${desc} font`
                                                );
                                                break;

                                            case 'T':
                                                expect(RESULT.x).to.be.closeTo(
                                                    args.x,
                                                    10,
                                                    `${desc} x`
                                                );
                                                expect(RESULT.y).to.be.closeTo(
                                                    args.y,
                                                    10,
                                                    `${desc} y`
                                                );
                                                expect(RESULT.text).to.equal(
                                                    args.text,
                                                    `${desc} text`
                                                );
                                                break;

                                            case 'Transform':
                                                expect(RESULT.x).to.be.closeTo(
                                                    args.x,
                                                    10,
                                                    `${desc} x`
                                                );
                                                expect(RESULT.y).to.be.closeTo(
                                                    args.y,
                                                    10,
                                                    `${desc} y`
                                                );
                                                expect(RESULT.matrix).to.equal(
                                                    args.matrix,
                                                    `${desc} matrix`
                                                );
                                                break;

                                            case 'Repeat':
                                                expect(RESULT.x).to.be.closeTo(
                                                    args.x,
                                                    10,
                                                    `${desc} x`
                                                );
                                                expect(RESULT.y).to.be.closeTo(
                                                    args.y,
                                                    10,
                                                    `${desc} y`
                                                );
                                                expect(RESULT.width).to.be.closeTo(
                                                    args.width,
                                                    3,
                                                    `${desc} width`
                                                );
                                                expect(RESULT.height).to.be.closeTo(
                                                    args.height,
                                                    3,
                                                    `${desc} height`
                                                );
                                                expect(RESULT.imageSrc).to.equal(
                                                    args.imageSrc,
                                                    `${desc} imageSrc`
                                                );
                                                assertPath(RESULT.path, args.path, desc);
                                                break;

                                            case 'Gradient':
                                                expect(RESULT.x).to.be.closeTo(
                                                    args.x,
                                                    10,
                                                    `${desc} x`
                                                );
                                                expect(RESULT.y).to.be.closeTo(
                                                    args.y,
                                                    10,
                                                    `${desc} y`
                                                );
                                                expect(RESULT.x0).to.be.closeTo(
                                                    args.x0,
                                                    5,
                                                    `${desc} x0`
                                                );
                                                expect(RESULT.y0).to.be.closeTo(
                                                    args.y0,
                                                    5,
                                                    `${desc} y0`
                                                );
                                                expect(RESULT.x1).to.be.closeTo(
                                                    args.x1,
                                                    5,
                                                    `${desc} x1`
                                                );
                                                expect(RESULT.y1).to.be.closeTo(
                                                    args.y1,
                                                    5,
                                                    `${desc} y1`
                                                );
                                                expect(RESULT.stops).to.equal(
                                                    args.stops,
                                                    `${desc} stops`
                                                );
                                                expect(RESULT.width).to.equal(
                                                    args.width,
                                                    `${desc} width`
                                                );
                                                expect(RESULT.height).to.equal(
                                                    args.height,
                                                    `${desc} height`
                                                );

                                                break;

                                            case 'Draw image':
                                                expect(RESULT.imageSrc).to.equal(
                                                    args.imageSrc,
                                                    `${desc} stops`
                                                );
                                                expect(RESULT.sx).to.equal(args.sx, `${desc} sx`);
                                                expect(RESULT.sy).to.equal(args.sy, `${desc} sy`);
                                                expect(RESULT.dx).to.equal(args.dx, `${desc} dx`);
                                                expect(RESULT.dy).to.equal(args.dy, `${desc} dy`);
                                                expect(RESULT.sw).to.equal(args.sw, `${desc} sw`);
                                                expect(RESULT.sh).to.equal(args.sh, `${desc} sh`);
                                                expect(RESULT.dw).to.equal(args.dw, `${desc} dw`);
                                                expect(RESULT.dh).to.equal(args.dh, `${desc} dh`);
                                                break;

                                            case 'Clip':
                                                assertPath(RESULT.path, args.path, desc);
                                                break;

                                            case 'Shape':
                                                expect(RESULT.color).to.equal(
                                                    args.color,
                                                    `${desc} color`
                                                );
                                                assertPath(RESULT.path, args.path, desc);
                                                break;

                                            default:
                                                console.log(RESULT);
                                                throw new Error(`Unrecognized action ${action}`);
                                        }
                                    });
                                } else if (DOWNLOAD_REFTESTS) {
                                    downloadResult(
                                        url
                                            .slice(url.lastIndexOf('/') + 1)
                                            .replace(/\.html$/i, '.txt'),
                                        result
                                    );
                                }

                                if (window.__karma__) {
                                    return new Promise((resolve, reject) => {
                                        const xhr =
                                            'withCredentials' in new XMLHttpRequest()
                                                ? new XMLHttpRequest()
                                                : new XDomainRequest();

                                        xhr.onload = () => {
                                            if (
                                                typeof xhr.status !== 'number' ||
                                                xhr.status === 200
                                            ) {
                                                resolve();
                                            } else {
                                                reject(
                                                    `Failed to send screenshot with status ${xhr.status}`
                                                );
                                            }
                                        };
                                        xhr.onerror = reject;

                                        xhr.open('POST', 'http://localhost:8000/screenshot', true);
                                        xhr.send(JSON.stringify({
                                            screenshot: canvas.toDataURL(),
                                            test: url,
                                            platform: {
                                                name: platform.name,
                                                version: platform.version
                                            }
                                        }));
                                    });

                                }
                            });
                    });
                });
            });
    }
})();