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

302 lines
6.2 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import componentTest from "helpers/component-test";
moduleForComponent("multi-select", {
integration: true,
beforeEach: function() {
this.set("subject", selectKit());
}
});
componentTest("with objects and values", {
template: "{{multi-select content=items values=values}}",
beforeEach() {
this.set("items", [{ id: 1, name: "hello" }, { id: 2, name: "world" }]);
this.set("values", [1, 2]);
},
test(assert) {
andThen(() => {
assert.equal(
this.get("subject")
.header()
.value(),
"1,2"
);
});
}
});
componentTest("with title", {
template: '{{multi-select title=(i18n "test.title")}}',
beforeEach() {
I18n.translations[I18n.locale].js.test = { title: "My title" };
},
test(assert) {
andThen(() =>
assert.equal(
selectKit()
.header()
.title(),
"My title"
)
);
}
});
componentTest("interactions", {
template: "{{multi-select none=none content=items values=values}}",
beforeEach() {
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]);
},
test(assert) {
this.get("subject").expand();
andThen(() => {
assert.equal(
this.get("subject")
.highlightedRow()
.name(),
"robin",
"it highlights the first content row"
);
});
this.set("none", "test.none");
andThen(() => {
assert.ok(
this.get("subject")
.noneRow()
.exists()
);
assert.equal(
this.get("subject")
.highlightedRow()
.name(),
"robin",
"it highlights the first content row"
);
});
this.get("subject").selectRowByValue(3);
this.get("subject").expand();
andThen(() => {
assert.equal(
this.get("subject")
.highlightedRow()
.name(),
"none",
"it highlights none row if no content"
);
});
this.get("subject").fillInFilter("joffrey");
andThen(() => {
assert.equal(
this.get("subject")
.highlightedRow()
.name(),
"joffrey",
"it highlights create row when filling filter"
);
});
this.get("subject")
.keyboard()
.enter();
andThen(() => {
assert.equal(
this.get("subject")
.highlightedRow()
.name(),
"none",
"it highlights none row after creating content and no content left"
);
});
this.get("subject")
.keyboard()
.backspace();
andThen(() => {
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"
);
});
this.get("subject")
.keyboard()
.backspace();
andThen(() => {
const $lastSelectedName = this.get("subject")
.header()
.el()
.find(".selected-name")
.last();
assert.equal(
$lastSelectedName.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"
);
});
this.get("subject")
.keyboard()
.selectAll();
andThen(() => {
const $highlightedSelectedNames = this.get("subject")
.header()
.el()
.find(".selected-name.is-highlighted");
assert.equal(
$highlightedSelectedNames.length,
3,
"it highlights each selected name"
);
});
this.get("subject")
.keyboard()
.backspace();
andThen(() => {
const $selectedNames = this.get("subject")
.header()
.el()
.find(".selected-name");
assert.equal($selectedNames.length, 0, "it removed all selected content");
});
andThen(() => {
assert.ok(this.get("subject").isFocused());
assert.ok(this.get("subject").isExpanded());
});
this.get("subject")
.keyboard()
.escape();
andThen(() => {
assert.ok(this.get("subject").isFocused());
assert.notOk(this.get("subject").isExpanded());
});
this.get("subject")
.keyboard()
.escape();
andThen(() => {
assert.notOk(this.get("subject").isFocused());
assert.notOk(this.get("subject").isExpanded());
});
}
});
componentTest("with limitMatches", {
template: "{{multi-select content=content limitMatches=2}}",
beforeEach() {
this.set("content", ["sam", "jeff", "neil"]);
},
test(assert) {
this.get("subject").expand();
andThen(() =>
assert.equal(
this.get("subject")
.el()
.find(".select-kit-row").length,
2
)
);
}
});
componentTest("with minimum", {
template: "{{multi-select content=content minimum=1}}",
beforeEach() {
this.set("content", ["sam", "jeff", "neil"]);
},
test(assert) {
this.get("subject").expand();
andThen(() =>
assert.equal(
this.get("subject").validationMessage(),
"Select at least 1 item."
)
);
this.get("subject").selectRowByValue("sam");
andThen(() => {
assert.equal(
this.get("subject")
.header()
.label(),
"sam"
);
});
}
});
componentTest("with minimumLabel", {
template:
'{{multi-select content=content minimum=1 minimumLabel="test.minimum"}}',
beforeEach() {
I18n.translations[I18n.locale].js.test = { minimum: "min %{count}" };
this.set("content", ["sam", "jeff", "neil"]);
},
test(assert) {
this.get("subject").expand();
andThen(() =>
assert.equal(this.get("subject").validationMessage(), "min 1")
);
this.get("subject").selectRowByValue("jeff");
andThen(() => {
assert.equal(
this.get("subject")
.header()
.label(),
"jeff"
);
});
}
});