Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix `select-box` Qunit tests to use the proper Ember test helpers.

This commit is contained in:
Guo Xiang Tan 2017-08-16 09:34:43 +09:00
parent dd2ec7d463
commit 9f11223250
1 changed files with 58 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
test/javascripts/components/select-box-test.js.es6
View File

@ -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(), "<i class=\"fa fa-search d-icon d-icon-search\"></i>", "it has a the correct icon");
assert.equal(find(".select-box-filter .filter-icon").html().trim(), "<i class=\"fa fa-search d-icon d-icon-search\"></i>", "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(), "<i class=\"fa fa-shower d-icon d-icon-shower\"></i>", "it has a the correct icon");
assert.equal(find(".select-box-filter .filter-icon").html().trim(), "<i class=\"fa fa-shower d-icon d-icon-shower\"></i>", "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");
});