Bug 1309496 - Set up mocha testing framework for netmonitor,r=Honza,jsnajdr,linclark

MozReview-Commit-ID: 1tW2yua6h7u

--HG--
extra : rebase_source : c552657288e2e876177ce139493341f8176d54e0

devtools/client/netmonitor/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "netmonitor",
+  "version": "0.0.1",
+  "devDependencies": {
+    "amd-loader": "0.0.5",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-register": "^6.7.2",
+    "cross-env": "^3.1.3",
+    "enzyme": "^2.4.1",
+    "expect": "^1.16.0",
+    "jsdom": "^9.4.1",
+    "jsdom-global": "^2.0.0",
+    "mocha": "^2.5.3",
+    "require-hacker": "^2.1.4"
+  },
+  "scripts": {
+    "postinstall": "cd ../ && npm install && cd netmonitor",
+    "test": "cross-env NODE_PATH=../../../ mocha test/**/*.test.js --compilers js:babel-register -r jsdom-global/register -r ./test/require-helper.js"
+  }
+}

devtools/client/netmonitor/test/components/filter-buttons.test.js

@@ -0,0 +1,100 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint-env node, mocha */
+"use strict";
+
+const expect = require("expect");
+const { mount } = require("enzyme");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const { configureStore } = require("devtools/client/netmonitor/store");
+const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
+const Actions = require("devtools/client/netmonitor/actions/index");
+const FilterButtons = createFactory(require("devtools/client/netmonitor/components/filter-buttons"));
+
+const expectDefaultTypes = {
+  all: true,
+  html: false,
+  css: false,
+  js: false,
+  xhr: false,
+  fonts: false,
+  images: false,
+  media: false,
+  flash: false,
+  ws: false,
+  other: false,
+};
+
+// unit test
+describe("FilterButtons component:", () => {
+  const store = configureStore();
+  const wrapper = mount(FilterButtons({ store }));
+
+  asExpected(wrapper, expectDefaultTypes, "by default");
+});
+
+// integration test with redux store, action, reducer
+describe("FilterButtons::enableFilterOnly:", () => {
+  const expectXHRTypes = {
+    all: false,
+    html: false,
+    css: false,
+    js: false,
+    xhr: true,
+    fonts: false,
+    images: false,
+    media: false,
+    flash: false,
+    ws: false,
+    other: false,
+  };
+
+  const store = configureStore();
+  const wrapper = mount(Provider(
+    { store },
+    FilterButtons()
+  ));
+
+  store.dispatch(Actions.enableFilterTypeOnly("xhr"));
+  asExpected(wrapper, expectXHRTypes, `when enableFilterOnly("xhr") is called`);
+});
+
+// integration test with redux store, action, reducer
+describe("FilterButtons::toggleFilter:", () => {
+  const expectXHRJSTypes = {
+    all: false,
+    html: false,
+    css: false,
+    js: true,
+    xhr: true,
+    fonts: false,
+    images: false,
+    media: false,
+    flash: false,
+    ws: false,
+    other: false,
+  };
+
+  const store = configureStore();
+  const wrapper = mount(Provider(
+    { store },
+    FilterButtons()
+  ));
+
+  store.dispatch(Actions.toggleFilterType("xhr"));
+  store.dispatch(Actions.toggleFilterType("js"));
+  asExpected(wrapper, expectXHRJSTypes, `when xhr, js is toggled`);
+});
+
+function asExpected(wrapper, expectTypes, description) {
+  for (let type of Object.keys(expectTypes)) {
+    let checked = expectTypes[type] ? "checked" : "not checked";
+    let className = expectTypes[type] ?
+        "menu-filter-button checked": "menu-filter-button";
+    it(`'${type}' button is ${checked} ${description}`, () => {
+      expect(wrapper.find(`#requests-menu-filter-${type}-button`).html())
+      .toBe(`<button id="requests-menu-filter-${type}-button" class="` + className +
+            `" data-key="${type}">netmonitor.toolbar.filter.${type}</button>`);
+    });
+  }
+}

devtools/client/netmonitor/test/fixtures/create-store.js

@@ -0,0 +1,8 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const { createStore } = require("devtools/client/shared/vendor/redux");
+
+// Current mockup does not support any middleware
+module.exports = () => createStore;

devtools/client/netmonitor/test/fixtures/l10n.js

@@ -0,0 +1,20 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// @TODO Load the actual strings from netmonitor.properties instead.
+class L10n {
+  getStr(str) {
+    switch (str) {
+      default:
+        return str;
+    }
+  }
+
+  getFormatStr(str) {
+    return this.getStr(str);
+  }
+}
+
+module.exports = L10n;

devtools/client/netmonitor/test/fixtures/localization-helper.js

@@ -0,0 +1,10 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const LocalizationHelper = require("devtools/client/netmonitor/test/fixtures/l10n");
+
+module.exports = {
+  LocalizationHelper
+};

devtools/client/netmonitor/test/require-helper.js

@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const requireHacker = require("require-hacker");
+
+requireHacker.global_hook("default", path => {
+  switch (path) {
+    // For Enzyme
+    case "react-dom":
+      return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React`;
+    case "react-dom/server":
+      return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React`;
+    case "react-addons-test-utils":
+      return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React.addons.TestUtils`;
+    // Use react-dev. This would be handled by browserLoader in Firefox.
+    case "react":
+    case "devtools/client/shared/vendor/react":
+      return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React`;
+    // For Rep's use of AMD
+    case "devtools/client/shared/vendor/react.default":
+      return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React`;
+  }
+
+  // Some modules depend on Chrome APIs which don't work in mocha. When such a module
+  // is required, replace it with a mock version.
+  switch (path) {
+    case "devtools/shared/l10n":
+      return `module.exports = require("devtools/client/netmonitor/test/fixtures/localization-helper")`;
+    case "devtools/client/shared/redux/create-store":
+      return `module.exports = require("devtools/client/netmonitor/test/fixtures/create-store")`;
+  }
+});