UNPKG

5.55 kBJavaScriptView Raw
1// Node v4 requires "use strict" to allow block scoped let & const
2"use strict";
3
4describe("basic tests", function() {
5 var path = require("path");
6
7 var utils = require("./utils"),
8 runCompilerTest = utils.runCompilerTest;
9
10 var fs;
11
12 var requiredCss = ".required { color: blue }",
13 requiredCssTwo = ".requiredTwo { color: cyan }",
14 localScopedCss = ":local(.className) { background: red; }",
15 requiredStyle = `<style type="text/css">${requiredCss}</style>`,
16 existingStyle = "<style>.existing { color: yellow }</style>",
17 checkValue = '<div class="check">check</div>',
18 rootDir = path.resolve(__dirname + "/../") + "/",
19 jsdomHtml = [
20 "<html>",
21 "<head>",
22 existingStyle,
23 "</head>",
24 "<body>",
25 "<div class='target'>",
26 checkValue,
27 "</div>",
28 "</body>",
29 "</html>"
30 ].join("\n");
31
32 var styleLoaderOptions = {};
33 var cssRule = {};
34
35 var defaultCssRule = {
36 test: /\.css?$/,
37 use: [
38 {
39 loader: "style-loader",
40 options: styleLoaderOptions
41 },
42 "css-loader"
43 ]
44 };
45
46 var webpackConfig = {
47 entry: "./main.js",
48 output: {
49 filename: "bundle.js"
50 },
51 module: {
52 rules: [cssRule]
53 }
54 };
55
56 beforeEach(function() {
57 // Reset all style-loader options
58 for (var member in styleLoaderOptions) {
59 delete styleLoaderOptions[member];
60 }
61
62 for (var member in defaultCssRule) {
63 cssRule[member] = defaultCssRule[member];
64 }
65
66 fs = utils.setup(webpackConfig, jsdomHtml);
67
68 // Create a tiny file system. rootDir is used because loaders are refering to absolute paths.
69 fs.mkdirpSync(rootDir);
70 fs.writeFileSync(rootDir + "main.js", "var css = require('./style.css');");
71 fs.writeFileSync(rootDir + "style.css", requiredCss);
72 fs.writeFileSync(rootDir + "styleTwo.css", requiredCssTwo);
73 fs.writeFileSync(rootDir + "localScoped.css", localScopedCss);
74 }); // before each
75
76 it("insert at bottom", function(done) {
77 let expected = [existingStyle, requiredStyle].join("\n");
78
79 runCompilerTest(expected, done);
80 }); // it insert at bottom
81
82 it("insert at top", function(done) {
83 styleLoaderOptions.insertAt = "top";
84
85 let expected = [requiredStyle, existingStyle].join("\n");
86
87 runCompilerTest(expected, done);
88 }); // it insert at top
89
90 it("insert into", function(done) {
91 let selector = "div.target";
92 styleLoaderOptions.insertInto = selector;
93
94 let expected = [checkValue, requiredStyle].join("\n");
95
96 runCompilerTest(expected, done, undefined, selector);
97 }); // it insert into
98
99 it("singleton", function(done) {
100 // Setup
101 styleLoaderOptions.singleton = true;
102
103 fs.writeFileSync(
104 rootDir + "main.js",
105 [
106 "var a = require('./style.css');",
107 "var b = require('./styleTwo.css');"
108 ].join("\n")
109 );
110
111 // Run
112 let expected = [
113 existingStyle,
114 `<style type="text/css">${requiredCss}${requiredCssTwo}</style>`
115 ].join("\n");
116
117 runCompilerTest(expected, done);
118 }); // it singleton
119
120 it("attrs", function(done) {
121 // Setup
122 styleLoaderOptions.attrs = {id: 'style-tag-id'};
123
124 fs.writeFileSync(
125 rootDir + "main.js",
126 [
127 "var a = require('./style.css');"
128 ].join("\n")
129 );
130
131 // Run
132 let expected = [
133 existingStyle,
134 `<style id="${styleLoaderOptions.attrs.id}" type="text/css">${requiredCss}</style>`
135 ].join("\n");
136
137 runCompilerTest(expected, done);
138 }); // it attrs
139
140 it("url", function(done) {
141 cssRule.use = [
142 {
143 loader: "style-loader/url",
144 options: {}
145 },
146 "file-loader"
147 ];
148
149 // Run
150 let expected = [
151 existingStyle,
152 '<link rel="stylesheet" type="text/css" href="ec9d4f4f24028c3d51bf1e7728e632ff.css">'
153 ].join("\n");
154
155 runCompilerTest(expected, done);
156 }); // it url
157
158 it("useable", function(done) {
159 cssRule.use = [
160 {
161 loader: "style-loader/useable"
162 },
163 "css-loader"
164 ];
165
166 fs.writeFileSync(
167 rootDir + "main.js",
168 [
169 "var css = require('./style.css');",
170 "var cssTwo = require('./styleTwo.css');",
171 "css.use();",
172 "cssTwo.use();",
173 "css.unuse();"
174 ].join("\n")
175 );
176
177 // Run
178 let expected = [
179 existingStyle,
180 `<style type="text/css">${requiredCssTwo}</style>`
181 ].join("\n");
182
183 runCompilerTest(expected, done);
184 }); // it useable
185
186 it("local scope", function(done) {
187 cssRule.use = [
188 {
189 loader: "style-loader"
190 },
191 {
192 loader: "css-loader",
193 options: {
194 localIdentName: '[name].[local]_[hash:base64:7]'
195 }
196 }
197 ];
198
199 fs.writeFileSync(
200 rootDir + "main.js",
201 [
202 "css = require('./localScoped.css');"
203 ].join("\n")
204 );
205
206 let expected = 'localScoped-className_3dIU6Uf';
207 runCompilerTest(expected, done, function() { return this.css.className; });
208 }); // it local scope
209
210 it("local scope, useable", function(done) {
211 cssRule.use = [
212 {
213 loader: "style-loader/useable"
214 },
215 {
216 loader: "css-loader",
217 options: {
218 localIdentName: '[name].[local]_[hash:base64:7]'
219 }
220 }
221 ];
222
223 fs.writeFileSync(
224 rootDir + "main.js",
225 [
226 "css = require('./localScoped.css');"
227 ].join("\n")
228 );
229
230 let expected = 'localScoped-className_3dIU6Uf';
231 runCompilerTest(expected, done, function() { return this.css.locals.className; });
232 }); // it local scope
233
234}); // describe