app-decorators
Version:
Collection of useful ES7 Decorators, writtin in ES6, that can be used for building webapps
851 lines (686 loc) • 44.2 kB
JavaScript
System.register(['app-decorators/src/libs/element-to-function', '../../src/libs/stylesheet', '../../src/libs/eventhandler', 'sinon', '../../src/helpers/delay', 'jquery'], function (_export, _context) {
"use strict";
var _elementToFunc, Stylesheet, Eventhandler, sinon, delay, $, _this;
function _asyncToGenerator(fn) {
return function () {
var gen = fn.apply(this, arguments);
return new Promise(function (resolve, reject) {
function step(key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
return Promise.resolve(value).then(function (value) {
step("next", value);
}, function (err) {
step("throw", err);
});
}
}
return step("next");
});
};
}
return {
setters: [function (_appDecoratorsSrcLibsElementToFunction) {
_elementToFunc = _appDecoratorsSrcLibsElementToFunction.default;
}, function (_srcLibsStylesheet) {
Stylesheet = _srcLibsStylesheet.Stylesheet;
}, function (_srcLibsEventhandler) {
Eventhandler = _srcLibsEventhandler.Eventhandler;
}, function (_sinon) {
sinon = _sinon.default;
}, function (_srcHelpersDelay) {
delay = _srcHelpersDelay.delay;
}, function (_jquery) {
$ = _jquery.default;
}],
execute: function () {
_this = this;
// init special innerHTML for test
String.prototype.removeGutter = function () {
return this.replace(/[\t\n\r]/gm, '');
};
describe('Class Stylesheet ', function () {
var element = null;
var defaultOptions = null;
var stylesheet = null;
beforeEach(function () {
element = document.createElement('div');
defaultOptions = {
appendTo: element,
styles: '.foo { color: blue}',
eventFactory: function eventFactory(scope) {
return new Eventhandler({ element: scope });
}
};
});
afterEach(function () {
return stylesheet ? stylesheet.destroy() : null;
});
describe('initialize', function () {
it('should throw error required properties missing', function () {
var options1 = { appendTo: element };
var options2 = { appendTo: true, styles: '.foo { color: blue}' };
(function () {
return new Stylesheet();
}).should.throw('Required: appendTo');
(function () {
return new Stylesheet(options1);
}).should.throw('Required: styles or imports');
(function () {
return new Stylesheet(options2);
}).should.throw('Passed appendTo element should be instance of HTMLElement');
});
it('should not throw when passed arguments correct', function () {
var options1 = {
appendTo: element,
styles: '.foo { color: blue}',
eventFactory: function eventFactory(scope) {
return new Eventhandler({ element: scope });
}
};
(function () {
return new Stylesheet(options1);
}).should.not.throw();
});
it('should add correct element to instance._scope during the creation', function () {
// setup
var options = null;
// Test 1
options = Object.assign({}, defaultOptions, { attachOn: 'DOMContentLoaded' });
stylesheet = new Stylesheet(options);
should(stylesheet._scope).be.instanceof(Window);
// Test 2
options = Object.assign({}, defaultOptions, { attachOn: 'load' });
stylesheet = new Stylesheet(options);
should(stylesheet._scope).be.instanceof(Window);
// Test 2
options = Object.assign({}, defaultOptions, { attachOn: 'some-custom-event' });
stylesheet = new Stylesheet(options);
should(stylesheet._scope).be.instanceof(HTMLElement);
});
});
describe('_createStylesheetNode', function () {
it('should create style element by given stylesheet', function () {
var styleElement = null;
stylesheet = new Stylesheet(defaultOptions);
// Test 1
styleElement = stylesheet._createStylesheetNode('.a { color: #faf }');
styleElement.should.be.instanceof(HTMLStyleElement);
styleElement.outerHTML.should.be.equal('<style>.a { color: #faf }</style>');
// Test 2
styleElement = stylesheet._createStylesheetNode();
styleElement.should.be.instanceof(HTMLStyleElement);
styleElement.outerHTML.should.be.equal('<style></style>');
});
});
describe('_insertStylesheetNode', function () {
it('should append stylesElement to an empty element (appendTo)', function () {
stylesheet = new Stylesheet(defaultOptions);
var styleElement = stylesheet._createStylesheetNode('.a { color: #bab }');
// clear element
stylesheet._appendTo.innerHTML = '';
element = stylesheet._insertStylesheetNode(element, styleElement);
element.outerHTML.should.be.equal('<div><style>.a { color: #bab }</style></div>');
});
it('should append stylesElement to an element (appendTo) with nodes', function () {
stylesheet = new Stylesheet(defaultOptions);
var styleElement = stylesheet._createStylesheetNode('.a { color: #bab }');
// clear element
stylesheet._appendTo.innerHTML = '<b>zZz</b>';
element = stylesheet._insertStylesheetNode(element, styleElement);
element.outerHTML.should.be.equal('<div><style>.a { color: #bab }</style><b>zZz</b></div>');
});
});
describe('_runProcess', function () {
it('logic inside of _runProcess', function (done) {
// this test this._trigger inside of _runProcess
element.addEventListener('attached', function () {
return done();
});
stylesheet = new Stylesheet(defaultOptions);
// clear element
stylesheet._appendTo.innerHTML = '';
element = stylesheet._runProcess('.abc { color: #cac }');
stylesheet._appendTo.outerHTML.should.be.equal('<div><style>.abc { color: #cac }</style></div>');
});
});
describe('_getEventName', function () {
it('determine eventname by passed on string', function () {
var stylesheet = new Stylesheet(defaultOptions);
stylesheet._getEventName('load').should.be.equal("load");
stylesheet._getEventName('click .foo').should.be.equal("click");
stylesheet._getEventName('click click').should.be.equal("click");
stylesheet._getEventName('startpage /a/b/c.html').should.be.equal("startpage");
stylesheet._getEventName('/a/b/c.html /a/b/c.html').should.be.equal("/a/b/c.html");
stylesheet._getEventName('only-screen-(max-width:-500px) only screen (max-width: 500px)').should.be.equal("only-screen-(max-width:-500px)");
});
});
describe('multiple events', function () {
var element = null;
beforeEach(function () {
element = document.createElement('div');
sinon.spy(Stylesheet.prototype, "_processListener");
});
afterEach(function () {
Stylesheet.prototype._processListener.restore();
stylesheet.destroy();
});
it('should trigger every event', function () {
var options = Object.assign({}, defaultOptions, {
appendTo: element,
attachOn: 'foo',
removeEvent: false,
type: 'on'
});
stylesheet = new Stylesheet(options);
element.dispatchEvent(new Event('foo'));
element.dispatchEvent(new Event('foo'));
element.dispatchEvent(new Event('foo'));
stylesheet._processListener.callCount.should.be.equal(3);
stylesheet._appendTo.outerHTML.should.be.equal('<div>' + '<style>.foo { color: blue}</style>' + '<style>.foo { color: blue}</style>' + '<style>.foo { color: blue}</style>' + '</div>');
});
it('should add style node only once', function () {
// default of "removeEvent" is true
var options = Object.assign({}, defaultOptions, {
appendTo: element,
attachOn: 'foo',
type: 'on'
});
stylesheet = new Stylesheet(options);
element.dispatchEvent(new Event('foo'));
element.dispatchEvent(new Event('foo'));
element.dispatchEvent(new Event('foo'));
stylesheet._processListener.callCount.should.be.equal(1);
stylesheet._appendTo.outerHTML.should.be.equal('<div>' + '<style>.foo { color: blue}</style>' + '</div>');
});
});
describe('async load css from external sources', function () {
var element = null;
var importSrc = null;
var importSrc2 = null;
beforeEach(function () {
element = document.createElement('div');
element.innerHTML = '<figure>Foo</figure>';
importSrc = "http://localhost:4000/styles/test-1.css";
importSrc2 = "http://localhost:4000/styles/test-2.css";
sinon.spy(Stylesheet.prototype, "_runProcess");
});
afterEach(function () {
Stylesheet.prototype._runProcess.restore();
Stylesheet.prototype._supportRelPreload.restore();
stylesheet.destroy();
});
it('should load css by link rel="preload"', function () {
// fake _supportRelPreload for forcing link rel="preload"
sinon.stub(Stylesheet.prototype, '_supportRelPreload').callsFake(function () {
return true;
});
var options = Object.assign({}, defaultOptions, {
styles: "",
appendTo: element,
attachOn: 'immediately',
type: 'default',
imports: [importSrc]
});
stylesheet = new Stylesheet(options);
stylesheet._runProcess.callCount.should.be.equal(1);
// we need this hack because, when we force "preload" on devices that doesnt
// support it, it remove as attr. So we have to append it afterwards.
stylesheet._appendTo.querySelector('link').setAttribute('as', "style");
var linkElement = stylesheet._appendTo.querySelector('link');
linkElement.getAttribute('rel').should.be.equal("preload");
linkElement.getAttribute('href').should.be.equal(importSrc);
linkElement.getAttribute('as').should.be.equal("style");
// when this not happend then onload event will not fired
document.body.append(stylesheet._appendTo);
});
it('should load css by link rel="stylesheet" with async media attr hack', function (done) {
// fake _supportRelPreload for forcing link rel="stylesheet"
sinon.stub(Stylesheet.prototype, '_supportRelPreload').callsFake(function () {
return false;
});
var options = Object.assign({}, defaultOptions, {
styles: "",
appendTo: element,
attachOn: 'bar',
type: 'on',
imports: [importSrc],
// works only with link[rel="stylesheet"]
onLoadImports: function onLoadImports(mustCall, node) {
mustCall(done);
// after loaded
node.getAttribute("media").should.be.equal("all");
}
});
stylesheet = new Stylesheet(options);
element.dispatchEvent(new Event('bar'));
stylesheet._runProcess.callCount.should.be.equal(1);
stylesheet._appendTo.outerHTML.should.be.equal('<div>' +
// see for media="only x" hack => https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js#L25
'<link rel="stylesheet" href="http://localhost:4000/styles/test-1.css" media="only x">' + '<figure>Foo</figure>' + '</div>');
// when this not happend then onload event will not fired
document.body.append(element);
});
it('should load multiple imports by rel="stylesheet"', function () {
// fake _supportRelPreload for forcing link rel="stylesheet"
sinon.stub(Stylesheet.prototype, '_supportRelPreload').callsFake(function () {
return false;
});
var options = Object.assign({}, defaultOptions, {
styles: "",
appendTo: element,
attachOn: 'click figure',
type: 'on',
imports: [importSrc, importSrc2]
});
stylesheet = new Stylesheet(options);
element.querySelector("figure").click();
stylesheet._runProcess.callCount.should.be.equal(1);
stylesheet._appendTo.outerHTML.should.be.equal('<div>' + '<link rel="stylesheet" href="http://localhost:4000/styles/test-1.css" media="only x">' + '<link rel="stylesheet" href="http://localhost:4000/styles/test-2.css" media="only x">' + '<figure>Foo</figure>' + '</div>');
// when this not happend then onload event will not fired
document.body.append(element);
});
it('should reinit load css by link rel="stylesheet" with async media attr hack when it destroyed', function (done) {
// fake _supportRelPreload for forcing link rel="stylesheet"
sinon.stub(Stylesheet.prototype, '_supportRelPreload').callsFake(function () {
return false;
});
var options = Object.assign({}, defaultOptions, {
styles: "",
appendTo: element,
attachOn: 'bar',
type: 'on',
imports: [importSrc],
// works only with link[rel="stylesheet"]
onLoadImports: function onLoadImports(mustCall, node) {
mustCall(done);
// after loaded
node.getAttribute("media").should.be.equal("all");
}
});
var expectedHMLWhenDestroyed = '<div><figure>Foo</figure></div>';
var expectedHTML = '<div>' +
// see for media="only x" hack => https://github.com/filamentgroup/loadCSS/blob/master/src/loadCSS.js#L25
'<link rel="stylesheet" href="http://localhost:4000/styles/test-1.css" media="only x">' + '<figure>Foo</figure>' + '</div>';
stylesheet = new Stylesheet(options);
stylesheet._runProcess.callCount.should.be.equal(0);
element.dispatchEvent(new Event('bar'));
stylesheet._runProcess.callCount.should.be.equal(1);
element.outerHTML.should.be.equal(expectedHTML);
stylesheet.destroy();
element.outerHTML.should.be.equal(expectedHMLWhenDestroyed);
stylesheet.reinit(element);
element.dispatchEvent(new Event('bar'));
stylesheet._runProcess.callCount.should.be.equal(2);
element.outerHTML.should.be.equal(expectedHTML);
// when this not happend then onload event will not fired
document.body.append(element);
});
});
/*
describe.skip('verbose flag', () => {
let element = null;
let importSrc = null;
let importSrc2 = null;
beforeEach(() => {
element = document.createElement('div');
element.innerHTML = '<figure>Foo</figure>';
importSrc = "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css";
importSrc2 = "https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css";
sinon.spy(Stylesheet.prototype, "_runProcess");
});
afterEach(() => {
Stylesheet.prototype._runProcess.restore();
Stylesheet.prototype._supportRelPreload.restore();
stylesheet.destroy();
});
it.skip('should create style nodes with verbose flag', () => {
sinon.stub(Stylesheet.prototype, '_supportRelPreload').callsFake(() => false);
let options = Object.assign({}, defaultOptions, {
styles: ".foo { bar }",
appendTo: element,
attachOn: 'bar',
type: 'on',
imports: [ importSrc, importSrc2 ],
verbose: true,// @TODO: add verbose
// works only with link[rel="stylesheet"]
onLoadImports: (mustCall, node) => {
mustCall(done);
// after loaded
node.getAttribute("media").should.be.equal("all");
},
});
stylesheet = new Stylesheet(options);
});
});
*/
describe('click event', function () {
var element = null;
beforeEach(function () {
element = document.createElement('div');
element.innerHTML = '<div class="foo">Foo</div>';
sinon.spy(Stylesheet.prototype, "_processListener");
});
afterEach(function () {
Stylesheet.prototype._processListener.restore();
stylesheet.destroy();
});
it('should trigger on click', function () {
var options = Object.assign({}, defaultOptions, {
appendTo: element,
attachOn: 'click .foo',
type: 'on'
});
stylesheet = new Stylesheet(options);
element.querySelector('.foo').click();
stylesheet._processListener.callCount.should.be.equal(1);
stylesheet._appendTo.outerHTML.should.be.equal('<div>' + '<style>.foo { color: blue}</style>' + '<div class="foo">Foo</div>' + '</div>');
});
});
describe('style and link order', function () {
var element = null;
var container = [];
var styles = [{
attachOn: 'load',
type: 'on',
// z.B. a.css nach => http://192.168.2.100:4000/styles/test-1.css;
// dann kann auch unten "only x" den echten wert annehmen
// überral im projekt nach schauen
imports: ["a.css", "b.css", "c.css"],
styles: '.baz {color: green;}'
}, {
attachOn: 'load',
type: 'lala',
imports: ["e.css", "f.css"],
styles: '.laz {color: green;}'
}, {
attachOn: 'immediately',
type: 'default',
imports: [],
styles: '.foo {color: blue;}'
}, {
attachOn: 'immediately',
type: 'default',
imports: [],
styles: '.naz {color: yellow;}'
}, {
attachOn: 'DOMContentLoaded',
type: 'on',
imports: ["d.css"],
styles: '.bar {color: red;}'
}];
beforeEach(function () {
return element = document.createElement('div');
});
afterEach(function () {
Stylesheet.prototype._supportRelPreload.restore();
stylesheet && stylesheet.destroy ? stylesheet.destroy() : null;
container.forEach(function (stylesheet) {
return stylesheet.destroy();
});
});
it('should add style firstly then imports in array order', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var config;
return regeneratorRuntime.wrap(function _callee$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
sinon.stub(Stylesheet.prototype, '_supportRelPreload').callsFake(function () {
return false;
});
config = Object.assign({}, defaultOptions, {
appendTo: element,
attachOn: 'foo',
type: 'on',
order: 0,
imports: ["http://localhost:4000/styles/test-1.css", "http://localhost:4000/styles/test-2.css", "http://localhost:4000/styles/test-1.css"],
styles: '.baz {' + 'color: green;' + '}'
});
stylesheet = new Stylesheet(config);
// its needed to append body otherwise it will not load the styles
// and rel="stylesheet" cant take the status of media="all" instead of media="only x".
// "only x" is a hack, that allow us to load the css in no blocking mode.
document.body.appendChild(element);
element.dispatchEvent(new Event('foo'));
_context2.next = 7;
return delay(100);
case 7:
/*
let selectors = [
'[href="http://localhost:4000/styles/test-1.css"]',
'[href="http://localhost:4000/styles/test-2.css"]',
];
await onAttributeChanged(selectors, ({ target }) => {
if(target.getAttribute("media") === "all"){
done();
}
}, element);
*/
element.outerHTML.should.be.equal('<div>' + '<style class="style-order-0">.baz {color: green;}</style>' + '<link rel="stylesheet" href="http://localhost:4000/styles/test-1.css" media="all" class="style-order-0">' + '<link rel="stylesheet" href="http://localhost:4000/styles/test-2.css" media="all" class="style-order-0">' + '<link rel="stylesheet" href="http://localhost:4000/styles/test-1.css" media="all" class="style-order-0">' + '</div>');
case 8:
case 'end':
return _context2.stop();
}
}
}, _callee, _this);
})));
it('should create style element in order of pass array ', function (done) {
sinon.stub(Stylesheet.prototype, '_supportRelPreload').callsFake(function () {
return false;
});
for (var i = 0, len = styles.length; i < len; i++) {
var style = styles[i];
container.push(new Stylesheet(Object.assign({}, defaultOptions, {
appendTo: element,
attachOn: style.attachOn,
imports: style.imports,
styles: style.styles,
type: style.type,
order: i
})));
}
setTimeout(function () {
element.outerHTML.should.be.equal('<div>' + '<style class="style-order-0">.baz {color: green;}</style>' + '<link rel="stylesheet" href="a.css" media="only x" class="style-order-0">' + '<link rel="stylesheet" href="b.css" media="only x" class="style-order-0">' + '<link rel="stylesheet" href="c.css" media="only x" class="style-order-0">' + '<style class="style-order-1">.laz {color: green;}</style>' + '<link rel="stylesheet" href="e.css" media="only x" class="style-order-1">' + '<link rel="stylesheet" href="f.css" media="only x" class="style-order-1">' + '<style class="style-order-2">.foo {color: blue;}</style>' + '<style class="style-order-3">.naz {color: yellow;}</style>' + '<style class="style-order-4">.bar {color: red;}</style>' + '<link rel="stylesheet" href="d.css" media="only x" class="style-order-4">' + '</div>');
done();
}, 500);
element.dispatchEvent(new Event("lala"));
});
it('should create style element in order of pass array with inner <header> element', function () {
sinon.stub(Stylesheet.prototype, '_supportRelPreload').callsFake(function () {
return false;
});
for (var i = 0, len = styles.length; i < len; i++) {
var style = styles[i];
container.push(new Stylesheet(Object.assign({}, defaultOptions, {
appendTo: element,
attachOn: style.attachOn,
imports: style.imports,
styles: style.styles,
type: style.type,
order: i
})));
}
element.innerhTML = '<header>Hello World</header>';
setTimeout(function () {
element.outerHTML.should.be.equal('<div>' + '<style class="style-order-0">.baz {color: green;}</style>' + '<link rel="stylesheet" href="a.css" media="only x" class="style-order-0">' + '<link rel="stylesheet" href="b.css" media="only x" class="style-order-0">' + '<link rel="stylesheet" href="c.css" media="only x" class="style-order-0">' + '<style class="style-order-1">.laz {color: green;}</style>' + '<link rel="stylesheet" href="e.css" media="only x" class="style-order-1">' + '<link rel="stylesheet" href="f.css" media="only x" class="style-order-1">' + '<style class="style-order-2">.foo {color: blue;}</style>' + '<style class="style-order-3">.naz {color: yellow;}</style>' + '<style class="style-order-4">.bar {color: red;}</style>' + '<link rel="stylesheet" href="d.css" media="only x" class="style-order-4">' + '<header>Hello World</header>' + '</div>');
done();
}, 1000);
element.dispatchEvent(new Event("lala"));
});
});
describe('reinit', function () {
it('should work when destroy and reinit again', function () {
stylesheet = new Stylesheet(defaultOptions);
should(stylesheet._refs.get(stylesheet)).be.instanceof(Map);
stylesheet.destroy();
should(stylesheet._refs.get(stylesheet)).be.not.ok();
should(stylesheet._scope).be.not.ok();
should(stylesheet._stylesElement).be.not.ok();
should(stylesheet._appendTo).be.not.ok();
stylesheet.reinit(element);
should(stylesheet._scope).be.instanceof(Window);
stylesheet._stylesElement.outerHTML.should.be.equal('<style>.foo { color: blue}</style>'), stylesheet._appendTo.outerHTML.should.be.equal('<div><style>.foo { color: blue}</style></div>');
});
});
describe('logic inside of _run method', function () {
// declarations
var stylesheet = null;
var element = null;
var defaultOptions = null;
var getOptions = function getOptions(options) {
return Object.assign({}, defaultOptions, options);
};
var stub = function stub(method, value) {
return sinon.stub(Stylesheet.prototype, method).callsFake(function (_) {
return value;
});
};
var expectedResult = '<div id="appendToElement">' + '<style>' + '.foo { color: blue }' + '</style>' + '</div>';
beforeEach(function () {
element = document.createElement('div');
element.id = "appendToElement";
defaultOptions = {
appendTo: element,
styles: '.foo { color: blue }',
eventFactory: function eventFactory(scope) {
return new Eventhandler({ element: scope });
}
};
sinon.spy(Stylesheet.prototype, "_isAlreadyDone");
sinon.spy(Stylesheet.prototype, "_runProcess");
sinon.spy(Stylesheet.prototype, "_processListener");
sinon.spy(Stylesheet.prototype, "_addEventListener");
});
afterEach(function () {
Stylesheet.prototype._getDocumentReadyState.restore();
Stylesheet.prototype._isAlreadyDone.restore();
Stylesheet.prototype._runProcess.restore();
Stylesheet.prototype._processListener.restore();
Stylesheet.prototype._addEventListener.restore();
stylesheet.destroy();
});
/*************************************************************************
* _cleanup is here tested! Remove for test cases removeListener in _cleanup
* and see whats going on
*************************************************************************/
/**
* "attachOn == immediately"
*/
it('should work as expected when "readyState == loading" and "attachOn == immediately"', function () {
stub("_getDocumentReadyState", 'loading');
stylesheet = new Stylesheet(getOptions({ attachOn: 'immediately' }));
stylesheet._isAlreadyDone.args[0][0].should.be.equal('immediately');
stylesheet._isAlreadyDone.returnValues[0].should.be.equal(true);
stylesheet._runProcess.callCount.should.be.equal(1);
stylesheet._addEventListener.callCount.should.be.equal(0);
stylesheet._processListener.callCount.should.be.equal(0);
});
/**
* readyState == loading for document.{ load, DOMContentLoaded }
*/
it('should work as expected when "readyState == loading" and "attachOn == DOMContentLoaded"', function () {
element.innerHTML = '<div class="bar">Hello World</div>';
stub("_getDocumentReadyState", 'loading');
stylesheet = new Stylesheet(getOptions({ attachOn: 'DOMContentLoaded' }));
stylesheet._isAlreadyDone.args[0][0].should.be.equal('DOMContentLoaded');
stylesheet._isAlreadyDone.returnValues[0].should.be.equal(false);
stylesheet._runProcess.callCount.should.be.equal(0);
stylesheet._addEventListener.callCount.should.be.equal(1);
stylesheet._processListener.callCount.should.be.equal(0);
// simulate DOMContentLoaded event
window.dispatchEvent(new Event('DOMContentLoaded'));
stylesheet._processListener.callCount.should.be.equal(1);
stylesheet._runProcess.callCount.should.be.equal(1);
stylesheet._appendTo.outerHTML.should.be.equal('<div id="appendToElement">' + '<style>' + '.foo { color: blue }' + '</style>' + '<div class="bar">Hello World</div>' + '</div>');
});
it('should work as expected when "readyState == loading" and "attachOn == load"', function () {
stub("_getDocumentReadyState", 'loading');
stylesheet = new Stylesheet(getOptions({ attachOn: 'load' }));
stylesheet._isAlreadyDone.args[0][0].should.be.equal('load');
stylesheet._isAlreadyDone.returnValues[0].should.be.equal(false);
stylesheet._runProcess.callCount.should.be.equal(0);
stylesheet._addEventListener.callCount.should.be.equal(1);
stylesheet._processListener.callCount.should.be.equal(0);
// simulate load event
window.dispatchEvent(new Event('load'));
stylesheet._processListener.callCount.should.be.equal(1);
stylesheet._runProcess.callCount.should.be.equal(1);
stylesheet._appendTo.outerHTML.should.be.equal(expectedResult);
});
/**
* readyState == interactive for document.{ load, DOMContentLoaded }
*/
it('should work as expected when "readyState == interactive" and "attachOn == DOMContentLoaded"', function () {
stub("_getDocumentReadyState", 'interactive');
stylesheet = new Stylesheet(getOptions({ attachOn: 'DOMContentLoaded' }));
stylesheet._isAlreadyDone.args[0][0].should.be.equal('DOMContentLoaded');
stylesheet._isAlreadyDone.returnValues[0].should.be.equal(true);
stylesheet._runProcess.callCount.should.be.equal(1);
stylesheet._addEventListener.callCount.should.be.equal(0);
stylesheet._processListener.callCount.should.be.equal(0);
stylesheet._appendTo.outerHTML.should.be.equal(expectedResult);
});
it('should work as expected when "readyState == interactive" and "attachOn == load"', function () {
stub("_getDocumentReadyState", 'interactive');
stylesheet = new Stylesheet(getOptions({ attachOn: 'load' }));
stylesheet._isAlreadyDone.args[0][0].should.be.equal('load');
stylesheet._isAlreadyDone.returnValues[0].should.be.equal(false);
stylesheet._runProcess.callCount.should.be.equal(0);
stylesheet._addEventListener.callCount.should.be.equal(1);
stylesheet._processListener.callCount.should.be.equal(0);
// simulate load event
window.dispatchEvent(new Event('load'));
stylesheet._processListener.callCount.should.be.equal(1);
stylesheet._runProcess.callCount.should.be.equal(1);
stylesheet._appendTo.outerHTML.should.be.equal(expectedResult);
});
/**
* readyState == complete for document.{ load, DOMContentLoaded }
*/
it('should work as expected when "readyState == complete" and "attachOn == DOMContentLoaded"', function () {
stub("_getDocumentReadyState", 'complete');
stylesheet = new Stylesheet(getOptions({ attachOn: 'DOMContentLoaded' }));
stylesheet._isAlreadyDone.args[0][0].should.be.equal('DOMContentLoaded');
stylesheet._isAlreadyDone.returnValues[0].should.be.equal(true);
stylesheet._runProcess.callCount.should.be.equal(1);
stylesheet._addEventListener.callCount.should.be.equal(0);
stylesheet._processListener.callCount.should.be.equal(0);
stylesheet._appendTo.outerHTML.should.be.equal(expectedResult);
});
it('should work as expected when "readyState == complete" and "attachOn == load"', function () {
stub("_getDocumentReadyState", 'complete');
stylesheet = new Stylesheet(getOptions({ attachOn: 'load' }));
stylesheet._isAlreadyDone.args[0][0].should.be.equal('load');
stylesheet._isAlreadyDone.returnValues[0].should.be.equal(true);
stylesheet._runProcess.callCount.should.be.equal(1);
stylesheet._addEventListener.callCount.should.be.equal(0);
stylesheet._processListener.callCount.should.be.equal(0);
stylesheet._appendTo.outerHTML.should.be.equal(expectedResult);
});
it('should work as expected when trigger load event', function () {
stub("_getDocumentReadyState", 'loading');
stylesheet = new Stylesheet(getOptions({ attachOn: 'load' }));
stylesheet._isAlreadyDone.args[0][0].should.be.equal('load');
stylesheet._isAlreadyDone.returnValues[0].should.be.equal(false);
stylesheet._addEventListener.callCount.should.be.equal(1);
stylesheet._processListener.callCount.should.be.equal(0);
stylesheet._runProcess.callCount.should.be.equal(0);
window.dispatchEvent(new Event('load'));
stylesheet._processListener.callCount.should.be.equal(1);
stylesheet._runProcess.callCount.should.be.equal(1);
stylesheet._appendTo.outerHTML.should.be.equal(expectedResult);
});
});
});
}
};
});
//# sourceMappingURL=stylesheet.spec.js.map