Refactor jasmine tests

Gruntfile.coffee

@@ -45,8 +45,8 @@ This file is generated by `grunt build`, do not edit it by hand.
           'public/chosen.proto.js': ['coffee/lib/select-parser.coffee', 'coffee/lib/abstract-chosen.coffee', 'coffee/chosen.proto.coffee']
       test:
         files:
-          'spec/public/jquery_specs.js': 'spec/jquery/*.spec.coffee'
-          'spec/public/proto_specs.js': 'spec/proto/*.spec.coffee'
+          'spec/public/jquery_specs.js': ['spec/jquery.spec.coffee', 'spec/common/*.spec.coffee']
+          'spec/public/proto_specs.js': ['spec/proto.spec.coffee', 'spec/common/*.spec.coffee']
 
     uglify:
       options:

spec/common/_helpers.spec.coffee

@@ -0,0 +1,47 @@
+# Helper to distinguish arrays from other objects
+type_is_array = Array.isArray || (value) -> {}.toString.call( value ) is '[object Array]'
+
+# Helper to determine if a variable is a dom element
+type_is_dom_elm = (el) -> typeof el is 'object' and el.style?
+
+# Helper to create HTML for the select element in most tests
+testcase_html = (options, attributes = '') ->
+  options_obj = {}
+  # If options is a simple array, convert to an object with equal keys and values
+  if type_is_array options
+    for option in options
+      options_obj[option] = option
+  else
+    options_obj = options
+
+  # Construct the HTML
+  tmpl = "<select #{attributes}>"
+  for value, label of options_obj
+    q = if value.indexOf('"') > -1 then "'" else '"'
+    tmpl += "<option value=#{q}#{value}#{q}>#{label}</option>"
+  tmpl += "</select>"
+
+testcase = (options, settings = {}, attributes = '') ->
+  # If options is a string we're good, otherwise create the HTML
+  if typeof options is 'string'
+    tmpl = options
+  else
+    tmpl = testcase_html options, attributes
+
+  # Get a "testcase" that is adapted to jquery / prototype
+  obj = fw_testcase tmpl, settings
+
+  # Add commonly used function to the object
+  # these are just "shortcuts" making the tests a lot more readable for common
+  # operations like opening the dropdown or finding out how many results are shown
+  obj.open_drop               = () -> @container.trigger('mousedown')
+  obj.get_val                 = () -> @select.val()
+  obj.get_results             = () -> @div.find('.active-result')
+  obj.get_result_groups       = () -> @div.find('.group-result')
+  obj.click_result            = (n) -> @get_results()[n].trigger("mouseup")
+  obj.set_search = (v) ->
+    @search_field.val(v)
+    @search_field.trigger('keyup')
+
+  # Return the testcase
+  obj

spec/common/basic.spec.coffee

@@ -0,0 +1,46 @@
+describe "Basic setup", ->
+  # Check existence of jQuery object / Chosen global
+  fw_basictest()
+
+  it "should create very basic chosen", ->
+    this_test = testcase ['', 'United States', 'United Kingdom', 'Afghanistan']
+
+    # very simple check that the necessary elements have been created
+    ["container", "container-single", "single", "default"].forEach (clazz)->
+      el = this_test.div.find(".chosen-#{clazz}")[0]
+      expect(type_is_dom_elm el.dom_el).toBe true
+    expect(this_test.get_val()).toBe ''
+
+    do this_test.open_drop
+    expect(this_test.container.hasClass('chosen-container-active')).toBe true
+
+    expect(this_test.get_results().length).toBe 3
+
+    this_test.click_result 2
+
+    #check that the select was updated correctly
+    expect(this_test.get_val()).toBe "Afghanistan"
+
+  describe "data-placeholder", ->
+    it "should render", ->
+      this_test = testcase ['', 'United States', 'United Kingdom', 'Afghanistan'], {}, 'data-placeholder="Choose a Country..."'
+      expect(this_test.div.find(".chosen-single > span")[0].text()).toBe "Choose a Country..."
+
+    it "should render with special characters", ->
+      this_test = testcase ['', 'United States', 'United Kingdom', 'Afghanistan'], {}, 'data-placeholder="<None>"'
+      expect(this_test.div.find(".chosen-single > span")[0].text()).toBe "<None>"
+
+  describe "disabled fieldset", ->
+    it "should render as disabled", ->
+      # More complicated tests need to pass the HTML directly to tmpl_testcase
+      this_test = testcase """
+        <fieldset disabled>
+          <select data-placeholder='Choose a Country...'>
+            <option value=''></option>
+            <option value='United States'>United States</option>
+            <option value='United Kingdom'>United Kingdom</option>
+            <option value='Afghanistan'>Afghanistan</option>
+          </select>
+        </fieldset>
+      """
+      expect(this_test.container.hasClass("chosen-disabled")).toBe true

