discourse/test/javascripts/components/multi-select-test.js.es6

320 lines
6.9 KiB
Plaintext
Raw Normal View History

2018-06-15 11:03:24 -04:00
import componentTest from "helpers/component-test";
moduleForComponent("multi-select", {
integration: true,
beforeEach: function() {
2018-06-15 11:03:24 -04:00
this.set("subject", selectKit());
}
});
2018-06-15 11:03:24 -04:00
componentTest("with objects and values", {
template: "{{multi-select content=items values=values}}",
beforeEach() {
2018-06-15 11:03:24 -04:00
this.set("items", [{ id: 1, name: "hello" }, { id: 2, name: "world" }]);
this.set("values", [1, 2]);
},
test(assert) {
2018-07-29 16:51:32 -04:00
assert.equal(
this.get("subject")
.header()
.value(),
"1,2"
);
}
});
2018-06-15 11:03:24 -04:00
componentTest("with title", {
template: '{{multi-select title=(i18n "test.title")}}',
beforeEach() {
2018-06-15 11:03:24 -04:00
I18n.translations[I18n.locale].js.test = { title: "My title" };
},
test(assert) {
2018-07-29 16:51:32 -04:00
assert.equal(
selectKit()
.header()
.title(),
"My title"
2018-06-15 11:03:24 -04:00
);
}
});
2018-06-15 11:03:24 -04:00
componentTest("interactions", {
template: "{{multi-select none=none content=items values=values}}",
beforeEach() {
2018-06-15 11:03:24 -04:00
I18n.translations[I18n.locale].js.test = { none: "none" };
this.set("items", [
{ id: 1, name: "regis" },
{ id: 2, name: "sam" },
{ id: 3, name: "robin" }
]);
this.set("values", [1, 2]);
},
2018-07-29 16:51:32 -04:00
async test(assert) {
await this.get("subject").expand();
assert.equal(
this.get("subject")
.highlightedRow()
.name(),
"robin",
"it highlights the first content row"
);
await this.set("none", "test.none");
assert.ok(
this.get("subject")
.noneRow()
.exists()
);
assert.equal(
this.get("subject")
.highlightedRow()
.name(),
"robin",
"it highlights the first content row"
);
await this.get("subject").selectRowByValue(3);
await this.get("subject").expand();
assert.equal(
this.get("subject")
.highlightedRow()
.name(),
"none",
"it highlights none row if no content"
);
await this.get("subject").fillInFilter("joffrey");
assert.equal(
this.get("subject")
.highlightedRow()
.name(),
"joffrey",
"it highlights create row when filling filter"
);
await this.get("subject").keyboard("enter");
assert.equal(
this.get("subject")
.highlightedRow()
.name(),
"none",
"it highlights none row after creating content and no content left"
);
await this.get("subject").keyboard("backspace");
const $lastSelectedName = this.get("subject")
.header()
.el()
.find(".selected-name")
.last();
assert.equal($lastSelectedName.attr("data-name"), "joffrey");
assert.ok(
$lastSelectedName.hasClass("is-highlighted"),
"it highlights the last selected name when using backspace"
);
await this.get("subject").keyboard("backspace");
const $lastSelectedName1 = this.get("subject")
.header()
.el()
.find(".selected-name")
.last();
assert.equal(
$lastSelectedName1.attr("data-name"),
"robin",
"it removes the previous highlighted selected content"
);
assert.notOk(
this.get("subject")
.rowByValue("joffrey")
.exists(),
"generated content shouldnt appear in content when removed"
);
await this.get("subject").keyboard("selectAll");
const $highlightedSelectedNames2 = this.get("subject")
.header()
.el()
.find(".selected-name.is-highlighted");
assert.equal(
$highlightedSelectedNames2.length,
3,
"it highlights each selected name"
);
await this.get("subject").keyboard("backspace");
const $selectedNames = this.get("subject")
.header()
.el()
.find(".selected-name");
assert.equal($selectedNames.length, 0, "it removed all selected content");
assert.ok(this.get("subject").isFocused());
assert.ok(this.get("subject").isExpanded());
await this.get("subject").keyboard("escape");
assert.ok(this.get("subject").isFocused());
assert.notOk(this.get("subject").isExpanded());
await this.get("subject").keyboard("escape");
assert.notOk(this.get("subject").isFocused());
assert.notOk(this.get("subject").isExpanded());
}
});
2018-01-11 03:54:39 -05:00
2018-06-15 11:03:24 -04:00
componentTest("with limitMatches", {
template: "{{multi-select content=content limitMatches=2}}",
2018-01-11 03:54:39 -05:00
beforeEach() {
2018-06-15 11:03:24 -04:00
this.set("content", ["sam", "jeff", "neil"]);
2018-01-11 03:54:39 -05:00
},
2018-07-29 16:51:32 -04:00
async test(assert) {
await this.get("subject").expand();
assert.equal(
this.get("subject")
.el()
.find(".select-kit-row").length,
2
2018-06-15 11:03:24 -04:00
);
2018-01-11 03:54:39 -05:00
}
});
2018-06-15 11:03:24 -04:00
componentTest("with minimum", {
template: "{{multi-select content=content minimum=1}}",
beforeEach() {
2018-06-15 11:03:24 -04:00
this.set("content", ["sam", "jeff", "neil"]);
},
2018-07-29 16:51:32 -04:00
async test(assert) {
await this.get("subject").expand();
2018-07-29 16:51:32 -04:00
assert.equal(
this.get("subject").validationMessage(),
"Select at least 1 item."
2018-06-15 11:03:24 -04:00
);
2018-07-29 16:51:32 -04:00
await this.get("subject").selectRowByValue("sam");
2018-07-29 16:51:32 -04:00
assert.equal(
this.get("subject")
.header()
.label(),
"sam"
);
}
});
2018-06-15 11:03:24 -04:00
componentTest("with minimumLabel", {
template:
'{{multi-select content=content minimum=1 minimumLabel="test.minimum"}}',
beforeEach() {
2018-06-15 11:03:24 -04:00
I18n.translations[I18n.locale].js.test = { minimum: "min %{count}" };
this.set("content", ["sam", "jeff", "neil"]);
},
2018-07-29 16:51:32 -04:00
async test(assert) {
await this.get("subject").expand();
2018-07-29 16:51:32 -04:00
assert.equal(this.get("subject").validationMessage(), "min 1");
2018-07-29 16:51:32 -04:00
await this.get("subject").selectRowByValue("jeff");
2018-07-29 16:51:32 -04:00
assert.equal(
this.get("subject")
.header()
.label(),
"jeff"
);
}
});
componentTest("with forceEscape", {
template: "{{multi-select content=content forceEscape=true}}",
beforeEach() {
this.set("content", ["<div>sam</div>"]);
},
async test(assert) {
await this.get("subject").expand();
const row = this.get("subject").rowByIndex(0);
assert.equal(
row
.el()
.find(".name")
.html()
.trim(),
"&lt;div&gt;sam&lt;/div&gt;"
);
await this.get("subject").fillInFilter("<div>jeff</div>");
await this.get("subject").keyboard("enter");
assert.equal(
this.get("subject")
.header()
.el()
.find(".name")
.html()
.trim(),
"&lt;div&gt;jeff&lt;/div&gt;"
);
}
});
componentTest("with forceEscape", {
template: "{{multi-select content=content forceEscape=false}}",
beforeEach() {
this.set("content", ["<div>sam</div>"]);
},
async test(assert) {
await this.get("subject").expand();
const row = this.get("subject").rowByIndex(0);
assert.equal(
row
.el()
.find(".name")
.html()
.trim(),
"<div>sam</div>"
);
await this.get("subject").fillInFilter("<div>jeff</div>");
await this.get("subject").keyboard("enter");
assert.equal(
this.get("subject")
.header()
.el()
.find(".name")
.html()
.trim(),
"<div>jeff</div>"
);
}
});