Add some basic tests for the toolbar

These don't cover all of the functionality but they do at least cover
the main buttons.

A small change to `toolbar.coffee` was needed so that the button states
are updated correctly when the toolbar is not added to `document.body`.

src/annotator/plugin/test/toolbar-test.js

+'use strict';
+
+const $ = require('jquery');
+
+const Toolbar = require('../toolbar');
+
+describe('Toolbar', () => {
+  let container;
+
+  /**
+   * Fake implementation of the `annotator` property of the toolbar instance.
+   */
+  let fakeAnnotator;
+  let currentToolbar;
+
+  function createToolbar() {
+    const toolbar = new Toolbar(container);
+    toolbar.annotator = fakeAnnotator;
+    toolbar.pluginInit();
+
+    currentToolbar = toolbar;
+
+    return toolbar;
+  }
+
+  function findButton(toolbar, title) {
+    return toolbar.element[0].querySelector(`[title="${title}"]`);
+  }
+
+  function isPressed(button) {
+    return button.getAttribute('aria-pressed') === 'true';
+  }
+
+  beforeEach(() => {
+    // The toolbar currently relies on a bunch of not-obviously public
+    // properties of the `Sidebar` instance, including the DOM structure :(
+    fakeAnnotator = {
+      createAnnotation: sinon.stub(),
+      frame: $('<div class="annotator-collapsed"></div>'),
+      hide: sinon.stub(),
+      options: {
+        showHighlights: 'always',
+        openSidebar: false,
+      },
+      setAllVisibleHighlights: sinon.stub(),
+      show: sinon.stub(),
+      visibleHighlights: true,
+    };
+
+    fakeAnnotator.show.callsFake(() =>
+      fakeAnnotator.frame.removeClass('annotator-collapsed')
+    );
+    fakeAnnotator.hide.callsFake(() =>
+      fakeAnnotator.frame.addClass('annotator-collapsed')
+    );
+    fakeAnnotator.setAllVisibleHighlights.callsFake(state => {
+      fakeAnnotator.visibleHighlights = state;
+      currentToolbar.publish('setVisibleHighlights', state);
+    });
+
+    container = document.createElement('div');
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it('shows button for opening and closing sidebar', () => {
+    const toolbar = createToolbar();
+    const button = findButton(toolbar, 'Toggle or Resize Sidebar');
+    assert.ok(button, 'open/close toggle button not found');
+    assert.isFalse(isPressed(button));
+
+    button.click();
+    assert.called(fakeAnnotator.show);
+    assert.isTrue(isPressed(button));
+
+    button.click();
+    assert.called(fakeAnnotator.hide);
+    assert.isFalse(isPressed(button));
+  });
+
+  // nb. The "Close Sidebar" button is only shown when using the "Clean" theme.
+  it('shows button for closing the sidebar', () => {
+    const toolbar = createToolbar();
+    const button = findButton(toolbar, 'Close Sidebar');
+
+    button.click();
+    assert.called(fakeAnnotator.hide);
+  });
+
+  it('shows open/close toggle button as pressed if sidebar is open on startup', () => {
+    fakeAnnotator.options.openSidebar = true;
+    const toolbar = createToolbar();
+    const button = findButton(toolbar, 'Toggle or Resize Sidebar');
+    assert.isTrue(isPressed(button));
+  });
+
+  it('shows button for toggling highlight visibility', () => {
+    const toolbar = createToolbar();
+    const button = findButton(toolbar, 'Toggle Highlights Visibility');
+    assert.ok(button, 'highlight visibility toggle button not found');
+    assert.isTrue(isPressed(button));
+
+    button.click();
+    assert.calledWith(fakeAnnotator.setAllVisibleHighlights, false);
+    assert.isFalse(isPressed(button));
+
+    button.click();
+    assert.calledWith(fakeAnnotator.setAllVisibleHighlights, true);
+    assert.isTrue(isPressed(button));
+  });
+
+  it('shows highlight button as un-pressed if highlights are hidden on startup', () => {
+    fakeAnnotator.options.showHighlights = 'never';
+    const toolbar = createToolbar();
+    const button = findButton(toolbar, 'Toggle Highlights Visibility');
+    assert.isFalse(isPressed(button));
+  });
+
+  it('shows button for creating new page notes', () => {
+    const toolbar = createToolbar();
+    const button = findButton(toolbar, 'New Page Note');
+    assert.ok(button, 'page note button not found');
+
+    button.click();
+
+    assert.called(fakeAnnotator.createAnnotation);
+    assert.called(fakeAnnotator.show);
+  });
+});

src/annotator/plugin/toolbar.coffee

 Plugin = require('../plugin')
 $ = require('jquery')
-configFrom = require('../config/index')
 
 
 makeButton = (item) ->
@@ -30,9 +29,12 @@ module.exports = class Toolbar extends Plugin
     else
       $(@element).append @toolbar
 
-    config = configFrom(window);
-    # config.showHighlights will be either 'always' or 'never'
-    highlightsAreVisible = if config.showHighlights == 'never' then false else true
+    # Get the parsed configuration to determine the initial state of the buttons.
+    # nb. This duplicates state that lives elsewhere. To avoid it getting out
+    # of sync, it would be better if that initial state were passed in.
+    config = @annotator.options
+    highlightsAreVisible = config.showHighlights == 'always'
+    isSidebarOpen = config.openSidebar
 
     items = [
       "title": "Close Sidebar"
@@ -46,7 +48,7 @@ module.exports = class Toolbar extends Plugin
           @toolbar.find('[name=sidebar-close]').hide();
     ,
       "title": "Toggle or Resize Sidebar"
-      "ariaPressed": config.openSidebar
+      "ariaPressed": isSidebarOpen
       "class": "annotator-frame-button--sidebar_toggle h-icon-chevron-left"
       "name": "sidebar-toggle"
       "on":
@@ -95,12 +97,12 @@ module.exports = class Toolbar extends Plugin
 
   onSetVisibleHighlights: (state) ->
     if state
-      $('[name=highlight-visibility]')
+      @element.find('[name=highlight-visibility]')
       .removeClass('h-icon-visibility-off')
       .addClass('h-icon-visibility')
       .attr('aria-pressed', 'true')
     else
-      $('[name=highlight-visibility]')
+      @element.find('[name=highlight-visibility]')
       .removeClass('h-icon-visibility')
       .addClass('h-icon-visibility-off')
       .attr('aria-pressed', 'false')