/
useable.test.js
143 lines (118 loc) · 3.95 KB
/
useable.test.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
// Node v4 requires "use strict" to allow block scoped let & const
"use strict";
var assert = require("assert");
var sinon = require('sinon');
var loaderUtils = require('loader-utils');
var useable = require("../useable");
describe("useable tests", function () {
describe('hmr', function () {
var sandbox = sinon.sandbox.create();
var getOptions;
beforeEach(() => {
// Mock loaderUtils to override options
getOptions = sandbox.stub(loaderUtils, 'getOptions');
});
afterEach(() => {
sandbox.restore();
});
it("should output HMR code by default", function () {
assert.equal(/(module\.hot)/g.test(useable.pitch()), true);
});
it("should NOT output HMR code when options.hmr is false", function () {
getOptions.returns({hmr: false});
assert.equal(/(module\.hot)/g.test(useable.pitch()), false);
});
it("should output HMR code when options.hmr is true", function () {
getOptions.returns({hmr: true});
assert.equal(/(module\.hot)/g.test(useable.pitch()), true);
});
});
describe('insert into', function () {
var path = require("path");
var utils = require("./utils"),
runCompilerTest = utils.runCompilerTest;
var fs;
var requiredCss = ".required { color: blue }",
requiredCssTwo = ".requiredTwo { color: cyan }",
localScopedCss = ":local(.className) { background: red; }",
localComposingCss = `
:local(.composingClass) {
composes: className from './localScoped.css';
color: blue;
}
`,
requiredStyle = `<style type="text/css">${requiredCss}</style>`,
existingStyle = `<style id="existing-style">.existing { color: yellow }</style>`,
checkValue = '<div class="check">check</div>',
rootDir = path.resolve(__dirname + "/../") + "/",
jsdomHtml = [
"<html>",
"<head id='head'>",
existingStyle,
"</head>",
"<body>",
"<div class='target'>",
checkValue,
"</div>",
"<iframe class='iframeTarget'/>",
"</body>",
"</html>"
].join("\n"),
requiredJS = [
"var el = document.createElement('div');",
"el.id = \"test-shadow\";",
"document.body.appendChild(el)",
"var css = require('./style.css');",
"css.use();",
].join("\n");
var styleLoaderOptions = {};
var cssRule = {};
var defaultCssRule = {
test: /\.css?$/,
use: [
{
loader: "style-loader/useable",
options: styleLoaderOptions
},
"css-loader"
]
};
var webpackConfig = {
entry: "./main.js",
output: {
filename: "bundle.js"
},
module: {
rules: [cssRule]
}
};
var setupWebpackConfig = function() {
fs = utils.setup(webpackConfig, jsdomHtml);
// Create a tiny file system. rootDir is used because loaders are referring to absolute paths.
fs.mkdirpSync(rootDir);
fs.writeFileSync(rootDir + "main.js", requiredJS);
fs.writeFileSync(rootDir + "style.css", requiredCss);
fs.writeFileSync(rootDir + "styleTwo.css", requiredCssTwo);
fs.writeFileSync(rootDir + "localScoped.css", localScopedCss);
fs.writeFileSync(rootDir + "localComposing.css", localComposingCss);
};
beforeEach(function() {
// Reset all style-loader options
for (var member in styleLoaderOptions) {
delete styleLoaderOptions[member];
}
for (var member in defaultCssRule) {
cssRule[member] = defaultCssRule[member];
}
setupWebpackConfig();
}); // before each
it("insert into iframe", function(done) {
let selector = "iframe.iframeTarget";
styleLoaderOptions.insertInto = selector;
let expected = requiredStyle;
runCompilerTest(expected, done, function() {
return this.document.querySelector(selector).contentDocument.head.innerHTML;
}, selector);
}); // it insert into
});
});