spec/common/events.spec.coffee

@@ -0,0 +1,14 @@
+describe "Events", ->
+  it "should fire the right events", ->
+    this_test = testcase ['', 'United States', 'United Kingdom', 'Afghanistan']
+
+    # Track order of events
+    event_sequence = []
+    this_test.div.onEvt 'input', (evt) -> event_sequence.push evt.type
+    this_test.div.onEvt 'change', (evt) -> event_sequence.push evt.type
+
+    do this_test.open_drop
+
+    this_test.click_result 2
+
+    expect(event_sequence).toEqual ['input', 'change']

spec/common/max_shown_results.spec.coffee

@@ -0,0 +1,37 @@
+describe "search", ->
+  it "should display only matching items when entering a search term", ->
+    this_test = testcase ['United States', 'United Kingdom', 'Afghanistan']
+
+    do this_test.open_drop
+
+    # Expect all results to be shown
+    expect(this_test.get_results().length).toBe 3
+
+    #Type something
+    this_test.set_search("Afgh")
+
+    # Expect to only have one result: 'Afghanistan'.
+    expect(this_test.get_results().length).toBe 1
+    expect(this_test.get_results()[0].text()).toBe "Afghanistan"
+
+  it 'should only show max_shown_results items in results', ->
+    this_test = testcase ['United States', 'United Kingdom', 'Afghanistan'], {max_shown_results: 1}
+
+    do this_test.open_drop
+
+    # Expect only one result due to max_shown_results
+    expect(this_test.get_results().length).toBe 1
+
+    # Enter some text in the search field.
+    this_test.set_search("United")
+
+    # Showing only one result: the one that occurs first.
+    expect(this_test.get_results().length).toBe 1
+    expect(this_test.get_results()[0].text()).toBe "United States"
+
+    # Enter some more text in the search field.
+    this_test.set_search("United Ki")
+
+    # Still only one result, but not the first one.
+    expect(this_test.get_results().length).toBe 1
+    expect(this_test.get_results()[0].text()).toBe "United Kingdom"

spec/common/searching.spec.coffee

