describe "Basic setup", ->
  it "should add chosen to jQuery object", ->
    expect(jQuery.fn.chosen).toBeDefined()

  it "should create very basic chosen", ->
    tmpl = "
      <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>
    "
    div = $("<div>").html(tmpl)
    select = div.find("select")
    expect(select.length).toBe(1)
    select.chosen()
    # very simple check that the necessary elements have been created
    ["container", "container-single", "single", "default"].forEach (clazz)->
      el = div.find(".chosen-#{clazz}")
      expect(el.length).toBe(1)

    # test a few interactions
    expect(select.val()).toBe ""

    container = div.find(".chosen-container")
    container.trigger("mousedown") # open the drop
    expect(container.hasClass("chosen-container-active")).toBe true
    #select an item
    container.find(".active-result").last().trigger $.Event("mouseup", which: 1)

    expect(select.val()).toBe "Afghanistan"

  describe "data-placeholder", ->

    it "should render", ->
      tmpl = "
        <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>
      "
      div = $("<div>").html(tmpl)
      select = div.find("select")
      expect(select.length).toBe(1)
      select.chosen()
      placeholder = div.find(".chosen-single > span")
      expect(placeholder.text()).toBe("Choose a Country...")

    it "should render with special characters", ->
      tmpl = "
        <select data-placeholder='&lt;None&gt;'>
          <option value=''></option>
          <option value='United States'>United States</option>
          <option value='United Kingdom'>United Kingdom</option>
          <option value='Afghanistan'>Afghanistan</option>
        </select>
      "
      div = $("<div>").html(tmpl)
      select = div.find("select")
      expect(select.length).toBe(1)
      select.chosen()
      placeholder = div.find(".chosen-single > span")
      expect(placeholder.text()).toBe("<None>")

    it "should render with ampersand", ->
      tmpl = "
        <select data-placeholder='Choose from A &amp; B'>
          <option value=''></option>
          <option value='United States'>United States</option>
          <option value='United Kingdom'>United Kingdom</option>
          <option value='Afghanistan'>Afghanistan</option>
        </select>
      "
      div = $("<div>").html(tmpl)
      select = div.find("select")
      expect(select.length).toBe(1)
      select.chosen()
      placeholder = div.find(".chosen-single > span")
      expect(placeholder.text()).toBe("Choose from A & B")

    it "should handle ampersand in options", ->
      div = $("<div>").html("
        <select>
          <option value=''></option>
          <option value='1'>Option 1</option>
        </select>
      ")
      select = div.find("select")
      select.chosen({
        placeholder_text_single: 'Choose from A & B'
      })
      placeholder = div.find(".chosen-single > span")
      expect(placeholder.text()).toBe("Choose from A & B")

    it "should handle already-escaped entities in options", ->
      div = $("<div>").html("
        <select>
          <option value=''></option>
          <option value='1'>Option 1</option>
        </select>
      ")
      select = div.find("select")
      select.chosen({
        placeholder_text_single: 'Choose from A &amp; B'
      })
      placeholder = div.find(".chosen-single > span")
      expect(placeholder.text()).toBe("Choose from A & B")

  describe "disabled fieldset", ->

    it "should render as disabled", ->
      tmpl = "
        <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>
      "
      div = $("<div>").html(tmpl)
      select = div.find("select")
      expect(select.length).toBe(1)
      select.chosen()

      container = div.find(".chosen-container")
      expect(container.hasClass("chosen-disabled")).toBe true

  it "it should not render hidden options", ->
    tmpl = "
      <select data-placeholder='Choose a Country...'>
        <option value='' hidden>Choose a Country</option>
        <option value='United States'>United States</option>
      </select>
    "
    div = $("<div>").html(tmpl)
    select = div.find("select")
    select.chosen()
    container = div.find(".chosen-container")
    container.trigger("mousedown") # open the drop
    expect(container.find(".active-result").length).toBe 1


  it "it should not render hidden optgroups", ->
    tmpl = "
      <select>
        <optgroup label='Not shown' hidden>
          <option value='Item1'>Item1</option>
        </optgroup>
        <optgroup label='Shown'>
          <option value='Item2'>Item2</option>
        </optgroup>
      </select>
    "
    div = $("<div>").html(tmpl)
    select = div.find("select")
    select.chosen()
    container = div.find(".chosen-container")
    container.trigger("mousedown") # open the drop
    expect(container.find(".group-result").length).toBe 1
    expect(container.find(".active-result").length).toBe 1