inlineresources/test/specs/IntegrationSpec.js

Inlines style sheets, images, fonts and scripts in HTML documents. Works in the browser.

var inline = require('../../src/inline'),
    testHelper = require('../testHelper');

describe("Integration", function () {
    "use strict";

    var testFixture = function (html) {
        var doc = document.implementation.createHTMLDocument("");
        doc.documentElement.innerHTML = html;
        return doc;
    };

    var fixturePath = function (path) {
        return testHelper.fixturesPath + 'integration/' + path;
    };

    it("should inline an image", function (done) {
        var doc = testFixture('<img src="' + fixturePath('fakeImage.png') + '">');

        inline.inlineReferences(doc, {}).then(function (errors) {
            var img = doc.querySelector('img');

            expect(img.src).toEqual(
                'data:image/png;base64,' + btoa('fakeImage.png\n')
            );

            expect(errors).toEqual([]);

            done();
        });
    });

    it("should inline an image input", function (done) {
        var doc = testFixture('<input type="image" src="' + fixturePath('fakeImage.png') + '">');

        inline.inlineReferences(doc, {}).then(function (errors) {
            var input = doc.querySelector('input');

            expect(input.src).toEqual(
                'data:image/png;base64,' + btoa('fakeImage.png\n')
            );

            expect(errors).toEqual([]);

            done();
        });
    });

    it("should inline a background image", function (done) {
        var doc = testFixture('<style>' +
            'div { background-image: url("' + fixturePath('fakeImage.png') + '"); }' +
            '</style>');

        inline.inlineReferences(doc, {}).then(function (errors) {
            var style = doc.querySelector('style'),
                rule = style.sheet.cssRules[0];

            expect(rule.style.backgroundImage).toMatch(
                new RegExp('url\\("?data:image/png;base64,' + btoa('fakeImage.png\n') + '"?\\)')
            );

            expect(errors).toEqual([]);

            done();
        });
    });

    it("should inline a font-face rule", function (done) {
        var doc = testFixture('<style>' +
            '@font-face { font-family: "FakeFont"; src: ' +
            'url("' + fixturePath('fakeFont.woff') + '"), ' +
            'url("' + fixturePath('fakeFont.ttf') + '") format("truetype"); }' +
            '</style>');

        inline.inlineReferences(doc, {}).then(function (errors) {
            var style = doc.querySelector('style'),
                rule = style.sheet.cssRules[0];

            expect(rule.style.getPropertyValue("src")).toMatch(
                new RegExp(
                    'url\\("?data:font/woff;base64,' + btoa('fakeFont.woff\n') + '"?\\), ' +
                    'url\\("?data:font/truetype;base64,' + btoa('fakeFont.ttf\n') + '"?\\) format\\("?truetype"?\\)'
                )
            );

            expect(errors).toEqual([]);

            done();
        });
    });

    it("should inline a import rule", function (done) {
        var doc = testFixture('<style>' +
            '@import url("' + fixturePath('aStylesheet.css') + '");' +
            '</style>');

        inline.inlineReferences(doc, {}).then(function (errors) {
            var style = doc.querySelector('style');

            expect(style.textContent).toMatch(/a \{\s*content: "?stylesheet"?;\s*\}/);

            expect(errors).toEqual([]);

            done();
        });
    });

    it("should inline a link", function (done) {
        var doc = testFixture('<link rel="stylesheet" href="' + fixturePath('aStylesheet.css') + '">');

        inline.inlineReferences(doc, {}).then(function (errors) {
            var style = doc.querySelector('style');

            expect(style.textContent).toMatch(/a \{\s*content: "stylesheet";\s*\}/);

            expect(errors).toEqual([]);

            done();
        });
    });

    it("should inline a script", function (done) {
        var doc = testFixture('<script src="' + fixturePath('aScript.js') + '">');

        inline.inlineReferences(doc, {}).then(function (errors) {
            var script = doc.querySelector('script');

            expect(script.textContent).toEqual('var a = "script";\n');

            expect(errors).toEqual([]);

            done();
        });
    });

    it("should include a complex setup of link, import and different paths", function (done) {
        var doc = testFixture('<link rel="stylesheet" href="' + fixturePath('withImport.css') + '">');

        inline.inlineReferences(doc, {}).then(function (errors) {
            var style = doc.querySelector('style'),
                rule = style.sheet.cssRules[0];

            expect(rule.style.backgroundImage).toMatch(
                new RegExp('url\\("?data:image/png;base64,' + btoa('anotherFakeImage.svg\n') + '"?\\)')
            );

            expect(errors).toEqual([]);

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