Merge pull request #1256 from hypothesis/react-new-note-btn-conversion

Convert new-note-btn to preact

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

 'use strict';
 
+const { createElement } = require('preact');
+const propTypes = require('prop-types');
+
 const events = require('../events');
+const useStore = require('../store/use-store');
+const { applyTheme } = require('../util/theme');
+const { withServices } = require('../util/service-context');
 
-module.exports = {
-  controllerAs: 'vm',
-  //@ngInject
-  controller: function($rootScope, store) {
-    this.onNewNoteBtnClick = function() {
-      const topLevelFrame = store.frames().find(f => !f.id);
-      const annot = {
-        target: [],
-        uri: topLevelFrame.uri,
-      };
+function NewNoteButton({ $rootScope, settings }) {
+  const store = useStore(store => ({
+    frames: store.frames(),
+  }));
 
-      $rootScope.$broadcast(events.BEFORE_ANNOTATION_CREATED, annot);
+  const onNewNoteBtnClick = function() {
+    const topLevelFrame = store.frames.find(f => !f.id);
+    const annot = {
+      target: [],
+      uri: topLevelFrame.uri,
     };
-  },
-  bindings: {},
-  template: require('../templates/new-note-btn.html'),
+    $rootScope.$broadcast(events.BEFORE_ANNOTATION_CREATED, annot);
+  };
+
+  return (
+    <button
+      style={applyTheme(['ctaBackgroundColor'], settings)}
+      className="new-note__create"
+      onClick={onNewNoteBtnClick}
+    >
+      + New note
+    </button>
+  );
+}
+NewNoteButton.propTypes = {
+  // Injected services.
+  $rootScope: propTypes.object.isRequired,
+  settings: propTypes.object.isRequired,
 };
+
+NewNoteButton.injectedProps = ['$rootScope', 'settings'];
+
+module.exports = withServices(NewNoteButton);

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

 'use strict';
 
-const angular = require('angular');
+const { shallow } = require('enzyme');
+const { createElement } = require('preact');
 
 const events = require('../../events');
-const util = require('../../directive/test/util');
+const NewNoteButton = require('../new-note-btn');
 
-describe('newNoteBtn', function() {
-  let $rootScope;
-  const sandbox = sinon.sandbox.create();
-  const fakeStore = {
-    frames: sinon
-      .stub()
-      .returns([
-        { id: null, uri: 'www.example.org' },
-        { id: '1', uri: 'www.example.org' },
-      ]),
-  };
+describe('NewNoteButton', function() {
+  let fakeStore;
+  let fakeSettings;
+  let fakeRootScope;
 
-  before(function() {
-    angular
-      .module('app', [])
-      .component('selectionTabs', require('../selection-tabs'))
-      .component('newNoteBtn', require('../new-note-btn'));
-  });
+  function createComponent() {
+    return shallow(
+      <NewNoteButton
+        $rootScope={fakeRootScope}
+        settings={fakeSettings}
+        store={fakeStore}
+      />
+    ).dive(); // dive() needed because this component uses `withServices`
+  }
 
   beforeEach(function() {
-    const fakeFeatures = {
-      flagEnabled: sinon.stub().returns(true),
+    fakeRootScope = {
+      $broadcast: sinon.stub(),
     };
-    const fakeSettings = { theme: 'clean' };
-
-    angular.mock.module('app', {
-      store: fakeStore,
-      features: fakeFeatures,
-      settings: fakeSettings,
+    fakeSettings = {
+      branding: {
+        ctaBackgroundColor: '#00f',
+      },
+    };
+    fakeStore = {
+      createAnnotation: sinon.stub(),
+      frames: sinon
+        .stub()
+        .returns([
+          { id: null, uri: 'www.example.org' },
+          { id: '1', uri: 'www.example.org' },
+        ]),
+    };
+    NewNoteButton.$imports.$mock({
+      '../store/use-store': callback => callback(fakeStore),
     });
+  });
 
-    angular.mock.inject(function(_$componentController_, _$rootScope_) {
-      $rootScope = _$rootScope_;
-    });
+  afterEach(() => {
+    NewNoteButton.$imports.$restore();
   });
 
-  afterEach(function() {
-    sandbox.restore();
+  it('creates the component', () => {
+    const wrapper = createComponent();
+    assert.include(wrapper.text(), 'New note');
   });
 
-  it('should broadcast BEFORE_ANNOTATION_CREATED event when the new note button is clicked', function() {
-    const annot = {
-      target: [],
-      uri: 'www.example.org',
-    };
-    const elem = util.createDirective(document, 'newNoteBtn', {
-      store: fakeStore,
-    });
-    sandbox.spy($rootScope, '$broadcast');
-    elem.ctrl.onNewNoteBtnClick();
+  it("has a backgroundColor equal to the setting's ctaBackgroundColor color", () => {
+    const wrapper = createComponent();
+    assert.equal(
+      wrapper.prop('style').backgroundColor,
+      fakeSettings.branding.ctaBackgroundColor
+    );
+  });
+
+  it('should broadcast BEFORE_ANNOTATION_CREATED event when the new note button is clicked', () => {
+    const wrapper = createComponent();
+    wrapper.find('button').simulate('click');
+    const topLevelFrame = fakeStore.frames().find(f => !f.id);
     assert.calledWith(
-      $rootScope.$broadcast,
+      fakeRootScope.$broadcast,
       events.BEFORE_ANNOTATION_CREATED,
-      annot
+      {
+        target: [],
+        uri: topLevelFrame.uri,
+      }
     );
   });
 });

src/sidebar/index.js

@@ -180,11 +180,14 @@ function startAngularApp(config) {
       'moderationBanner',
       wrapReactComponent(require('./components/moderation-banner'))
     )
-    .component('newNoteBtn', require('./components/new-note-btn'))
     .component(
       'searchStatusBar',
       wrapReactComponent(require('./components/search-status-bar'))
     )
+    .component(
+      'newNoteBtn',
+      wrapReactComponent(require('./components/new-note-btn'))
+    )
     .component('selectionTabs', require('./components/selection-tabs'))
     .component('sidebarContent', require('./components/sidebar-content'))
     .component(