From 9f11223250913ecac5851ef978bf450cfb2e55d8 Mon Sep 17 00:00:00 2001 From: Guo Xiang Tan Date: Wed, 16 Aug 2017 09:34:43 +0900 Subject: [PATCH] Fix `select-box` Qunit tests to use the proper Ember test helpers. --- .../components/select-box-test.js.es6 | 99 +++++++++++-------- 1 file changed, 58 insertions(+), 41 deletions(-) diff --git a/test/javascripts/components/select-box-test.js.es6 b/test/javascripts/components/select-box-test.js.es6 index 52abe01e18c..d0d7abe3098 100644 --- a/test/javascripts/components/select-box-test.js.es6 +++ b/test/javascripts/components/select-box-test.js.es6 @@ -6,16 +6,17 @@ componentTest('updating the content refreshes the list', { template: '{{select-box value=1 content=content}}', beforeEach() { - this.set("content", [{id:1, text:"robin"}]); + this.set("content", [{ id: 1, text: "robin" }]); }, test(assert) { - click(this.$(".select-box-header")); + click(".select-box-header"); + andThen(() => { - assert.equal(this.$(".select-box-row .text").html().trim(), "robin"); + assert.equal(find(".select-box-row .text").html().trim(), "robin"); + this.set("content", [{ id: 1, text: "regis" }]); + assert.equal(find(".select-box-row .text").html().trim(), "regis"); }); - andThen(() => this.set("content", [{id:1, text:"regis"}])); - andThen(() => assert.equal(this.$(".select-box-row .text").html().trim(), "regis")); } }); @@ -24,20 +25,23 @@ componentTest('accepts a value by reference', { beforeEach() { this.set("value", 1); - this.set("content", [{id:1, text:"robin"}, {id: 2, text:"regis"}]); + this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]); }, test(assert) { - click(this.$(".select-box-header")); - andThen(() => { - assert.equal(this.$(".select-box-row.is-highlighted .text").html().trim(), "robin", "it highlights the row corresponding to the value"); - }); + click(".select-box-header"); andThen(() => { - click(this.$(".select-box-row[title='robin']")); - andThen(() => { - assert.equal(this.get("value"), 1, "it mutates the value"); - }); + assert.equal( + this.$(".select-box-row.is-highlighted .text").html().trim(), "robin", + "it highlights the row corresponding to the value" + ); + }); + + click(".select-box-row[title='robin']"); + + andThen(() => { + assert.equal(this.get("value"), 1, "it mutates the value"); }); } }); @@ -46,24 +50,28 @@ componentTest('select-box can be filtered', { template: '{{select-box filterable=true value=1 content=content}}', beforeEach() { - this.set("content", [{id:1, text:"robin"}, {id: 2, text:"regis"}]); + this.set("content", [{ id: 1, text: "robin"}, { id: 2, text: "regis" }]); }, test(assert) { - click(this.$(".select-box-header")); - andThen(() => assert.equal(this.$(".filter-query").length, 1, "it has a search input")); + click(".select-box-header"); + + andThen(() => assert.equal(find(".filter-query").length, 1, "it has a search input")); + + fillIn(".filter-query", "regis"); + triggerEvent('.filter-query', 'keyup'); + + andThen(() => assert.equal(find(".select-box-row").length, 1, "it filters results")); + + fillIn(".filter-query", ""); + triggerEvent('.filter-query', 'keyup'); andThen(() => { - this.$(".filter-query").val("regis"); - this.$(".filter-query").trigger("keyup"); + assert.equal( + find(".select-box-row").length, 2, + "it returns to original content when filter is empty" + ); }); - andThen(() => assert.equal(this.$(".select-box-row").length, 1, "it filters results")); - - andThen(() => { - this.$(".filter-query").val(""); - this.$(".filter-query").trigger("keyup"); - }); - andThen(() => assert.equal(this.$(".select-box-row").length, 2, "it returns to original content when filter is empty")); } }); @@ -87,9 +95,10 @@ componentTest('default search icon', { template: '{{select-box filterable=true}}', test(assert) { - click(this.$(".select-box-header")); + click(".select-box-header"); + andThen(() => { - assert.equal(this.$(".select-box-filter .filter-icon").html().trim(), "", "it has a the correct icon"); + assert.equal(find(".select-box-filter .filter-icon").html().trim(), "", "it has a the correct icon"); }); } }); @@ -98,9 +107,10 @@ componentTest('with no search icon', { template: '{{select-box filterable=true searchIcon=null}}', test(assert) { - click(this.$(".select-box-header")); + click(".select-box-header"); + andThen(() => { - assert.equal(this.$(".search-icon").length, 0, "it has no icon"); + assert.equal(find(".search-icon").length, 0, "it has no icon"); }); } }); @@ -109,9 +119,10 @@ componentTest('custom search icon', { template: '{{select-box filterable=true filterIcon="shower"}}', test(assert) { - click(this.$(".select-box-header")); + click(".select-box-header"); + andThen(() => { - assert.equal(this.$(".select-box-filter .filter-icon").html().trim(), "", "it has a the correct icon"); + assert.equal(find(".select-box-filter .filter-icon").html().trim(), "", "it has a the correct icon"); }); } }); @@ -119,9 +130,10 @@ componentTest('custom search icon', { componentTest('not filterable by default', { template: '{{select-box}}', test(assert) { - click(this.$(".select-box-header")); + click(".select-box-header"); + andThen(() => { - assert.equal(this.$(".select-box-filter").length, 0); + assert.equal(find(".select-box-filter").length, 0); }); } }); @@ -131,11 +143,13 @@ componentTest('select-box is expandable', { template: '{{select-box}}', test(assert) { click(".select-box-header"); + andThen(() => { assert.equal(this.$(".select-box").hasClass("is-expanded"), true); }); click(".select-box-header"); + andThen(() => { assert.equal(this.$(".select-box").hasClass("is-expanded"), false); }); @@ -147,11 +161,12 @@ componentTest('accepts custom id/text keys', { beforeEach() { this.set("value", 1); - this.set("content", [{identifier:1, name:"robin"}]); + this.set("content", [{ identifier: 1, name: "robin" }]); }, test(assert) { click(this.$(".select-box-header")); + andThen(() => { assert.equal(this.$(".select-box-row.is-highlighted .text").html().trim(), "robin"); }); @@ -162,13 +177,14 @@ componentTest('doesn’t render collection content before first expand', { template: '{{select-box value=1 content=content idKey="identifier" textKey="name"}}', beforeEach() { - this.set("content", [{identifier:1, name:"robin"}]); + this.set("content", [{ identifier: 1, name: "robin" }]); }, test(assert) { assert.equal(this.$(".select-box-body .collection").length, 0); click(this.$(".select-box-header")); + andThen(() => { assert.equal(this.$(".select-box-body .collection").length, 1); }); @@ -184,21 +200,21 @@ componentTest('persists filter state when expandind/collapsing', { test(assert) { click(this.$(".select-box-header")); - andThen(() => { - this.$(".filter-query").val("rob"); - this.$(".filter-query").trigger("keyup"); - }); + fillIn('.filter-query', 'rob'); + triggerEvent('.filter-query', 'keyup'); andThen(() => { assert.equal(this.$(".select-box-row").length, 1); }); click(this.$(".select-box-header")); + andThen(() => { assert.equal(this.$().hasClass("is-expanded"), false); }); click(this.$(".select-box-header")); + andThen(() => { assert.equal(this.$(".select-box-row").length, 1); }); @@ -209,13 +225,14 @@ componentTest('supports options to limit size', { template: '{{select-box maxWidth=100 maxCollectionHeight=20 content=content}}', beforeEach() { - this.set("content", [{id:1, text:"robin"}]); + this.set("content", [{ id: 1, text: "robin" }]); }, test(assert) { assert.equal(this.$(".select-box-header").outerWidth(), 100, "it limits the width"); click(this.$(".select-box-header")); + andThen(() => { assert.equal(this.$(".select-box-body").height(), 20, "it limits the height"); });