Merge pull request #374 from hypothesis/improve-error-when-flagging-when-logged-out

Improve error when flagging when logged out

src/sidebar/components/annotation.js

@@ -182,6 +182,14 @@ function AnnotationController(
     * @description Flag the annotation.
     */
   this.flag = function() {
+    if (!session.state.userid) {
+      flash.error(
+        'You must be logged in to report an annotation to the moderators.',
+        'Login to flag annotations'
+      );
+      return;
+    }
+
     var onRejected = function(err) {
       flash.error(err.message, 'Flagging annotation failed');
     };

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

@@ -730,37 +730,58 @@ describe('annotation', function() {
         fakeAnnotationMapper.flagAnnotation = sandbox.stub();
       });
 
-      it(
-        'calls annotationMapper.flag() when an annotation is flagged',
-        function(done) {
-          var parts = createDirective();
-          fakeAnnotationMapper.flagAnnotation.returns($q.resolve());
-          parts.controller.flag();
-          assert.calledWith(fakeAnnotationMapper.flagAnnotation,
-              parts.annotation);
-          done();
-        }
-      );
+      context('when the user is not logged in', function() {
+        beforeEach(function() {
+          delete fakeSession.state.userid;
+        });
 
-      it('flashes an error if the flag fails', function(done) {
-        var controller = createDirective().controller;
-        var err = new Error('500 Server error');
-        fakeAnnotationMapper.flagAnnotation.returns(Promise.reject(err));
-        controller.flag();
-        setTimeout(function () {
-          assert.calledWith(fakeFlash.error, '500 Server error', 'Flagging annotation failed');
-          done();
-        }, 0);
+        it('flashes an error', function() {
+          createDirective().controller.flag();
+
+          assert.isTrue(fakeFlash.error.calledOnce);
+          assert.equal('Login to flag annotations', fakeFlash.error.args[0][1]);
+        });
+
+        it('doesn\'t try to flag the annotation', function() {
+          createDirective().controller.flag();
+
+          assert.isFalse(fakeAnnotationMapper.flagAnnotation.called);
+        });
       });
 
-      it('doesn\'t flash an error if the flag succeeds', function(done) {
-        var controller = createDirective().controller;
-        fakeAnnotationMapper.flagAnnotation.returns($q.resolve());
-        controller.flag();
-        setTimeout(function () {
-          assert.notCalled(fakeFlash.error);
-          done();
-        }, 0);
+      context('when the user is logged in', function() {
+        it(
+          'calls annotationMapper.flag() when an annotation is flagged',
+          function(done) {
+            var parts = createDirective();
+            fakeAnnotationMapper.flagAnnotation.returns($q.resolve());
+            parts.controller.flag();
+            assert.calledWith(fakeAnnotationMapper.flagAnnotation,
+                parts.annotation);
+            done();
+          }
+        );
+
+        it('flashes an error if the flag fails', function(done) {
+          var controller = createDirective().controller;
+          var err = new Error('500 Server error');
+          fakeAnnotationMapper.flagAnnotation.returns(Promise.reject(err));
+          controller.flag();
+          setTimeout(function () {
+            assert.calledWith(fakeFlash.error, '500 Server error', 'Flagging annotation failed');
+            done();
+          }, 0);
+        });
+
+        it('doesn\'t flash an error if the flag succeeds', function(done) {
+          var controller = createDirective().controller;
+          fakeAnnotationMapper.flagAnnotation.returns($q.resolve());
+          controller.flag();
+          setTimeout(function () {
+            assert.notCalled(fakeFlash.error);
+            done();
+          }, 0);
+        });
       });
     });