Merge pull request #1655 from hypothesis/change-dollar-imports

Modify a mocking idiom that doesn't work with ES modules

src/annotator/config/test/index-test.js

 const configFrom = require('../index');
+const { $imports } = require('../index');
 
 describe('annotator.config.index', function() {
   let fakeSettingsFrom;
@@ -8,13 +9,13 @@ describe('annotator.config.index', function() {
       hostPageSetting: sinon.stub(),
     });
 
-    configFrom.$imports.$mock({
+    $imports.$mock({
       './settings': fakeSettingsFrom,
     });
   });
 
   afterEach(() => {
-    configFrom.$imports.$restore();
+    $imports.$restore();
   });
 
   it('gets the configuration settings', function() {

src/annotator/config/test/settings-test.js

 const settingsFrom = require('../settings');
+const { $imports } = require('../settings');
 
 describe('annotator.config.settingsFrom', function() {
   let fakeConfigFuncSettingsFrom;
@@ -12,7 +13,7 @@ describe('annotator.config.settingsFrom', function() {
       jsonConfigsFrom: sinon.stub().returns({}),
     };
 
-    settingsFrom.$imports.$mock({
+    $imports.$mock({
       './config-func-settings-from': fakeConfigFuncSettingsFrom,
       './is-browser-extension': fakeIsBrowserExtension,
       '../../shared/settings': fakeSharedSettings,
@@ -20,7 +21,7 @@ describe('annotator.config.settingsFrom', function() {
   });
 
   afterEach(() => {
-    settingsFrom.$imports.$restore();
+    $imports.$restore();
   });
 
   describe('#sidebarAppUrl', function() {

src/annotator/plugin/test/cross-frame-test.coffee

 Plugin = require('../../plugin')
 CrossFrame = require('../cross-frame')
+{ $imports } = require('../cross-frame')
 
 describe 'CrossFrame', ->
   fakeDiscovery = null
@@ -39,7 +40,7 @@ describe 'CrossFrame', ->
     proxyDiscovery = sandbox.stub().returns(fakeDiscovery)
     proxyBridge = sandbox.stub().returns(fakeBridge)
 
-    CrossFrame.$imports.$mock({
+    $imports.$mock({
       '../plugin': Plugin,
       '../annotation-sync': proxyAnnotationSync,
       '../../shared/bridge': proxyBridge,
@@ -48,7 +49,7 @@ describe 'CrossFrame', ->
 
   afterEach ->
     sandbox.restore()
-    CrossFrame.$imports.$restore()
+    $imports.$restore()
 
   describe 'CrossFrame constructor', ->
     it 'instantiates the Discovery component', ->

src/annotator/test/features-test.js

 const events = require('../../shared/bridge-events');
 const features = require('../features');
+const { $imports } = require('../features');
 
 describe('features - annotation layer', function() {
   let featureFlagsUpdateHandler;
@@ -16,7 +17,7 @@ describe('features - annotation layer', function() {
 
   beforeEach(function() {
     fakeWarnOnce = sinon.stub();
-    features.$imports.$mock({
+    $imports.$mock({
       '../shared/warn-once': fakeWarnOnce,
     });
 
@@ -34,7 +35,7 @@ describe('features - annotation layer', function() {
 
   afterEach(function() {
     features.reset();
-    features.$imports.$restore();
+    $imports.$restore();
   });
 
   describe('flagEnabled', function() {

src/annotator/test/guest-test.coffee

@@ -7,6 +7,7 @@ $ = require('jquery')
 Delegator['@noCallThru'] = true
 
 Guest = require('../guest')
+{ $imports } = require('../guest')
 rangeUtil = null
 selections = null
 
@@ -74,7 +75,7 @@ describe 'Guest', ->
       anchor: sinon.stub()
     }
 
-    Guest.$imports.$mock({
+    $imports.$mock({
       './adder': {Adder: FakeAdder},
       './anchoring/html': htmlAnchoring,
       './highlighter': highlighter,
@@ -103,7 +104,7 @@ describe 'Guest', ->
   afterEach ->
     sandbox.restore()
     console.warn.restore()
-    Guest.$imports.$restore()
+    $imports.$restore()
 
   describe 'plugins', ->
     fakePlugin = null

src/annotator/test/integration/multi-frame-test.js

@@ -2,6 +2,7 @@ const isLoaded = require('../../util/frame-util').isLoaded;
 
 const FRAME_DEBOUNCE_WAIT = require('../../frame-observer').DEBOUNCE_WAIT + 10;
 const CrossFrame = require('../../plugin/cross-frame');
+const { $imports } = require('../../plugin/cross-frame');
 
 describe('CrossFrame multi-frame scenario', function() {
   let fakeAnnotationSync;
@@ -28,7 +29,7 @@ describe('CrossFrame multi-frame scenario', function() {
     proxyAnnotationSync = sandbox.stub().returns(fakeAnnotationSync);
     proxyBridge = sandbox.stub().returns(fakeBridge);
 
-    CrossFrame.$imports.$mock({
+    $imports.$mock({
       '../annotation-sync': proxyAnnotationSync,
       '../../shared/bridge': proxyBridge,
     });
@@ -52,7 +53,7 @@ describe('CrossFrame multi-frame scenario', function() {
     crossFrame.destroy();
     container.parentNode.removeChild(container);
 
-    CrossFrame.$imports.$restore();
+    $imports.$restore();
   });
 
   it('detects frames on page', function() {

src/annotator/test/sidebar-test.coffee

 events = require('../../shared/bridge-events')
 
 Sidebar = require('../sidebar')
+{ $imports } = require('../sidebar')
 
 DEFAULT_WIDTH = 350
 DEFAULT_HEIGHT = 600
@@ -15,10 +16,10 @@ describe 'Sidebar', ->
   before ->
     rafStub = (fn) ->
       fn()
-    Sidebar.$imports.$mock({ raf: rafStub })
+    $imports.$mock({ raf: rafStub })
 
   after ->
-    Sidebar.$imports.$restore()
+    $imports.$restore()
 
   createSidebar = (config={}) ->
     config = Object.assign({}, sidebarConfig, config)

src/boot/test/boot-test.js

 const boot = require('../boot');
+const { $imports } = require('../boot');
 
 function assetUrl(url) {
   return `https://marginal.ly/client/build/${url}`;
@@ -16,13 +17,13 @@ describe('bootstrap', function() {
       requiredPolyfillSets: sinon.stub().returns([]),
     };
 
-    boot.$imports.$mock({
+    $imports.$mock({
       '../shared/polyfills': fakePolyfills,
     });
   });
 
   afterEach(function() {
-    boot.$imports.$restore();
+    $imports.$restore();
     iframe.remove();
   });
 

src/sidebar/components/test/annotation-action-bar-test.js

@@ -5,6 +5,7 @@ const { act } = require('preact/test-utils');
 const { waitFor } = require('./util');
 
 const AnnotationActionBar = require('../annotation-action-bar');
+const { $imports } = require('../annotation-action-bar');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('AnnotationActionBar', () => {
@@ -92,8 +93,8 @@ describe('AnnotationActionBar', () => {
       updateFlagStatus: sinon.stub(),
     };
 
-    AnnotationActionBar.$imports.$mock(mockImportedComponents());
-    AnnotationActionBar.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../util/annotation-sharing': {
         isShareable: fakeIsShareable,
         shareURI: sinon.stub().returns('http://share.me'),
@@ -105,7 +106,7 @@ describe('AnnotationActionBar', () => {
 
   afterEach(() => {
     window.confirm.restore();
-    AnnotationActionBar.$imports.$restore();
+    $imports.$restore();
   });
 
   describe('edit action button', () => {

src/sidebar/components/test/annotation-body-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const AnnotationBody = require('../annotation-body');
+const { $imports } = require('../annotation-body');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('AnnotationBody', () => {
@@ -10,11 +11,11 @@ describe('AnnotationBody', () => {
   }
 
   beforeEach(() => {
-    AnnotationBody.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    AnnotationBody.$imports.$restore();
+    $imports.$restore();
   });
 
   it('displays the body if `isEditing` is false', () => {

src/sidebar/components/test/annotation-document-info-test.js

@@ -4,6 +4,7 @@ const { mount } = require('enzyme');
 const fixtures = require('../../test/annotation-fixtures');
 
 const AnnotationDocumentInfo = require('../annotation-document-info');
+const { $imports } = require('../annotation-document-info');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('AnnotationDocumentInfo', () => {
@@ -23,14 +24,14 @@ describe('AnnotationDocumentInfo', () => {
     fakeDomainAndTitle = sinon.stub();
     fakeMetadata = { domainAndTitle: fakeDomainAndTitle };
 
-    AnnotationDocumentInfo.$imports.$mock(mockImportedComponents());
-    AnnotationDocumentInfo.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../util/annotation-metadata': fakeMetadata,
     });
   });
 
   afterEach(() => {
-    AnnotationDocumentInfo.$imports.$restore();
+    $imports.$restore();
   });
 
   it('should not render if there is no document title', () => {

src/sidebar/components/test/annotation-header-test.js

@@ -4,6 +4,7 @@ const { mount } = require('enzyme');
 const fixtures = require('../../test/annotation-fixtures');
 
 const AnnotationHeader = require('../annotation-header');
+const { $imports } = require('../annotation-header');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('AnnotationHeader', () => {
@@ -22,11 +23,11 @@ describe('AnnotationHeader', () => {
   };
 
   beforeEach(() => {
-    AnnotationHeader.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    AnnotationHeader.$imports.$restore();
+    $imports.$restore();
   });
 
   describe('collapsed replies', () => {

src/sidebar/components/test/annotation-publish-control-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const AnnotationPublishControl = require('../annotation-publish-control');
+const { $imports } = require('../annotation-publish-control');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('AnnotationPublishControl', () => {
@@ -38,14 +39,18 @@ describe('AnnotationPublishControl', () => {
 
     fakeApplyTheme = sinon.stub();
 
-    AnnotationPublishControl.$imports.$mock(mockImportedComponents());
-    AnnotationPublishControl.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../util/theme': {
         applyTheme: fakeApplyTheme,
       },
     });
   });
 
+  afterEach(() => {
+    $imports.$restore();
+  });
+
   describe('theming', () => {
     it('should apply theme styles', () => {
       const fakeStyle = { foo: 'bar' };

src/sidebar/components/test/annotation-quote-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const AnnotationQuote = require('../annotation-quote');
+const { $imports } = require('../annotation-quote');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('AnnotationQuote', () => {
@@ -12,11 +13,11 @@ describe('AnnotationQuote', () => {
   }
 
   beforeEach(() => {
-    AnnotationQuote.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    AnnotationQuote.$imports.$restore();
+    $imports.$restore();
   });
 
   it('renders the quote', () => {

src/sidebar/components/test/annotation-share-control-test.js

@@ -3,6 +3,7 @@ const { mount } = require('enzyme');
 const { act } = require('preact/test-utils');
 
 const AnnotationShareControl = require('../annotation-share-control');
+const { $imports } = require('../annotation-share-control');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('AnnotationShareControl', () => {
@@ -77,16 +78,16 @@ describe('AnnotationShareControl', () => {
       isShared: sinon.stub().returns(true),
     };
     fakeShareUri = 'https://www.example.com';
-    AnnotationShareControl.$imports.$mock(mockImportedComponents());
 
-    AnnotationShareControl.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../util/copy-to-clipboard': fakeCopyToClipboard,
       './hooks/use-element-should-close': sinon.stub(),
     });
   });
 
   afterEach(() => {
-    AnnotationShareControl.$imports.$restore();
+    $imports.$restore();
   });
 
   it('does not render component if `group` prop not OK', () => {

src/sidebar/components/test/annotation-share-info-test.js

@@ -4,6 +4,7 @@ const { mount } = require('enzyme');
 const fixtures = require('../../test/annotation-fixtures');
 
 const AnnotationShareInfo = require('../annotation-share-info');
+const { $imports } = require('../annotation-share-info');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('AnnotationShareInfo', () => {
@@ -36,14 +37,14 @@ describe('AnnotationShareInfo', () => {
       isShared: sinon.stub().returns(true),
     };
 
-    AnnotationShareInfo.$imports.$mock(mockImportedComponents());
-    AnnotationShareInfo.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback => callback(fakeStore),
     });
   });
 
   afterEach(() => {
-    AnnotationShareInfo.$imports.$restore();
+    $imports.$restore();
   });
 
   describe('group link', () => {

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

@@ -5,6 +5,7 @@ const fixtures = require('../../test/annotation-fixtures');
 const util = require('../../directive/test/util');
 
 const annotationComponent = require('../annotation');
+const { $imports } = require('../annotation');
 
 const inject = angular.mock.inject;
 
@@ -91,13 +92,13 @@ describe('annotation', function() {
     let sandbox;
 
     beforeEach(() => {
-      annotationComponent.$imports.$mock({
+      $imports.$mock({
         '../util/account-id': fakeAccountID,
       });
     });
 
     afterEach(() => {
-      annotationComponent.$imports.$restore();
+      $imports.$restore();
     });
 
     function createDirective(annotation) {

src/sidebar/components/test/annotation-user-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const AnnotationUser = require('../annotation-user');
+const { $imports } = require('../annotation-user');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('AnnotationUser', () => {
@@ -33,8 +34,8 @@ describe('AnnotationUser', () => {
     fakeSettings = {};
     fakeUsername = sinon.stub();
 
-    AnnotationUser.$imports.$mock(mockImportedComponents());
-    AnnotationUser.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../util/account-id': {
         isThirdPartyUser: fakeIsThirdPartyUser,
         username: fakeUsername,
@@ -43,7 +44,7 @@ describe('AnnotationUser', () => {
   });
 
   afterEach(() => {
-    AnnotationUser.$imports.$restore();
+    $imports.$restore();
   });
 
   describe('link to user activity', () => {

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

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const Button = require('../button');
+const { $imports } = require('../button');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('Button', () => {
@@ -21,11 +22,11 @@ describe('Button', () => {
 
   beforeEach(() => {
     fakeOnClick = sinon.stub();
-    Button.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    Button.$imports.$restore();
+    $imports.$restore();
   });
 
   it('adds active className if `isActive` is `true`', () => {

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

@@ -3,6 +3,7 @@ const { act } = require('preact/test-utils');
 const { mount } = require('enzyme');
 
 const Excerpt = require('../excerpt');
+const { $imports } = require('../excerpt');
 
 describe('Excerpt', () => {
   const SHORT_DIV = <div id="foo" style="height: 5px;" />;
@@ -36,12 +37,13 @@ describe('Excerpt', () => {
     container = document.createElement('div');
     document.body.appendChild(container);
 
-    Excerpt.$imports.$mock({
+    $imports.$mock({
       '../util/observe-element-size': fakeObserveElementSize,
     });
   });
 
   afterEach(() => {
+    $imports.$restore();
     container.remove();
   });
 

src/sidebar/components/test/focused-mode-header-test.js

@@ -2,6 +2,7 @@ const { mount } = require('enzyme');
 const { createElement } = require('preact');
 
 const FocusedModeHeader = require('../focused-mode-header');
+const { $imports } = require('../focused-mode-header');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('FocusedModeHeader', function() {
@@ -24,14 +25,14 @@ describe('FocusedModeHeader', function() {
       setFocusModeFocused: sinon.stub(),
     };
 
-    FocusedModeHeader.$imports.$mock(mockImportedComponents());
-    FocusedModeHeader.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback => callback(fakeStore),
     });
   });
 
   afterEach(() => {
-    FocusedModeHeader.$imports.$restore();
+    $imports.$restore();
   });
 
   context('not in user-focused mode', () => {

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

@@ -3,6 +3,7 @@ const { act } = require('preact/test-utils');
 
 const { mount } = require('enzyme');
 const GroupListItem = require('../group-list-item');
+const { $imports } = require('../group-list-item');
 
 const { events } = require('../../services/analytics');
 
@@ -65,7 +66,7 @@ describe('GroupListItem', () => {
     }
     FakeSlider.displayName = 'Slider';
 
-    GroupListItem.$imports.$mock({
+    $imports.$mock({
       './menu-item': FakeMenuItem,
       '../util/copy-to-clipboard': {
         copyText: fakeCopyText,
@@ -78,7 +79,7 @@ describe('GroupListItem', () => {
   });
 
   afterEach(() => {
-    GroupListItem.$imports.$restore();
+    $imports.$restore();
     window.confirm.restore();
   });
 

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

@@ -2,6 +2,7 @@ const { mount } = require('enzyme');
 const { createElement } = require('preact');
 
 const GroupListSection = require('../group-list-section');
+const { $imports } = require('../group-list-section');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('GroupListSection', () => {
@@ -27,11 +28,11 @@ describe('GroupListSection', () => {
   };
 
   beforeEach(() => {
-    GroupListSection.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    GroupListSection.$imports.$restore();
+    $imports.$restore();
   });
 
   it('renders heading', () => {

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

@@ -3,6 +3,7 @@ const { createElement } = require('preact');
 const { act } = require('preact/test-utils');
 
 const GroupList = require('../group-list');
+const { $imports } = require('../group-list');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('GroupList', () => {
@@ -58,15 +59,15 @@ describe('GroupList', () => {
     };
     fakeServiceConfig = sinon.stub().returns(null);
 
-    GroupList.$imports.$mock(mockImportedComponents());
-    GroupList.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback => callback(fakeStore),
       '../service-config': fakeServiceConfig,
     });
   });
 
   afterEach(() => {
-    GroupList.$imports.$restore();
+    $imports.$restore();
   });
 
   it('displays no sections if there are no groups', () => {
@@ -100,7 +101,7 @@ describe('GroupList', () => {
     const testGroups = populateGroupSections();
     const fakeGroupOrganizations = groups =>
       groups.sort((a, b) => a.id.localeCompare(b.id));
-    GroupList.$imports.$mock({
+    $imports.$mock({
       '../util/group-organizations': fakeGroupOrganizations,
     });
 
@@ -151,7 +152,7 @@ describe('GroupList', () => {
   });
 
   it('displays the group name and icon as static text if there is only one group and no actions available', () => {
-    GroupList.$imports.$mock({
+    $imports.$mock({
       '../util/is-third-party-service': () => true,
     });
     const wrapper = createGroupList();

src/sidebar/components/test/help-panel-test.js

@@ -3,6 +3,7 @@ const { createElement } = require('preact');
 const { act } = require('preact/test-utils');
 
 const HelpPanel = require('../help-panel');
+const { $imports } = require('../help-panel');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('HelpPanel', function() {
@@ -32,15 +33,15 @@ describe('HelpPanel', function() {
     };
     fakeVersionData = sinon.stub().returns(fakeVersionDataObject);
 
-    HelpPanel.$imports.$mock(mockImportedComponents());
-    HelpPanel.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback => callback(fakeStore),
       '../util/version-data': fakeVersionData,
     });
   });
 
   afterEach(() => {
-    HelpPanel.$imports.$restore();
+    $imports.$restore();
   });
 
   context('when viewing tutorial sub-panel', () => {

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

@@ -4,6 +4,7 @@ const events = require('../../events');
 const bridgeEvents = require('../../../shared/bridge-events');
 
 const hypothesisApp = require('../hypothesis-app');
+const { $imports } = require('../hypothesis-app');
 
 describe('sidebar.components.hypothesis-app', function() {
   let $componentController = null;
@@ -44,7 +45,7 @@ describe('sidebar.components.hypothesis-app', function() {
     fakeServiceConfig = sandbox.stub();
     fakeShouldAutoDisplayTutorial = sinon.stub().returns(false);
 
-    hypothesisApp.$imports.$mock({
+    $imports.$mock({
       '../util/is-sidebar': fakeIsSidebar,
       '../service-config': fakeServiceConfig,
       '../util/session': {
@@ -56,7 +57,7 @@ describe('sidebar.components.hypothesis-app', function() {
   });
 
   afterEach(() => {
-    hypothesisApp.$imports.$restore();
+    $imports.$restore();
   });
 
   beforeEach(angular.mock.module('h'));

src/sidebar/components/test/logged-out-message-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const LoggedOutMessage = require('../logged-out-message');
+const { $imports } = require('../logged-out-message');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('LoggedOutMessage', () => {
@@ -16,11 +17,11 @@ describe('LoggedOutMessage', () => {
   };
 
   beforeEach(() => {
-    LoggedOutMessage.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    LoggedOutMessage.$imports.$restore();
+    $imports.$restore();
   });
 
   it('should link to signup', () => {

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

@@ -4,6 +4,7 @@ const { mount } = require('enzyme');
 
 const { LinkType } = require('../../markdown-commands');
 const MarkdownEditor = require('../markdown-editor');
+const { $imports } = require('../markdown-editor');
 
 describe('MarkdownEditor', () => {
   const formatResult = {
@@ -29,14 +30,14 @@ describe('MarkdownEditor', () => {
       return null;
     };
 
-    MarkdownEditor.$imports.$mock({
+    $imports.$mock({
       '../markdown-commands': fakeMarkdownCommands,
       './markdown-view': MarkdownView,
     });
   });
 
   afterEach(() => {
-    MarkdownEditor.$imports.$restore();
+    $imports.$restore();
   });
 
   const commands = [

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

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const MarkdownView = require('../markdown-view');
+const { $imports } = require('../markdown-view');
 
 describe('MarkdownView', () => {
   let fakeMediaEmbedder;
@@ -16,14 +17,14 @@ describe('MarkdownView', () => {
       },
     };
 
-    MarkdownView.$imports.$mock({
+    $imports.$mock({
       '../render-markdown': fakeRenderMarkdown,
       '../media-embedder': fakeMediaEmbedder,
     });
   });
 
   afterEach(() => {
-    MarkdownView.$imports.$restore();
+    $imports.$restore();
   });
 
   it('renders nothing if no markdown is provied', () => {

src/sidebar/components/test/menu-item-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const MenuItem = require('../menu-item');
+const { $imports } = require('../menu-item');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('MenuItem', () => {
@@ -9,11 +10,11 @@ describe('MenuItem', () => {
     mount(<MenuItem label="Test item" {...props} />);
 
   beforeEach(() => {
-    MenuItem.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    MenuItem.$imports.$restore();
+    $imports.$restore();
   });
 
   it('invokes `onClick` callback when clicked', () => {

src/sidebar/components/test/menu-section-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const MenuSection = require('../menu-section');
+const { $imports } = require('../menu-section');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('MenuSection', () => {
@@ -13,11 +14,11 @@ describe('MenuSection', () => {
     );
 
   beforeEach(() => {
-    MenuSection.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    MenuSection.$imports.$restore();
+    $imports.$restore();
   });
 
   it('renders the heading', () => {

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

@@ -3,6 +3,7 @@ const { act } = require('preact/test-utils');
 const { mount } = require('enzyme');
 
 const Menu = require('../menu');
+const { $imports } = require('../menu');
 
 describe('Menu', () => {
   let container;
@@ -29,14 +30,14 @@ describe('Menu', () => {
     container = document.createElement('div');
     document.body.appendChild(container);
 
-    Menu.$imports.$mock({
+    $imports.$mock({
       // eslint-disable-next-line react/display-name
       './svg-icon': () => <span>Fake SVG icon</span>,
     });
   });
 
   afterEach(() => {
-    Menu.$imports.$restore();
+    $imports.$restore();
     container.remove();
   });
 

src/sidebar/components/test/mock-imported-components.js

@@ -38,14 +38,16 @@ function getDisplayName(component) {
  * `Fragment`.
  *
  * @example
+ *   import ComponentUnderTest, { $imports } from '../component-under-test';
+ *
  *   beforeEach(() => {
- *     ComponentUnderTest.$imports.$mock(mockImportedComponents());
+ *     $imports.$mock(mockImportedComponents());
  *
  *     // Add additional mocks or overrides here.
  *   });
  *
  *   afterEach(() => {
- *     ComponentUnderTest.$imports.$restore();
+ *     $imports.$restore();
  *   });
  *
  * @return {Function} - A function that can be passed to `$imports.$mock`.

src/sidebar/components/test/moderation-banner-test.js

@@ -2,6 +2,7 @@ const { mount } = require('enzyme');
 const { createElement } = require('preact');
 
 const ModerationBanner = require('../moderation-banner');
+const { $imports } = require('../moderation-banner');
 const fixtures = require('../../test/annotation-fixtures');
 const mockImportedComponents = require('./mock-imported-components');
 
@@ -29,8 +30,8 @@ describe('ModerationBanner', () => {
       },
     };
 
-    ModerationBanner.$imports.$mock(mockImportedComponents());
-    ModerationBanner.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback =>
         callback({
           hide: sinon.stub(),
@@ -40,7 +41,7 @@ describe('ModerationBanner', () => {
   });
 
   afterEach(() => {
-    ModerationBanner.$imports.$restore();
+    $imports.$restore();
   });
 
   [

src/sidebar/components/test/new-note-btn-test.js

@@ -4,6 +4,7 @@ const { act } = require('preact/test-utils');
 
 const events = require('../../events');
 const NewNoteButton = require('../new-note-btn');
+const { $imports } = require('../new-note-btn');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('NewNoteButton', function() {
@@ -38,14 +39,14 @@ describe('NewNoteButton', function() {
       ]),
     };
 
-    NewNoteButton.$imports.$mock(mockImportedComponents());
-    NewNoteButton.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback => callback(fakeStore),
     });
   });
 
   afterEach(() => {
-    NewNoteButton.$imports.$restore();
+    $imports.$restore();
   });
 
   it("sets a backgroundColor equal to the setting's ctaBackgroundColor color", () => {

src/sidebar/components/test/search-input-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const SearchInput = require('../search-input');
+const { $imports } = require('../search-input');
 
 describe('SearchInput', () => {
   let fakeStore;
@@ -22,14 +23,14 @@ describe('SearchInput', () => {
     const FakeSpinner = () => null;
     FakeSpinner.displayName = 'Spinner';
 
-    SearchInput.$imports.$mock({
+    $imports.$mock({
       './spinner': FakeSpinner,
       '../store/use-store': callback => callback(fakeStore),
     });
   });
 
   afterEach(() => {
-    SearchInput.$imports.$restore();
+    $imports.$restore();
   });
 
   it('displays the active query', () => {

src/sidebar/components/test/search-status-bar-test.js

@@ -2,6 +2,7 @@ const { mount } = require('enzyme');
 const { createElement } = require('preact');
 
 const SearchStatusBar = require('../search-status-bar');
+const { $imports } = require('../search-status-bar');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('SearchStatusBar', () => {
@@ -27,14 +28,14 @@ describe('SearchStatusBar', () => {
       noteCount: sinon.stub().returns(0),
     };
 
-    SearchStatusBar.$imports.$mock(mockImportedComponents());
-    SearchStatusBar.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback => callback(fakeStore),
     });
   });
 
   afterEach(() => {
-    SearchStatusBar.$imports.$restore();
+    $imports.$restore();
   });
 
   context('user search query is applied', () => {

src/sidebar/components/test/selection-tabs-test.js

@@ -3,6 +3,7 @@ const { createElement } = require('preact');
 
 const uiConstants = require('../../ui-constants');
 const SelectionTabs = require('../selection-tabs');
+const { $imports } = require('../selection-tabs');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('SelectionTabs', function() {
@@ -39,14 +40,14 @@ describe('SelectionTabs', function() {
       }),
     };
 
-    SelectionTabs.$imports.$mock(mockImportedComponents());
-    SelectionTabs.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback => callback(fakeStore),
     });
   });
 
   afterEach(() => {
-    SelectionTabs.$imports.$restore();
+    $imports.$restore();
   });
 
   const unavailableMessage = wrapper =>

src/sidebar/components/test/share-annotations-panel-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const ShareAnnotationsPanel = require('../share-annotations-panel');
+const { $imports } = require('../share-annotations-panel');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('ShareAnnotationsPanel', () => {
@@ -47,15 +48,15 @@ describe('ShareAnnotationsPanel', () => {
       }),
     };
 
-    ShareAnnotationsPanel.$imports.$mock(mockImportedComponents());
-    ShareAnnotationsPanel.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback => callback(fakeStore),
       '../util/copy-to-clipboard': fakeCopyToClipboard,
     });
   });
 
   afterEach(() => {
-    ShareAnnotationsPanel.$imports.$restore();
+    $imports.$restore();
   });
 
   describe('panel title', () => {

src/sidebar/components/test/share-links-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const ShareLinks = require('../share-links');
+const { $imports } = require('../share-links');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('ShareLinks', () => {
@@ -24,11 +25,11 @@ describe('ShareLinks', () => {
       track: sinon.stub(),
     };
 
-    ShareLinks.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    ShareLinks.$imports.$restore();
+    $imports.$restore();
   });
 
   const encodedLink = encodeURIComponent(shareLink);

src/sidebar/components/test/sidebar-content-error-test.js

@@ -2,6 +2,7 @@ const { mount } = require('enzyme');
 const { createElement } = require('preact');
 
 const SidebarContentError = require('../sidebar-content-error');
+const { $imports } = require('../sidebar-content-error');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('SidebarContentError', () => {
@@ -21,11 +22,11 @@ describe('SidebarContentError', () => {
   };
 
   beforeEach(() => {
-    SidebarContentError.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    SidebarContentError.$imports.$restore();
+    $imports.$restore();
   });
 
   it('shows error you may need to login to view message when logged out', () => {

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

@@ -72,10 +72,6 @@ describe('sidebar.components.sidebar-content', function() {
     });
   });
 
-  afterEach(() => {
-    sidebarContent.$imports.$restore();
-  });
-
   function setFrames(frames) {
     frames.forEach(function(frame) {
       store.connectFrame(frame);

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

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const SidebarPanel = require('../sidebar-panel');
+const { $imports } = require('../sidebar-panel');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('SidebarPanel', () => {
@@ -24,15 +25,15 @@ describe('SidebarPanel', () => {
       toggleSidebarPanel: sinon.stub(),
     };
 
-    SidebarPanel.$imports.$mock(mockImportedComponents());
-    SidebarPanel.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback => callback(fakeStore),
       'scroll-into-view': fakeScrollIntoView,
     });
   });
 
   afterEach(() => {
-    SidebarPanel.$imports.$restore();
+    $imports.$restore();
   });
 
   it('renders the provided title', () => {

src/sidebar/components/test/sort-menu-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const SortMenu = require('../sort-menu');
+const { $imports } = require('../sort-menu');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('SortMenu', () => {
@@ -24,14 +25,14 @@ describe('SortMenu', () => {
       getState: sinon.stub().returns(fakeState),
     };
 
-    SortMenu.$imports.$mock(mockImportedComponents());
-    SortMenu.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback => callback(fakeStore),
     });
   });
 
   afterEach(() => {
-    SortMenu.$imports.$restore();
+    $imports.$restore();
   });
 
   it('renders a menu item for each sort option', () => {

src/sidebar/components/test/stream-search-input-test.js

@@ -3,6 +3,7 @@ const { createElement } = require('preact');
 const { act } = require('preact/test-utils');
 
 const StreamSearchInput = require('../stream-search-input');
+const { $imports } = require('../stream-search-input');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('StreamSearchInput', () => {
@@ -19,11 +20,11 @@ describe('StreamSearchInput', () => {
       $on: sinon.stub(),
     };
 
-    StreamSearchInput.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    StreamSearchInput.$imports.$restore();
+    $imports.$restore();
   });
 
   function createSearchInput(props = {}) {

src/sidebar/components/test/tag-editor-test.js

@@ -3,6 +3,7 @@ const { mount } = require('enzyme');
 
 const mockImportedComponents = require('./mock-imported-components');
 const TagEditor = require('../tag-editor');
+const { $imports } = require('../tag-editor');
 
 describe('TagEditor', function() {
   let fakeTags = ['tag1', 'tag2'];
@@ -48,11 +49,11 @@ describe('TagEditor', function() {
       store: sinon.stub(),
     };
 
-    TagEditor.$imports.$mock(mockImportedComponents());
+    $imports.$mock(mockImportedComponents());
   });
 
   afterEach(() => {
-    TagEditor.$imports.$restore();
+    $imports.$restore();
   });
 
   it('adds appropriate tag values to the elements', () => {

src/sidebar/components/test/tag-list-test.js

@@ -3,6 +3,7 @@ const { mount } = require('enzyme');
 
 const mockImportedComponents = require('./mock-imported-components');
 const TagList = require('../tag-list');
+const { $imports } = require('../tag-list');
 
 describe('TagList', function() {
   let fakeServiceUrl;
@@ -27,8 +28,8 @@ describe('TagList', function() {
     fakeServiceUrl = sinon.stub().returns('http://serviceurl.com');
     fakeIsThirdPartyUser = sinon.stub().returns(false);
 
-    TagList.$imports.$mock(mockImportedComponents());
-    TagList.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../util/account-id': {
         isThirdPartyUser: fakeIsThirdPartyUser,
       },
@@ -36,7 +37,7 @@ describe('TagList', function() {
   });
 
   afterEach(() => {
-    TagList.$imports.$restore();
+    $imports.$restore();
   });
 
   it('does not render any tags if `tags` prop is empty', () => {

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

@@ -3,6 +3,7 @@ const { act } = require('preact/test-utils');
 const { mount } = require('enzyme');
 
 const Timestamp = require('../timestamp');
+const { $imports } = require('../timestamp');
 
 describe('Timestamp', () => {
   let clock;
@@ -15,14 +16,14 @@ describe('Timestamp', () => {
       decayingInterval: sinon.stub(),
     };
 
-    Timestamp.$imports.$mock({
+    $imports.$mock({
       '../util/time': fakeTime,
     });
   });
 
   afterEach(() => {
     clock.restore();
-    Timestamp.$imports.$restore();
+    $imports.$restore();
   });
 
   const createTimestamp = props => mount(<Timestamp {...props} />);
@@ -104,7 +105,7 @@ describe('Timestamp', () => {
       it(`displays an absolute timestamp (${variant})`, () => {
         const date = new Date('2016-06-10T10:04:04.939Z');
         const format = date => `formatted:${date}`;
-        Timestamp.$imports.$mock({
+        $imports.$mock({
           '../util/date': {
             format,
           },

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

@@ -5,6 +5,7 @@ const uiConstants = require('../../ui-constants');
 const bridgeEvents = require('../../../shared/bridge-events');
 
 const TopBar = require('../top-bar');
+const { $imports } = require('../top-bar');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('TopBar', () => {
@@ -40,8 +41,8 @@ describe('TopBar', () => {
       applyPendingUpdates: sinon.stub(),
     };
 
-    TopBar.$imports.$mock(mockImportedComponents());
-    TopBar.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../store/use-store': callback => callback(fakeStore),
       '../util/is-third-party-service': fakeIsThirdPartyService,
       '../service-config': fakeServiceConfig,
@@ -49,7 +50,7 @@ describe('TopBar', () => {
   });
 
   afterEach(() => {
-    TopBar.$imports.$restore();
+    $imports.$restore();
   });
 
   // Helper to retrieve an `Button` by icon name, for convenience

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

@@ -2,6 +2,7 @@ const { mount } = require('enzyme');
 const { createElement } = require('preact');
 
 const Tutorial = require('../tutorial');
+const { $imports } = require('../tutorial');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('Tutorial', function() {
@@ -14,14 +15,14 @@ describe('Tutorial', function() {
   beforeEach(() => {
     fakeIsThirdPartyService = sinon.stub().returns(false);
 
-    Tutorial.$imports.$mock(mockImportedComponents());
-    Tutorial.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../util/is-third-party-service': fakeIsThirdPartyService,
     });
   });
 
   afterEach(() => {
-    Tutorial.$imports.$restore();
+    $imports.$restore();
   });
 
   it('should show four "steps" of instructions to first-party users', () => {

src/sidebar/components/test/user-menu-test.js

@@ -2,6 +2,7 @@ const { createElement } = require('preact');
 const { mount } = require('enzyme');
 
 const UserMenu = require('../user-menu');
+const { $imports } = require('../user-menu');
 const mockImportedComponents = require('./mock-imported-components');
 
 describe('UserMenu', () => {
@@ -49,8 +50,8 @@ describe('UserMenu', () => {
       authDomain: 'hypothes.is',
     };
 
-    UserMenu.$imports.$mock(mockImportedComponents());
-    UserMenu.$imports.$mock({
+    $imports.$mock(mockImportedComponents());
+    $imports.$mock({
       '../util/account-id': {
         isThirdPartyUser: fakeIsThirdPartyUser,
       },
@@ -62,7 +63,7 @@ describe('UserMenu', () => {
   });
 
   afterEach(() => {
-    UserMenu.$imports.$restore();
+    $imports.$restore();
   });
 
   describe('profile menu item', () => {

src/sidebar/components/test/version-info-test.js

@@ -2,6 +2,7 @@ const { mount } = require('enzyme');
 const { createElement } = require('preact');
 
 const VersionInfo = require('../version-info');
+const { $imports } = require('../version-info');
 
 describe('VersionInfo', function() {
   let fakeVersionData;
@@ -25,7 +26,7 @@ describe('VersionInfo', function() {
     fakeCopyToClipboard = {
       copyText: sinon.stub(),
     };
-    VersionInfo.$imports.$mock({
+    $imports.$mock({
       '../util/copy-to-clipboard': fakeCopyToClipboard,
     });
 
@@ -40,6 +41,10 @@ describe('VersionInfo', function() {
     fakeVersionData.asFormattedString = sinon.stub().returns('fakeString');
   });
 
+  afterEach(() => {
+    $imports.$restore();
+  });
+
   it('renders `versionData` information', () => {
     const wrapper = createComponent();
     const componentText = wrapper.text();

src/sidebar/services/test/annotations-test.js

-const annotations = require('../annotations');
 const EventEmitter = require('tiny-emitter');
 
+const annotations = require('../annotations');
+const { $imports } = require('../annotations');
+
 let searchClients;
 let longRunningSearchClient = false;
 class FakeSearchClient extends EventEmitter {
@@ -72,14 +74,14 @@ describe('annotations', () => {
     fakeUris = ['http://example.com'];
     fakeGroupId = 'group-id';
 
-    annotations.$imports.$mock({
+    $imports.$mock({
       '../search-client': FakeSearchClient,
     });
   });
 
   afterEach(() => {
     console.error.restore();
-    annotations.$imports.$restore();
+    $imports.$restore();
   });
 
   function service() {

src/sidebar/services/test/features-test.js

 const features = require('../features');
+const { $imports } = require('../features');
 const events = require('../../events');
 const bridgeEvents = require('../../../shared/bridge-events');
 
@@ -38,13 +39,13 @@ describe('h:features - sidebar layer', function() {
       },
     };
 
-    features.$imports.$mock({
+    $imports.$mock({
       '../../shared/warn-once': fakeWarnOnce,
     });
   });
 
   afterEach(function() {
-    features.$imports.$restore();
+    $imports.$restore();
     sandbox.restore();
   });
 

src/sidebar/services/test/root-thread-test.js

@@ -5,6 +5,7 @@ const annotationFixtures = require('../../test/annotation-fixtures');
 const events = require('../../events');
 const uiConstants = require('../../ui-constants');
 const rootThreadFactory = require('../root-thread');
+const { $imports } = require('../root-thread');
 
 const fixtures = immutable({
   emptyThread: {
@@ -97,13 +98,13 @@ describe('rootThread', function() {
   });
 
   beforeEach(() => {
-    rootThreadFactory.$imports.$mock({
+    $imports.$mock({
       '../build-thread': fakeBuildThread,
     });
   });
 
   afterEach(() => {
-    rootThreadFactory.$imports.$restore();
+    $imports.$restore();
   });
 
   describe('#thread', function() {

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

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

src/sidebar/services/test/session-test.js

@@ -2,6 +2,7 @@ const angular = require('angular');
 
 const events = require('../../events');
 const sessionFactory = require('../session');
+const { $imports } = require('../session');
 
 const mock = angular.mock;
 
@@ -68,7 +69,7 @@ describe('sidebar.session', function() {
       serviceConfig: fakeServiceConfig,
     });
 
-    sessionFactory.$imports.$mock({
+    $imports.$mock({
       '../util/sentry': fakeSentry,
     });
   });
@@ -81,7 +82,7 @@ describe('sidebar.session', function() {
   );
 
   afterEach(function() {
-    sessionFactory.$imports.$restore();
+    $imports.$restore();
     sandbox.restore();
   });
 

src/sidebar/services/test/streamer-test.js

 const EventEmitter = require('tiny-emitter');
+
 const Streamer = require('../streamer');
+const { $imports } = require('../streamer');
 
 const fixtures = {
   createNotification: {
@@ -141,13 +143,13 @@ describe('Streamer', function() {
       websocketUrl: 'ws://example.com/ws',
     };
 
-    Streamer.$imports.$mock({
+    $imports.$mock({
       '../websocket': FakeSocket,
     });
   });
 
   afterEach(function() {
-    Streamer.$imports.$restore();
+    $imports.$restore();
     activeStreamer = null;
   });
 

src/sidebar/store/modules/test/real-time-updates-test.js

@@ -3,6 +3,7 @@ const createStore = require('../../create-store');
 const annotations = require('../annotations');
 const groups = require('../groups');
 const realTimeUpdates = require('../real-time-updates');
+const { $imports } = require('../real-time-updates');
 const selection = require('../selection');
 
 const { removeAnnotations } = annotations.actions;
@@ -25,7 +26,7 @@ describe('sidebar/store/modules/real-time-updates', () => {
       [fakeSettings]
     );
 
-    realTimeUpdates.$imports.$mock({
+    $imports.$mock({
       './annotations': {
         selectors: { annotationExists: fakeAnnotationExists },
       },
@@ -39,7 +40,7 @@ describe('sidebar/store/modules/real-time-updates', () => {
   });
 
   afterEach(() => {
-    realTimeUpdates.$imports.$restore();
+    $imports.$restore();
   });
 
   function addPendingUpdates(store) {

src/sidebar/test/cross-origin-rpc-test.js

 const crossOriginRPC = require('../cross-origin-rpc');
+const { $imports } = require('../cross-origin-rpc');
 
 describe('crossOriginRPC', function() {
   describe('server', function() {
@@ -30,11 +31,15 @@ describe('crossOriginRPC', function() {
 
       fakeWarnOnce = sinon.stub();
 
-      crossOriginRPC.$imports.$mock({
+      $imports.$mock({
         '../shared/warn-once': fakeWarnOnce,
       });
     });
 
+    afterEach(() => {
+      $imports.$restore();
+    });
+
     /**
      * Directly call the postMessage() listener func that the server
      * registered. This simulates what would happen if window.postMessage()

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

 const renderMarkdown = require('../render-markdown');
+const { $imports } = require('../render-markdown');
 
 describe('render-markdown', function() {
   let render;
 
   beforeEach(function() {
-    renderMarkdown.$imports.$mock({
+    $imports.$mock({
       katex: {
         renderToString: function(input, opts) {
           if (opts && opts.displayMode) {
@@ -21,7 +22,7 @@ describe('render-markdown', function() {
   });
 
   afterEach(() => {
-    renderMarkdown.$imports.$restore();
+    $imports.$restore();
   });
 
   describe('autolinking', function() {

src/sidebar/test/virtual-thread-list-test.js

 const VirtualThreadList = require('../virtual-thread-list');
+const { $imports } = require('../virtual-thread-list');
 
 describe('VirtualThreadList', function() {
   let lastState;
@@ -35,13 +36,13 @@ describe('VirtualThreadList', function() {
   }
 
   beforeEach(() => {
-    VirtualThreadList.$imports.$mock({
+    $imports.$mock({
       'lodash.debounce': fn => fn,
     });
   });
 
   afterEach(() => {
-    VirtualThreadList.$imports.$restore();
+    $imports.$restore();
   });
 
   beforeEach(function() {

src/sidebar/util/test/is-third-party-service-test.js

 const isThirdPartyService = require('../is-third-party-service');
+const { $imports } = require('../is-third-party-service');
 
 describe('sidebar.util.isThirdPartyService', () => {
   let fakeServiceConfig;
@@ -8,14 +9,14 @@ describe('sidebar.util.isThirdPartyService', () => {
     fakeServiceConfig = sinon.stub();
     fakeSettings = { authDomain: 'hypothes.is' };
 
-    isThirdPartyService.$imports.$mock({
+    $imports.$mock({
       '../service-config': fakeServiceConfig,
       '@noCallThru': true,
     });
   });
 
   afterEach(() => {
-    isThirdPartyService.$imports.$restore();
+    $imports.$restore();
   });
 
   it('returns false for first-party services', () => {