Upgrade to inspectpack 4; add regression tests.

Author: parkerziegler

bin/webpack-dashboard.js

@@ -4,7 +4,7 @@
 
 const commander = require("commander");
 const spawn = require("cross-spawn");
-const Dashboard = require("../dashboard/index.js");
+const Dashboard = require("../dashboard/index");
 const SocketIO = require("socket.io");
 
 const DEFAULT_PORT = 9838;

dashboard/index.js

@@ -3,10 +3,10 @@
 const chalk = require("chalk");
 const blessed = require("blessed");
 
-const formatOutput = require("../utils/format-output.js");
-const formatModules = require("../utils/format-modules.js");
-const formatAssets = require("../utils/format-assets.js");
-const formatProblems = require("../utils/format-problems.js");
+const { formatOutput } = require("../utils/format-output");
+const { formatModules } = require("../utils/format-modules");
+const { formatAssets } = require("../utils/format-assets");
+const { formatProblems } = require("../utils/format-problems");
 const { deserializeError } = require("../utils/error-serialization");
 
 const PERCENT_MULTIPLIER = 100;

index.js

@@ -1,5 +1,5 @@
 "use strict";
 
-const dashboard = require("./dashboard/index.js");
+const dashboard = require("./dashboard/index");
 
 module.exports = dashboard;

package.json

@@ -39,7 +39,7 @@
     "cross-spawn": "^6.0.5",
     "filesize": "^3.6.1",
     "handlebars": "^4.0.11",
-    "inspectpack": "^3.0.1",
+    "inspectpack": "^4.0.0",
     "most": "^1.7.3",
     "socket.io": "^2.1.1",
     "socket.io-client": "^2.1.1"

plugin/index.js

