Test css js loader

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "metalab"
+  ]
+}

.eslintrc

@@ -3,6 +3,10 @@
     "metalab/legacy",
     "metalab/node"
   ],
+  "plugins": [
+    "babel"
+  ],
+  "parser": "babel-eslint",
   "rules": {
     "func-style": 0,
     "no-extra-semi": 0,
@@ -12,6 +16,7 @@
     "import/no-commonjs": 0,
     "no-undef": 0,
     "no-unused-vars": 0,
-    "space-before-function-paren": 0
+    "space-before-function-paren": 0,
+    "babel/object-curly-spacing": 0
   }
 }

circle.yml

@@ -0,0 +1,13 @@
+machine:
+  environment:
+    PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
+
+dependencies:
+  override:
+    - yarn
+  cache_directories:
+    - ~/.cache/yarn
+
+test:
+  override:
+    - yarn test

index.js

@@ -91,7 +91,7 @@ function format(config, value, name, level, inProp) {
 module.exports = function(content) {
   this.cacheable();
 
-  config = defaults(
+  var config = defaults(
     loaderUtils.getLoaderConfig(this, 'jsCssLoader'),
     {pretty: process.env.NODE_ENV !== 'production'}
   );

package.json

@@ -4,24 +4,28 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "npm run lint",
+    "test": "npm run lint && jest",
     "lint": "eslint ."
   },
   "author": "Neal Granger <neal@metalab.co>",
   "license": "CC0-1.0",
   "dependencies": {
+    "babel-eslint": "^7.2.0",
+    "babel-preset-metalab": "^1.0.0",
     "fbjs": "^0.8.8",
+    "jest": "^19.0.2",
     "loader-utils": "^0.2.16",
     "lodash": "^4.17.4",
     "react-dom": "^15.4.2"
   },
   "devDependencies": {
-    "eslint": "^2.10.2",
-    "eslint-config-metalab": "^4.0.1",
-    "eslint-import-resolver-babel-module": "^2.0.1",
-    "eslint-plugin-filenames": "^0.2.0",
-    "eslint-plugin-import": "^1.15.0",
-    "eslint-plugin-lodash-fp": "^1.2.0",
-    "eslint-plugin-react": "^5.1.1"
+    "eslint": "^3.17.1",
+    "eslint-config-metalab": "^6.0.1",
+    "eslint-import-resolver-babel-module": "^3.0.0",
+    "eslint-plugin-babel": "^4.1.1",
+    "eslint-plugin-filenames": "^1.1.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-lodash-fp": "^2.1.3",
+    "eslint-plugin-react": "^6.10.0"
   }
 }

test/__snapshots__/index.test.js.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`css-js-loader: An array of javascript styles are converted 1`] = `
+"color: #eee;
+font-weight: thin;
+font-size: 24px;
+text-align: center;
+padding: 18px;
+"
+`;
+
+exports[`css-js-loader: Basic javascript style is converted 1`] = `
+"color: #eee;
+font-weight: thin;
+font-size: 24px;
+text-align: center;
+padding: 18px;
+"
+`;
+
+exports[`css-js-loader: Blank style is not modified 1`] = `""`;
+
+exports[`css-js-loader: Stringified class names are converted 1`] = `
+".blueText {
+  color: #eee;
+  font-weight: thin;
+  font-size: 24px;
+  text-align: center;
+  padding: 18px;
+}
+
+"
+`;
+
+exports[`css-js-loader: Style url attributes are maintained 1`] = `
+"background-image: url('http://example.com/bg.jpg');
+color: #eee;
+font-weight: thin;
+font-size: 24px;
+text-align: center;
+padding: 18px;
+"
+`;
+
+exports[`css-js-loader: es6 style objects are converted 1`] = `
+".TITLE {
+  color: #eee;
+  font-weight: thin;
+  font-size: 24px;
+  text-align: center;
+  padding: 18px;
+}
+
+"
+`;

test/index.test.js

@@ -0,0 +1,60 @@
+const cssJsLoader = require('../');
+
+// Create a sample content passed to cssJsLoader
+const style = {
+  color: '#eee',
+  fontWeight: 'thin',
+  fontSize: 24,
+  textAlign: 'center',
+  padding: 18,
+};
+
+// Bind functions to global to replicate `this`
+global.cssJsLoader = jest.fn(cssJsLoader);
+global.cacheable = jest.fn();
+global.exec = jest.fn((x) => x);
+
+// Mock a module
+jest.mock('loader-utils', () => {
+  return {
+    getLoaderConfig: jest.fn(),
+  };
+});
+
+describe('css-js-loader:', () => {
+  it('Blank style is not modified', () => {
+    expect(global.cssJsLoader({})).toMatchSnapshot();
+  });
+
+  it('Basic javascript style is converted', () => {
+    expect(global.cssJsLoader(style)).toMatchSnapshot();
+  });
+
+  it('An array of javascript styles are converted', () => {
+    expect(global.cssJsLoader([style])).toMatchSnapshot();
+  });
+
+  it('es6 style objects are converted', () => {
+    const sampleObject = {TITLE: style};
+    // Make the object pass the es6 check
+    Object.defineProperty(sampleObject, '__esModule', {
+      value: true,
+    });
+    expect(global.cssJsLoader(sampleObject)).toMatchSnapshot();
+  });
+
+  it('Stringified class names are converted', () => {
+    const stringedClassName = {
+      '.blueText': style,
+    };
+    expect(global.cssJsLoader(stringedClassName)).toMatchSnapshot();
+  });
+
+  it('Style url attributes are maintained', () => {
+    const styleWithUrl = {
+      'background-image': "url('http://example.com/bg.jpg')",
+      ...style,
+    };
+    expect(global.cssJsLoader(styleWithUrl)).toMatchSnapshot();
+  });
+});