fix(verify): Show diff when ‘verify’ mode fails (#3)

Author: markdalgleish

index.js

@@ -1,19 +1,23 @@
 const fs = require('fs');
 const path = require('path');
 const loaderUtils = require('loader-utils');
+const LineDiff = require('line-diff');
 
 const bannerMessage =
   '// This file is automatically generated.\n// Please do not change this file!';
 
-const getNoDeclarationFileError = cssModuleInterfaceFilename =>
+const getNoDeclarationFileError = ({ filename }) =>
   new Error(
-    `Generated type declaration does not exist. Run webpack and commit the type declaration for '${cssModuleInterfaceFilename}'`
+    `Generated type declaration does not exist. Run webpack and commit the type declaration for '${filename}'`
   );
 
-const getTypeMismatchError = cssModuleInterfaceFilename =>
-  new Error(
-    `Generated type declaration file is outdated. Run webpack and commit the updated type declaration for '${cssModuleInterfaceFilename}'`
+const getTypeMismatchError = ({ filename, expected, actual }) => {
+  const diff = new LineDiff(actual, expected).toString();
+
+  return new Error(
+    `Generated type declaration file is outdated. Run webpack and commit the updated type declaration for '${filename}'\n\n${diff}`
   );
+}
 
 const cssModuleToNamedExports = cssModuleKeys => {
   return cssModuleKeys
@@ -63,13 +67,19 @@ module.exports = function(content, ...rest) {
         if (err) {
           const error =
             err.code === 'ENOENT'
-              ? getNoDeclarationFileError(cssModuleInterfaceFilename)
+              ? getNoDeclarationFileError({
+                filename: cssModuleInterfaceFilename
+              })
               : err;
           return callback(error);
         }
 
         if (cssModuleDefinition !== fileContents) {
-          return callback(getTypeMismatchError(cssModuleInterfaceFilename));
+          return callback(getTypeMismatchError({
+            filename: cssModuleInterfaceFilename,
+            expected: cssModuleDefinition,
+            actual: fileContents
+          }));
         }
 
         return callback(null, content, ...rest);

package.json

@@ -27,6 +27,9 @@
     }
   },
   "homepage": "https://github.com/seek-oss/css-modules-typescript-loader#readme",
+  "dependencies": {
+    "line-diff": "^2.0.1"
+  },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "commitizen": "^3.0.2",

test/getErrorMessage.js

@@ -0,0 +1,4 @@
+module.exports = error => error
+  .split(process.cwd())
+  .join('')
+  .match(/(Error: .*?)\s{4}at /s)[1];

test/verify-invalid-declaration/__snapshots__/verify-invalid-declaration.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Can error on invalid declaration 1`] = `
+"Error: Generated type declaration file is outdated. Run webpack and commit the updated type declaration for '/test/verify-invalid-declaration/index.css.d.ts'
+
+   // This file is automatically generated.
+   // Please do not change this file!
+   export const classInBothFiles: string;
+ - export const classInTypeScriptFile: string;
+ + export const classInCssFile: string;
+   
+
+"
+`;

test/verify-invalid-declaration/index.css

@@ -1,7 +1,7 @@
-.someClass {
+.classInBothFiles {
   position: relative;
 }
 
-.otherClass {
+.classInCssFile {
   display: block;
 }

test/verify-invalid-declaration/index.css.d.ts

@@ -1,4 +1,4 @@
 // This file is automatically generated.
 // Please do not change this file!
-export const someClass: string;
-export const differentClass: string;
+export const classInBothFiles: string;
+export const classInTypeScriptFile: string;

test/verify-invalid-declaration/verify-invalid-declaration.test.js

@@ -1,11 +1,14 @@
 const compiler = require('../compiler.js');
+const getErrorMessage = require('../getErrorMessage');
 
 test('Can error on invalid declaration', async () => {
-  await expect(
-    compiler(require.resolve('./index.js'), {
+  expect.assertions(1);
+
+  try {
+    await compiler(require.resolve('./index.js'), {
       mode: 'verify'
-    })
-  ).rejects.toMatchObject({
-    failed: true
-  });
+    });
+  } catch (err) {
+    expect(getErrorMessage(err.errors[0])).toMatchSnapshot();
+  }
 });

test/verify-missing-declaration/__snapshots__/verify-missing-declaration.test.js.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Can error on invalid declaration 1`] = `
+"Error: Generated type declaration does not exist. Run webpack and commit the type declaration for '/test/verify-missing-declaration/index.css.d.ts'
+"
+`;

test/verify-missing-declaration/verify-missing-declaration.test.js

@@ -1,11 +1,14 @@
 const compiler = require('../compiler.js');
+const getErrorMessage = require('../getErrorMessage');
 
 test('Can error on invalid declaration', async () => {
-  await expect(
-    compiler(require.resolve('./index.js'), {
+  expect.assertions(1);
+
+  try {
+    await compiler(require.resolve('./index.js'), {
       mode: 'verify'
-    })
-  ).rejects.toMatchObject({
-    failed: true
-  });
+    });
+  } catch (err) {
+    expect(getErrorMessage(err.errors[0])).toMatchSnapshot();
+  }
 });