2017-08-13 08:34:50 -04:00
import componentTest from 'helpers/component-test';
2017-08-15 18:41:56 -04:00
moduleForComponent('select-box', { integration: true });
2017-08-13 08:34:50 -04:00
2017-08-15 18:41:56 -04:00
componentTest('updating the content refreshes the list', {
template: '{{select-box value=1 content=content}}',
2017-08-13 08:34:50 -04:00
beforeEach() {
2017-08-15 20:34:43 -04:00
this.set("content", [{ id: 1, text: "robin" }]);
2017-08-13 08:34:50 -04:00
},
test(assert) {
2017-08-15 20:34:43 -04:00
click(".select-box-header");
2017-08-13 08:34:50 -04:00
andThen(() => {
2017-08-15 20:34:43 -04:00
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");
2017-08-13 08:34:50 -04:00
});
}
});
componentTest('accepts a value by reference', {
2017-08-15 18:41:56 -04:00
template: '{{select-box value=value content=content}}',
2017-08-13 08:34:50 -04:00
beforeEach() {
this.set("value", 1);
2017-08-15 20:34:43 -04:00
this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]);
2017-08-13 08:34:50 -04:00
},
test(assert) {
2017-08-15 20:34:43 -04:00
click(".select-box-header");
2017-08-13 08:34:50 -04:00
andThen(() => {
2017-08-15 20:34:43 -04:00
assert.equal(
this.$(".select-box-row.is-highlighted .text").html().trim(), "robin",
"it highlights the row corresponding to the value"
);
2017-08-15 18:41:56 -04:00
});
2017-08-13 08:34:50 -04:00
2017-08-15 20:34:43 -04:00
click(".select-box-row[title='robin']");
2017-08-15 18:41:56 -04:00
andThen(() => {
2017-08-15 20:34:43 -04:00
assert.equal(this.get("value"), 1, "it mutates the value");
2017-08-13 08:34:50 -04:00
});
}
});
componentTest('select-box can be filtered', {
2017-08-15 18:41:56 -04:00
template: '{{select-box filterable=true value=1 content=content}}',
2017-08-13 08:34:50 -04:00
beforeEach() {
2017-08-15 20:34:43 -04:00
this.set("content", [{ id: 1, text: "robin"}, { id: 2, text: "regis" }]);
2017-08-13 08:34:50 -04:00
},
test(assert) {
2017-08-15 20:34:43 -04:00
click(".select-box-header");
2017-08-13 08:34:50 -04:00
2017-08-15 20:34:43 -04:00
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');
2017-08-13 08:34:50 -04:00
2017-08-15 18:41:56 -04:00
andThen(() => {
2017-08-15 20:34:43 -04:00
assert.equal(
find(".select-box-row").length, 2,
"it returns to original content when filter is empty"
);
2017-08-13 08:34:50 -04:00
});
}
});
componentTest('no default icon', {
template: '{{select-box}}',
test(assert) {
assert.equal(this.$(".select-box-header .icon").length, 0, "it doesn’ t have an icon if not specified");
}
});
componentTest('customisable icon', {
template: '{{select-box icon="shower"}}',
test(assert) {
assert.equal(this.$(".select-box-header .icon").html().trim(), "<i class=\"fa fa-shower d-icon d-icon-shower\"></i>", "it has a the correct icon");
}
});
componentTest('default search icon', {
template: '{{select-box filterable=true}}',
test(assert) {
2017-08-15 20:34:43 -04:00
click(".select-box-header");
2017-08-13 08:34:50 -04:00
andThen(() => {
2017-08-15 20:34:43 -04:00
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");
2017-08-13 08:34:50 -04:00
});
}
});
componentTest('with no search icon', {
template: '{{select-box filterable=true searchIcon=null}}',
test(assert) {
2017-08-15 20:34:43 -04:00
click(".select-box-header");
2017-08-13 08:34:50 -04:00
andThen(() => {
2017-08-15 20:34:43 -04:00
assert.equal(find(".search-icon").length, 0, "it has no icon");
2017-08-13 08:34:50 -04:00
});
}
});
componentTest('custom search icon', {
template: '{{select-box filterable=true filterIcon="shower"}}',
test(assert) {
2017-08-15 20:34:43 -04:00
click(".select-box-header");
2017-08-13 08:34:50 -04:00
andThen(() => {
2017-08-15 20:34:43 -04:00
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");
2017-08-13 08:34:50 -04:00
});
}
});
componentTest('not filterable by default', {
template: '{{select-box}}',
test(assert) {
2017-08-15 20:34:43 -04:00
click(".select-box-header");
2017-08-13 08:34:50 -04:00
andThen(() => {
2017-08-15 20:34:43 -04:00
assert.equal(find(".select-box-filter").length, 0);
2017-08-13 08:34:50 -04:00
});
}
});
componentTest('select-box is expandable', {
template: '{{select-box}}',
test(assert) {
click(".select-box-header");
2017-08-15 20:34:43 -04:00
2017-08-13 08:34:50 -04:00
andThen(() => {
assert.equal(this.$(".select-box").hasClass("is-expanded"), true);
});
click(".select-box-header");
2017-08-15 20:34:43 -04:00
2017-08-13 08:34:50 -04:00
andThen(() => {
assert.equal(this.$(".select-box").hasClass("is-expanded"), false);
});
}
});
componentTest('accepts custom id/text keys', {
2017-08-15 18:41:56 -04:00
template: '{{select-box value=value content=content idKey="identifier" textKey="name"}}',
2017-08-13 08:34:50 -04:00
beforeEach() {
this.set("value", 1);
2017-08-15 20:34:43 -04:00
this.set("content", [{ identifier: 1, name: "robin" }]);
2017-08-13 08:34:50 -04:00
},
test(assert) {
click(this.$(".select-box-header"));
2017-08-15 20:34:43 -04:00
2017-08-13 08:34:50 -04:00
andThen(() => {
assert.equal(this.$(".select-box-row.is-highlighted .text").html().trim(), "robin");
});
}
});
componentTest('doesn’ t render collection content before first expand', {
2017-08-15 18:41:56 -04:00
template: '{{select-box value=1 content=content idKey="identifier" textKey="name"}}',
2017-08-13 08:34:50 -04:00
beforeEach() {
2017-08-15 20:34:43 -04:00
this.set("content", [{ identifier: 1, name: "robin" }]);
2017-08-13 08:34:50 -04:00
},
test(assert) {
assert.equal(this.$(".select-box-body .collection").length, 0);
click(this.$(".select-box-header"));
2017-08-15 20:34:43 -04:00
2017-08-13 08:34:50 -04:00
andThen(() => {
assert.equal(this.$(".select-box-body .collection").length, 1);
});
}
});
componentTest('persists filter state when expandind/collapsing', {
2017-08-15 18:41:56 -04:00
template: '{{select-box value=1 content=content filterable=true}}',
2017-08-13 08:34:50 -04:00
beforeEach() {
2017-08-15 18:41:56 -04:00
this.set("content", [{id:1, text:"robin"}, {id:2, text:"régis"}]);
2017-08-13 08:34:50 -04:00
},
test(assert) {
click(this.$(".select-box-header"));
2017-08-15 20:34:43 -04:00
fillIn('.filter-query', 'rob');
triggerEvent('.filter-query', 'keyup');
2017-08-13 08:34:50 -04:00
andThen(() => {
assert.equal(this.$(".select-box-row").length, 1);
});
click(this.$(".select-box-header"));
2017-08-15 20:34:43 -04:00
2017-08-13 08:34:50 -04:00
andThen(() => {
assert.equal(this.$().hasClass("is-expanded"), false);
});
click(this.$(".select-box-header"));
2017-08-15 20:34:43 -04:00
2017-08-13 08:34:50 -04:00
andThen(() => {
assert.equal(this.$(".select-box-row").length, 1);
});
}
});
componentTest('supports options to limit size', {
2017-08-15 18:41:56 -04:00
template: '{{select-box maxWidth=100 maxCollectionHeight=20 content=content}}',
2017-08-13 08:34:50 -04:00
beforeEach() {
2017-08-15 20:34:43 -04:00
this.set("content", [{ id: 1, text: "robin" }]);
2017-08-13 08:34:50 -04:00
},
test(assert) {
assert.equal(this.$(".select-box-header").outerWidth(), 100, "it limits the width");
click(this.$(".select-box-header"));
2017-08-15 20:34:43 -04:00
2017-08-13 08:34:50 -04:00
andThen(() => {
assert.equal(this.$(".select-box-body").height(), 20, "it limits the height");
});
}
});