Added tests to viewer/workspacePanel

js/src/viewer/workspacePanel.js

@@ -36,8 +36,7 @@
     listenForActions: function() {
       var _this = this;
       jQuery.subscribe('workspacePanelVisible.set', function(_, stateValue) {
-        if (stateValue) { _this.show(); return; }
-        _this.hide();
+        _this.onPanelVisible(_, stateValue);
       });
     },
 
@@ -46,42 +45,47 @@
 
       _this.element.find('.grid-item').on('click', function() {
         var gridString = jQuery(this).data('gridstring');
-        _this.onSelect(gridString);
+        _this.select(gridString);
       });
 
       _this.element.find('.grid-item').on('mouseover', function() {
         var gridString = jQuery(this).data('gridstring');
-        _this.onHover(gridString);
+        _this.hover(gridString);
       });
 
       _this.element.find('.select-grid').on('mouseout', function() {
-        _this.element.find('.grid-item').removeClass('hovered');
-        _this.element.find('.grid-instructions').show();
-        _this.element.find('.grid-text').hide();
+        _this.reset();
       });
     },
 
-    onSelect: function(gridString) {
+    select: function(gridString) {
       var _this = this;
       var layoutDescription = $.layoutDescriptionFromGridString(gridString);
       jQuery.publish('RESET_WORKSPACE_LAYOUT', {layoutDescription: layoutDescription});
       jQuery.publish('TOGGLE_WORKSPACE_PANEL');
     },
 
-    onHover: function(gridString) {
+    hover: function(gridString) {
       var _this = this,
       highestRow = gridString.charAt(0),
       highestColumn = gridString.charAt(2),
       gridItems = _this.element.find('.grid-item');
       gridItems.removeClass('hovered');
       gridItems.filter(function(index) {
-        var element = jQuery(this);
-        var change = element.data('gridstring').charAt(0) <= highestRow && element.data('gridstring').charAt(2)<=highestColumn;
+        var gridString = jQuery(this).data('gridstring');
+        var change = gridString.charAt(0) <= highestRow && gridString.charAt(2) <= highestColumn;
         return change;
       }).addClass('hovered');
       _this.element.find('.grid-instructions').hide();
       _this.element.find('.grid-text').text(gridString).show();
     },
+
+    reset: function() {
+      var _this = this;
+      _this.element.find('.grid-item').removeClass('hovered');
+      _this.element.find('.grid-instructions').show();
+      _this.element.find('.grid-text').hide();
+    },
 
     hide: function() {
       jQuery(this.element).hide({effect: "fade", duration: 160, easing: "easeOutCubic"});
@@ -91,6 +95,12 @@
       jQuery(this.element).show({effect: "fade", duration: 160, easing: "easeInCubic"});
     },
 
+    onPanelVisible: function(_, stateValue) {
+      var _this = this;
+      if (stateValue) { _this.show(); return; }
+      _this.hide();
+    },
+
     template: Handlebars.compile([
                                  '<div id="workspace-select-menu">',
                                  '<h1>{{t "changeLayout"}}</h1>',

spec/viewer/workspacePanel.test.js

@@ -23,31 +23,62 @@ describe('WorkspacePanel', function() {
     expect(this.viewerDiv.find('.select-grid .grid-item').length).toBe(gridSize);
   });
 
-  it('can detect when a layout is selected', function() {
+  it('should listen for actions', function() {
+    spyOn(this.panel, 'onPanelVisible');
+    jQuery.publish('workspacePanelVisible');
+    expect(this.panel.onPanelVisible).toHaveBeenCalled();
+  });
+
+  it('can detect layout selected', function() {
     var gridItem = this.viewerDiv.find('.grid-item').first();
     var gridString = gridItem.data('gridstring');
-    spyOn(this.panel, 'onSelect');
+    spyOn(this.panel, 'select');
     gridItem.trigger('click');
-    expect(this.panel.onSelect).toHaveBeenCalledWith(gridString);
+    expect(this.panel.select).toHaveBeenCalledWith(gridString);
   });
 
-  it('can detect when a layout is hovered', function() {
+  it('can detect layout hover', function() {
     var gridItem = this.viewerDiv.find('.grid-item').first();
     var gridString = gridItem.data('gridstring');
-    spyOn(this.panel, 'onHover');
+    spyOn(this.panel, 'hover');
     gridItem.trigger('mouseenter');
-    expect(this.panel.onHover).toHaveBeenCalledWith(gridString);
+    expect(this.panel.hover).toHaveBeenCalledWith(gridString);
+  });
+
+  it('can detect layout mouseout', function() {
+    var selectGrid = this.viewerDiv.find('.select-grid');
+    spyOn(this.panel, 'reset');
+    selectGrid.trigger('mouseout');
+    expect(this.panel.reset).toHaveBeenCalledWith();
   });
 
-  it('publishes events when a layout is selected', function() {
+  it('can reset itself', function() {
+    var el = this.panel.element;
+    this.panel.reset();
+    expect(el.find('.grid-text').css('display')).toBe('none');
+    expect(el.find('.grid-instructions').css('display')).not.toBe('none');
+    expect(el.find('.grid-item.hovered').length).toBe(0);
+  });
+
+  it('should display the grid selection when a layout is hovered', function() {
+    var rows = 2, cols = 2;
+    var gridString = rows+'x'+cols;
+    var el = this.panel.element;
+    this.panel.hover(gridString);
+    expect(el.find('.grid-instructions').css('display')).toBe('none');
+    expect(el.find('.grid-text').text()).toContain(gridString);
+    expect(el.find('.grid-item.hovered').length).toBe(rows*cols);
+  });
+
+  it('should publish events when a layout is selected', function() {
     var gridString = '2x2';
     var layoutDescription = Mirador.layoutDescriptionFromGridString(gridString);
     spyOn(jQuery, 'publish');
-    this.panel.onSelect(gridString);
+    this.panel.select(gridString);
     expect(jQuery.publish).toHaveBeenCalledWith('RESET_WORKSPACE_LAYOUT', {layoutDescription: layoutDescription});
     expect(jQuery.publish).toHaveBeenCalledWith('TOGGLE_WORKSPACE_PANEL');
   });
-  
+
   it('should render the grid', function() {
     var maxRows = workspacePanelSettings.maxRows;
     var maxColumns = workspacePanelSettings.maxColumns;
@@ -61,4 +92,28 @@ describe('WorkspacePanel', function() {
     expect(jQuery(gridItems[gridItems.length - 1]).data('gridstring')).toBe(maxGridString);
   });
 
+  it('should set panel visibility', function() {
+    spyOn(this.panel, 'show');
+    spyOn(this.panel, 'hide');
+
+    this.panel.onPanelVisible(null, true);
+    expect(this.panel.show).toHaveBeenCalled();
+    expect(this.panel.hide).not.toHaveBeenCalled();
+
+    this.panel.show.calls.reset();
+    this.panel.hide.calls.reset();
+
+    this.panel.onPanelVisible(null, false);
+    expect(this.panel.show).not.toHaveBeenCalled();
+    expect(this.panel.hide).toHaveBeenCalled();
+  });
+
+  ['hide', 'show'].forEach(function(action) {
+    it('should ' + action, function() {
+      spyOn(jQuery.fn, action);
+      this.panel[action]();
+      expect(jQuery.fn[action]).toHaveBeenCalled();
+    });
+  });
+
 });