Introduce a new approach to mocking modules in tests

package.json

@@ -20,6 +20,7 @@
     "aws-sdk": "^2.345.0",
     "babel-plugin-angularjs-annotate": "^0.10.0",
     "babel-plugin-istanbul": "^5.1.0",
+    "babel-plugin-mockable-imports": "^1.1.0",
     "babel-plugin-transform-async-to-promises": "^0.8.6",
     "babel-preset-env": "^1.7.0",
     "babelify": "^10.0.0",

src/karma.config.js

@@ -86,6 +86,7 @@ module.exports = function(config) {
             // code coverage instrumentation for Istanbul.
             extensions: ['.js', '.coffee'],
             plugins: [
+              'mockable-imports',
               [
                 'babel-plugin-istanbul',
                 {

src/sidebar/components/test/group-list-item-out-of-scope-test.js

@@ -1,16 +1,14 @@
 'use strict';
 
 const { mount } = require('enzyme');
-const preact = require('preact');
 const { createElement } = require('preact');
-const proxyquire = require('proxyquire');
 
 const { events } = require('../../services/analytics');
+const GroupListItemOutOfScope = require('../group-list-item-out-of-scope');
 
 describe('GroupListItemOutOfScope', () => {
   let fakeAnalytics;
   let fakeGroupListItemCommon;
-  let GroupListItemOutOfScope;
 
   const fakeGroup = {
     id: 'groupid',
@@ -28,27 +26,23 @@ describe('GroupListItemOutOfScope', () => {
       .first()
       .simulate('click');
 
-  before(() => {
+  beforeEach(() => {
+    fakeAnalytics = {
+      track: sinon.stub(),
+      events,
+    };
     fakeGroupListItemCommon = {
       orgName: sinon.stub(),
       trackViewGroupActivity: sinon.stub(),
     };
 
-    GroupListItemOutOfScope = proxyquire('../group-list-item-out-of-scope', {
-      // Use same instance of Preact module in tests and mocked module.
-      // See https://robertknight.me.uk/posts/browserify-dependency-mocking/
-      preact,
-
+    GroupListItemOutOfScope.$imports.$mock({
       '../util/group-list-item-common': fakeGroupListItemCommon,
-      '@noCallThru': true,
     });
   });
 
-  beforeEach(() => {
-    fakeAnalytics = {
-      track: sinon.stub(),
-      events,
-    };
+  afterEach(() => {
+    GroupListItemOutOfScope.$imports.$restore();
   });
 
   const createGroupListItemOutOfScope = fakeGroup => {

src/sidebar/components/test/group-list-item-test.js

@@ -2,27 +2,14 @@
 
 const { createElement } = require('preact');
 const { mount } = require('enzyme');
-const proxyquire = require('proxyquire');
+const GroupListItem = require('../group-list-item');
 
 const { events } = require('../../services/analytics');
 
 describe('GroupListItem', () => {
   let fakeAnalytics;
   let fakeStore;
   let fakeGroupListItemCommon;
-  let GroupListItem;
-
-  before(() => {
-    fakeGroupListItemCommon = {
-      orgName: sinon.stub(),
-      trackViewGroupActivity: sinon.stub(),
-    };
-
-    GroupListItem = proxyquire('../group-list-item', {
-      '../util/group-list-item-common': fakeGroupListItemCommon,
-      '@noCallThru': true,
-    });
-  });
 
   beforeEach(() => {
     fakeStore = {
@@ -34,6 +21,19 @@ describe('GroupListItem', () => {
       track: sinon.stub(),
       events,
     };
+
+    fakeGroupListItemCommon = {
+      orgName: sinon.stub(),
+      trackViewGroupActivity: sinon.stub(),
+    };
+
+    GroupListItem.$imports.$mock({
+      '../util/group-list-item-common': fakeGroupListItemCommon,
+    });
+  });
+
+  afterEach(() => {
+    GroupListItem.$imports.$restore();
   });
 
   const createGroupListItem = fakeGroup => {

src/sidebar/components/test/hypothesis-app-test.js

@@ -1,17 +1,16 @@
 'use strict';
 
 const angular = require('angular');
-const proxyquire = require('proxyquire');
 
 const events = require('../../events');
 const bridgeEvents = require('../../../shared/bridge-events');
-const util = require('../../../shared/test/util');
+
+const hypothesisApp = require('../hypothesis-app');
 
 describe('sidebar.components.hypothesis-app', function() {
   let $componentController = null;
   let $scope = null;
   let $rootScope = null;
-  let fakeAnnotationMetadata = null;
   let fakeStore = null;
   let fakeAnalytics = null;
   let fakeAuth = null;
@@ -44,24 +43,17 @@ describe('sidebar.components.hypothesis-app', function() {
   });
 
   beforeEach(function() {
-    fakeAnnotationMetadata = {
-      location: function() {
-        return 0;
-      },
-    };
-
     fakeServiceConfig = sandbox.stub();
 
-    const component = proxyquire(
-      '../hypothesis-app',
-      util.noCallThru({
-        angular: angular,
-        '../annotation-metadata': fakeAnnotationMetadata,
-        '../service-config': fakeServiceConfig,
-      })
-    );
+    hypothesisApp.$imports.$mock({
+      '../service-config': fakeServiceConfig,
+    });
+
+    angular.module('h', []).component('hypothesisApp', hypothesisApp);
+  });
 
-    angular.module('h', []).component('hypothesisApp', component);
+  afterEach(() => {
+    hypothesisApp.$imports.$restore();
   });
 
   beforeEach(angular.mock.module('h'));

src/sidebar/components/test/login-control-test.js

@@ -1,11 +1,12 @@
 'use strict';
 
 const angular = require('angular');
-const proxyquire = require('proxyquire');
 
 const bridgeEvents = require('../../../shared/bridge-events');
 const util = require('../../directive/test/util');
 
+const loginControl = require('../login-control');
+
 function pageObject(element) {
   return {
     menuLinks: function() {
@@ -79,19 +80,15 @@ function thirdPartyUserPage() {
 
 describe('loginControl', function() {
   let fakeBridge;
-  const fakeServiceConfig = sinon.stub();
+  let fakeServiceConfig;
   let fakeWindow;
 
   before(function() {
-    angular.module('app', []).component(
-      'loginControl',
-      proxyquire('../login-control', {
-        '../service-config': fakeServiceConfig,
-      })
-    );
+    angular.module('app', []).component('loginControl', loginControl);
   });
 
   beforeEach(function() {
+    fakeServiceConfig = sinon.stub().returns(null);
     fakeBridge = { call: sinon.stub() };
     const fakeServiceUrl = sinon.stub().returns('someUrl');
     const fakeSettings = {
@@ -106,8 +103,13 @@ describe('loginControl', function() {
       $window: fakeWindow,
     });
 
-    fakeServiceConfig.reset();
-    fakeServiceConfig.returns(null);
+    loginControl.$imports.$mock({
+      '../service-config': fakeServiceConfig,
+    });
+  });
+
+  afterEach(() => {
+    loginControl.$imports.$restore();
   });
 
   describe('the user profile button', function() {

src/sidebar/components/test/markdown-test.js

@@ -1,10 +1,9 @@
 'use strict';
 
 const angular = require('angular');
-const proxyquire = require('proxyquire');
 
 const util = require('../../directive/test/util');
-const noCallThru = require('../../../shared/test/util').noCallThru;
+const markdown = require('../markdown');
 
 describe('markdown', function() {
   function isHidden(element) {
@@ -40,46 +39,39 @@ describe('markdown', function() {
   }
 
   before(function() {
-    angular.module('app').component(
-      'markdown',
-      proxyquire(
-        '../markdown',
-        noCallThru({
-          angular: angular,
-          katex: {
-            renderToString: function(input) {
-              return 'math:' + input.replace(/$$/g, '');
-            },
-          },
-          'lodash.debounce': function(fn) {
-            // Make input change debouncing synchronous in tests
-            return function() {
-              fn();
-            };
-          },
-          '../render-markdown': noCallThru(function(markdown) {
-            return 'rendered:' + markdown;
-          }),
-
-          '../markdown-commands': {
-            convertSelectionToLink: mockFormattingCommand,
-            toggleBlockStyle: mockFormattingCommand,
-            toggleSpanStyle: mockFormattingCommand,
-            LinkType: require('../../markdown-commands').LinkType,
-          },
-          '../media-embedder': noCallThru({
-            replaceLinksWithEmbeds: function(element) {
-              // Tag the element as having been processed
-              element.dataset.replacedLinksWithEmbeds = 'yes';
-            },
-          }),
-        })
-      )
-    );
+    angular.module('app', []).component('markdown', markdown);
   });
 
   beforeEach(function() {
     angular.mock.module('app');
+
+    markdown.$imports.$mock({
+      'lodash.debounce': function(fn) {
+        // Make input change debouncing synchronous in tests
+        return function() {
+          fn();
+        };
+      },
+      '../render-markdown': markdown => {
+        return 'rendered:' + markdown;
+      },
+      '../markdown-commands': {
+        convertSelectionToLink: mockFormattingCommand,
+        toggleBlockStyle: mockFormattingCommand,
+        toggleSpanStyle: mockFormattingCommand,
+        LinkType: require('../../markdown-commands').LinkType,
+      },
+      '../media-embedder': {
+        replaceLinksWithEmbeds: function(element) {
+          // Tag the element as having been processed
+          element.dataset.replacedLinksWithEmbeds = 'yes';
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    markdown.$imports.$restore();
   });
 
   describe('read only state', function() {

src/sidebar/components/test/top-bar-test.js

@@ -1,24 +1,18 @@
 'use strict';
 
 const angular = require('angular');
-const proxyquire = require('proxyquire');
 
+const topBar = require('../top-bar');
 const util = require('../../directive/test/util');
 
 describe('topBar', function() {
   const fakeSettings = {};
-  const fakeIsThirdPartyService = sinon.stub();
+  let fakeIsThirdPartyService;
 
   before(function() {
     angular
       .module('app', [])
-      .component(
-        'topBar',
-        proxyquire('../top-bar', {
-          '../util/is-third-party-service': fakeIsThirdPartyService,
-          '@noCallThru': true,
-        })
-      )
+      .component('topBar', topBar)
       .component('loginControl', {
         bindings: require('../login-control').bindings,
       })
@@ -35,8 +29,15 @@ describe('topBar', function() {
       settings: fakeSettings,
     });
 
-    fakeIsThirdPartyService.reset();
-    fakeIsThirdPartyService.returns(false);
+    fakeIsThirdPartyService = sinon.stub().returns(false);
+
+    topBar.$imports.$mock({
+      '../util/is-third-party-service': fakeIsThirdPartyService,
+    });
+  });
+
+  afterEach(() => {
+    topBar.$imports.$restore();
   });
 
   function applyUpdateBtn(el) {

src/sidebar/services/test/service-url-test.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const proxyquire = require('proxyquire');
+const serviceUrlFactory = require('../service-url');
 
 /** Return a fake store object. */
 function fakeStore() {
@@ -20,7 +20,7 @@ function createServiceUrl(linksPromise) {
     .stub()
     .returns({ url: 'EXPANDED_URL', params: {} });
 
-  const serviceUrlFactory = proxyquire('../service-url', {
+  serviceUrlFactory.$imports.$mock({
     '../util/url-util': { replaceURLParams: replaceURLParams },
   });
 
@@ -45,6 +45,7 @@ describe('sidebar.service-url', function() {
 
   afterEach(function() {
     console.warn.restore();
+    serviceUrlFactory.$imports.$restore();
   });
 
   context('before the API response has been received', function() {