test(#188): Local Scope and Local Scope + Useable (@ekulabuhov)

Author: ekulabuhov

package.json

@@ -4,7 +4,7 @@
   "author": "Tobias Koppers @sokra",
   "description": "style loader module for webpack",
   "devDependencies": {
-    "css-loader": "~0.8.0",
+    "css-loader": "^0.27.3",
     "file-loader": "^0.10.1",
     "jsdom": "^9.11.0",
     "memory-fs": "^0.4.1",

test/basicTest.js

@@ -11,6 +11,7 @@ describe("basic tests", function() {
 
   var requiredCss = ".required { color: blue }",
     requiredCssTwo = ".requiredTwo { color: cyan }",
+    localScopedCss = ":local(.className) { background: red; }",
     requiredStyle = `<style type="text/css">${requiredCss}</style>`,
     existingStyle = "<style>.existing { color: yellow }</style>",
     rootDir = path.resolve(__dirname + "/../") + "/",
@@ -65,6 +66,7 @@ describe("basic tests", function() {
     fs.writeFileSync(rootDir + "main.js", "var css = require('./style.css');");
     fs.writeFileSync(rootDir + "style.css", requiredCss);
     fs.writeFileSync(rootDir + "styleTwo.css", requiredCssTwo);
+    fs.writeFileSync(rootDir + "localScoped.css", localScopedCss);
   }); // before each
 
   it("insert at bottom", function(done) {
@@ -143,8 +145,7 @@ describe("basic tests", function() {
   it("useable", function(done) {
     cssRule.use = [
       {
-        loader: "style-loader/useable",
-        options: {}
+        loader: "style-loader/useable"
       },
       "css-loader"
     ];
@@ -168,4 +169,53 @@ describe("basic tests", function() {
 
     runCompilerTest(expected, done);
   }); // it useable
+
+  it("local scope", function(done) {
+    cssRule.use = [
+      {
+        loader: "style-loader"
+      },
+      {
+        loader: "css-loader",
+        options: { 
+          localIdentName: '[name].[local]_[hash:base64:7]'
+        }
+      }
+    ];
+
+    fs.writeFileSync(
+      rootDir + "main.js",
+      [
+        "css = require('./localScoped.css');"
+      ].join("\n")
+    );
+
+    let expected = 'localScoped-className_3dIU6Uf';
+    runCompilerTest(expected, done, function() { return this.css.className; });
+  }); // it local scope
+
+  it("local scope, useable", function(done) {
+    cssRule.use = [
+      {
+        loader: "style-loader/useable"
+      },
+      {
+        loader: "css-loader",
+        options: { 
+          localIdentName: '[name].[local]_[hash:base64:7]'
+        }
+      }
+    ];
+
+    fs.writeFileSync(
+      rootDir + "main.js",
+      [
+        "css = require('./localScoped.css');"
+      ].join("\n")
+    );
+
+    let expected = 'localScoped-className_3dIU6Uf';
+    runCompilerTest(expected, done, function() { return this.css.locals.className; });
+  }); // it local scope
+
 }); // describe

test/utils.js

@@ -51,7 +51,13 @@ module.exports = {
 
     return fs;
   },
-  runCompilerTest: function(expected, done) {
+
+  /*
+   *  @param {string} expected - Expected value.
+   *  @param {function} done - Async callback from Mocha.
+   *  @param {function} actual - Executed in the context of jsdom window, should return a string to compare to.
+   */
+  runCompilerTest: function(expected, done, actual) {
     compiler.run(function(err, stats) {
       if (stats.compilation.errors.length) {
         throw new Error(stats.compilation.errors);
@@ -62,8 +68,13 @@ module.exports = {
       jsdom.env({
         html: jsdomHtml,
         src: [bundleJs],
+        virtualConsole: jsdom.createVirtualConsole().sendTo(console),
         done: function(err, window) {
-          assert.equal(window.document.head.innerHTML.trim(), expected);
+          if (typeof actual === 'function') {
+            assert.equal(actual.apply(window), expected);  
+          } else {
+            assert.equal(window.document.head.innerHTML.trim(), expected);
+          }
           // free memory associated with the window
           window.close();