Merge pull request #1155 from hypothesis/move-force-visible

Move onForceVisible to annotation-thread

src/sidebar/components/annotation-thread.js

@@ -21,21 +21,21 @@ function visibleCount(thread) {
 }
 
 function showAllChildren(thread, showFn) {
-  thread.children.forEach(function(child) {
-    showFn({ thread: child });
+  thread.children.forEach(child => {
+    showFn(child);
     showAllChildren(child, showFn);
   });
 }
 
 function showAllParents(thread, showFn) {
   while (thread.parent && thread.parent.annotation) {
-    showFn({ thread: thread.parent });
+    showFn(thread.parent);
     thread = thread.parent;
   }
 }
 
 // @ngInject
-function AnnotationThreadController() {
+function AnnotationThreadController(store) {
   // Flag that tracks whether the content of the annotation is hovered,
   // excluding any replies.
   this.annotationHovered = false;
@@ -78,7 +78,7 @@ function AnnotationThreadController() {
    */
   this.showThreadAndReplies = function() {
     showAllParents(this.thread, this.onForceVisible);
-    this.onForceVisible({ thread: this.thread });
+    this.onForceVisible(this.thread);
     showAllChildren(this.thread, this.onForceVisible);
   };
 
@@ -98,6 +98,13 @@ function AnnotationThreadController() {
   this.shouldShowReply = function(child) {
     return visibleCount(child) > 0;
   };
+
+  this.onForceVisible = function(thread) {
+    store.setForceVisible(thread.id, true);
+    if (thread.parent) {
+      store.setCollapsed(thread.parent.id, false);
+    }
+  };
 }
 
 /**
@@ -116,11 +123,6 @@ module.exports = {
     showDocumentInfo: '<',
     /** Called when the user clicks on the expand/collapse replies toggle. */
     onChangeCollapsed: '&',
-    /**
-     * Called when the user clicks the button to show this thread or
-     * one of its replies.
-     */
-    onForceVisible: '&',
   },
   template: require('../templates/annotation-thread.html'),
 };

src/sidebar/components/sidebar-content.js

@@ -276,13 +276,6 @@ function SidebarContentController(
     store.setCollapsed(id, collapsed);
   };
 
-  this.forceVisible = function(thread) {
-    store.setForceVisible(thread.id, true);
-    if (thread.parent) {
-      store.setCollapsed(thread.parent.id, false);
-    }
-  };
-
   this.focus = focusAnnotation;
   this.scrollTo = scrollToAnnotation;
 

src/sidebar/components/stream-content.js

@@ -59,9 +59,6 @@ function StreamContentController(
   fetch(20);
 
   this.setCollapsed = store.setCollapsed;
-  this.forceVisible = function(id) {
-    store.setForceVisible(id, true);
-  };
 
   store.subscribe(function() {
     self.rootThread = rootThread.thread(store.getState());

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

@@ -36,8 +36,16 @@ describe('annotationThread', function() {
       });
   });
 
+  let fakeStore;
+
   beforeEach(function() {
-    angular.mock.module('app');
+    fakeStore = {
+      setForceVisible: sinon.stub(),
+      setCollapsed: sinon.stub(),
+      getState: sinon.stub(),
+    };
+
+    angular.mock.module('app', { store: fakeStore });
   });
 
   it('renders the tree structure of parent and child annotations', function() {
@@ -75,6 +83,33 @@ describe('annotationThread', function() {
     assert.isTrue(pageObject.isHidden(pageObject.annotations()[0]));
   });
 
+  describe('onForceVisible', () => {
+    it('shows the thread', () => {
+      const thread = {
+        id: '1',
+        children: [],
+      };
+      const element = util.createDirective(document, 'annotationThread', {
+        thread: thread,
+      });
+      element.ctrl.onForceVisible(thread);
+      assert.calledWith(fakeStore.setForceVisible, thread.id, true);
+    });
+
+    it('uncollapses the parent', () => {
+      const thread = {
+        id: '2',
+        children: [],
+        parent: { id: '3' },
+      };
+      const element = util.createDirective(document, 'annotationThread', {
+        thread: thread,
+      });
+      element.ctrl.onForceVisible(thread);
+      assert.calledWith(fakeStore.setCollapsed, thread.parent.id, false);
+    });
+  });
+
   it('shows replies if not collapsed', function() {
     const element = util.createDirective(document, 'annotationThread', {
       thread: {
@@ -166,7 +201,6 @@ describe('annotationThread', function() {
 
   describe('#showThreadAndReplies', function() {
     it('reveals all parents and replies', function() {
-      const onForceVisible = sinon.stub();
       const thread = {
         id: '123',
         annotation: { id: '123' },
@@ -184,15 +218,12 @@ describe('annotationThread', function() {
       };
       const element = util.createDirective(document, 'annotationThread', {
         thread: thread,
-        onForceVisible: {
-          args: ['thread'],
-          callback: onForceVisible,
-        },
       });
       element.ctrl.showThreadAndReplies();
-      assert.calledWith(onForceVisible, thread.parent);
-      assert.calledWith(onForceVisible, thread);
-      assert.calledWith(onForceVisible, thread.children[0]);
+      assert.calledWith(fakeStore.setForceVisible, thread.parent.id, true);
+      assert.calledWith(fakeStore.setForceVisible, thread.id, true);
+      assert.calledWith(fakeStore.setForceVisible, thread.children[0].id, true);
+      assert.calledWith(fakeStore.setCollapsed, thread.parent.id, false);
     });
   });
 

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

@@ -717,24 +717,6 @@ describe('sidebar.components.sidebar-content', function() {
     });
   });
 
-  describe('#forceVisible', function() {
-    it('shows the thread', function() {
-      const thread = { id: '1' };
-      ctrl.forceVisible(thread);
-      assert.deepEqual(store.getState().forceVisible, { 1: true });
-    });
-
-    it('uncollapses the parent', function() {
-      const thread = {
-        id: '2',
-        parent: { id: '3' },
-      };
-      assert.equal(store.getState().expanded[thread.parent.id], undefined);
-      ctrl.forceVisible(thread);
-      assert.equal(store.getState().expanded[thread.parent.id], true);
-    });
-  });
-
   describe('#visibleCount', function() {
     it('returns the total number of visible annotations or replies', function() {
       fakeRootThread.thread.returns({

src/sidebar/components/thread-list.js

@@ -185,11 +185,6 @@ module.exports = {
     thread: '<',
     showDocumentInfo: '<',
 
-    /**
-     * Called when the user clicks a link to show an annotation that does not
-     * match the current filter.
-     */
-    onForceVisible: '&',
     /** Called when the user focuses an annotation by hovering it. */
     onFocus: '&',
     /** Called when a user selects an annotation. */

src/sidebar/templates/annotation-thread.html

@@ -50,7 +50,7 @@
           show-document-info="false"
           thread="child"
           on-change-collapsed="vm.onChangeCollapsed({id:id, collapsed:collapsed})"
-          on-force-visible="vm.onForceVisible({thread:thread})">
+          on-force-visible="vm.onForceVisible(thread)">
         </annotation-thread>
       </li>
     </ul>

src/sidebar/templates/sidebar-content.html

@@ -47,7 +47,6 @@
   on-change-collapsed="vm.setCollapsed(id, collapsed)"
   on-clear-selection="vm.clearSelection()"
   on-focus="vm.focus(annotation)"
-  on-force-visible="vm.forceVisible(thread)"
   on-select="vm.scrollTo(annotation)"
   show-document-info="false"
   ng-if="!vm.selectedGroupUnavailable()"

src/sidebar/templates/stream-content.html

 <span window-scroll="vm.loadMore(20)">
   <thread-list
     on-change-collapsed="vm.setCollapsed(id, collapsed)"
-    on-force-visible="vm.forceVisible(thread)"
     show-document-info="true"
     thread="vm.rootThread">
   </thread-list>

src/sidebar/templates/thread-list.html

@@ -11,8 +11,7 @@
         <annotation-thread
           thread="child"
           show-document-info="vm.showDocumentInfo"
-          on-change-collapsed="vm.onChangeCollapsed({id: id, collapsed: collapsed})"
-          on-force-visible="vm.onForceVisible({thread: thread})">
+          on-change-collapsed="vm.onChangeCollapsed({id: id, collapsed: collapsed})">
         </annotation-thread>
     </div>
     <hr ng-if="vm.isThemeClean"