1 |
|
2 | "use strict";
|
3 |
|
4 | describe("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 |
|
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 |
|
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 | });
|
71 |
|
72 | it("insert at bottom", function(done) {
|
73 | let expected = [existingStyle, requiredStyle].join("\n");
|
74 |
|
75 | runCompilerTest(expected, done);
|
76 | });
|
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 | });
|
85 |
|
86 | it("singleton", function(done) {
|
87 |
|
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 |
|
99 | let expected = [
|
100 | existingStyle,
|
101 | `<style type="text/css">${requiredCss}${requiredCssTwo}</style>`
|
102 | ].join("\n");
|
103 |
|
104 | runCompilerTest(expected, done);
|
105 | });
|
106 |
|
107 | it("attrs", function(done) {
|
108 |
|
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 |
|
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 | });
|
126 |
|
127 | it("url", function(done) {
|
128 | cssRule.use = [
|
129 | {
|
130 | loader: "style-loader/url",
|
131 | options: {}
|
132 | },
|
133 | "file-loader"
|
134 | ];
|
135 |
|
136 |
|
137 | let expected = [
|
138 | existingStyle,
|
139 | '<link rel="stylesheet" type="text/css" href="ec9d4f4f24028c3d51bf1e7728e632ff.css">'
|
140 | ].join("\n");
|
141 |
|
142 | runCompilerTest(expected, done);
|
143 | });
|
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 |
|
165 | let expected = [
|
166 | existingStyle,
|
167 | `<style type="text/css">${requiredCssTwo}</style>`
|
168 | ].join("\n");
|
169 |
|
170 | runCompilerTest(expected, done);
|
171 | });
|
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 | });
|
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 | });
|
220 |
|
221 | }); |
\ | No newline at end of file |