Merge pull request #1963 from hypothesis/replace-angular-mocks-in-service-tests

Replace angular-mocks in service tests

src/sidebar/services/test/annotation-mapper-test.js

-import angular from 'angular';
-
+import { Injector } from '../../../shared/injector';
 import events from '../../events';
 import storeFactory from '../../store';
 import annotationMapperFactory from '../annotation-mapper';
 import immutable from '../../util/immutable';
 
 describe('annotationMapper', function () {
-  const sandbox = sinon.createSandbox();
   let $rootScope;
   let store;
   let fakeApi;
@@ -19,28 +17,26 @@ describe('annotationMapper', function () {
         flag: sinon.stub().returns(Promise.resolve({})),
       },
     };
-    angular
-      .module('app', [])
-      .service('annotationMapper', annotationMapperFactory)
-      .service('store', storeFactory)
-      .value('api', fakeApi)
-      .value('settings', {});
-    angular.mock.module('app');
-
-    angular.mock.inject(function (_$rootScope_, _store_, _annotationMapper_) {
-      $rootScope = _$rootScope_;
-      annotationMapper = _annotationMapper_;
-      store = _store_;
-    });
-  });
 
-  afterEach(function () {
-    sandbox.restore();
+    $rootScope = {
+      // nb. `$applyAsync` is needed because this test uses the real `store`
+      // service.
+      $applyAsync: sinon.stub().yields(),
+      $broadcast: sinon.stub(),
+    };
+
+    const injector = new Injector()
+      .register('$rootScope', { value: $rootScope })
+      .register('api', { value: fakeApi })
+      .register('settings', { value: {} })
+      .register('store', storeFactory)
+      .register('annotationMapper', annotationMapperFactory);
+    store = injector.get('store');
+    annotationMapper = injector.get('annotationMapper');
   });
 
   describe('#loadAnnotations()', function () {
     it('triggers the annotationLoaded event', function () {
-      sandbox.stub($rootScope, '$broadcast');
       const annotations = [{ id: 1 }, { id: 2 }, { id: 3 }];
       annotationMapper.loadAnnotations(annotations);
       assert.called($rootScope.$broadcast);
@@ -52,7 +48,6 @@ describe('annotationMapper', function () {
     });
 
     it('also includes replies in the annotationLoaded event', function () {
-      sandbox.stub($rootScope, '$broadcast');
       const annotations = [{ id: 1 }];
       const replies = [{ id: 2 }, { id: 3 }];
       annotationMapper.loadAnnotations(annotations, replies);
@@ -65,9 +60,8 @@ describe('annotationMapper', function () {
     });
 
     it('triggers the annotationUpdated event for each loaded annotation', function () {
-      sandbox.stub($rootScope, '$broadcast');
       const annotations = immutable([{ id: 1 }, { id: 2 }, { id: 3 }]);
-      store.addAnnotations(angular.copy(annotations));
+      store.addAnnotations(annotations);
 
       annotationMapper.loadAnnotations(annotations);
       assert.called($rootScope.$broadcast);
@@ -79,7 +73,6 @@ describe('annotationMapper', function () {
     });
 
     it('also triggers annotationUpdated for cached replies', function () {
-      sandbox.stub($rootScope, '$broadcast');
       const annotations = [{ id: 1 }];
       const replies = [{ id: 2 }, { id: 3 }, { id: 4 }];
       store.addAnnotations([{ id: 3 }]);
@@ -91,7 +84,6 @@ describe('annotationMapper', function () {
     });
 
     it('replaces the properties on the cached annotation with those from the loaded one', function () {
-      sandbox.stub($rootScope, '$broadcast');
       const annotations = [{ id: 1, url: 'http://example.com' }];
       store.addAnnotations([{ id: 1, $tag: 'tag1' }]);
 
@@ -104,7 +96,6 @@ describe('annotationMapper', function () {
     });
 
     it('excludes cached annotations from the annotationLoaded event', function () {
-      sandbox.stub($rootScope, '$broadcast');
       const annotations = [{ id: 1, url: 'http://example.com' }];
       store.addAnnotations([{ id: 1, $tag: 'tag1' }]);
 
@@ -123,7 +114,6 @@ describe('annotationMapper', function () {
     });
 
     it('emits the "annotationFlagged" event', function (done) {
-      sandbox.stub($rootScope, '$broadcast');
       const ann = { id: 'test-id' };
       annotationMapper
         .flagAnnotation(ann)
@@ -146,7 +136,6 @@ describe('annotationMapper', function () {
     });
 
     it('emits the "beforeAnnotationCreated" event', function () {
-      sandbox.stub($rootScope, '$broadcast');
       const ann = {};
       annotationMapper.createAnnotation(ann);
       assert.calledWith(
@@ -165,7 +154,6 @@ describe('annotationMapper', function () {
     });
 
     it('triggers the "annotationDeleted" event on success', function (done) {
-      sandbox.stub($rootScope, '$broadcast');
       const ann = {};
       annotationMapper
         .deleteAnnotation(ann)
@@ -177,11 +165,9 @@ describe('annotationMapper', function () {
           );
         })
         .then(done, done);
-      $rootScope.$apply();
     });
 
     it('does not emit an event on error', function (done) {
-      sandbox.stub($rootScope, '$broadcast');
       fakeApi.annotation.delete.returns(Promise.reject());
       const ann = { id: 'test-id' };
       annotationMapper
@@ -190,7 +176,6 @@ describe('annotationMapper', function () {
           assert.notCalled($rootScope.$broadcast);
         })
         .then(done, done);
-      $rootScope.$apply();
     });
   });
 });

src/sidebar/services/test/frame-sync-test.js

-import angular from 'angular';
 import EventEmitter from 'tiny-emitter';
 
 import events from '../../events';
+import { Injector } from '../../../shared/injector';
 import * as annotationFixtures from '../../test/annotation-fixtures';
 import createFakeStore from '../../test/fake-redux-store';
 import uiConstants from '../../ui-constants';
@@ -47,16 +47,12 @@ const fixtures = {
   },
 };
 
-describe('sidebar.frame-sync', function () {
+describe('sidebar/services/frame-sync', function () {
   let fakeStore;
   let fakeBridge;
   let frameSync;
   let $rootScope;
 
-  before(function () {
-    angular.module('app', []).service('frameSync', FrameSync);
-  });
-
   beforeEach(function () {
     fakeStore = createFakeStore(
       { annotations: [] },
@@ -91,24 +87,27 @@ describe('sidebar.frame-sync', function () {
       this.startDiscovery = sinon.stub();
     }
 
-    angular.mock.module('app', {
-      store: fakeStore,
-      bridge: fakeBridge,
-    });
-
-    angular.mock.inject(function (_$rootScope_, _frameSync_) {
-      $rootScope = _$rootScope_;
-      frameSync = _frameSync_;
-    });
-
     $imports.$mock({
       '../../shared/discovery': FakeDiscovery,
     });
+
+    $rootScope = {
+      $broadcast: sinon.stub(),
+    };
+
+    frameSync = new Injector()
+      .register('$rootScope', { value: $rootScope })
+      .register('$window', { value: {} })
+      .register('bridge', { value: fakeBridge })
+      .register('store', { value: fakeStore })
+      .register('frameSync', FrameSync)
+      .get('frameSync');
+
+    frameSync.connect();
   });
 
-  beforeEach(function () {
+  afterEach(() => {
     $imports.$restore();
-    frameSync.connect();
   });
 
   context('when annotations are loaded into the sidebar', function () {
@@ -216,15 +215,13 @@ describe('sidebar.frame-sync', function () {
     context('when an authenticated user is present', () => {
       it('emits a BEFORE_ANNOTATION_CREATED event', function () {
         fakeStore.isLoggedIn.returns(true);
-        const onCreated = sinon.stub();
         const ann = { target: [] };
-        $rootScope.$on(events.BEFORE_ANNOTATION_CREATED, onCreated);
 
         fakeBridge.emit('beforeCreateAnnotation', { tag: 't1', msg: ann });
 
-        assert.calledWithMatch(
-          onCreated,
-          sinon.match.any,
+        assert.calledWith(
+          $rootScope.$broadcast,
+          events.BEFORE_ANNOTATION_CREATED,
           sinon.match({
             $tag: 't1',
             target: [],
@@ -239,13 +236,11 @@ describe('sidebar.frame-sync', function () {
       });
 
       it('should not emit BEFORE_ANNOTATION_CREATED event', () => {
-        const onCreated = sinon.stub();
         const ann = { target: [] };
-        $rootScope.$on(events.BEFORE_ANNOTATION_CREATED, onCreated);
 
         fakeBridge.emit('beforeCreateAnnotation', { tag: 't1', msg: ann });
 
-        assert.notCalled(onCreated);
+        assert.notCalled($rootScope.$broadcast);
       });
 
       it('should open the sidebar', () => {
@@ -312,13 +307,11 @@ describe('sidebar.frame-sync', function () {
     });
 
     it('emits an ANNOTATIONS_SYNCED event', function () {
-      const onSync = sinon.stub();
-      $rootScope.$on(events.ANNOTATIONS_SYNCED, onSync);
-
       fakeBridge.emit('sync', [{ tag: 't1', msg: { $orphan: false } }]);
       expireDebounceTimeout();
-
-      assert.calledWithMatch(onSync, sinon.match.any, sinon.match(['t1']));
+      assert.calledWith($rootScope.$broadcast, events.ANNOTATIONS_SYNCED, [
+        't1',
+      ]);
     });
   });
 
@@ -384,12 +377,8 @@ describe('sidebar.frame-sync', function () {
 
   describe('on "sidebarOpened" message', function () {
     it('broadcasts a sidebarOpened event', function () {
-      const onSidebarOpened = sinon.stub();
-      $rootScope.$on('sidebarOpened', onSidebarOpened);
-
       fakeBridge.emit('sidebarOpened');
-
-      assert.called(onSidebarOpened);
+      assert.calledWith($rootScope.$broadcast, 'sidebarOpened');
     });
   });
 

src/sidebar/services/test/local-storage-test.js

-import angular from 'angular';
-
 import service from '../local-storage';
 
 function windowWithLocalStoragePropertyThatThrows() {
@@ -27,8 +25,6 @@ function windowWithLocalStorageMethodsThatThrow() {
 describe('sidebar.localStorage', () => {
   let fakeWindow;
 
-  before(() => angular.module('h', []).service('localStorage', service));
-
   [
     windowWithLocalStorageMethodsThatThrow(),
     windowWithLocalStoragePropertyThatThrows(),
@@ -38,18 +34,10 @@ describe('sidebar.localStorage', () => {
       let key = null;
 
       beforeEach(() => {
-        angular.mock.module('h', {
-          $window,
-        });
+        localStorage = service($window);
+        key = 'test.memory.key';
       });
 
-      beforeEach(
-        angular.mock.inject(_localStorage_ => {
-          localStorage = _localStorage_;
-          key = 'test.memory.key';
-        })
-      );
-
       it('sets/gets Item', () => {
         const value = 'What shall we do with a drunken sailor?';
         localStorage.setItem(key, value);
@@ -87,14 +75,10 @@ describe('sidebar.localStorage', () => {
           removeItem: sinon.stub(),
         },
       };
-
-      angular.mock.module('h', {
-        $window: fakeWindow,
-      });
     });
 
     beforeEach(() => {
-      angular.mock.inject(_localStorage_ => (localStorage = _localStorage_));
+      localStorage = service(fakeWindow);
     });
 
     it('uses window.localStorage functions to handle data', () => {

src/sidebar/services/test/oauth-auth-test.js

-import angular from 'angular';
-
 import events from '../../events';
+import { Injector } from '../../../shared/injector';
 import FakeWindow from '../../util/test/fake-window';
 import authFactory, { $imports } from '../oauth-auth';
 
@@ -35,10 +34,6 @@ describe('sidebar.oauth-auth', function () {
     return auth.login();
   }
 
-  before(() => {
-    angular.module('app', []).service('auth', authFactory);
-  });
-
   beforeEach(function () {
     // Setup fake clock. This has to be done before setting up the `window`
     // fake which makes use of timers.
@@ -93,22 +88,21 @@ describe('sidebar.oauth-auth', function () {
 
     fakeWindow = new FakeWindow();
 
-    angular.mock.module('app', {
-      $window: fakeWindow,
-      apiRoutes: fakeApiRoutes,
-      flash: fakeFlash,
-      localStorage: fakeLocalStorage,
-      settings: fakeSettings,
-    });
-
-    angular.mock.inject((_auth_, _$rootScope_) => {
-      auth = _auth_;
-      $rootScope = _$rootScope_;
-    });
-
     $imports.$mock({
       '../util/oauth-client': FakeOAuthClient,
     });
+
+    $rootScope = { $broadcast: sinon.stub() };
+
+    auth = new Injector()
+      .register('$rootScope', { value: $rootScope })
+      .register('$window', { value: fakeWindow })
+      .register('apiRoutes', { value: fakeApiRoutes })
+      .register('flash', { value: fakeFlash })
+      .register('localStorage', { value: fakeLocalStorage })
+      .register('settings', { value: fakeSettings })
+      .register('auth', authFactory)
+      .get('auth');
   });
 
   afterEach(function () {
@@ -519,12 +513,9 @@ describe('sidebar.oauth-auth', function () {
     });
 
     it('notifies other services about the change', () => {
-      const onTokenChange = sinon.stub();
-      $rootScope.$on(events.OAUTH_TOKENS_CHANGED, onTokenChange);
-
       notifyStoredTokenChange();
 
-      assert.called(onTokenChange);
+      assert.calledWith($rootScope.$broadcast, events.OAUTH_TOKENS_CHANGED);
     });
   });
 

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

-import angular from 'angular';
+import EventEmitter from 'tiny-emitter';
 
 import events from '../../events';
+import { Injector } from '../../../shared/injector';
 import * as annotationFixtures from '../../test/annotation-fixtures';
 import uiConstants from '../../ui-constants';
 import rootThreadFactory from '../root-thread';
@@ -88,21 +89,21 @@ describe('rootThread', function () {
       filter: sinon.stub(),
     };
 
-    angular
-      .module('app', [])
-      .value('annotationsService', fakeAnnotationsService)
-      .value('store', fakeStore)
-      .value('searchFilter', fakeSearchFilter)
-      .value('settings', fakeSettings)
-      .value('viewFilter', fakeViewFilter)
-      .service('rootThread', rootThreadFactory);
-
-    angular.mock.module('app');
+    const emitter = new EventEmitter();
+    $rootScope = {
+      $on: (event, cb) => emitter.on(event, data => cb(null, data)),
+      $broadcast: (event, data) => emitter.emit(event, data),
+    };
 
-    angular.mock.inject(function (_$rootScope_, _rootThread_) {
-      $rootScope = _$rootScope_;
-      rootThread = _rootThread_;
-    });
+    rootThread = new Injector()
+      .register('$rootScope', { value: $rootScope })
+      .register('annotationsService', { value: fakeAnnotationsService })
+      .register('store', { value: fakeStore })
+      .register('searchFilter', { value: fakeSearchFilter })
+      .register('settings', { value: fakeSettings })
+      .register('viewFilter', { value: fakeViewFilter })
+      .register('rootThread', rootThreadFactory)
+      .get('rootThread');
   });
 
   beforeEach(() => {

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

-import angular from 'angular';
+import EventEmitter from 'tiny-emitter';
 
 import events from '../../events';
 import { events as analyticsEvents } from '../analytics';
 import sessionFactory from '../session';
 import { $imports } from '../session';
+import { Injector } from '../../../shared/injector';
 
-const mock = angular.mock;
-
-describe('sidebar.session', function () {
+describe('sidebar/services/session', function () {
   let $rootScope;
 
   let fakeAnalytics;
@@ -22,10 +21,6 @@ describe('sidebar.session', function () {
   // The instance of the `session` service.
   let session;
 
-  before(function () {
-    angular.module('h', []).service('session', sessionFactory);
-  });
-
   beforeEach(function () {
     sandbox = sinon.createSandbox();
 
@@ -60,27 +55,28 @@ describe('sidebar.session', function () {
       serviceUrl: 'https://test.hypothes.is/root/',
     };
 
-    mock.module('h', {
-      analytics: fakeAnalytics,
-      store: fakeStore,
-      api: fakeApi,
-      auth: fakeAuth,
-      flash: fakeFlash,
-      settings: fakeSettings,
-    });
-
     $imports.$mock({
       '../service-config': fakeServiceConfig,
       '../util/sentry': fakeSentry,
     });
-  });
 
-  beforeEach(
-    mock.inject(function (_$rootScope_, _session_) {
-      session = _session_;
-      $rootScope = _$rootScope_;
-    })
-  );
+    const emitter = new EventEmitter();
+    $rootScope = {
+      $on: (event, cb) => emitter.on(event, data => cb(null, data)),
+      $broadcast: (event, data) => emitter.emit(event, data),
+    };
+
+    session = new Injector()
+      .register('$rootScope', { value: $rootScope })
+      .register('analytics', { value: fakeAnalytics })
+      .register('store', { value: fakeStore })
+      .register('api', { value: fakeApi })
+      .register('auth', { value: fakeAuth })
+      .register('flash', { value: fakeFlash })
+      .register('settings', { value: fakeSettings })
+      .register('session', sessionFactory)
+      .get('session');
+  });
 
   afterEach(function () {
     $imports.$restore();

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

-import angular from 'angular';
-
 import tagsFactory from '../tags';
 
 const TAGS_LIST_KEY = 'hypothesis.user.tags.list';
@@ -23,10 +21,6 @@ describe('sidebar.tags', () => {
   let fakeLocalStorage;
   let tags;
 
-  before(() => {
-    angular.module('h', []).service('tags', tagsFactory);
-  });
-
   beforeEach(() => {
     fakeLocalStorage = new FakeStorage();
 
@@ -58,12 +52,7 @@ describe('sidebar.tags', () => {
     fakeLocalStorage.setObject(TAGS_MAP_KEY, savedTagsMap);
     fakeLocalStorage.setObject(TAGS_LIST_KEY, savedTagsList);
 
-    angular.mock.module('h', {
-      localStorage: fakeLocalStorage,
-    });
-    angular.mock.inject(_tags_ => {
-      tags = _tags_;
-    });
+    tags = tagsFactory(fakeLocalStorage);
   });
 
   describe('#filter', () => {