UNPKG

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