mirror of
https://github.com/hanzoai/forum.git
synced 2026-09-30 21:51:19 +00:00
Joffrey JAFFEUXandGitHub
f603d18f00
`<DSelect />` is a wrapper similar to our existing `<DButton />` over the html element `<select>`. The code is ported from form kit which is now directly using `<DSelect />`. Note this component has also been used in edit topic timer modal.
This component is recommended for a small list of text items (no icons, no rich formatting...).
Usage:
```gjs
<DSelect class="my-select" @onChange={{this.handleChange}} as |select|>
<select.Option @value="foo" class="my-favorite-option">Foo</select.Option>
<select.Option @value="bar">Bar</select.Option>
</DSelect>
```
This commit comes with a set of assertions:
```gjs
import dselect from "discourse/tests/helpers/d-select-helper";
import { select } from "@ember/test-helpers";
assert
.dselect(".my-select")
.hasOption({ value: "bar", label: "Bar" })
.hasOption({ value: "foo", label: "Foo" })
.hasNoOption("baz");
await select(".my-select", "foo");
assert.dselect(".my-select").hasSelectedOption({value: "foo", label: "Foo"});
```
61 lines
1.5 KiB
JavaScript
61 lines
1.5 KiB
JavaScript
import { find } from "@ember/test-helpers";
|
|
import QUnit from "qunit";
|
|
|
|
class DSelect {
|
|
constructor(selector, context) {
|
|
this.context = context;
|
|
if (selector instanceof HTMLElement) {
|
|
this.element = selector;
|
|
} else {
|
|
this.element = find(selector);
|
|
}
|
|
}
|
|
|
|
hasOption({ value, label }, assertionMessage) {
|
|
const option = this.element.querySelector(
|
|
`.d-select__option[value="${value}"]`
|
|
);
|
|
|
|
this.context.dom(option).exists(assertionMessage);
|
|
this.context.dom(option).hasText(label, assertionMessage);
|
|
|
|
return this;
|
|
}
|
|
|
|
hasNoOption(value, assertionMessage) {
|
|
const option = this.element.querySelector(
|
|
`.d-select__option[value="${value}"]`
|
|
);
|
|
|
|
this.context.dom(option).doesNotExist(assertionMessage);
|
|
|
|
return this;
|
|
}
|
|
|
|
hasSelectedOption({ value, label }, assertionMessage) {
|
|
this.context
|
|
.dom(this.element.options[this.element.selectedIndex])
|
|
.hasText(label, assertionMessage);
|
|
|
|
this.context.dom(this.element).hasValue(value, assertionMessage);
|
|
|
|
return this;
|
|
}
|
|
|
|
hasNoSelectedOption({ value, label }, assertionMessage) {
|
|
this.context
|
|
.dom(this.element.options[this.element.selectedIndex])
|
|
.hasNoText(label, assertionMessage);
|
|
|
|
this.context.dom(this.element).hasNoValue(value, assertionMessage);
|
|
|
|
return this;
|
|
}
|
|
}
|
|
|
|
export function setupDSelectAssertions() {
|
|
QUnit.assert.dselect = function (selector = ".d-select") {
|
|
return new DSelect(selector, this);
|
|
};
|
|
}
|