79 lines
2.8 KiB
JavaScript
79 lines
2.8 KiB
JavaScript
var test = require('tape');
|
|
|
|
test(function (t) {
|
|
var insertCss = require('./');
|
|
var initialNbStyleTags = nbStyleTags();
|
|
|
|
// basic usage
|
|
var baseStyle = 'body{position:relative;text-decoration:overline}';
|
|
insertCss(baseStyle);
|
|
t.equal(position(), 'relative', 'initial position is `relative`');
|
|
|
|
// adds one style tag
|
|
t.equal(nbStyleTags(), initialNbStyleTags + 1, 'we added one style tag');
|
|
|
|
// default to appending style
|
|
var appendStyle = 'body{position:absolute}';
|
|
var appendStyleTag = insertCss(appendStyle);
|
|
t.equal(position(), 'absolute', 'new position is `absolute`');
|
|
|
|
// reuse same style tag
|
|
t.equal(nbStyleTags(), initialNbStyleTags + 1, 'we kept using the same style tag');
|
|
|
|
// prepend should add a new style tag before the append one
|
|
t.equal(textDecoration(), 'overline', 'text-decoration is overline by default');
|
|
var prependStyleTag = insertCss('body{text-decoration:underline !important}', {prepend: true});
|
|
t.equal(nbStyleTags(), initialNbStyleTags + 2, 'we added a new style tag');
|
|
t.equal(textDecoration(), 'underline', 'text-decoration is now underline');
|
|
var tag = prependStyleTag;
|
|
while (tag !== appendStyleTag) {
|
|
tag = tag.nextSibling;
|
|
}
|
|
t.equal(tag, appendStyleTag, 'prepend mode should add a style tag before the append one');
|
|
|
|
// uses old school styleSheet prop when present (IE)
|
|
if (!appendStyleTag.styleSheet) {
|
|
appendStyleTag.styleSheet = {cssText: 'a'};
|
|
insertCss('p{color:blue}');
|
|
t.equal(appendStyleTag.styleSheet.cssText, 'ap{color:blue}', 'we use old school styleSheet prop');
|
|
delete appendStyleTag.styleSheet;
|
|
}
|
|
|
|
// allow re-adding added style
|
|
insertCss(baseStyle);
|
|
t.equal(position(), 'relative', 'position is again `relative`');
|
|
|
|
// allow using a custom container
|
|
var customContainer = document.createElement('div');
|
|
document.querySelector('body').appendChild(customContainer);
|
|
t.equal(nbStyleTags(customContainer), 0, 'no style tag in custom container');
|
|
insertCss('body{position:absolute}', {container: customContainer});
|
|
t.equal(nbStyleTags(customContainer), 1, 'new style tag added in custom container');
|
|
t.equal(position(), 'absolute', 'position is absolute again');
|
|
|
|
t.end();
|
|
});
|
|
|
|
test(function testEmpty(t) {
|
|
var insertCss = require('./');
|
|
|
|
t.equal(insertCss(), false, 'insertCss() with no arguments returns `false`');
|
|
|
|
t.end();
|
|
});
|
|
|
|
function position() {
|
|
var getStyle = require('computed-style');
|
|
return getStyle(document.querySelector('body'), 'position');
|
|
}
|
|
|
|
function textDecoration() {
|
|
var getStyle = require('computed-style');
|
|
return getStyle(document.querySelector('body'), 'text-decoration');
|
|
}
|
|
|
|
function nbStyleTags(container) {
|
|
if (!container) container = document;
|
|
return container.querySelectorAll('style').length
|
|
}
|