Add initial tests for 'Post to <Group>|Only Me' button

Card 89

h/static/scripts/directive/test/publish-annotation-btn-test.js

+'use strict';
+
+var util = require('./util');
+
+var fakeStorage = {};
+var fakeLocalStorage = {
+  setItem: function (key, value) {
+    fakeStorage[key] = value;
+  },
+  getItem: function (key) {
+    return fakeStorage[key];
+  }
+};
+
+describe('publishAnnotationBtn', function () {
+  before(function () {
+    angular.module('app', [])
+      .directive('dropdownMenuBtn', require('../dropdown-menu-btn'))
+      .directive('publishAnnotationBtn', require('../publish-annotation-btn'))
+      .factory('localStorage', function () {
+        return fakeLocalStorage;
+      });
+  });
+
+  beforeEach(function () {
+    angular.mock.module('app');
+    angular.mock.module('h.templates');
+  });
+
+  it('should display "Post to Only Me"', function () {
+    var saveCount = 0;
+    var element = util.createDirective(document, 'publishAnnotationBtn', {
+      group: {
+        name: 'Public',
+        type: 'public'
+      },
+      isShared: false,
+      isNew: false,
+      onSave: function () {},
+      onSetPrivacy: function (level) {}
+    });
+    var buttons = element.find('button');
+    assert.equal(buttons.length, 2);
+    assert.equal(buttons[0].innerHTML, 'Post to Only Me');
+  });
+
+  it('should display "Post to Research Lab"', function () {
+    var element = util.createDirective(document, 'publishAnnotationBtn', {
+      group: {
+        name: 'Research Lab',
+        type: 'group'
+      },
+      isShared: true,
+      isNew: false,
+      onSave: function () {},
+      onSetPrivacy: function (level) {}
+    });
+    var buttons = element.find('button');
+    assert.equal(buttons[0].innerHTML, 'Post to Research Lab');
+  });
+
+  it('should default to "shared" as the privacy level for new annotations', function () {
+    fakeStorage = {};
+    var element = util.createDirective(document, 'publishAnnotationBtn', {
+      group: {
+        name: 'Research Lab',
+        type: 'group'
+      },
+      isShared: true,
+      isNew: true,
+      onSave: function () {},
+      onSetPrivacy: function (level) {}
+    });
+    assert.deepEqual(fakeStorage, {
+      'hypothesis.privacy': 'shared'
+    });
+  });
+
+  it('should save when "Post..." is clicked', function () {
+    var savedSpy = sinon.spy();
+    var element = util.createDirective(document, 'publishAnnotationBtn', {
+      group: {
+        name: 'Research Lab',
+        type: 'group'
+      },
+      isShared: true,
+      isNew: true,
+      onSave: savedSpy,
+      onSetPrivacy: function (level) {}
+    });
+    assert.ok(!savedSpy.called);
+    angular.element(element.find('button')[0]).click();
+    assert.ok(savedSpy.calledOnce);
+  });
+
+  it('should change privacy when privacy option selected', function () {
+    var privacyChangedSpy = sinon.spy();
+    var element = util.createDirective(document, 'publishAnnotationBtn', {
+      group: {
+        name: 'Research Lab',
+        type: 'group'
+      },
+      isShared: true,
+      // for existing annotations, the privacy should not be changed
+      // unless the user makes a choice from the list
+      isNew: false,
+      onSave: function () {},
+      onSetPrivacy: privacyChangedSpy
+    });
+    assert.ok(!privacyChangedSpy.called);
+    var privateOption = element.find('li')[1];
+    var sharedOption = element.find('li')[0];
+    angular.element(privateOption).click();
+    assert.equal(privacyChangedSpy.callCount, 1);
+    angular.element(sharedOption).click();
+    assert.equal(privacyChangedSpy.callCount, 2);
+  });
+
+});

h/static/scripts/directive/test/util.js

+'use strict';
+
+// converts a camelCase name into hyphenated ('camel-case') form,
+// as Angular does when mapping directive names to tag names in HTML
+function hyphenate(name) {
+  var uppercasePattern = /([A-Z])/g;
+  return name.replace(uppercasePattern, '-$1').toLowerCase();
+}
+
+/**
+ * A helper for instantiating an AngularJS directive in a unit test.
+ *
+ * Usage:
+ *   var domElement = createDirective('myComponent', {
+ *     attrA: 'initial-value'
+ *   }, {
+ *     scopePropery: scopeValue
+ *   });
+ *
+ * Will generate '<my-component attr-a="attrA"></my-component>' and
+ * compile and link it with the scope:
+ *
+ *  { attrA: 'initial-value', scopeProperty: scopeValue }
+ *
+ * Attribute values are converted to scope properties of the same
+ * name as the attribute and t
+ *
+ * @param {Document} document - The DOM Document to create the element in
+ * @param {string} name - The name of the directive to instantiate
+ * @param {Object} attrs - A map of attribute names (in camelCase) to initial values.
+ * @param {Object} initialScope - A dictionary of properties to set on the
+ *                                scope when the element is linked
+ *
+ * @return {DOMElement} The Angular jqLite-wrapped DOM element for the component.
+ */
+function createDirective(document, name, attrs, initialScope) {
+  attrs = attrs || {};
+  initialScope = initialScope || {};
+
+  // create a template consisting of a single element, the directive
+  // we want to create and compile it
+  var $compile;
+  var $scope;
+  angular.mock.inject(function (_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    $scope = _$rootScope_.$new();
+  })
+  var templateElement = document.createElement(hyphenate(name));
+  Object.keys(attrs).forEach(function (key) {
+    var attrName = hyphenate(key);
+    var attrKey = key;
+    if (typeof attrs[key] === 'function') {
+      attrKey += '()';
+    }
+    templateElement.setAttribute(attrName, attrKey);
+  });
+
+  // setup initial scope
+  Object.keys(initialScope).forEach(function (key) {
+    $scope[key] = initialScope[key];
+  });
+  Object.keys(attrs).forEach(function (key) {
+    $scope[key] = attrs[key];
+  });
+
+  // instantiate component
+  var element = $compile(templateElement)($scope);
+  element.scope = $scope;
+  $scope.$digest();
+  return element;
+}
+
+module.exports = {
+  createDirective: createDirective
+};