feat: improved validation error messages (#339)

Author: evilebottnawi

.github/CONTRIBUTING.md

@@ -147,6 +147,14 @@ module. Thankfully, Github provides a means to do this. Add a dependency to the
 
 Where `{id}` is the # ID of your Pull Request.
 
+## Contributor License Agreement
+
+When submitting your contribution, a CLA (Contributor License Agreement) bot will come by to verify that you signed the [CLA](https://cla.js.foundation/webpack-contrib/file-loader).
+If it is your first time, it will link you to the right place to sign it.
+However, if you have committed your contributions using an email that is not the same as your email used on GitHub, the CLA bot can't accept your contribution.
+
+Run `git config user.email` to see your Git email, and verify it with [your GitHub email](https://github.com/settings/emails).
+
 ## Thanks
 
 For your interest, time, understanding, and for following this simple guide.

lint-staged.config.js

@@ -1,7 +1,4 @@
 module.exports = {
-  ignore: ['package-lock.json', 'CHANGELOG.md'],
-  linters: {
-    '*.js': ['prettier --write', 'eslint --fix', 'git add'],
-    '*.{json,md,yml,css}': ['prettier --write', 'git add'],
-  },
+  '*.js': ['prettier --write', 'eslint --fix', 'git add'],
+  '*.{json,md,yml,css}': ['prettier --write', 'git add'],
 };

package-lock.json

@@ -37,35 +37,35 @@
     "webpack": "^4.0.0"
   },
   "dependencies": {
-    "loader-utils": "^1.2.2",
-    "schema-utils": "^1.0.0"
+    "loader-utils": "^1.2.3",
+    "schema-utils": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.0",
-    "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.2.0",
-    "@commitlint/cli": "^8.0.0",
-    "@commitlint/config-conventional": "^8.0.0",
-    "@webpack-contrib/defaults": "^5.0.0",
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@commitlint/cli": "^8.1.0",
+    "@commitlint/config-conventional": "^8.1.0",
+    "@webpack-contrib/defaults": "^5.0.2",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^24.8.0",
     "commitlint-azure-pipelines-cli": "^1.0.2",
     "cross-env": "^5.2.0",
-    "del": "^4.1.1",
+    "del": "^5.0.0",
     "del-cli": "^2.0.0",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-plugin-import": "^2.17.3",
-    "husky": "^2.3.0",
+    "eslint": "^6.0.1",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-import": "^2.18.0",
+    "husky": "^3.0.0",
     "jest": "^24.8.0",
     "jest-junit": "^6.4.0",
-    "lint-staged": "^8.1.7",
+    "lint-staged": "^9.2.0",
     "memory-fs": "^0.4.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.17.1",
+    "prettier": "^1.18.2",
     "standard-version": "^6.0.1",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.33.0"
+    "url-loader": "^2.0.1",
+    "webpack": "^4.36.1"
   },
   "keywords": [
     "webpack"

package.json

@@ -8,7 +8,10 @@ import schema from './options.json';
 export default function loader(content) {
   const options = loaderUtils.getOptions(this) || {};
 
-  validateOptions(schema, options, 'File Loader');
+  validateOptions(schema, options, {
+    name: 'File Loader',
+    baseDataPath: 'options',
+  });
 
   const context = options.context || this.rootContext;
 

src/index.js

@@ -2,6 +2,7 @@
   "additionalProperties": true,
   "properties": {
     "name": {
+      "description": "The filename template for the target file(s) (https://github.com/webpack-contrib/file-loader#name).",
       "anyOf": [
         {
           "type": "string"
@@ -12,6 +13,7 @@
       ]
     },
     "outputPath": {
+      "description": "A filesystem path where the target file(s) will be placed (https://github.com/webpack-contrib/file-loader#outputpath).",
       "anyOf": [
         {
           "type": "string"
@@ -22,6 +24,7 @@
       ]
     },
     "publicPath": {
+      "description": "A custom public path for the target file(s) (https://github.com/webpack-contrib/file-loader#publicpath).",
       "anyOf": [
         {
           "type": "string"
@@ -32,12 +35,15 @@
       ]
     },
     "context": {
+      "description": "A custom file context (https://github.com/webpack-contrib/file-loader#context).",
       "type": "string"
     },
     "emitFile": {
+      "description": "Enables/Disables emit files (https://github.com/webpack-contrib/file-loader#emitfile).",
       "type": "boolean"
     },
     "regExp": {
+      "description": "A Regular Expression to one or many parts of the target file path. The capture groups can be reused in the name property using [N] placeholder (https://github.com/webpack-contrib/file-loader#regexp).",
       "anyOf": [
         {
           "type": "string"
@@ -48,13 +54,5 @@
       ]
     }
   },
-  "errorMessages": {
-    "name": "should be {String} or {Function} (https://github.com/webpack-contrib/file-loader#name)",
-    "outputPath": "should be {String} or {Function} (https://github.com/webpack-contrib/file-loader#outputpath)",
-    "publicPath": "should be {String} or {Function} (https://github.com/webpack-contrib/file-loader#publicpath)",
-    "context": "should be {String} (https://github.com/webpack-contrib/file-loader#context)",
-    "emitFile": "should be {Boolean} (https://github.com/webpack-contrib/file-loader#emitfile)",
-    "regExp": "should be {String} or {RegExp} (https://github.com/webpack-contrib/file-loader#regexp)"
-  },
   "type": "object"
 }

src/options.json

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`validate options 1`] = `
+"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+ - options.name should be one of these:
+   string | function
+   -> The filename template for the target file(s) (https://github.com/webpack-contrib/file-loader#name).
+   Details:
+    * options.name should be a string.
+    * options.name should be an instance of function."
+`;
+
+exports[`validate options 2`] = `
+"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+ - options.outputPath should be one of these:
+   string | function
+   -> A filesystem path where the target file(s) will be placed (https://github.com/webpack-contrib/file-loader#outputpath).
+   Details:
+    * options.outputPath should be a string.
+    * options.outputPath should be an instance of function."
+`;
+
+exports[`validate options 3`] = `
+"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+ - options.publicPath should be one of these:
+   string | function
+   -> A custom public path for the target file(s) (https://github.com/webpack-contrib/file-loader#publicpath).
+   Details:
+    * options.publicPath should be a string.
+    * options.publicPath should be an instance of function."
+`;
+
+exports[`validate options 4`] = `
+"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+ - options.context should be a string.
+   -> A custom file context (https://github.com/webpack-contrib/file-loader#context)."
+`;
+
+exports[`validate options 5`] = `
+"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+ - options.emitFile should be a boolean.
+   -> Enables/Disables emit files (https://github.com/webpack-contrib/file-loader#emitfile)."
+`;
+
+exports[`validate options 6`] = `
+"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+ - options.regExp should be one of these:
+   string | RegExp
+   -> A Regular Expression to one or many parts of the target file path. The capture groups can be reused in the name property using [N] placeholder (https://github.com/webpack-contrib/file-loader#regexp).
+   Details:
+    * options.regExp should be a string.
+    * options.regExp should be an instance of RegExp."
+`;

test/__snapshots__/errors.test.js.snap

@@ -0,0 +1,59 @@
+import loader from '../src';
+
+it('validate options', () => {
+  const validate = (options) =>
+    loader.call(
+      Object.assign(
+        {},
+        {
+          resourcePath: 'image.png',
+          query: options,
+          emitFile: () => {},
+        }
+      ),
+      'a { color: red; }'
+    );
+
+  expect(() => validate()).not.toThrow();
+
+  // The `file-loader` loader can be used as `fallback` loader and options can contain not only `file-loader` options
+  // so we use `additionalProperties: false` to avoid problems.
+  expect(() => validate({ limit: 8192 })).not.toThrow();
+
+  expect(() => validate({ name: '[path][name].[ext]' })).not.toThrow();
+  expect(() =>
+    validate({
+      name: () => '[hash].[ext]',
+    })
+  ).not.toThrow();
+  expect(() => validate({ name: true })).toThrowErrorMatchingSnapshot();
+
+  expect(() => validate({ outputPath: 'assets' })).not.toThrow();
+  expect(() =>
+    validate({
+      outputPath: () => 'assets',
+    })
+  ).not.toThrow();
+  expect(() => validate({ outputPath: true })).toThrowErrorMatchingSnapshot();
+
+  expect(() => validate({ publicPath: 'assets' })).not.toThrow();
+  expect(() =>
+    validate({
+      publicPath: () => 'assets',
+    })
+  ).not.toThrow();
+  expect(() => validate({ publicPath: true })).toThrowErrorMatchingSnapshot();
+
+  expect(() => validate({ context: 'assets' })).not.toThrow();
+  expect(() => validate({ context: true })).toThrowErrorMatchingSnapshot();
+
+  expect(() => validate({ emitFile: true })).not.toThrow();
+  expect(() => validate({ emitFile: false })).not.toThrow();
+  expect(() => validate({ emitFile: 'true' })).toThrowErrorMatchingSnapshot();
+
+  expect(() => validate({ regExp: /image\.png/ })).not.toThrow();
+  expect(() => validate({ regExp: 'image\\.png' })).not.toThrow();
+  expect(() => validate({ regExp: true })).toThrowErrorMatchingSnapshot();
+
+  expect(() => validate({ unknown: 'unknown' })).not.toThrow();
+});