diff --git a/Gruntfile.coffee b/Gruntfile.coffee index 5c8fb0a312a..569d5587e0f 100644 --- a/Gruntfile.coffee +++ b/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: diff --git a/spec/common/_helpers.spec.coffee b/spec/common/_helpers.spec.coffee new file mode 100644 index 00000000000..95091bfbac4 --- /dev/null +++ b/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 = "" + +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 \ No newline at end of file diff --git a/spec/common/basic.spec.coffee b/spec/common/basic.spec.coffee new file mode 100644 index 00000000000..a111c03da8c --- /dev/null +++ b/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 "" + + describe "disabled fieldset", -> + it "should render as disabled", -> + # More complicated tests need to pass the HTML directly to tmpl_testcase + this_test = testcase """ +
+ +
+ """ + expect(this_test.container.hasClass("chosen-disabled")).toBe true \ No newline at end of file diff --git a/spec/common/events.spec.coffee b/spec/common/events.spec.coffee new file mode 100644 index 00000000000..976c73d1666 --- /dev/null +++ b/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'] \ No newline at end of file diff --git a/spec/common/max_shown_results.spec.coffee b/spec/common/max_shown_results.spec.coffee new file mode 100644 index 00000000000..9a620f45cea --- /dev/null +++ b/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" \ No newline at end of file diff --git a/spec/common/searching.spec.coffee b/spec/common/searching.spec.coffee new file mode 100644 index 00000000000..c8b489f423a --- /dev/null +++ b/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 < 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 & B'] + do this_test.open_drop + expect(this_test.get_results().length).toBe 1 + expect(this_test.get_results()[0].html()).toBe "A & B" + this_test.set_search 'A' + expect(this_test.get_results().length).toBe 1 + expect(this_test.get_results()[0].html()).toBe "A & B" + + it "renders optgroups correctly when they contain html encoded tags", -> + this_test = testcase """ + + """ + do this_test.open_drop + expect(this_test.get_result_groups().length).toBe 1 + expect(this_test.get_result_groups()[0].html()).toBe "A <b>hi</b> B" + + it "renders optgroups correctly when they contain characters that require HTML encoding when searching", -> + this_test = testcase """ + + """ + do this_test.open_drop + expect(this_test.get_result_groups().length).toBe 1 + expect(this_test.get_result_groups()[0].html()).toBe "A & B" + this_test.set_search 'A' + expect(this_test.get_result_groups().length).toBe 1 + expect(this_test.get_result_groups()[0].html()).toBe "A & 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 &" + + 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 &amp;" + + 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 "" + + 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 "" + expect(this_test.get_results()[1].html()).toBe "十" + + 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 "" + + 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 "" + expect(this_test.get_results()[1].html()).toBe "十" + + 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 hello" + + describe "respects word boundaries when not using search_contains", -> + this_test = testcase ['(lparen', '<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) \ No newline at end of file diff --git a/spec/jquery.spec.coffee b/spec/jquery.spec.coffee new file mode 100644 index 00000000000..bdbb3115763 --- /dev/null +++ b/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 = $("
").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]) + } \ No newline at end of file diff --git a/spec/jquery/basic.spec.coffee b/spec/jquery/basic.spec.coffee deleted file mode 100644 index c71798fbaf0..00000000000 --- a/spec/jquery/basic.spec.coffee +++ /dev/null @@ -1,87 +0,0 @@ -describe "Basic setup", -> - it "should add chosen to jQuery object", -> - expect(jQuery.fn.chosen).toBeDefined() - - it "should create very basic chosen", -> - tmpl = " - - " - 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("mouseup") - - expect(select.val()).toBe "Afghanistan" - - describe "data-placeholder", -> - - it "should render", -> - tmpl = " - - " - 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 = " - - " - div = $("
").html(tmpl) - select = div.find("select") - expect(select.length).toBe(1) - select.chosen() - placeholder = div.find(".chosen-single > span") - expect(placeholder.text()).toBe("") - - describe "disabled fieldset", -> - - it "should render as disabled", -> - tmpl = " -
- -
- " - 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 diff --git a/spec/jquery/events.spec.coffee b/spec/jquery/events.spec.coffee deleted file mode 100644 index 278743be810..00000000000 --- a/spec/jquery/events.spec.coffee +++ /dev/null @@ -1,30 +0,0 @@ -describe "Events", -> - it "chosen should fire the right events", -> - tmpl = " - - " - 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 - event_sequence = [] - div.on 'input change', (evt) -> event_sequence.push evt.type - - 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("mouseup") - - expect(event_sequence).toEqual ['input', 'change'] diff --git a/spec/jquery/max_shown_results.spec.coffee b/spec/jquery/max_shown_results.spec.coffee deleted file mode 100644 index e329e16fc8a..00000000000 --- a/spec/jquery/max_shown_results.spec.coffee +++ /dev/null @@ -1,64 +0,0 @@ -describe "search", -> - it "should display only matching items when entering a search term", -> - tmpl = " - - " - div = $("
").html(tmpl) - select = div.find("select") - select.chosen() - - container = div.find(".chosen-container") - container.trigger("mousedown") # open the drop - # Expect all results to be shown - results = div.find(".active-result") - expect(results.length).toBe(3) - - # Enter some text in the search field. - search_field = div.find(".chosen-search input").first() - search_field.val("Afgh") - search_field.trigger('keyup') - - # Expect to only have one result: 'Afghanistan'. - results = div.find(".active-result") - expect(results.length).toBe(1) - expect(results.first().text()).toBe "Afghanistan" - - it "should only show max_shown_results items in results", -> - tmpl = " - - " - div = $("
").html(tmpl) - select = div.find("select") - select.chosen({max_shown_results: 1 }) - - container = div.find(".chosen-container") - container.trigger("mousedown") # open the drop - results = div.find(".active-result") - expect(results.length).toBe(1) - - # Enter some text in the search field. - search_field = div.find(".chosen-search input").first() - search_field.val("United") - search_field.trigger("keyup") - - # Showing only one result: the one that occurs first. - results = div.find(".active-result") - expect(results.length).toBe(1) - expect(results.first().text()).toBe "United States" - - # Showing still only one result, but not the first one. - search_field.val("United Ki") - search_field.trigger("keyup") - results = div.find(".active-result") - expect(results.length).toBe(1) - expect(results.first().text()).toBe "United Kingdom" diff --git a/spec/jquery/searching.spec.coffee b/spec/jquery/searching.spec.coffee deleted file mode 100644 index d17f62f85bc..00000000000 --- a/spec/jquery/searching.spec.coffee +++ /dev/null @@ -1,281 +0,0 @@ -describe "Searching", -> - it "should not match the actual text of HTML entities", -> - tmpl = " - - " - - div = $("
").html(tmpl) - select = div.find("select") - select.chosen({search_contains: true}) - - container = div.find(".chosen-container") - container.trigger("mousedown") # open the drop - - # Both options should be active - results = div.find(".active-result") - expect(results.length).toBe(2) - - # Search for the html entity by name - search_field = div.find(".chosen-search input").first() - search_field.val("mp") - search_field.trigger("keyup") - - results = div.find(".active-result") - expect(results.length).toBe(0) - - it "renders options correctly when they contain characters that require HTML encoding", -> - div = $("
").html(""" - - """) - - div.find("select").chosen() - div.find(".chosen-container").trigger("mousedown") # open the drop - - expect(div.find(".active-result").length).toBe(1) - expect(div.find(".active-result").first().html()).toBe("A & B") - - search_field = div.find(".chosen-search-input").first() - search_field.val("A") - search_field.trigger("keyup") - - expect(div.find(".active-result").length).toBe(1) - expect(div.find(".active-result").first().html()).toBe("A & B") - - it "renders optgroups correctly when they contain html encoded tags", -> - div = $("
").html(""" - - """) - - div.find("select").chosen() - div.find(".chosen-container").trigger("mousedown") # open the drop - - expect(div.find(".group-result").length).toBe(1) - expect(div.find(".group-result").first().html()).toBe("A <b>hi</b> B") - - it "renders optgroups correctly when they contain characters that require HTML encoding when searching", -> - div = $("
").html(""" - - """) - - div.find("select").chosen() - div.find(".chosen-container").trigger("mousedown") # open the drop - - expect(div.find(".group-result").length).toBe(1) - expect(div.find(".group-result").first().html()).toBe("A & B") - - search_field = div.find(".chosen-search-input").first() - search_field.val("A") - search_field.trigger("keyup") - - expect(div.find(".group-result").length).toBe(1) - expect(div.find(".group-result").first().html()).toBe("A & B") - - it "renders no results message correctly when it contains characters that require HTML encoding", -> - div = $("
").html(""" - - """) - - div.find("select").chosen() - div.find(".chosen-container").trigger("mousedown") # open the drop - - search_field = div.find(".chosen-search-input").first() - search_field.val("&") - search_field.trigger("keyup") - - expect(div.find(".no-results").length).toBe(1) - expect(div.find(".no-results").first().html().trim()).toBe("No results match &") - - search_field.val("&") - search_field.trigger("keyup") - - expect(div.find(".no-results").length).toBe(1) - expect(div.find(".no-results").first().html().trim()).toBe("No results match &amp;") - - it "matches in non-ascii languages like Chinese when selecting a single item", -> - div = $("
").html(""" - - """) - - div.find("select").chosen() - div.find(".chosen-container").trigger("mousedown") # open the drop - - expect(div.find(".active-result").length).toBe(12) - - search_field = div.find(".chosen-search-input").first() - search_field.val("一") - search_field.trigger("keyup") - - expect(div.find(".active-result").length).toBe(1) - expect(div.find(".active-result")[0].innerHTML).toBe("") - - it "matches in non-ascii languages like Chinese when selecting a single item with search_contains", -> - div = $("
").html(""" - - """) - - div.find("select").chosen({search_contains: true}) - div.find(".chosen-container").trigger("mousedown") # open the drop - - expect(div.find(".active-result").length).toBe(12) - - search_field = div.find(".chosen-search-input").first() - search_field.val("一") - search_field.trigger("keyup") - - expect(div.find(".active-result").length).toBe(2) - expect(div.find(".active-result")[0].innerHTML).toBe("") - expect(div.find(".active-result")[1].innerHTML).toBe("十") - - it "matches in non-ascii languages like Chinese when selecting multiple items", -> - div = $("
").html(""" - - """) - - div.find("select").chosen() - div.find(".chosen-container").trigger("mousedown") # open the drop - - expect(div.find(".active-result").length).toBe(12) - - search_field = div.find(".chosen-search-input") - search_field.val("一") - search_field.trigger("keyup") - - expect(div.find(".active-result").length).toBe(1) - expect(div.find(".active-result")[0].innerHTML).toBe("") - - it "matches in non-ascii languages like Chinese when selecting multiple items with search_contains", -> - div = $("
").html(""" - - """) - - div.find("select").chosen({search_contains: true}) - div.find(".chosen-container").trigger("mousedown") # open the drop - - expect(div.find(".active-result").length).toBe(12) - - search_field = div.find(".chosen-search-input") - search_field.val("一") - search_field.trigger("keyup") - - expect(div.find(".active-result").length).toBe(2) - expect(div.find(".active-result")[0].innerHTML).toBe("") - expect(div.find(".active-result")[1].innerHTML).toBe("十") - - it "highlights results correctly when multiple words are present", -> - div = $("
").html(""" - - """) - - div.find("select").chosen() - div.find(".chosen-container").trigger("mousedown") # open the drop - - expect(div.find(".active-result").length).toBe(1) - - search_field = div.find(".chosen-search-input") - search_field.val("h") - search_field.trigger("keyup") - - expect(div.find(".active-result").length).toBe(1) - expect(div.find(".active-result")[0].innerHTML).toBe("oh hello") - - describe "respects word boundaries when not using search_contains", -> - div = $("
").html(""" - - """) - - div.find("select").chosen() - div.find(".chosen-container").trigger("mousedown") # open the drop - - search_field = div.find(".chosen-search-input") - - div.find("option").each () -> - boundary_thing = this.value.slice(1) - it "correctly finds words that start after a(n) #{boundary_thing}", -> - search_field.val(boundary_thing) - search_field.trigger("keyup") - expect(div.find(".active-result").length).toBe(1) - expect(div.find(".active-result")[0].innerText.slice(1)).toBe(boundary_thing) diff --git a/spec/proto.spec.coffee b/spec/proto.spec.coffee new file mode 100644 index 00000000000..4ab3f844dae --- /dev/null +++ b/spec/proto.spec.coffee @@ -0,0 +1,54 @@ +# The most basic test +fw_basictest = () -> + it "should expose a Chosen global", -> + do expect(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 = [] + for elm in el.select(q) + ret.push fw(elm) + ret + + # other functions needed during testing + hasClass: (clazz) -> el.hasClassName clazz + trigger: (evt) -> simulant.fire el, evt + val: (v) -> if v? then el.value = v else $F el + text: () -> el.innerText || el.textContent + html: (v) -> if v? then el.innerHTML = v else el.innerHTML + onEvt: (evt, fn) -> el.addEventListener evt, fn + } + +fw_testcase = (tmpl, settings = {}) -> + # Wrap each test in a div + div = new Element "div" + document.body.insert div + + # Put the "template" in the div (usually just the select itself) + div.update tmpl + + # Find the select + select = div.down "select" + + # Create the Chosen instance - possibly with specific settings for this "case" + new Chosen select, settings + + # Find some elements that are needed for many tests + container = div.down ".chosen-container" + search_field = div.down(".chosen-search input") or div.down(".chosen-search-input") + + # Return an object that has easy access (through the "framework wrapper") to + # the elements + { + div: fw div + select: fw select + container: fw container + search_field: fw search_field + } \ No newline at end of file diff --git a/spec/proto/basic.spec.coffee b/spec/proto/basic.spec.coffee deleted file mode 100644 index 9e7212a57b9..00000000000 --- a/spec/proto/basic.spec.coffee +++ /dev/null @@ -1,101 +0,0 @@ -describe "Basic setup", -> - it "should add expose a Chosen global", -> - expect(Chosen).toBeDefined() - - it "should create very basic chosen", -> - tmpl = " - - " - - div = new Element("div") - document.body.insert(div) - div.update(tmpl) - select = div.down("select") - expect(select).toBeDefined() - new Chosen(select) - # very simple check that the necessary elements have been created - ["container", "container-single", "single", "default"].forEach (clazz)-> - el = div.down(".chosen-#{clazz}") - expect(el).toBeDefined() - - # test a few interactions - expect($F(select)).toBe "" - - container = div.down(".chosen-container") - simulant.fire(container, "mousedown") # open the drop - expect(container.hasClassName("chosen-container-active")).toBe true - - #select an item - result = container.select(".active-result").last() - simulant.fire(result, "mouseup") - - expect($F(select)).toBe "Afghanistan" - div.remove() - - describe "data-placeholder", -> - - it "should render", -> - tmpl = " - - " - div = new Element("div") - document.body.insert(div) - div.update(tmpl) - select = div.down("select") - expect(select).toBeDefined() - new Chosen(select) - - placeholder = div.down(".chosen-single > span") - expect(placeholder.innerText).toBe("Choose a Country...") - - it "should render with special characters", -> - tmpl = " - - " - div = new Element("div") - document.body.insert(div) - div.update(tmpl) - select = div.down("select") - expect(select).toBeDefined() - new Chosen(select) - - placeholder = div.down(".chosen-single > span") - expect(placeholder.innerText).toBe("") - - describe "disabled fieldset", -> - - it "should render as disabled", -> - tmpl = " -
- -
- " - div = new Element("div") - document.body.insert(div) - div.update(tmpl) - select = div.down("select") - expect(select).toBeDefined() - new Chosen(select) - - container = div.down(".chosen-container") - expect(container.hasClassName("chosen-disabled")).toBe true diff --git a/spec/proto/events.spec.coffee b/spec/proto/events.spec.coffee deleted file mode 100644 index 125da54e665..00000000000 --- a/spec/proto/events.spec.coffee +++ /dev/null @@ -1,33 +0,0 @@ -describe "Events", -> - it "chosen should fire the right events", -> - tmpl = " - - " - - div = new Element("div") - document.body.insert(div) - - div.update(tmpl) - select = div.down("select") - expect(select).toBeDefined() - new Chosen(select) - - event_sequence = [] - document.addEventListener 'input', -> event_sequence.push 'input' - document.addEventListener 'change', -> event_sequence.push 'change' - - container = div.down(".chosen-container") - simulant.fire(container, "mousedown") # open the drop - expect(container.hasClassName("chosen-container-active")).toBe true - - #select an item - result = container.select(".active-result").last() - simulant.fire(result, "mouseup") - - expect(event_sequence).toEqual ['input', 'change'] - div.remove() diff --git a/spec/proto/max_shown_results.spec.coffee b/spec/proto/max_shown_results.spec.coffee deleted file mode 100644 index 518fa89c1b2..00000000000 --- a/spec/proto/max_shown_results.spec.coffee +++ /dev/null @@ -1,68 +0,0 @@ -describe 'search', -> - it 'should display only matching items when entering a search term', -> - tmpl = ''' - - ''' - div = new Element('div') - document.body.insert(div) - div.update(tmpl) - select = div.down('select') - new Chosen(select) - - container = div.down('.chosen-container') - simulant.fire(container, 'mousedown') # open the drop - # Expect all results to be shown - results = div.select('.active-result') - expect(results.length).toBe(3) - - # Enter some text in the search field. - search_field = div.down('.chosen-search input') - search_field.value = 'Afgh' - simulant.fire(search_field, 'keyup') - - # Expect to only have one result: 'Afghanistan'. - results = div.select('.active-result') - expect(results.length).toBe(1) - expect(results[0].innerText).toBe 'Afghanistan' - - it 'should only show max_shown_results items in results', -> - tmpl = ''' - - ''' - div = new Element('div') - document.body.insert(div) - div.update(tmpl) - select = div.down('select') - new Chosen(select, { max_shown_results: 1 }) - - container = div.down('.chosen-container') - simulant.fire(container, 'mousedown') # open the drop - results = div.select('.active-result') - expect(results.length).toBe(1) - - # Enter some text in the search field. - search_field = div.down('.chosen-search input') - search_field.value = 'United' - simulant.fire(search_field, 'keyup') - - # Showing only one result: the one that occurs first. - results = div.select('.active-result') - expect(results.length).toBe(1) - expect(results[0].innerText).toBe 'United States' - - # Showing still only one result, but not the first one. - search_field.value = 'United Ki' - simulant.fire(search_field, 'keyup') - results = div.select('.active-result') - expect(results.length).toBe(1) - expect(results[0].innerText).toBe 'United Kingdom' diff --git a/spec/proto/searching.spec.coffee b/spec/proto/searching.spec.coffee deleted file mode 100644 index 457396b95d2..00000000000 --- a/spec/proto/searching.spec.coffee +++ /dev/null @@ -1,293 +0,0 @@ -describe "Searching", -> - it "should not match the actual text of HTML entities", -> - tmpl = " - - " - - div = new Element('div') - document.body.insert(div) - div.update(tmpl) - select = div.down('select') - new Chosen(select, {search_contains: true}) - - container = div.down('.chosen-container') - simulant.fire(container, 'mousedown') # open the drop - - # Both options should be active - results = div.select('.active-result') - expect(results.length).toBe(2) - - # Search for the html entity by name - search_field = div.down(".chosen-search input") - search_field.value = "mp" - simulant.fire(search_field, 'keyup') - - results = div.select(".active-result") - expect(results.length).toBe(0) - - it "renders options correctly when they contain characters that require HTML encoding", -> - div = new Element("div") - div.update(""" - - """) - - new Chosen(div.down("select")) - simulant.fire(div.down(".chosen-container"), "mousedown") # open the drop - - expect(div.select(".active-result").length).toBe(1) - expect(div.down(".active-result").innerHTML).toBe("A & B") - - search_field = div.down(".chosen-search-input") - search_field.value = "A" - simulant.fire(search_field, "keyup") - - expect(div.select(".active-result").length).toBe(1) - expect(div.down(".active-result").innerHTML).toBe("A & B") - - it "renders optgroups correctly when they contain characters that require HTML encoding", -> - div = new Element("div") - div.update(""" - - """) - - new Chosen(div.down("select")) - simulant.fire(div.down(".chosen-container"), "mousedown") # open the drop - - expect(div.select(".group-result").length).toBe(1) - expect(div.down(".group-result").innerHTML).toBe("A <b>hi</b> B") - - it "renders optgroups correctly when they contain characters that require HTML encoding when searching", -> - div = new Element("div") - div.update(""" - - """) - - new Chosen(div.down("select")) - simulant.fire(div.down(".chosen-container"), "mousedown") # open the drop - - expect(div.select(".group-result").length).toBe(1) - expect(div.down(".group-result").innerHTML).toBe("A & B") - - search_field = div.down(".chosen-search-input") - search_field.value = "A" - simulant.fire(search_field, "keyup") - - expect(div.select(".group-result").length).toBe(1) - expect(div.down(".group-result").innerHTML).toBe("A & B") - - it "renders no results message correctly when it contains characters that require HTML encoding", -> - div = new Element("div") - div.update(""" - - """) - - new Chosen(div.down("select")) - simulant.fire(div.down(".chosen-container"), "mousedown") # open the drop - - search_field = div.down(".chosen-search-input") - search_field.value = "&" - simulant.fire(search_field, "keyup") - - expect(div.select(".no-results").length).toBe(1) - expect(div.down(".no-results").innerHTML.trim()).toBe("No results match &") - - search_field.value = "&" - simulant.fire(search_field, "keyup") - - expect(div.select(".no-results").length).toBe(1) - expect(div.down(".no-results").innerHTML.trim()).toBe("No results match &amp;") - - it "matches in non-ascii languages like Chinese when selecting a single item", -> - div = new Element("div") - div.update(""" - - """) - - new Chosen(div.down("select")) - simulant.fire(div.down(".chosen-container"), "mousedown") # open the drop - - expect(div.select(".active-result").length).toBe(12) - - search_field = div.down(".chosen-search-input") - search_field.value = "一" - simulant.fire(search_field, "keyup") - - expect(div.select(".active-result").length).toBe(1) - expect(div.select(".active-result")[0].innerHTML).toBe("") - - it "matches in non-ascii languages like Chinese when selecting a single item with search_contains", -> - div = new Element("div") - div.update(""" - - """) - - new Chosen(div.down("select"), {search_contains: true}) - simulant.fire(div.down(".chosen-container"), "mousedown") # open the drop - - expect(div.select(".active-result").length).toBe(12) - - search_field = div.down(".chosen-search-input") - search_field.value = "一" - simulant.fire(search_field, "keyup") - - expect(div.select(".active-result").length).toBe(2) - expect(div.select(".active-result")[0].innerHTML).toBe("") - expect(div.select(".active-result")[1].innerHTML).toBe("十") - - it "matches in non-ascii languages like Chinese when selecting multiple items", -> - div = new Element("div") - div.update(""" - - """) - - new Chosen(div.down("select")) - simulant.fire(div.down(".chosen-container"), "mousedown") # open the drop - - expect(div.select(".active-result").length).toBe(12) - - search_field = div.down(".chosen-search-input") - search_field.value = "一" - simulant.fire(search_field, "keyup") - - expect(div.select(".active-result").length).toBe(1) - expect(div.select(".active-result")[0].innerHTML).toBe("") - - it "matches in non-ascii languages like Chinese when selecting multiple items with search_contains", -> - div = new Element("div") - div.update(""" - - """) - - new Chosen(div.down("select"), {search_contains: true}) - simulant.fire(div.down(".chosen-container"), "mousedown") # open the drop - - expect(div.select(".active-result").length).toBe(12) - - search_field = div.down(".chosen-search-input") - search_field.value = "一" - simulant.fire(search_field, "keyup") - - expect(div.select(".active-result").length).toBe(2) - expect(div.select(".active-result")[0].innerHTML).toBe("") - expect(div.select(".active-result")[1].innerHTML).toBe("十") - - it "highlights results correctly when multiple words are present", -> - div = new Element("div") - div.update(""" - - """) - - new Chosen(div.down("select")) - simulant.fire(div.down(".chosen-container"), "mousedown") # open the drop - - expect(div.select(".active-result").length).toBe(1) - - search_field = div.down(".chosen-search-input") - search_field.value = "h" - simulant.fire(search_field, "keyup") - - expect(div.select(".active-result").length).toBe(1) - expect(div.select(".active-result")[0].innerHTML).toBe("oh hello") - - describe "respects word boundaries when not using search_contains", -> - div = new Element("div") - div.update(""" - - """) - - new Chosen(div.down("select")) - simulant.fire(div.down(".chosen-container"), "mousedown") # open the drop - - search_field = div.down(".chosen-search-input") - - div.select("option").forEach (option) -> - boundary_thing = option.value.slice(1) - it "correctly finds words that start after a(n) #{boundary_thing}", -> - search_field.value = boundary_thing - simulant.fire(search_field, "keyup") - expect(div.select(".active-result").length).toBe(1) - expect(div.select(".active-result")[0].innerText.slice(1)).toBe(boundary_thing)