Add tests (NMFR#39)

* add Jest, unit tests, webpack integration tests, test helpers
* update README

Co-authored-by: Scott Norvell <scottlnorvell@gmail.com>
Co-authored-by: Doug Schrashun <thejazzface@gmail.com>

Author: 2 people

.babelrc

@@ -0,0 +1,25 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "useBuiltIns": true,
+        "targets": {
+          "node": "current"
+        },
+        "exclude": [
+          "transform-async-to-generator",
+          "transform-regenerator"
+        ]
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "transform-object-rest-spread",
+      {
+        "useBuiltIns": true
+      }
+    ]
+  ]
+}

.gitignore

@@ -1,2 +1,18 @@
 node_modules
 jsconfig.json
+.DS_Store
+npm-debug.log
+/test/js
+
+logs
+*.log
+npm-debug.log*
+.eslintcache
+/dist
+/local
+/reports
+Thumbs.db
+.idea
+.vscode
+*.sublime-project
+*.sublime-workspace

README.md

@@ -22,7 +22,7 @@ $ npm install --save-dev optimize-css-assets-webpack-plugin
 ## Configuration:
 
 The plugin can receive the following options (all of them are optional):
-* assetNameRegExp: A regular expression that indicates the names of the assets that should be optimized \ minimized, defaults to `/\.css$/g`
+* assetNameRegExp: A regular expression that indicates the names of the assets that should be optimized \ minimized. The regular expression provided is run against the filenames of the files exported by the ExtractTextPlugin instances in your configuration, not the filenames of your source CSS files. Defaults to `/\.css$/g`
 * cssProcessor: The CSS processor used to optimize \ minimize the CSS, defaults to [cssnano](http://github.com/ben-eb/cssnano). This should be a function that follows cssnano.process interface (receives a CSS and options parameters and returns a Promise).
 * cssProcessorOptions: The options passed to the cssProcessor, defaults to `{}`
 * canPrint: A boolean indicating if the plugin can print messages to the console, defaults to `true`
@@ -33,7 +33,7 @@ The plugin can receive the following options (all of them are optional):
 var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 module.exports = {
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.css$/,
         loader: ExtractTextPlugin.extract('style-loader', 'css-loader')

package.json

@@ -8,6 +8,16 @@
     "last-call-webpack-plugin": "^3.0.0"
   },
   "main": "src/index.js",
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "jest": {
+    "watchPathIgnorePatterns": [
+      "<rootDir>/test/js/*.*"
+    ],
+    "testEnvironment": "node"
+  },
   "homepage": "http://github.com/NMFR/optimize-css-assets-webpack-plugin",
   "repository": {
     "type": "git",
@@ -22,5 +32,17 @@
     "duplicate",
     "extract-text-webpack-plugin"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-jest": "^22.1.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "css-loader": "^0.28.9",
+    "extract-text-webpack-plugin": "next",
+    "jest": "^22.1.4",
+    "style-loader": "^0.20.1",
+    "webpack": "^4.0.0"
+  }
 }

