kuji-mercury-rails 0.3.2

data/spec/javascripts/mercury/toolbar.expander_spec.js.coffee

@@ -0,0 +1,118 @@
+describe "Mercury.Toolbar.Expander", ->
+
+  template 'mercury/toolbar.expander.html'
+
+  beforeEach ->
+    @container = $('#expander_container')
+
+  afterEach ->
+    @expander = null
+    delete(@expander)
+    $(window).unbind('mercury:resize')
+
+  describe "constructor", ->
+
+    beforeEach ->
+      @expander = new Mercury.Toolbar.Expander('foo', {appendTo: '#test', for: @container})
+
+    it "expects a name, and options", ->
+      html = $('<div>').html(@expander).html()
+      expect(html).toContain('class="mercury-palette mercury-expander mercury-foo-expander"')
+      expect(html).toMatch(/style="display:\s?none/)
+      expect($('#test .mercury-toolbar-expander').length).toEqual(1)
+
+
+  describe "#build", ->
+
+    beforeEach ->
+      @resizeSpy = spyOn(Mercury.Toolbar.Expander.prototype, 'windowResize').andCallFake(=>)
+      @expander = new Mercury.Toolbar.Expander('foo', {appendTo: '#test', for: @container})
+
+    it "sets the whitespace of the container to normal", ->
+      expect(@container.css('whiteSpace')).toEqual('normal')
+
+    it "builds an element", ->
+      html = $('<div>').html(@expander).html()
+      expect(html).toContain('class="mercury-palette mercury-expander mercury-foo-expander"')
+      expect(html).toMatch(/style="display:\s?none/)
+
+    it "builds a trigger button", ->
+      expect($('#test .mercury-toolbar-expander').length).toEqual(1)
+
+    it "calls windowResize", ->
+      expect(@resizeSpy.callCount).toEqual(1)
+
+
+  describe "observed events", ->
+
+    beforeEach ->
+      $('.mercury-button').data('expander', '<div data-button="test">expander</div>')
+      @expander = new Mercury.Toolbar.Expander('foo', {appendTo: '#test', for: @container})
+
+    describe "custom event: hide:dialogs", ->
+
+      it "hides", ->
+        @expander.css({display: 'block'})
+        Mercury.trigger('hide:dialogs')
+        expect(@expander.css('display')).toEqual('none')
+
+      it "doesn't hide if it's the same dialog", ->
+        # there's no way to test this since we don't expose the instance -- just the element
+        #@expander.css({display: 'block'})
+        #Mercury.trigger('hide:dialogs', !instance!)
+        #expect(@expander.css('display')).toEqual('block')
+
+    describe "custom event: resize", ->
+
+      it "calls windowResize", ->
+        spy = spyOn(Mercury.Toolbar.Expander.prototype, 'windowResize').andCallFake(=>)
+        Mercury.trigger('resize')
+        expect(spy.callCount).toEqual(1)
+
+    describe "click (on trigger)", ->
+
+      it "pulls buttons into the palette", ->
+        jasmine.simulate.click($('.mercury-toolbar-expander').get(0))
+        expect(@expander.html()).toEqual('<div data-button="test">expander</div>')
+
+    describe "click", ->
+
+      it "calls click on the real button", ->
+        button = $('#button2')
+        spy = spyOn(button, 'click').andCallFake(=>)
+        @container.find = -> button
+        @expander.appendTo('#test')
+
+        jasmine.simulate.click($('.mercury-toolbar-expander').get(0))
+        jasmine.simulate.click($('[data-button=test]').get(0))
+        expect(spy.callCount).toEqual(1)
+
+  describe "#windowResize", ->
+
+    it "hides", ->
+      @expander = new Mercury.Toolbar.Expander('foo', {appendTo: '#test', for: @container})
+      @expander.css({display: 'block'})
+
+      Mercury.trigger('resize')
+      expect(@expander.css('display')).toEqual('none')
+
+    it "shows the trigger if the container is wider than the window", ->
+      @expander = new Mercury.Toolbar.Expander('foo', {appendTo: '#test', for: @container})
+      Mercury.trigger('resize')
+      expect($('.mercury-toolbar-expander').css('display')).toEqual('block')
+
+    it "hides the trigger if the container is narrower than the window", ->
+      @container.css({width: '1px'})
+      @expander = new Mercury.Toolbar.Expander('foo', {appendTo: '#test', for: @container})
+      Mercury.trigger('resize')
+      expect($('.mercury-toolbar-expander').css('display')).toEqual('none')
+
+
+  describe "#position", ->
+
+    it "positions the element", ->
+      @expander = new Mercury.Toolbar.Expander('foo', {appendTo: '#test', for: @container})
+      @expander.appendTo('#positioned_container')
+      jasmine.simulate.click($('.mercury-toolbar-expander').get(0))
+
+      expect(@expander.offset()).toEqual({top: 42, left: 42})

data/spec/javascripts/mercury/toolbar_spec.js.coffee

@@ -0,0 +1,222 @@
+describe "Mercury.Toolbar", ->
+
+  template 'mercury/toolbar.html'
+
+  beforeEach ->
+    $.fx.off = true
+    spyOn($, 'ajax').andCallFake (url, options) =>
+      options.success('data') if options.success
+
+  afterEach ->
+    @toolbar = null
+    delete(@toolbar)
+
+  describe "constructor", ->
+
+    beforeEach ->
+      @buildSpy = spyOn(Mercury.Toolbar.prototype, 'build').andCallFake(=>)
+      @bindEventsSpy = spyOn(Mercury.Toolbar.prototype, 'bindEvents').andCallFake(=>)
+      @toolbar = new Mercury.Toolbar({appendTo: '#test', foo: true})
+
+    it "accepts options as an argument", ->
+      expect(@toolbar.options).toEqual({appendTo: '#test', foo: true})
+
+    it "calls build", ->
+      expect(@buildSpy.callCount).toEqual(1)
+
+    it "calls bindEvents", ->
+      expect(@bindEventsSpy.callCount).toEqual(1)
+
+
+  describe "#build", ->
+
+    describe "with a primary toolbar", ->
+
+      beforeEach ->
+        @buildButtonSpy = spyOn(Mercury.Toolbar.prototype, 'buildButton').andCallFake(=> $('<div>'))
+        @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)
+        expect($('.mercury-editable-toolbar').length).toEqual(1)
+        expect($('.mercury-editable-toolbar').data('regions')).toEqual('editable,markupable')
+
+      it "builds buttons etc.", ->
+        expect(@buildButtonSpy.callCount).toBeGreaterThan(10)
+
+      it "sets it's width back to 100%", ->
+        expect(@toolbar.element.get(0).style.width).toEqual('100%')
+
+      it "disables all but the primary toolbar", ->
+        expect($('.mercury-editable-toolbar').hasClass('disabled')).toEqual(true)
+
+      it "adds an expander when white-space: nowrap (meaning the toolbar shouldn't wrap)", ->
+        expect($('.mercury-toolbar-button-container').length).toBeGreaterThan(1)
+        expect($('.mercury-toolbar-expander').length).toEqual(1)
+
+    describe "without a primary toolbar", ->
+
+      beforeEach ->
+        @primaryToolbar = Mercury.config.toolbars.primary
+        delete(Mercury.config.toolbars.primary)
+        @buildButtonSpy = spyOn(Mercury.Toolbar.prototype, 'buildButton').andCallFake(=> $('<div>'))
+        @toolbar = new Mercury.Toolbar({appendTo: '#toolbar_container', visible: false})
+
+      afterEach ->
+        Mercury.config.toolbars.primary = @primaryToolbar
+
+      it "doesn't disable the toolbars", ->
+        expect($('.mercury-editable-toolbar').hasClass('disabled')).toEqual(false)
+
+
+
+  describe "#buildButton", ->
+
+    beforeEach ->
+      @toolbar = new Mercury.Toolbar({appendTo: '#test'})
+
+    it "throws an exception when invalid options are passed", ->
+      expect(=> @toolbar.buildButton('foo', false)).toThrow('Unknown button structure -- please provide an array, object, or string for "foo".')
+
+    it "returns false if the name is _custom, or _regions", ->
+      expect(@toolbar.buildButton('_custom', 'foo')).toEqual(false)
+      expect(@toolbar.buildButton('_regions', ['regiontype', 'another_regiontype'])).toEqual(false)
+
+    it "builds buttons", ->
+      html = $('<div>').html(@toolbar.buildButton('foobutton', ['title', 'summary', {}])).html()
+      expect(html).toContain('title="summary"')
+      expect(html).toContain('class="mercury-button mercury-foobutton-button"')
+      expect(html).toContain('<em>title</em>')
+
+    it "builds button groups", ->
+      html = $('<div>').html(@toolbar.buildButton('foogroup', {foobutton: ['title', 'summary', {}]})).html()
+      expect(html).toContain('class="mercury-button-group mercury-foogroup-group"')
+      expect(html).toContain('title="summary"')
+      expect(html).toContain('class="mercury-button mercury-foobutton-button"')
+      expect(html).toContain('<em>title</em>')
+
+    it "builds separators", ->
+      html = $('<div>').html(@toolbar.buildButton('foosep1', ' ')).html()
+      expect(html).toEqual('<hr class="mercury-separator">')
+
+      html = $('<div>').html(@toolbar.buildButton('foosep1', '-')).html()
+      expect(html).toEqual('<hr class="mercury-line-separator">')
+
+    it "builds buttons from configuration", ->
+      expect($('.mercury-primary-toolbar .mercury-save-button').length).toEqual(1)
+      expect($('.mercury-primary-toolbar .mercury-preview-button').length).toEqual(1)
+
+    it "builds button groups from configuration", ->
+      expect($('.mercury-editable-toolbar .mercury-decoration-group').length).toEqual(1)
+      expect($('.mercury-editable-toolbar .mercury-script-group').length).toEqual(1)
+
+    it "builds separators from configuration", ->
+      expect($('.mercury-separator').length).toBeGreaterThan(1);
+      expect($('.mercury-line-separator').length).toBeGreaterThan(1);
+
+
+  describe "observed events", ->
+
+    beforeEach ->
+      @toolbar = new Mercury.Toolbar({appendTo: '#test'})
+
+    describe "custom event: region:focused", ->
+
+      it "enables toolbars based on the region type", ->
+        $('.mercury-editable-toolbar').addClass('disabled')
+        Mercury.trigger('region:focused', {region: {type: 'editable'}})
+        expect($('.mercury.editable-toolbar').hasClass('disabled')).toEqual(false)
+
+        $('.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')

data/spec/javascripts/mercury/tooltip_spec.js.coffee

@@ -0,0 +1,186 @@
+describe "Mercury.tooltip", ->
+
+  template 'mercury/tooltip.html'
+
+  beforeEach ->
+    @forElement = $('#for_element')
+    $.fx.off = true
+
+  afterEach ->
+    Mercury.tooltip.visible = false
+    Mercury.tooltip.initialized = false
+
+  describe "singleton method", ->
+
+    beforeEach ->
+      @showSpy = spyOn(Mercury.tooltip, 'show').andCallFake(=>)
+
+    it "calls show", ->
+      Mercury.tooltip()
+      expect(@showSpy.callCount).toEqual(1)
+
+    it "returns the function object", ->
+      ret = Mercury.tooltip()
+      expect(ret).toEqual(Mercury.tooltip)
+
+
+  describe "#show", ->
+
+    beforeEach ->
+      @initializeSpy = spyOn(Mercury.tooltip, 'initialize').andCallFake(=>)
+      @updateSpy = spyOn(Mercury.tooltip, 'update').andCallFake(=>)
+      @appearSpy = spyOn(Mercury.tooltip, 'appear').andCallFake(=>)
+
+    it "gets the document from the element passed in", ->
+      Mercury.tooltip.show(@forElement, 'content')
+      expect(Mercury.tooltip.document).toEqual(document)
+
+    it "calls initialize", ->
+      Mercury.tooltip.show(@forElement, 'content')
+      expect(@initializeSpy.callCount).toEqual(1)
+
+    describe "if visible", ->
+
+      beforeEach ->
+        Mercury.tooltip.visible = true
+
+      it "calls update", ->
+        Mercury.tooltip.show(@forElement, 'content')
+        expect(@updateSpy.callCount).toEqual(1)
+
+    describe "if not visible", ->
+
+      beforeEach ->
+        Mercury.tooltip.visible = false
+
+      it "calls appear", ->
+        Mercury.tooltip.show(@forElement, 'content')
+        expect(@appearSpy.callCount).toEqual(1)
+
+
+  describe "#initialize", ->
+
+    it "calls build", ->
+      spy = spyOn(Mercury.tooltip, 'build').andCallFake(=>)
+      spyOn(Mercury.tooltip, 'bindEvents').andCallFake(=>)
+      Mercury.tooltip.initialize()
+      expect(spy.callCount).toEqual(1)
+
+    it "calls bindEvents", ->
+      spy = spyOn(Mercury.tooltip, 'bindEvents').andCallFake(=>)
+      Mercury.tooltip.initialize()
+      expect(spy.callCount).toEqual(1)
+
+    it "sets initialized to true", ->
+      Mercury.tooltip.initialize()
+      expect(Mercury.tooltip.initialized).toEqual(true)
+
+    it "does nothing if already initialized", ->
+      spy = spyOn(Mercury.tooltip, 'bindEvents').andCallFake(=>)
+      Mercury.tooltip.initialized = true
+      Mercury.tooltip.initialize()
+      expect(spy.callCount).toEqual(0)
+
+
+  describe "#build", ->
+
+    it "builds an element", ->
+      Mercury.tooltip.build()
+      html = $('<div>').html(Mercury.tooltip.element).html()
+      expect(html).toContain('class="mercury-tooltip"')
+
+    it "can append to any element", ->
+      Mercury.tooltip.options = {appendTo: '#tooltip_container'}
+      Mercury.tooltip.build()
+      expect($('#tooltip_container').html()).toContain('class="mercury-tooltip"')
+
+
+  describe "observed events", ->
+
+    describe "custom event: resize", ->
+
+      it "call position if visible", ->
+        Mercury.tooltip.visible = true
+        spy = spyOn(Mercury.tooltip, 'position').andCallFake(=>)
+        Mercury.trigger('resize')
+        expect(spy.callCount).toEqual(1)
+
+        Mercury.tooltip.visible = false
+        Mercury.trigger('resize')
+        expect(spy.callCount).toEqual(1)
+
+    describe "document scrolling", ->
+
+      # untestable
+      it "calls position if visible", ->
+
+    describe "element mousedown", ->
+
+      # untestable
+      it "stops the event", ->
+
+
+  describe "#appear", ->
+
+    beforeEach ->
+      Mercury.tooltip.build()
+      @updateSpy = spyOn(Mercury.tooltip, 'update').andCallFake(=>)
+
+    it "calls update", ->
+      Mercury.tooltip.appear()
+      expect(@updateSpy.callCount).toEqual(1)
+
+    it "shows the element", ->
+      Mercury.tooltip.appear()
+      expect(Mercury.tooltip.element.css('display')).toEqual('block')
+      expect(Mercury.tooltip.element.css('opacity')).toEqual('1')
+
+    it "sets visible to true", ->
+      Mercury.tooltip.visible = false
+      Mercury.tooltip.appear()
+      expect(Mercury.tooltip.visible).toEqual(true)
+
+
+  describe "#update", ->
+
+    beforeEach ->
+      Mercury.tooltip.build()
+      @positionSpy = spyOn(Mercury.tooltip, 'position').andCallFake(=>)
+
+    it "sets the html", ->
+      Mercury.tooltip.content = 'foo'
+      Mercury.tooltip.update()
+      expect(Mercury.tooltip.element.html()).toEqual('foo')
+
+    it "calls position", ->
+      Mercury.tooltip.update()
+      expect(@positionSpy.callCount).toEqual(1)
+
+
+  describe "#position", ->
+
+    beforeEach ->
+      Mercury.tooltip.build()
+      Mercury.displayRect = {top: 0, left: 0, width: 200, height: 200}
+
+    it "positions based on the element we're showing for", ->
+      Mercury.tooltip.forElement = @forElement
+      Mercury.tooltip.position()
+      expect(Mercury.tooltip.element.offset()).toEqual({top: 20 + @forElement.outerHeight(), left: 42})
+
+
+  describe "#hide", ->
+
+    beforeEach ->
+      Mercury.tooltip.build()
+      Mercury.tooltip.initialized = true
+
+    it "hides the element", ->
+      Mercury.tooltip.element.css({display: 'block'})
+      Mercury.tooltip.hide()
+      expect(Mercury.tooltip.element.css('display')).toEqual('none')
+
+    it "sets visible to false", ->
+      Mercury.tooltip.visible = true
+      Mercury.tooltip.hide()
+      expect(Mercury.tooltip.visible).toEqual(false)