Merge pull request #257 from FormidableLabs/chore/add-test

Add unit tests for dashboard, plugin, and utils.

Author: parkerziegler

dashboard/index.js

@@ -25,7 +25,8 @@ const DEFAULT_SCROLL_OPTIONS = {
 };
 
 class Dashboard {
-  constructor(options) { // eslint-disable-line max-statements
+  // eslint-disable-next-line max-statements
+  constructor(options) {
     // Options, params
     options = options || {};
     const title = options.title || "webpack-dashboard";
@@ -44,15 +45,19 @@ class Dashboard {
       log: this.setLog.bind(this),
       clear: this.clear.bind(this),
       sizes: _data => {
-        if (this.minimal) { return; }
+        if (this.minimal) {
+          return;
+        }
         if (_data.value instanceof Error) {
           this.setSizesError(_data.value);
         } else {
           this.setSizes(_data);
         }
       },
       problems: _data => {
-        if (this.minimal) { return; }
+        if (this.minimal) {
+          return;
+        }
         if (_data.value instanceof Error) {
           this.setProblemsError(_data.value);
         } else {
@@ -89,10 +94,13 @@ class Dashboard {
 
   setData(dataArray) {
     dataArray
-      .map(data => data.error
-        ? Object.assign({}, data, {
-          value: deserializeError(data.value)
-        }) : data
+      .map(
+        data =>
+          data.error
+            ? Object.assign({}, data, {
+              value: deserializeError(data.value)
+            })
+            : data
       )
       .forEach(data => {
         this.actionForMessageType[data.type](data);
@@ -169,12 +177,16 @@ class Dashboard {
 
     // Then split modules across assets.
     const previousSelection = this.modulesMenu.selected;
-    const modulesItems = Object.keys(assets).reduce((memo, name) => Object.assign({}, memo, {
-      [name]: () => {
-        this.moduleTable.setData(formatModules(assets[name].files));
-        this.screen.render();
-      }
-    }), {});
+    const modulesItems = Object.keys(assets).reduce(
+      (memo, name) =>
+        Object.assign({}, memo, {
+          [name]: () => {
+            this.moduleTable.setData(formatModules(assets[name].files));
+            this.screen.render();
+          }
+        }),
+      {}
+    );
 
     this.modulesMenu.setLabel("Modules");
     this.modulesMenu.setItems(modulesItems);
@@ -199,15 +211,21 @@ class Dashboard {
     const assetNames = Object.keys(duplicates.assets);
 
     const previousSelection = this.problemsMenu.selected;
-    const problemsItems = assetNames.reduce((memo, name) => Object.assign({}, memo, {
-      [name]: () => {
-        this.problems.setContent(formatProblems({
-          duplicates: duplicates.assets[name],
-          versions: versions.assets[name]
-        }));
-        this.screen.render();
-      }
-    }), {});
+    const problemsItems = assetNames.reduce(
+      (memo, name) =>
+        Object.assign({}, memo, {
+          [name]: () => {
+            this.problems.setContent(
+              formatProblems({
+                duplicates: duplicates.assets[name],
+                versions: versions.assets[name]
+              })
+            );
+            this.screen.render();
+          }
+        }),
+      {}
+    );
 
     this.problemsMenu.setLabel("Problems");
     this.problemsMenu.setItems(problemsItems);
@@ -477,9 +495,11 @@ class Dashboard {
       parent: this.wrapper,
       label: "Progress",
       tags: true,
-      padding: this.minimal ? {
-        left: 1
-      } : 1,
+      padding: this.minimal
+        ? {
+          left: 1
+        }
+        : 1,
       width: this.minimal ? "33%" : "100%",
       height: this.minimal ? "100%" : "34%",
       valign: "middle",

test/dashboard/index.spec.js

@@ -5,8 +5,24 @@ require("../base.spec");
 const Dashboard = require("../../dashboard");
 
 describe("dashboard", () => {
-  it("can create a new dashboard", () => {
+  const options = {
+    color: "red",
+    minimal: true,
+    title: "my-title"
+  };
+
+  it("can create a new no option dashboard", () => {
     const dashboard = new Dashboard();
     expect(dashboard).to.be.ok;
+    expect(dashboard.color).to.equal("green");
+    expect(dashboard.minimal).to.be.false;
+    expect(dashboard.stats).to.be.null;
+  });
+
+  it("can create a new with options dashboard", () => {
+    const dashboardWithOptions = new Dashboard(options);
+    expect(dashboardWithOptions).to.be.ok;
+    expect(dashboardWithOptions.color).to.equal("red");
+    expect(dashboardWithOptions.minimal).to.be.true;
   });
 });

test/plugin/index.spec.js

@@ -3,8 +3,25 @@
 const Plugin = require("../../plugin");
 
 describe("plugin", () => {
-  it("can create a new plugin", () => {
+  const options = {
+    port: 3000,
+    host: "111.0.2.3"
+  };
+
+  it("can create a new no option plugin", () => {
     const plugin = new Plugin();
     expect(plugin).to.be.ok;
+    expect(plugin.host).to.equal("127.0.0.1");
+    // eslint-disable-next-line no-magic-numbers
+    expect(plugin.port).to.equal(9838);
+    expect(plugin.handler).to.be.null;
+    expect(plugin.watching).to.be.false;
+  });
+
+  it("can create a new with options dashboard", () => {
+    const pluginWithOptions = new Plugin(options);
+    expect(pluginWithOptions.host).to.equal("111.0.2.3");
+    // eslint-disable-next-line no-magic-numbers
+    expect(pluginWithOptions.port).to.equal(3000);
   });
 });

test/utils/format-assets.spec.js

@@ -0,0 +1,60 @@
+"use strict";
+
+const { _getAssetSize, _getTotalSize, _printAssets } = require("../../utils/format-assets");
+
+describe("format-assets.js", () => {
+  describe("#_getAssetSize", () => {
+    context("when asset size is present", () => {
+      it("returns a readable file size as string", () => {
+        const asset = {
+          size: 500
+        };
+        expect(_getAssetSize(asset)).to.equal("500 B");
+      });
+    });
+
+    context("when no asset size is present", () => {
+      it("returns zero in a readable file size as string", () => {
+        const asset = {
+          size: undefined
+        };
+        expect(_getAssetSize(asset)).to.equal("0 B");
+      });
+    });
+  });
+
+  describe("#_getTotalSize", () => {
+    it("returns a readable file size of all assets as a string", () => {
+      const assets = [{ size: 500 }, { size: undefined }, { size: 1000 }];
+      expect(_getTotalSize(assets)).to.equal("1.46 KB");
+    });
+  });
+
+  describe("#_printAssets", () => {
+    it("returns a nested array of assets information", () => {
+      const assetList = [
+        {
+          name: "assets1",
+          size: 500
+        },
+        {
+          name: "assets2",
+          size: 0
+        },
+        {
+          name: "assets2",
+          size: 500
+        }
+      ];
+
+      const output = [
+        ["Name", "Size"],
+        ["assets1", "500 B"],
+        ["assets2", "0 B"],
+        ["assets2", "500 B"],
+        ["Total", "1000 B"]
+      ];
+      expect(_printAssets(assetList)).eql(output);
+    });
+  });
+});

test/utils/format-modules.spec.js

@@ -0,0 +1,41 @@
+"use strict";
+
+const { _formatFileName, _formatPercentage } = require("../../utils/format-modules");
+
+describe("format-modules.js", () => {
+  describe("#_formatFileName", () => {
+    it("returns a blessed green colored file name", () => {
+      const mod = {
+        fileName: "foo/bar/test.js"
+      };
+      expect(_formatFileName(mod)).to.equal("{green-fg}./foo/bar/test.js{/}");
+    });
+
+    context("when there is a baseName", () => {
+      it("returns a blessed yellow colored file name", () => {
+        const mod = {
+          fileName: "test.js",
+          baseName: "/home/bar/test.js"
+        };
+        expect(_formatFileName(mod)).to.equal("{yellow-fg}test.js{/}");
+      });
+    });
+
+    context("when node_modules is present in fileName", () => {
+      it("returns a blessed yellow colored file name", () => {
+        const mod = {
+          fileName: "/node_modules/@foo/test.js",
+          baseName: "/home/bar/node_modules/@foo/test.js"
+        };
+        expect(_formatFileName(mod)).to.equal("~/{yellow-fg}@foo{/}/{yellow-fg}test.js{/}");
+      });
+    });
+  });
+
+  describe("#_formatPercentage", () => {
+    it("returns a precentage as a string", () => {
+      // eslint-disable-next-line no-magic-numbers
+      expect(_formatPercentage(30, 15)).to.equal("200%");
+    });
+  });
+});

test/utils/format-output.spec.js

@@ -0,0 +1,38 @@
+"use strict";
+
+const { _isLikelyASyntaxError, _lineJoin, _formatMessage } = require("../../utils/format-output");
+
+describe("format-output.js", () => {
+  describe("#_isLikelyASyntaxError", () => {
+    context("when message is a syntax error", () => {
+      it("returns true", () => {
+        const message = "Syntax error: missing ; before statement";
+        expect(_isLikelyASyntaxError(message)).to.be.true;
+      });
+    });
+
+    context("when message is a type error", () => {
+      it("returns false", () => {
+        const message = "Type error: null has no properties";
+        expect(_isLikelyASyntaxError(message)).to.be.false;
+      });
+    });
+  });
+
+  describe("#_formatMessage", () => {
+    it("returns a readable user friendly message", () => {
+      const message1 = "Module build failed: SyntaxError: missing ; before statement";
+      const message2 = "/Module not found: Error: Cannot resolve 'file' or 'directory'/";
+      expect(_formatMessage(message1)).to.equal("Syntax error: missing ; before statement");
+      expect(_formatMessage(message2)).to.equal("/Module not found:/");
+    });
+  });
+
+  describe("#_lineJoin", () => {
+    it("returns the elements of an array on a newline as a string", () => {
+      const array = ["word", "word2", "word3"];
+      const output = "word\nword2\nword3";
+      expect(_lineJoin(array)).to.equal(output);
+    });
+  });
+});

utils/format-assets.js

@@ -5,25 +5,18 @@
  */
 const filesize = require("filesize");
 
-function getAssetSize(asset) {
+function _getAssetSize(asset) {
   return filesize(asset.size || 0);
 }
 
-function getTotalSize(assetsList) {
-  return filesize(assetsList.reduce(
-    (total, asset) => total + (asset.size || 0),
-    0
-  ));
+function _getTotalSize(assetsList) {
+  return filesize(assetsList.reduce((total, asset) => total + (asset.size || 0), 0));
 }
 
-function printAssets(assetsList) {
+function _printAssets(assetsList) {
   return [["Name", "Size"]]
-    .concat(assetsList.map(asset =>
-      [asset.name, getAssetSize(asset)]
-    ))
-    .concat(
-      [["Total", getTotalSize(assetsList)]]
-    );
+    .concat(assetsList.map(asset => [asset.name, _getAssetSize(asset)]))
+    .concat([["Total", _getTotalSize(assetsList)]]);
 }
 
 function formatAssets(assets) {
@@ -33,7 +26,10 @@ function formatAssets(assets) {
     size: assets[name].meta.full
   }));
 
-  return printAssets(assetsList);
+  return _printAssets(assetsList);
 }
 
-module.exports = formatAssets;
+module.exports = { formatAssets,
+  _getAssetSize,
+  _getTotalSize,
+  _printAssets };