103 lines
2.0 KiB
JavaScript
103 lines
2.0 KiB
JavaScript
import selectKit from "helpers/select-kit-helper";
|
|
import componentTest from "helpers/component-test";
|
|
|
|
moduleForComponent("select-kit/combo-box", {
|
|
integration: true,
|
|
beforeEach() {
|
|
this.set("subject", selectKit());
|
|
}
|
|
});
|
|
|
|
const DEFAULT_CONTENT = [
|
|
{ id: 1, name: "foo" },
|
|
{ id: 2, name: "bar" },
|
|
{ id: 3, name: "baz" }
|
|
];
|
|
|
|
const DEFAULT_VALUE = 1;
|
|
|
|
const setDefaultState = (ctx, options) => {
|
|
const properties = Object.assign(
|
|
{
|
|
content: DEFAULT_CONTENT,
|
|
value: DEFAULT_VALUE
|
|
},
|
|
options || {}
|
|
);
|
|
ctx.setProperties(properties);
|
|
};
|
|
|
|
componentTest("options.clearable", {
|
|
template: `
|
|
{{combo-box
|
|
value=value
|
|
content=content
|
|
onChange=onChange
|
|
options=(hash clearable=clearable)
|
|
}}
|
|
`,
|
|
|
|
beforeEach() {
|
|
setDefaultState(this, {
|
|
clearable: true,
|
|
onChange: value => {
|
|
this.set("value", value);
|
|
}
|
|
});
|
|
},
|
|
|
|
async test(assert) {
|
|
const $header = this.subject.header();
|
|
|
|
assert.ok(
|
|
exists($header.el().find(".btn-clear")),
|
|
"it shows the clear button"
|
|
);
|
|
assert.equal($header.value(), DEFAULT_VALUE);
|
|
|
|
await click($header.el().find(".btn-clear"));
|
|
|
|
assert.notOk(
|
|
exists($header.el().find(".btn-clear")),
|
|
"it hides the clear button"
|
|
);
|
|
assert.equal($header.value(), null);
|
|
}
|
|
});
|
|
|
|
componentTest("options.{caretUpIcon,caretDownIcon}", {
|
|
template: `
|
|
{{combo-box
|
|
value=value
|
|
content=content
|
|
options=(hash
|
|
caretUpIcon=caretUpIcon
|
|
caretDownIcon=caretDownIcon
|
|
)
|
|
}}
|
|
`,
|
|
|
|
beforeEach() {
|
|
setDefaultState(this, {
|
|
caretUpIcon: "pencil-alt",
|
|
caretDownIcon: "trash-alt"
|
|
});
|
|
},
|
|
|
|
async test(assert) {
|
|
const $header = this.subject.header().el();
|
|
|
|
assert.ok(
|
|
exists($header.find(`.d-icon-${this.caretDownIcon}`)),
|
|
"it uses the icon provided"
|
|
);
|
|
|
|
await this.subject.expand();
|
|
|
|
assert.ok(
|
|
exists($header.find(`.d-icon-${this.caretUpIcon}`)),
|
|
"it uses the icon provided"
|
|
);
|
|
}
|
|
});
|