delegate-test.js

/*global bean:true, qwery:true, buster:true, Syn:true, assert:true, defer:true, features:true, globalSetUp:true, globalTearDown:true*/

buster.testCase('delegate', {
    'setUp': function () {
      globalSetUp.call(this)

      bean.setSelectorEngine(qwery)

      this.verifySimpleDelegateSpy = function (spy, target) {
        assert.equals(spy.callCount, 2, 'delegated on selector')
        assert.same(spy.thisValues[0], target, 'context (this) was set to delegated element')
        assert.same(spy.thisValues[1], target, 'context (this) was set to delegated element')
        assert(spy.firstCall.args[0], 'got an event object argument')
        assert(spy.secondCall && spy.secondCall.args[0], 'got an event object argument')
        assert.same(spy.firstCall.args[0].currentTarget, target, 'degated event has currentTarget property correctly set')
        assert.same(spy.secondCall && spy.secondCall.args[0].currentTarget, target, 'degated event has currentTarget property correctly set')
      }
    }

  , 'tearDown': function () {
      globalTearDown.call(this)
      bean.setSelectorEngine() // reset to default
    }

  , 'should be able to delegate on selectors': function (done) {
      var el1     = this.byId('foo')
        , el2     = this.byId('bar')
        , el3     = this.byId('baz')
        , el4     = this.byId('bang')
        , trigger = this.trigger()
        , spy     = this.spy()

      var self = this
      trigger.after(function () {
        self.verifySimpleDelegateSpy(spy, el2)
        done()
      })

      bean.add(el1, '.bar', 'click', trigger.wrap(spy))

      Syn.click(el2)
      Syn.click(el3)
      Syn.click(el4)
    }

  , 'should be able to delegate multiple events': function (done) {
      var el1     = this.byId('foo')
        , el2     = this.byId('bar')
        , el3     = this.byId('baz')
        , trigger = this.trigger()
        , spy     = this.spy()

      var self = this
      trigger.after(function () {
        self.verifySimpleDelegateSpy(spy, el2)
        done()
      }, 50)

      bean.add(el1, '.bar', 'mouseup mousedown', trigger.wrap(spy))

      Syn.click(el2)
      Syn.click(el3)
    }

  , 'should be able to delegate on array': function (done) {
      var el1     = this.byId('foo')
        , el2     = this.byId('bar')
        , el3     = this.byId('baz')
        , el4     = this.byId('bang')
        , trigger = this.trigger()
        , spy     = this.spy()

      var self = this
      trigger.after(function () {
        self.verifySimpleDelegateSpy(spy, el2)
        done()
      })

      bean.add(el1, [el2], 'click', trigger.wrap(spy))

      Syn.click(el2)
      Syn.click(el3)
      Syn.click(el4)
    }

  , 'should be able to remove delegated handler': function (done) {
      var el1     = this.byId('foo')
        , el2     = this.byId('bar')
        , calls   = 0
        , trigger = this.trigger(50)
        , fn      = function () {
            calls++
            bean.remove(el1, 'click', trigger.wrapped(fn))
          }

      trigger.after(function () {
        assert.equals(calls, 1, 'degegated event triggered once')
        done()
      })

      bean.add(el1, '.bar', 'click', trigger.wrap(fn))

      Syn.click(el2)
      Syn.click(el2)
    }

  , 'should use qSA if available': function (done) {
      if (!features.qSA) {
        assert(true, 'qSA not available in this browser, skipping test')
        return done()
      }

      var el1     = this.byId('foo')
        , el2     = this.byId('bar')
        , el3     = this.byId('baz')
        , el4     = this.byId('bang')
        , trigger = this.trigger()
        , spy     = this.spy()
        , self    = this

      trigger.after(function () {
        self.verifySimpleDelegateSpy(spy, el2)
        done()
      })

      bean.setSelectorEngine() // reset to default
      bean.add(el1, '.bar', 'click', trigger.wrap(spy))

      Syn.click(el2)
      Syn.click(el3)
      Syn.click(el4)
    }

  , 'should throw error when no qSA available and no selector engine set': function (done) {
      if (features.qSA) {
        assert(true, 'qSA available in this browser, skipping test')
        return done()
      }

      var el1     = this.byId('foo')
        , el2     = this.byId('bar')
        , spy     = this.spy()

      bean.setSelectorEngine() // reset to default
      bean.add(el1, '.bar', 'click', spy)

      window.onerror = function (e) {
        assert(e.toString(), /Bean/, 'threw Error on delegated event trigger without selector engine or qSA')
        window.onerror = null
      }

      Syn.click(el2)

      defer(function () {
        assert.equals(spy.callCount, 0, 'don\'t fire delegated event without selector engine or qSA')
        done()
      })
    }

  , 'should be able to set a default selector engine': function (done) {
      var el1      = this.byId('foo')
        , el2      = this.byId('bar')
        , el3      = this.byId('baz')
        , el4      = this.byId('bang')
        , selector = 'SELECTOR? WE DON\'T NEED NO STINKIN\' SELECTOR!'
        , trigger  = this.trigger()
        , stub     = this.stub()
        , spy      = this.spy()

      var self = this
      trigger.after(function () {
        // 6, see? lots of wasteful calls
        assert.equals(stub.callCount, 6, 'selector engine called')
        assert.same(stub.firstCall.args[0], selector, 'selector engine called with selector argument')
        assert.same(stub.firstCall.args[1], el1, 'selector engine called with root argument')
        self.verifySimpleDelegateSpy(spy, el2)
        bean.setSelectorEngine(null)
        done()
      })

      stub.returns([el2])
      // TODO: findTarget() is called for setting event.currentTarget as well as checking for a match
      // fix this so it's only called once, otherwise it's a waste
      bean.setSelectorEngine(stub)

      bean.add(el1, selector, 'click', trigger.wrap(spy))

      Syn.click(el2)
      Syn.click(el3)
      Syn.click(el4)
    }
})