151 lines
3.5 KiB
JavaScript
151 lines
3.5 KiB
JavaScript
// Node v4 requires "use strict" to allow block scoped let & const
|
|
"use strict";
|
|
|
|
describe("basic tests", function() {
|
|
var path = require("path");
|
|
|
|
var utils = require("./utils"),
|
|
runCompilerTest = utils.runCompilerTest;
|
|
|
|
var fs;
|
|
|
|
var requiredCss = ".required { color: blue }",
|
|
requiredCssTwo = ".requiredTwo { color: cyan }",
|
|
requiredStyle = `<style type="text/css">${requiredCss}</style>`,
|
|
existingStyle = "<style>.existing { color: yellow }</style>",
|
|
rootDir = path.resolve(__dirname + "/../") + "/",
|
|
jsdomHtml = [
|
|
"<html>",
|
|
"<head>",
|
|
existingStyle,
|
|
"</head>",
|
|
"<body>",
|
|
"</body>",
|
|
"</html>"
|
|
].join("\n");
|
|
|
|
var styleLoaderOptions = {};
|
|
var cssRule = {};
|
|
|
|
var defaultCssRule = {
|
|
test: /\.css?$/,
|
|
use: [
|
|
{
|
|
loader: "style-loader",
|
|
options: styleLoaderOptions
|
|
},
|
|
"css-loader"
|
|
]
|
|
};
|
|
|
|
var webpackConfig = {
|
|
entry: "./main.js",
|
|
output: {
|
|
filename: "bundle.js"
|
|
},
|
|
module: {
|
|
rules: [cssRule]
|
|
}
|
|
};
|
|
|
|
beforeEach(function() {
|
|
// Reset all style-loader options
|
|
for (var member in styleLoaderOptions) {
|
|
delete styleLoaderOptions[member];
|
|
}
|
|
|
|
for (var member in defaultCssRule) {
|
|
cssRule[member] = defaultCssRule[member];
|
|
}
|
|
|
|
fs = utils.setup(webpackConfig, jsdomHtml);
|
|
|
|
// Create a tiny file system. rootDir is used because loaders are refering to absolute paths.
|
|
fs.mkdirpSync(rootDir);
|
|
fs.writeFileSync(rootDir + "main.js", "var css = require('./style.css');");
|
|
fs.writeFileSync(rootDir + "style.css", requiredCss);
|
|
fs.writeFileSync(rootDir + "styleTwo.css", requiredCssTwo);
|
|
}); // before each
|
|
|
|
it("insert at bottom", function(done) {
|
|
let expected = [existingStyle, requiredStyle].join("\n");
|
|
|
|
runCompilerTest(expected, done);
|
|
}); // it insert at bottom
|
|
|
|
it("insert at top", function(done) {
|
|
styleLoaderOptions.insertAt = "top";
|
|
|
|
let expected = [requiredStyle, existingStyle].join("\n");
|
|
|
|
runCompilerTest(expected, done);
|
|
}); // it insert at top
|
|
|
|
it("singleton", function(done) {
|
|
// Setup
|
|
styleLoaderOptions.singleton = true;
|
|
|
|
fs.writeFileSync(
|
|
rootDir + "main.js",
|
|
[
|
|
"var a = require('./style.css');",
|
|
"var b = require('./styleTwo.css');"
|
|
].join("\n")
|
|
);
|
|
|
|
// Run
|
|
let expected = [
|
|
existingStyle,
|
|
`<style type="text/css">${requiredCss}${requiredCssTwo}</style>`
|
|
].join("\n");
|
|
|
|
runCompilerTest(expected, done);
|
|
}); // it singleton
|
|
|
|
it("url", function(done) {
|
|
cssRule.use = [
|
|
{
|
|
loader: "style-loader/url",
|
|
options: {}
|
|
},
|
|
"file-loader"
|
|
];
|
|
|
|
// Run
|
|
let expected = [
|
|
existingStyle,
|
|
'<link rel="stylesheet" type="text/css" href="ec9d4f4f24028c3d51bf1e7728e632ff.css">'
|
|
].join("\n");
|
|
|
|
runCompilerTest(expected, done);
|
|
}); // it url
|
|
|
|
it("useable", function(done) {
|
|
cssRule.use = [
|
|
{
|
|
loader: "style-loader/useable",
|
|
options: {}
|
|
},
|
|
"css-loader"
|
|
];
|
|
|
|
fs.writeFileSync(
|
|
rootDir + "main.js",
|
|
[
|
|
"var css = require('./style.css');",
|
|
"var cssTwo = require('./styleTwo.css');",
|
|
"css.use();",
|
|
"cssTwo.use();",
|
|
"css.unuse();"
|
|
].join("\n")
|
|
);
|
|
|
|
// Run
|
|
let expected = [
|
|
existingStyle,
|
|
`<style type="text/css">${requiredCssTwo}</style>`
|
|
].join("\n");
|
|
|
|
runCompilerTest(expected, done);
|
|
}); // it useable
|
|
}); // describe
|