test.js

describe('zelect', function() {
  var keys = { tab:9, enter:13, esc:27, left:37, up:38, right:39, down:40 }

  describe('The basics', function() {
    beforeEach(function() {
      setup('with-two-options')
      $('#select').zelect({ throttle:0 })
    })

    it('renders', function() {
      defaultInitialState()
    })

    it('shows dropdown on click', function() {
      $('.zelected').click()
      defaultOpenState()
    })

    it('filters options', function() {
      $('.zelected').click()
      $('.zearch').val('la').keyup()
      items(['Last'])
      $('.zearch').val('').keyup()
      items(['First', 'Last'])
    })

    it('shows no results text', function() {
      $('.zelected').click()
      $('.zearch').val('x').keyup()
      items([])
      visible('.dropdown .no-results')
      txt('.dropdown .no-results', "No results for 'x'")
    })

    it('selects on click', function(done) {
      var expected = { label:'Last', value:'Last', disabled: false}
      $('#select').change(function(evt, item) {
        eq(item, expected)
        visible('.zelected')
        hidden('.dropdown')
        val('#select', 'Last')
        selectionIs('Last', expected)
        done()
      })
      $('.zelected').click()
      $('.dropdown li:last').click()
    })

    it('closes dropdown on esc', function() {
      $('.zelected').click()
      keyup(keys.esc)
      hidden('.dropdown')
    })
    it('closes dropdown on click outside of zelect', function() {
      $('.zelected').click()
      $('body').click()
      hidden('.dropdown')
    })
  })

  describe('Initially selected item', function() {

    it('First loaded item', function() {
      setup('empty')
      $('#select').zelect({ loader:function(term, page, callback) { return callback(['First','Second']) }})
      selectionIs('First', 'First')
    })

    it('<option> with "selected"="selected"', function() {
      setup('with-two-options-with-values')
      $('#select option:last').attr('selected', 'selected')
      $('#select').zelect()
      val('#select', 'second')
      selectionIs('Second', { value: 'second', label: 'Second', disabled: false })
    })

    it('<option> that happens to be selected, if noPlaceholder === true', function() {
      setup('with-two-options-with-values')
      $('#select').val('second')
      $('#select').zelect({noPlaceholder: true})
      val('#select', 'second')
      selectionIs('Second', { value: 'second', label: 'Second', disabled: false })
    })

    it('opts.placeholder', function() {
      setup('with-two-options')
      $('#select').zelect({ throttle:0, placeholder:$('<h2>').text('Plz zelect...') })
      html('.zelected', '<h2>Plz zelect...</h2>')
      hasClass('.zelected', 'placeholder')
      $('.zelected').click()
      $('.dropdown li:first').click()
      noClass('.zelected', 'placeholder')
    })

    it('opts.initial', function() {
      var initial = { label:'something completely different', value:'pow'}
      var changeChecked = false
      setup('with-two-options')
      $('#select').on('change', function(e, item) {
        eq(item, initial)
        selectionIs('something completely different', initial)
        changeChecked = true
      })
      $('#select').zelect({ initial:initial })
      selectionIs('something completely different', initial)
      // <select> val can't be changed to an option that doesnt exist:
      val('#select', null)
      assert.isTrue(changeChecked)
    })

    it('noResults fallback', function() {
      setup('empty')
      $('#select').zelect({
        noResults: function() { return 'Sorry...' },
        loader: function(term, page, callback) { return callback([]) }
      })
      html('.zelected', 'Sorry...')
      hasClass('.zelected', 'placeholder')
    })
  })

  describe('Loader', function() {
    it('loads first results before "ready"', function(done) {
      setup('empty')
      $('#select').on('ready', function() {
        items(['1','2'])
        done()
      })
      $('#select').zelect({ loader:function(term, page, callback) {
        if (page == 0) return callback(['1','2'])
        return callback([])
      }})
    })

    it('defers loading first results to when the list is opened when opts.loadOptionsOnlyWhenNeeded is used', function(done) {
      setup('empty')
      $('#select').on('ready', function() {
        items([])
        $('.zelected').click()
        items(['1', '2'])
        done()
      })
      $('#select').zelect({
        loadOptionsOnlyWhenNeeded: true,
        loader: function(term, page, callback) {
          if (page == 0) return callback(['1', '2'])
          return callback([])
        }
      })
    })

    it('adds loading class', function(done) {
      setup('empty')
      noClass('.dropdown ol', 'loading')
      $('#select').zelect({ loader:function(term, page, callback) {
        hasClass('.dropdown ol', 'loading')
        callback([])
        done()
      }})
      noClass('.dropdown ol', 'loading')
    })

    it('clears list on search term change', function() {
      setup('empty')
      $('#select').zelect({ throttle:0, loader:function(term, page, callback) {
        if (page == 0) return callback([term])
        return callback([])
      }})
      items([''])
      $('.zelected').click()
      $('.zearch').val('x').keyup()
      items(['x'])
      $('.zearch').val('y').keyup()
      items(['y'])
    })

    it('loads more results when last item is visible until exhausted', function() {
      setup('empty')
      $('#select').zelect({ throttle:0, loader:function(term, page, callback) {
        if (page < 5) return callback([term+':'+page])
        return callback([])
      }})
      $('.zelected').click()
      $('.zearch').val('t').keyup()
      items(['t:0','t:1','t:2','t:3','t:4'])
    })

    it('loads more results when list scrolled to bottom', function() {
      setup('empty')
      $('#select').zelect({ throttle:0, loader:function(term, page, callback) {
        if (page < 5) return callback([page])
        return callback([])
      }})
      $('.dropdown ol').css({ height: '50px', 'overflow-y':'scroll' })
      $('.dropdown li').css({ height: '20px' })
      $('.zelected').click()
      items(['0','1','2'])
      $('.dropdown ol').scrollTop(1000).trigger('scroll')
      items(['0','1','2','3'])
      $('.dropdown ol').scrollTop(1000).trigger('scroll')
      items(['0','1','2','3','4'])
    })

    it('loads pages in order', function(done) {
      setup('empty')
      $('#select').on('ready', function() {
        $('.zelected').click()
      })
      $('#select').zelect({ throttle:0, loader:function(term, page, callback) {
        if (page < 3) {
          setTimeout(function() {
            callback([page])
          }, (2 - page) * 5)
        } else {
          items(['0','1','2'])
          callback([])
          done()
        }
      }})
    })
  })

  describe('Customization', function() {

    it('noResults', function() {
      setup('with-two-options')
      $('#select').zelect({ throttle:0, noResults:function(term) { return 'POW['+term+']POW' } })
      $('.zelected').click()
      $('.zearch').val('xxx').keyup()
      visible('.dropdown .no-results')
      txt('.dropdown .no-results', 'POW[xxx]POW')
    })

    it('renderItem', function() {
      setup('with-two-options')
      $('#select').zelect({ throttle:0, renderItem:function(item) { return $('<pre>').text(item.label) } })
      html('.dropdown li:first', '<pre>First</pre>')
      html('.zelected', '<pre>First</pre>')
    })

    it('renderItem can e.g. highlight option matches', function() {
      setup('with-several-options')
      $('#select').zelect({ throttle:0, renderItem:function(item, term) {
        var re = new RegExp('\\b('+term+')', 'i')
        return $('<span>').html(item.label.replace(re, '<em>$1</em>'))
      }})
      $('.zelected').click()
      $('.zearch').val('is').keyup()
      items(['This is first', 'Here is second', "Isn't fifth"])
      html('.dropdown li:first', '<span>This <em>is</em> first</span>')
    })

    it('renderItem with nested lists does not by default break refreshZelectItem', function() {
      setup('with-two-options')
      var z = $('#select').zelect({ throttle: 0, renderItem: function(item) { return $('<ol>').append('<li>').addClass('test-list').text(item.label) } })
      z.refreshZelectItem('#1', function(a) {
        return a.value === 'First'
      })
      $('li').each(function() {
        $(this).click()
      })
    })

    it('regexpMatcher', function() {
      setup('with-two-options')
      $('#select').zelect({ throttle:0, regexpMatcher:function(term) { return new RegExp(term) } })
      $('.zelected').click()
      $('.zearch').val('ast').keyup()
      items(['Last'])
      $('.zearch').val('s').keyup()
      items(['First', 'Last'])
    })

    it('can be set to an arbitrary item at any time', function() {
      var item = { label:'Someone Else', data:'secret' }
      var changeChecked = false
      setup('with-two-options')
      $('#select').on('change', function(e, i) {
        eq(i, item)
        selectionIs('Someone Else', item)
        changeChecked = true
      })
      $('#select').zelect({ placeholder: 'Nothing selected yet'})
      $('#select').zelectItem(item)
      selectionIs('Someone Else', item)
      // <select> val can't be changed to an option that doesnt exist:
      val('#select', 'First')
      assert.isTrue(changeChecked)
    })

    it('can zelectItem without firing a change event', function() {
      var item = { label:'Someone Else', data:'secret' }
      setup('with-two-options')
      $('#select').zelect()
      $('#select').on('change', function() { assert.fail(1, 2, 'No change event should fire') })
      $('#select').zelectItem(item, false)
      selectionIs('Someone Else', item)
    })

    it('can refresh an arbitrary item', function() {
      setup('with-two-options')
      function valueAsId(x) { return x.value }
      var newItem = { value:'First', label:'Updated First' }
      $('#select').zelect().refreshZelectItem(newItem, valueAsId)
      selectionIs('Updated First', newItem)
      items(['Updated First', 'Last'])
    })

    it('selectOnMouseEnter: false does not move selection on mouse enter', function() {
      setup('with-several-options')
      $('#select').zelect({ selectOnMouseEnter: false })
      $('.dropdown li:eq(3)').mouseenter(); eq($('.dropdown li.current').index(), 0)
      $('.dropdown li:eq(1)').mouseenter(); eq($('.dropdown li.current').index(), 0)
    })

    it('supports tagname in itemPrefix', function() {
      setup('with-two-options')
      $('#select').zelect({ itemPrefix: 'section' })
      html('.dropdown ol', '<section class="current">First</section><section>Last</section>')
    })

    it('supports tagname and classes in itemPrefix', function() {
      setup('with-two-options')
      $('#select').zelect({ itemPrefix: 'section.item.entry' })
      html('.dropdown ol', '<section class="item entry current">First</section><section class="item entry">Last</section>')
    })

    it('supports classes in itemPrefix (with default tagname li)', function() {
      setup('with-two-options')
      $('#select').zelect({ itemPrefix: '.item.entry' })
      html('.dropdown ol', '<li class="item entry current">First</li><li class="item entry">Last</li>')
    })
  })

  describe('This and that', function() {
    it('triggers ready', function(done) {
      setup('empty')
      $('#select').on('ready', function() {
        txt('.dropdown li', "12")
        done()
      })
      $('#select').zelect({ loader:function(term, page, callback) { callback(['1','2']) } })
    })

    it('allows empty string as an option value', function() {
      setup('option-with-empty-string')
      $('#select').zelect()
      $('.zelected').click()
      $('.dropdown li:last').click()
      txt('.zelected', 'Has empty string as value')
      val('#select', '')
    })

    it('throttles search input', function(done) {
      setup('with-two-options-with-values')
      $('#select').zelect({
        placeholder: 'Nothing selected yet...',
        throttle:1,
        loader: function(term, page, callback) {
          if (term == '') return callback([])
          eq(term, '123')
          eq(page, 0)
          callback([])
          done()
        }
      })
      $('.zelected').click()
      $('.zearch')
        .val('1').keyup()
        .val('12').keyup()
        .val('123').keyup()
    })

    it('can be set up in a detached DOM node', function() {
      setup('with-two-options')
      $('#select').wrap($('<div>').attr('id', 'parent'))
      var $parent = $('#parent').detach()

      $parent.find('#select').zelect()
      $('#sut').append($parent)
      defaultInitialState()
    })

    it('throws an error if <select> does not have a parent', function(done) {
      try {
        $('<select>').zelect()
      } catch (err) {
        eq(err.message, '<select> element must have a parent')
        done()
      }
    })

    it('$(select).reset()', function() {
      setup('with-two-options')
      $('#select').zelect()
      $('.zelected').click()
      $('.dropdown li:last').click()
      val('#select', 'Last')
      $('#select').resetZelect()
      val('#select', 'First')
      selectionIs('First', { label:'First', value:'First', disabled: false })
    })
  })

  describe('List', function() {
  describe('navigation', function() {
    beforeEach(function() {
      setup('empty')
      $('#select').zelect({ placeholder:'Nothing selected', throttle:0, loader:function(term, page, callback) {
        if (term == 'no-results') return callback([])
        if (page >= 2) return callback([])
        callback(_.range(page*10, page*10+10))
      }})
      $('.zelect .dropdown ol').css({ height: '100px', 'overflow-y':'auto' })
      $('.zelected').click()
    })

    it('sets first item as current', function() {
      hasClass('.dropdown li:first', 'current')
    })

    it('selects on enter', function() {
      txt('.zelected', 'Nothing selected')
      keydown(keys.down)
      keyup(keys.enter)
      txt('.zelected', '1')
    })

    assertEnterIsNoOpWhenNoSelectionCanBeMade()

    assertMovesSelectionOnMouseEnter()

    it('moves up and down', function() {
      keydown(keys.down); eq($('.dropdown li.current').index(), 1)
      keydown(keys.down); eq($('.dropdown li.current').index(), 2)
      keydown(keys.up);   eq($('.dropdown li.current').index(), 1)
      keydown(keys.up);   eq($('.dropdown li.current').index(), 0)
    })

    it("doesn't go up past first", function() {
      keydown(keys.up); keydown(keys.up); keydown(keys.up)
      eq($('.dropdown li.current').index(), 0)
    })

    assertDoesNotMovePastLast()

    assertScrollsUpAndDown()

    it('skips first mouseenter after scroll', function() {
      go(keys.down);
      $('.dropdown li:eq(17)').mouseenter()
      eq($('.dropdown li.current').index(), 19)
      $('.dropdown li:eq(17)').mouseenter()
      eq($('.dropdown li.current').index(), 17)
    })

    it('functions after filtering', function() {
      keydown(keys.down);
      keydown(keys.down);
      eq($('.dropdown li.current').index(), 2)
      $('.zearch').val('xxx').keyup()
      eq($('.dropdown li.current').index(), 0)
      keydown(keys.down);
      eq($('.dropdown li.current').index(), 1)
    })
  })

  describe('navigation with disabled items', function() {
    beforeEach(function() {
      setup('empty')
      var options = _.range(0, 20).map(function(v) { return '<option>' + v + '</option>'})
      $('#select').html(options)
      $('#select').find('option').eq(0).prop('disabled', true)
      $('#select').zelect({ placeholder:'Nothing selected', throttle:0 })
      $('.zelect .dropdown ol').css({ height: '100px', 'overflow-y':'auto' })
      $('.zelected').click()
    })

    it('marks first item as disabled', function() {
      hasClass('.dropdown li:first', 'disabled')
    })

    it('sets second item as current', function() {
      hasClass('.dropdown li:eq(1)', 'current')
    })

    it('selects on enter', function() {
      keydown(keys.down)
      keyup(keys.enter)
      txt('.zelected', '2')
    })

    assertEnterIsNoOpWhenNoSelectionCanBeMade()

    assertMovesSelectionOnMouseEnter()

    it('does not move selection on mouse enter over a disabled item', function() {
      $('.dropdown li:eq(2)').mouseenter(); eq($('.dropdown li.current').index(), 2)
      $('.dropdown li.disabled:eq(0)').mouseenter(); eq($('.dropdown li.current').index(), 2)
      $('.dropdown li:eq(1)').mouseenter(); eq($('.dropdown li.current').index(), 1)
    })

    it('moves up and down', function() {
      keydown(keys.down); eq($('.dropdown li.current').index(), 2)
      keydown(keys.up);   eq($('.dropdown li.current').index(), 1)
    })

    it("doesn't go up to disabled item", function() {
      keydown(keys.up); keydown(keys.up); keydown(keys.up)
      eq($('.dropdown li.current').index(), 1)
    })

    assertDoesNotMovePastLast()

    assertScrollsUpAndDown(30)

    it('functions after filtering', function() {
      keydown(keys.down);
      keydown(keys.down);
      eq($('.dropdown li.current').index(), 3)
      $('.zearch').val('xxx').keyup()
      eq($('.dropdown li.current').index(), -1)
      $('.zearch').val('').keyup()
      keydown(keys.down);
      eq($('.dropdown li.current').index(), 2)
    })
  })

    function assertScrollsUpAndDown(firstEnabledItemScrollTop) {
      firstEnabledItemScrollTop = firstEnabledItemScrollTop || 0
      it('scrolls list up and down as necessary', function() {
        go(keys.down);
        ok($('.dropdown ol').scrollTop() > 400)
        go(keys.up);
        eq($('.dropdown ol').scrollTop(), firstEnabledItemScrollTop)
      })
    }

    function assertEnterIsNoOpWhenNoSelectionCanBeMade() {
      it('enter is a noop if no selection can be made', function() {
        $('.zearch').val('no-results').keyup()
        visible('.dropdown .no-results')
        keydown(keys.enter)
        keyup(keys.enter)
        txt('.zelected', 'Nothing selected')
        visible('.dropdown .no-results')
        visible('.dropdown')
        hasClass('.zelect', 'open')
      })
    }

    function assertMovesSelectionOnMouseEnter() {
      it('moves selection on mouse enter', function() {
        $('.dropdown li:eq(3)').mouseenter();
        eq($('.dropdown li.current').index(), 3)
        $('.dropdown li:eq(1)').mouseenter();
        eq($('.dropdown li.current').index(), 1)
      })
    }

    function assertDoesNotMovePastLast() {
      it("doesn't go down past last", function() {
        go(keys.down)
        eq($('.dropdown li.current').index(), 19)
      })
    }

    function go(key) {
      _.range(0, 25).forEach(function() { keydown(key); $('.dropdown ol').scroll() })
    }
  })


  describe('Blur', function() {
    beforeEach(function() {
      setup('with-two-options')
      $('#select').zelect()
    })

    it('adds hover class when mouse over zelect', function() {
      $('.zelect').mouseenter()
      hasClass('.zelect', 'hover')
      $('.zelected').click()
      hasClass('.zelect', 'hover')
      $('.dropdown li:first').mouseenter()
      hasClass('.zelect', 'hover')
      $('.zelect').mouseleave()
      noClass('.zelect', 'hover')
    })
    it('closes dropdown on blur when no hover class', function() {
      $('.zelected').click()
      $('.zearch').blur()
      defaultInitialState()
    })
    it("doesn't close dropdown on blur when hover class exists", function() {
      $('.zelected').click()
      $('.zelect').mouseenter()
      $('.zearch').blur()
      defaultOpenState()
      $('.zelect').mouseleave()
      $('.zearch').blur()
      defaultInitialState()
    })
  })

  describe('XSS payload', function() {
    beforeEach(function() {
      setup('xss-payload')
      $('#select').zelect()
    })
    it("doesn't execute (throw an error) when opening dropdown", function() {
      $('.zelected').click()
    })
    it("doesn't execute when searching", function() {
      $('.zelected').click()
      $('.zearch')
        .val('value').keyup()
        .val('option').keyup()
    })
  })

  after(function() {
    setup('xss-payload')
    $('#select').zelect()
    $('body').click()
    eq(jQuery._data($('body').get(0)).events.click.length, 1, 'There should be one click handler initially')
    $('#sut').empty()
    $('body').click()
    assert.isUndefined(jQuery._data($('body').get(0)).events, 'Event handlers should be gone')
  })


  function ok(bool, msg) {
    assert.isTrue(bool, msg)
  }
  function eq(a,b, msg) {
    assert.deepEqual(a,b, msg)
  }
  function txt(locator, expected) {
    eq($(locator).text(), expected, locator+'.text()')
  }
  function val(locator, expected) {
    eq($(locator).val(), expected, locator+'.val()')
  }
  function html(locator, expected) {
    eq($(locator).html(), expected)
  }
  function lengthOf(locator, n) {
    eq($(locator).length, n, locator+'.length !== '+n)
  }
  function visible(locator) {
    ok($(locator).is(':visible'), locator+' is hidden')
  }
  function hidden(locator) {
    ok($(locator).is(':hidden'), locator+' is visible')
  }
  function hasClass(locator, clazz) {
    ok($(locator).hasClass(clazz), locator+' doesnt have class '+clazz)
  }
  function noClass(locator, clazz) {
    assert.isFalse($(locator).hasClass(clazz), locator+' has class '+clazz)
  }
  function items(arr) {
    lengthOf('.dropdown li', arr.length)
    $.each(arr, function(ii, e) {
      txt('.dropdown li:eq('+ii+')', e)
    })
  }
  function selectionIs(string, item) {
    txt('.zelected', string)
    eq($('#select').data('zelected'), item)
  }
  function defaultInitialState() {
    hidden('#select')
    visible('.zelect')
    visible('.zelected')
    hidden('.dropdown')
    hidden('.zearch')
    hidden('.dropdown .no-results')
    txt('.zelected', 'First')
    val('.zearch', '')
    items(['First','Last'])
  }
  function defaultOpenState() {
    visible('.zelect')
    visible('.zelected')
    visible('.dropdown')
    visible('.zearch')
    visible('.dropdown ol li')
    hasClass('.zelect', 'open')
    val('.zearch', '')
    hidden('.dropdown .no-results')
    items(['First','Last'])
  }
  function keyup(code) {
    $('.zearch').trigger($.Event('keyup', { which: code }))
  }
  function keydown(code) {
    $('.zearch').trigger($.Event('keydown', { which: code }))
  }
})