@@ -0,0 +1,115 @@
+describe "Searching", ->
+  it "should not match the actual text of HTML entities", ->
+    this_test = testcase {
+      '': ''
+      'This & That': 'This & That'
+      'This < That': 'This &lt; That'
+    }
+    do this_test.open_drop
+
+    expect(this_test.get_results().length).toBe 2
+
+    # Search for the html entity by name
+    this_test.set_search 'mp'
+
+    # There should be no results
+    expect(this_test.get_results().length).toBe 0
+
+  it "renders options correctly when they contain characters that require HTML encoding", ->
+    this_test = testcase ['A &amp; B']
+    do this_test.open_drop
+    expect(this_test.get_results().length).toBe 1
+    expect(this_test.get_results()[0].html()).toBe "A &amp; B"
+    this_test.set_search 'A'
+    expect(this_test.get_results().length).toBe 1
+    expect(this_test.get_results()[0].html()).toBe "<em>A</em> &amp; B"
+
+  it "renders optgroups correctly when they contain html encoded tags", ->
+    this_test = testcase """
+      <select>
+        <optgroup label="A &lt;b&gt;hi&lt;/b&gt; B">
+          <option value="Item">Item</option>
+        </optgroup>
+      </select>
+    """
+    do this_test.open_drop
+    expect(this_test.get_result_groups().length).toBe 1
+    expect(this_test.get_result_groups()[0].html()).toBe "A &lt;b&gt;hi&lt;/b&gt; B"
+
+  it "renders optgroups correctly when they contain characters that require HTML encoding when searching", ->
+    this_test = testcase """
+      <select>
+        <optgroup label="A &amp; B">
+          <option value="Item">Item</option>
+        </optgroup>
+      </select>
+    """
+    do this_test.open_drop
+    expect(this_test.get_result_groups().length).toBe 1
+    expect(this_test.get_result_groups()[0].html()).toBe "A &amp; B"
+    this_test.set_search 'A'
+    expect(this_test.get_result_groups().length).toBe 1
+    expect(this_test.get_result_groups()[0].html()).toBe "<em>A</em> &amp; B"
+
+  it "renders no results message correctly when it contains characters that require HTML encoding", ->
+    this_test = testcase ['Item']
+    do this_test.open_drop
+
+    this_test.set_search '&'
+    expect(this_test.div.find(".no-results").length).toBe 1
+    expect(this_test.div.find(".no-results")[0].html().trim()).toBe "No results match <span>&amp;</span>"
+
+    this_test.set_search '&amp;'
+    expect(this_test.div.find(".no-results").length).toBe 1
+    expect(this_test.div.find(".no-results")[0].html().trim()).toBe "No results match <span>&amp;amp;</span>"
+
+  it "matches in non-ascii languages like Chinese when selecting a single item", ->
+    this_test = testcase ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
+    do this_test.open_drop
+    expect(this_test.get_results().length).toBe 12
+    this_test.set_search "一"
+    expect(this_test.get_results().length).toBe 1
+    expect(this_test.get_results()[0].html()).toBe "<em>一</em>"
+
+  it "matches in non-ascii languages like Chinese when selecting a single item with search_contains", ->
+    this_test = testcase ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'], {search_contains: true}
+    do this_test.open_drop
+    expect(this_test.get_results().length).toBe 12
+    this_test.set_search "一"
+    expect(this_test.get_results().length).toBe 2
+    expect(this_test.get_results()[0].html()).toBe "<em>一</em>"
+    expect(this_test.get_results()[1].html()).toBe "十<em>一</em>"
+
+  it "matches in non-ascii languages like Chinese when selecting multiple items", ->
+    this_test = testcase ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'], {}, 'multi'
+    do this_test.open_drop
+    expect(this_test.get_results().length).toBe 12
+    this_test.set_search "一"
+    expect(this_test.get_results().length).toBe 1
+    expect(this_test.get_results()[0].html()).toBe "<em>一</em>"
+
+  it "matches in non-ascii languages like Chinese when selecting multiple items with search_contains", ->
+    this_test = testcase ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'], {search_contains: true}, 'multi'
+    do this_test.open_drop
+    expect(this_test.get_results().length).toBe 12
+    this_test.set_search "一"
+    expect(this_test.get_results().length).toBe 2
+    expect(this_test.get_results()[0].html()).toBe "<em>一</em>"
+    expect(this_test.get_results()[1].html()).toBe "十<em>一</em>"
+
+  it "highlights results correctly when multiple words are present", ->
+    this_test = testcase ['oh hello']
+    do this_test.open_drop
+    expect(this_test.get_results().length).toBe 1
+    this_test.set_search "h"
+    expect(this_test.get_results().length).toBe 1
+    expect(this_test.get_results()[0].html()).toBe "oh <em>h</em>ello"
+
+  describe "respects word boundaries when not using search_contains", ->
+    this_test = testcase ['(lparen', '&lt;langle', '[lbrace', '{lcurly', '¡upsidedownbang', '¿upsidedownqmark', '.period', '-dash', '"leftquote', "'leftsinglequote", '“angledleftquote', '‘angledleftsinglequote', '«guillemet']
+    this_test.div.find("option").forEach (option) ->
+      boundary_thing = option.dom_el.value.slice(1)
+      it "correctly finds words that start after a(n) #{boundary_thing}", ->
+        this_test.set_search boundary_thing
+        expect(this_test.get_results().length).toBe 1
+        expect(this_test.get_results()[0].text().slice(1)).toBe(boundary_thing)

spec/jquery.spec.coffee

@@ -0,0 +1,46 @@
+# The most basic test
+fw_basictest = () ->
+  it "should add chosen to jQuery object", ->
+    do expect(jQuery.fn.chosen).toBeDefined
+
+# A wrapper around needed "framework"-functions, so we can use the same jasmine
+# tests for jquery and prototype
+fw = (el) ->
+  {
+    # the actual element
+    dom_el: el
+
+    # some common dom traversal functions
+    find: (q) -> #Return an array of fw's
+      ret = []
+      $(el).find(q).each -> ret.push fw(this)
+      ret
+
+    # other functions needed during testing
+    hasClass: (clazz) -> $(el).hasClass clazz
+    trigger: (evt) -> $(el).trigger evt
+    val: (v) -> if v? then $(el).val v else do $(el).val
+    text: () -> do $(el).text
+    html: (v) -> if v? then $(el).html v else do $(el).html
+    onEvt: (evt, fn) -> $(el).on evt, fn
+  }
+
+fw_testcase = (tmpl, settings = {}) ->
+  # Wrap each test in a div and put the "template" in it
+  # (usually just the select itself)
+  div = $("<div>").html tmpl
+
+  # Find the select
+  select = div.find "select"
+
+  # Create the Chosen instance - possibly with specific settings for this "case"
+  select.chosen settings
+
+  # Return an object that has easy access (through the "framework wrapper") to
+  # the elements
+  {
+    div: fw div[0]
+    select: fw select[0]
+    container: fw div.find(".chosen-container")[0]
+    search_field: fw(div.find(".chosen-search input")[0] or div.find(".chosen-search-input")[0])
+  }