test/__snapshots__/webpack-integration.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Webpack Integration Tests assetNameRegExp-no-source 1`] = `"body{color:red}a{color:blue}body{margin:0;color:red}p{margin:1000px}body{color:red;padding:0;margin:0}p{padding:500px;padding:1000px}"`;
+
+exports[`Webpack Integration Tests duplicate-css-exists-without-plugin 1`] = `"body{color:red}a{color:blue}body{color:red}p{color:green}"`;
+
+exports[`Webpack Integration Tests only-assetNameRegExp-processed 1`] = `
+"body {
+  color: red;
+  padding: 0;
+  margin: 0;
+}
+p {
+  padding: 500px;
+  padding: 1000px;
+}
+"
+`;
+
+exports[`Webpack Integration Tests only-assetNameRegExp-processed 2`] = `"a{color:blue}body{margin:0;color:red}p{margin:1000px}"`;
+
+exports[`Webpack Integration Tests removes-duplicate-css 1`] = `"a{color:blue}body{color:red}p{color:green}"`;

test/cases/assetNameRegExp-no-source/a_optimize-me.css

@@ -0,0 +1,6 @@
+body {
+  color: red;
+}
+a {
+  color: blue;
+}

test/cases/assetNameRegExp-no-source/b_optimize-me.css

@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+  color: red;
+}
+p {
+  margin: 1000px;
+}

test/cases/assetNameRegExp-no-source/c.css

@@ -0,0 +1,9 @@
+body {
+  color: red;
+  padding: 0;
+  margin: 0;
+}
+p {
+  padding: 500px;
+  padding: 1000px;
+}

test/cases/assetNameRegExp-no-source/expected/file.css

@@ -0,0 +1,10 @@
+/*
+
+  This test is here to confirm that assetNameRegExp option will apply
+  only to the names of the files exported byt ExtractTextPlugin
+
+*/
+
+require('./a_optimize-me.css');
+require('./b_optimize-me.css');
+require('./c.css');

test/cases/assetNameRegExp-no-source/index.js

@@ -0,0 +1,26 @@
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import OptimizeCssAssetsPlugin from '../../../src/';
+
+module.exports = {
+  entry: './index',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: { loader: 'style-loader' },
+          use: {
+            loader: 'css-loader',
+            options: { minimize: true }
+          }
+        })
+      },
+    ],
+  },
+  plugins: [
+    new ExtractTextPlugin('file.css'),
+    new OptimizeCssAssetsPlugin({
+      assetNameRegExp: /optimize-me\.css/g
+    })
+  ],
+};

test/cases/assetNameRegExp-no-source/webpack.config.js

@@ -0,0 +1,6 @@
+body {
+  color: red;
+}
+a {
+  color: blue;
+}

test/cases/duplicate-css-exists-without-plugin/a.css

@@ -0,0 +1,6 @@
+body {
+  color: red;
+}
+p {
+  color: green;
+}

test/cases/duplicate-css-exists-without-plugin/b.css

@@ -0,0 +1 @@
+body{color:red}a{color:blue}body{color:red}p{color:green}

test/cases/duplicate-css-exists-without-plugin/expected/file.css

@@ -0,0 +1,2 @@
+require('./a.css');
+require('./b.css');

test/cases/duplicate-css-exists-without-plugin/index.js

@@ -0,0 +1,23 @@
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import OptimizeCssAssetsPlugin from '../../../src/';
+
+module.exports = {
+  entry: './index',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: { loader: 'style-loader' },
+          use: {
+            loader: 'css-loader',
+            options: { minimize: true }
+          }
+        })
+      },
+    ],
+  },
+  plugins: [
+    new ExtractTextPlugin('file.css')
+  ],
+};

test/cases/duplicate-css-exists-without-plugin/webpack.config.js

@@ -0,0 +1,6 @@
+body {
+  color: red;
+}
+a {
+  color: blue;
+}

test/cases/only-assetNameRegExp-processed/a_optimize-me.css

@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+  color: red;
+}
+p {
+  margin: 1000px;
+}

test/cases/only-assetNameRegExp-processed/b_optimize-me.css

@@ -0,0 +1,9 @@
+body {
+  color: red;
+  padding: 0;
+  margin: 0;
+}
+p {
+  padding: 500px;
+  padding: 1000px;
+}

test/cases/only-assetNameRegExp-processed/c_as-is.css

@@ -0,0 +1,9 @@
+body {
+  color: red;
+  padding: 0;
+  margin: 0;
+}
+p {
+  padding: 500px;
+  padding: 1000px;
+}

test/cases/only-assetNameRegExp-processed/expected/as_is.css

@@ -0,0 +1 @@
+a{color:blue}body{margin:0;color:red}p{margin:1000px}

test/cases/only-assetNameRegExp-processed/expected/optimize.css

@@ -0,0 +1,3 @@
+require('./a_optimize-me.css');
+require('./b_optimize-me.css');
+require('./c_as-is.css');

test/cases/only-assetNameRegExp-processed/index.js

@@ -0,0 +1,40 @@
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import OptimizeCssAssetsPlugin from '../../../src/';
+
+const notToProcess = new ExtractTextPlugin('as_is.css');
+const toProcess = new ExtractTextPlugin('optimize.css');
+
+module.exports = {
+  entry: './index',
+  module: {
+    rules: [
+      {
+        test: /as-is\.css$/,
+        use: notToProcess.extract({
+          fallback: { loader: 'style-loader' },
+          use: {
+            loader: 'css-loader',
+            options: { minimize: false }
+          }
+        })
+      },
+      {
+        test: /optimize-me\.css$/,
+        use: toProcess.extract({
+          fallback: { loader: 'style-loader' },
+          use: {
+            loader: 'css-loader',
+            options: { minimize: false }
+          }
+        })
+      }
+    ],
+  },
+  plugins: [
+    notToProcess,
+    toProcess,
+    new OptimizeCssAssetsPlugin({
+      assetNameRegExp: /optimize\.css/g
+    })
+  ],
+};

test/cases/only-assetNameRegExp-processed/webpack.config.js

@@ -0,0 +1,6 @@
+body {
+  color: red;
+}
+a {
+  color: blue;
+}

test/cases/removes-duplicate-css/a.css

@@ -0,0 +1,6 @@
+body {
+  color: red;
+}
+p {
+  color: green;
+}

test/cases/removes-duplicate-css/b.css

@@ -0,0 +1 @@
+a{color:blue}body{color:red}p{color:green}

test/cases/removes-duplicate-css/expected/file.css

@@ -0,0 +1,2 @@
+require('./a.css');
+require('./b.css');

test/cases/removes-duplicate-css/index.js

@@ -0,0 +1,24 @@
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import OptimizeCssAssetsPlugin from '../../../src/';
+
+module.exports = {
+  entry: './index',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: { loader: 'style-loader' },
+          use: {
+            loader: 'css-loader',
+            options: { minimize: true }
+          }
+        })
+      },
+    ],
+  },
+  plugins: [
+    new ExtractTextPlugin('file.css'),
+    new OptimizeCssAssetsPlugin()
+  ],
+};

test/cases/removes-duplicate-css/webpack.config.js

@@ -0,0 +1,26 @@
+import OptimizeCssAssetsPlugin from '../src/';
+
+describe('plugin test', () => {
+  it('does not throw when called', () => {
+    expect(() => {
+      new OptimizeCssAssetsPlugin();
+    }).not.toThrow();
+  });
+
+  it('can override default parameters', () => {
+    const assetNameRegExp = /\.optimize\.css$/
+    const cssProcessor = {};
+    const cssProcessorOptions = { discardComments: { removeAll: true } };
+    const canPrint = false;
+    const plugin = new OptimizeCssAssetsPlugin({
+      assetNameRegExp,
+      cssProcessor,
+      cssProcessorOptions,
+      canPrint
+    });
+    expect(plugin.options.assetNameRegExp).toEqual(assetNameRegExp);
+    expect(plugin.options.cssProcessor).toEqual(cssProcessor);
+    expect(plugin.options.cssProcessorOptions).toEqual(cssProcessorOptions);
+    expect(plugin.options.canPrint).toEqual(canPrint);
+  });
+});

test/plugin.test.js

@@ -0,0 +1 @@
+html{display:none}