@@ -171,7 +171,7 @@ class DashboardPlugin {
         },
         {
           type: "progress",
-          value: 0
+          value: 1
         },
         {
           type: "operations",

test/base.spec.js

@@ -31,9 +31,35 @@ beforeEach(() => {
 
   // Some manual hacking.
   blessed.screen.returns({
-    append: () => {},
-    key: () => {},
-    render: () => {}
+    append: sinon.spy(),
+    key: sinon.spy(),
+    render: sinon.spy()
+  });
+
+  blessed.listbar.returns({
+    selected: "selected",
+    setLabel: sinon.spy(),
+    setProblems: sinon.spy(),
+    selectTab: sinon.spy(),
+    setItems: sinon.spy()
+  });
+
+  blessed.box.returns({
+    setContent: sinon.spy(),
+    setLabel: sinon.spy()
+  });
+
+  blessed.log.returns({
+    log: sinon.spy()
+  });
+
+  blessed.table.returns({
+    setData: sinon.spy()
+  });
+
+  blessed.ProgressBar.returns({
+    setContent: sinon.spy(),
+    setProgress: sinon.spy()
   });
 });
 

test/dashboard/index.spec.js

@@ -1,9 +1,25 @@
 "use strict";
 
-require("../base.spec");
+const chalk = require("chalk");
+const blessed = require("blessed");
 
+const base = require("../base.spec");
 const Dashboard = require("../../dashboard");
 
+const mockSetItems = () => {
+  // Override ListBar fakes from what we do in `base.spec.js`.
+  // Note that these are **already** stubbed. We're not monkey-patching blessed.
+  blessed.listbar.returns({
+    selected: "selected",
+    setLabel: base.sandbox.spy(),
+    selectTab: base.sandbox.spy(),
+    setItems: base.sandbox.stub().callsFake(obj => {
+      // Naively simulate what setItems would do calling each object key.
+      Object.keys(obj).forEach(key => obj[key]());
+    })
+  });
+};
+
 describe("dashboard", () => {
   const options = {
     color: "red",
@@ -25,4 +41,273 @@ describe("dashboard", () => {
     expect(dashboardWithOptions.color).to.equal("red");
     expect(dashboardWithOptions.minimal).to.be.true;
   });
+
+  describe("set* methods", () => {
+    let dashboard;
+
+    beforeEach(() => {
+      dashboard = new Dashboard();
+    });
+
+    describe("setData", () => {
+      const dataArray = [{
+        type: "progress",
+        value: 0.57
+      }, {
+        type: "operations",
+        value: "IDLE"
+      }];
+
+      it("can setData", () => {
+        expect(() => dashboard.setData(dataArray)).to.not.throw;
+      });
+    });
+
+    describe("setOperations", () => {
+      const data = {
+        value: "IDLE"
+      };
+
+      it("can setOperations", () => {
+        expect(() => dashboard.setOperations(data)).to.not.throw;
+
+        dashboard.setOperations(data);
+        expect(dashboard.operations.setContent).to.have.been.calledWith(data.value);
+      });
+    });
+
+    describe("setStatus", () => {
+      const data = {
+        value: "Success"
+      };
+
+      it("can setStatus", () => {
+        expect(() => dashboard.setStatus(data)).to.not.throw;
+
+        dashboard.setStatus(data);
+        expect(dashboard.status.setContent)
+          .to.have.been.calledWith(`{green-fg}{bold}${data.value}{/}`);
+      });
+
+      it("should display a failed status on build failure", () => {
+        data.value = "Failed";
+        expect(() => dashboard.setStatus(data)).to.not.throw;
+
+        dashboard.setStatus(data);
+        expect(dashboard.status.setContent)
+          .to.have.been.calledWith(`{red-fg}{bold}${data.value}{/}`);
+      });
+
+      it("should display any other status string without coloring", () => {
+        data.value = "Unknown";
+        expect(() => dashboard.setStatus(data)).to.not.throw;
+
+        dashboard.setStatus(data);
+        expect(dashboard.status.setContent)
+          .to.have.been.calledWith(`{bold}${data.value}{/}`);
+      });
+    });
+
+    describe("setProgress", () => {
+      const data = {
+        value: 0.57
+      };
+
+      it("can setProgress", () => {
+        expect(() => dashboard.setProgress(data)).to.not.throw;
+
+        dashboard.setProgress(data);
+        expect(dashboard.progressbar.setProgress).to.have.been.calledOnce;
+        expect(dashboard.progressbar.setContent).to.have.been.called;
+      });
+
+      it(`should call progressbar.setProgress twice if not in minimal mode
+      and percent is falsy`, () => {
+        data.value = null;
+        expect(() => dashboard.setProgress(data)).to.not.throw;
+
+        dashboard.setProgress(data);
+        expect(dashboard.progressbar.setProgress).to.have.been.calledTwice;
+      });
+    });
+
+    describe("setStats", () => {
+      const data = {
+        value: {
+          errors: null,
+          data: {
+            errors: [],
+            warnings: []
+          }
+        }
+      };
+
+      it("can setStats", () => {
+        expect(() => dashboard.setStats(data)).not.to.throw;
+
+        dashboard.setStats(data);
+        expect(dashboard.logText.log).to.have.been.called;
+        expect(dashboard.modulesMenu.setLabel)
+          .to.have.been.calledWith(chalk.yellow("Modules (loading...)"));
+        expect(dashboard.assets.setLabel)
+          .to.have.been.calledWith(chalk.yellow("Assets (loading...)"));
+        expect(dashboard.problemsMenu.setLabel)
+          .to.have.been.calledWith(chalk.yellow("Problems (loading...)"));
+      });
+
+      it("should display stats errors if present", () => {
+        data.value.errors = ["error"];
+        expect(() => dashboard.setStats(data)).not.to.throw;
+
+        dashboard.setStats(data);
+        expect(dashboard.status.setContent)
+          .to.have.been.calledWith("{red-fg}{bold}Failed{/}");
+      });
+    });
+
+    describe("setSizes", () => {
+      const data = {
+        value: {
+          assets: {
+            foo: {
+              meta: {
+                full: 456
+              },
+              files: [{
+                size: {
+                  full: 123
+                },
+                fileName: "test.js",
+                baseName: "/home/bar/test.js"
+              }]
+            },
+            bar: {
+              meta: {
+                full: 123
+              },
+              files: []
+            }
+          }
+        }
+      };
+
+      const formattedData = [
+        ["Name", "Size"],
+        ["foo", "456 B"],
+        ["bar", "123 B"],
+        ["Total", "579 B"]
+      ];
+
+      it("can setSizes", () => {
+        expect(() => dashboard.setSizes(data)).to.not.throw;
+
+        dashboard.setSizes(data);
+        expect(dashboard.assets.setLabel).to.have.been.calledWith("Assets");
+        expect(dashboard.assetTable.setData).to.have.been.calledWith(formattedData);
+        expect(dashboard.modulesMenu.setLabel).to.have.been.calledWith("Modules");
+        expect(dashboard.modulesMenu.setItems).to.have.been.called;
+        expect(dashboard.modulesMenu.selectTab)
+          .to.have.been.calledWith(dashboard.modulesMenu.selected);
+        expect(dashboard.screen.render).to.have.been.called;
+      });
+
+      it("should call formatModules", () => {
+        // Mock out the call to setItems to force call of formatModules.
+        mockSetItems();
+        // Discard generic dashboard, create a new one with adjusted mocks.
+        dashboard = new Dashboard();
+        expect(() => dashboard.setSizes(data)).to.not.throw;
+      });
+    });
+
+    describe("setSizesError", () => {
+      const err = "error";
+
+      it("can setSizesError", () => {
+        expect(() => dashboard.setSizesError(err)).to.not.throw;
+
+        dashboard.setSizesError(err);
+        expect(dashboard.modulesMenu.setLabel)
+          .to.have.been.calledWith(chalk.red("Modules (error)"));
+        expect(dashboard.assets.setLabel).to.have.been.calledWith(chalk.red("Assets (error)"));
+        expect(dashboard.logText.log)
+          .to.have.been.calledWith(chalk.red("Could not load module/asset sizes."));
+        expect(dashboard.logText.log).to.have.been.calledWith(chalk.red(err));
+      });
+    });
+
+    describe("setProblems", () => {
+      const data = {
+        value: {
+          duplicates: {
+            assets: {
+              foo: "foo",
+              bar: "bar"
+            }
+          },
+          versions: {
+            assets: {
+              foo: "1.2.3",
+              bar: "3.2.1"
+            }
+          }
+        }
+      };
+
+      it("can setProblems", () => {
+        expect(() => dashboard.setProblems(data)).to.not.throw;
+
+        dashboard.setProblems(data);
+        expect(dashboard.problemsMenu.setLabel).to.have.been.calledWith("Problems");
+        expect(dashboard.problemsMenu.setItems).to.have.been.called;
+        expect(dashboard.problemsMenu.selectTab)
+          .to.have.been.calledWith(dashboard.problemsMenu.selected);
+        expect(dashboard.screen.render).to.have.been.called;
+      });
+
+      it("should call formatProblems", () => {
+        // Mock out the call to setItems to force call of formatProblems.
+        mockSetItems();
+        // Discard generic dashboard, create a new one with adjusted mocks.
+
+        dashboard = new Dashboard();
+        expect(() => dashboard.setProblems(data)).to.not.throw;
+      });
+    });
+
+    describe("setProblemsError", () => {
+      const err = { stack: "stack" };
+
+      it("can setProblemsError", () => {
+        expect(() => dashboard.setProblemsError(err)).to.not.throw;
+
+        dashboard.setProblemsError(err);
+        expect(dashboard.problemsMenu.setLabel)
+          .to.have.been.calledWith(chalk.red("Problems (error)"));
+        expect(dashboard.logText.log)
+          .to.have.been.calledWith(chalk.red("Could not analyze bundle problems."));
+        expect(dashboard.logText.log).to.have.been.calledWith(chalk.red(err.stack));
+      });
+    });
+
+    describe("setLog", () => {
+      const data = { value: "[{ log: 'log' }]" };
+
+      it("can setLog", () => {
+        expect(() => dashboard.setLog(data)).not.to.throw;
+
+        dashboard.setLog(data);
+        expect(dashboard.logText.log).to.have.been.calledWith("[ log: 'log' ]");
+      });
+
+      it("should return early if the stats object has errors", () => {
+        dashboard.stats = {};
+        dashboard.stats.hasErrors = () => true;
+        expect(dashboard.setLog(data)).to.be.undefined;
+
+        dashboard.setLog(data);
+        expect(dashboard.logText.log).to.not.have.been.called;
+      });
+    });
+  });
 });