toolbar_spec.js.coffee in mercury-rails-0.2.0

- old
+ new

@@ -1,12 +1,13 @@
-require '/assets/mercury/mercury.js'
+require '/assets/mercury.js'
 
 describe "Mercury.Toolbar", ->
 
   template 'mercury/toolbar.html'
 
   beforeEach ->
+    $.fx.off = true
     ajaxSpy = spyOn($, 'ajax').andCallFake (url, options) =>
       options.success('data') if options.success
 
   afterEach ->
     @toolbar = null
@@ -27,30 +28,22 @@
 
     it "calls bindEvents", ->
       expect(@bindEventsSpy.callCount).toEqual(1)
 
 
-  describe "#height", ->
-
-    beforeEach ->
-      spyOn(Mercury.Toolbar.prototype, 'buildButton').andCallFake(=> $('<div>'))
-      spyOn(Mercury.Toolbar.prototype, 'bindEvents').andCallFake(=>)
-      @toolbar = new Mercury.Toolbar({appendTo: '#test'})
-
-    it "knows it's own height", ->
-      expect(@toolbar.height()).toEqual(200) # styled with css in the template
-
-
   describe "#build", ->
 
     beforeEach ->
       @buildButtonSpy = spyOn(Mercury.Toolbar.prototype, 'buildButton').andCallFake(=> $('<div>'))
-      @toolbar = new Mercury.Toolbar({appendTo: '#toolbar_container'})
+      @toolbar = new Mercury.Toolbar({appendTo: '#toolbar_container', visible: false})
 
     it "builds an element", ->
       expect($('.mercury-toolbar-container').length).toEqual(1)
 
+    it "hides the element if options.visible is false", ->
+      expect($('.mercury-toolbar-container').css('display')).toEqual('none')
+
     it "can append to any element", ->
       expect($('#toolbar_container .mercury-toolbar-container').length).toEqual(1)
 
     it "builds out toolbar elements from the configuration", ->
       expect($('.mercury-primary-toolbar').length).toEqual(1)
@@ -130,23 +123,85 @@
 
         $('.mercury-editable-toolbar').addClass('disabled')
         Mercury.trigger('region:focused', {region: {type: 'markupable'}})
         expect($('.mercury.editable-toolbar').hasClass('disabled')).toEqual(false)
 
-
     describe "custom event: region:blurred", ->
 
       it "disables toolbars for the region type", ->
         $('.mercury-editable-toolbar').removeClass('disabled')
         Mercury.trigger('region:blurred', {region: {type: 'editable'}})
         expect($('.mercury-editable-toolbar').hasClass('disabled')).toEqual(true)
 
-
     describe "click", ->
 
       it "triggers hide:dialogs", ->
         spy = spyOn(Mercury, 'trigger')
 
         jasmine.simulate.click(@toolbar.element.get(0))
 
         expect(spy.callCount).toEqual(1)
         expect(spy.argsForCall[0]).toEqual(['hide:dialogs'])
+
+
+  describe "#height", ->
+
+    beforeEach ->
+      spyOn(Mercury.Toolbar.prototype, 'buildButton').andCallFake(=> $('<div>'))
+      spyOn(Mercury.Toolbar.prototype, 'bindEvents').andCallFake(=>)
+
+    describe "when visible", ->
+
+      beforeEach ->
+        @toolbar = new Mercury.Toolbar({appendTo: '#test', visible: true})
+
+      it "returns the element outerheight", ->
+        expect(@toolbar.height()).toEqual($('.mercury-toolbar-container').outerHeight())
+
+    describe "when not visible", ->
+
+      beforeEach ->
+        @toolbar = new Mercury.Toolbar({appendTo: '#test', visible: false})
+
+      it "returns 0", ->
+        expect(@toolbar.height()).toEqual(0)
+
+
+  describe "#show", ->
+
+    beforeEach ->
+      spyOn(Mercury.Toolbar.prototype, 'buildButton').andCallFake(=> $('<div>'))
+      spyOn(Mercury.Toolbar.prototype, 'bindEvents').andCallFake(=>)
+      @toolbar = new Mercury.Toolbar({appendTo: '#test', visible: false})
+
+    it "sets visible to true", ->
+      @toolbar.visible = false
+      @toolbar.show()
+      expect(@toolbar.visible).toEqual(true)
+
+    it "displays the element", ->
+      $('.mercury-toolbar-container').css({display: 'none'})
+      @toolbar.show()
+      expect($('.mercury-toolbar-container').css('display')).toEqual('block')
+
+    it "sets the top of the element", ->
+      $('.mercury-toolbar-container').css({top: '-20px'})
+      @toolbar.show()
+      expect($('.mercury-toolbar-container').css('top')).toEqual('0px')
+
+
+  describe "#hide", ->
+
+    beforeEach ->
+      spyOn(Mercury.Toolbar.prototype, 'buildButton').andCallFake(=> $('<div>'))
+      spyOn(Mercury.Toolbar.prototype, 'bindEvents').andCallFake(=>)
+      @toolbar = new Mercury.Toolbar({appendTo: '#test', visible: true})
+
+    it "sets visible to false", ->
+      @toolbar.visible = true
+      @toolbar.hide()
+      expect(@toolbar.visible).toEqual(false)
+
+    it "hides the element", ->
+      $('.mercury-toolbar-container').css({display: 'block'})
+      @toolbar.hide()
+      expect($('.mercury-toolbar-container').css('display')).toEqual('none')