select-pure
Version:
Custom JavaScript <select> component. Easy-to-use, accessible, mobile friendly and super efficient
82 lines • 3.4 kB
JavaScript
import "./../Select";
import { LitElement } from "lit";
// import { OptionPureElement } from "./../../models";
// import { KEYS } from "./../constants";
describe("Select component", () => {
beforeAll(() => {
class MockedOption extends LitElement {
constructor() {
super(...arguments);
this.setOnSelectCallback = jest.fn();
this.getOption = jest.fn(() => ({
// eslint-disable-next-line
value: this.getAttribute("value"),
// eslint-disable-next-line
label: this.getAttribute("label"),
select: jest.fn(),
unselect: jest.fn(),
}));
}
}
customElements.define("option-pure", MockedOption);
});
describe("render", () => {
it("renders native select", async () => {
var _a;
document.body.innerHTML = `
<select-pure>
<option-pure value='mocked-UA' label='mocked-Ukraine'></option-pure>
<option-pure value='mocked-PL' label='mocked-Poland'></option-pure>
</select-pure>
`;
const select = document.querySelector("select-pure");
await select.updateComplete;
select.connectedCallback();
await select.updateComplete;
const options = (_a = select.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("select option");
expect(options).toHaveLength(2);
// @ts-ignore
expect(options[0].getAttribute("value")).toEqual("mocked-UA");
// @ts-ignore
expect(options[0].getAttribute("selected")).toEqual("");
// @ts-ignore
expect(options[1].getAttribute("value")).toEqual("mocked-PL");
// @ts-ignore
expect(options[1].getAttribute("selected")).toEqual(null);
});
it("renders custom select", async () => {
var _a, _b;
document.body.innerHTML = `
<select-pure>
<option-pure value='mocked-PL' label='mocked-Poland'></option-pure>
<option-pure value='mocked-UA' label='mocked-Ukraine'></option-pure>
</select-pure>
`;
const select = document.querySelector("select-pure");
await select.updateComplete;
select.connectedCallback();
await select.updateComplete;
const label = (_a = select.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".select .label");
expect(label === null || label === void 0 ? void 0 : label.getAttribute("class")).toEqual("label");
const slot = (_b = select.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(".dropdown slot");
expect(slot).toBeTruthy();
});
// renders selected option when selected is provided
// renders disabled
});
describe("select", () => {
// selects an option on click
// updates native select
});
describe("multiselect", () => {
// renders a multiselect
// ability to select multiple options
// ability to remove selected options
});
describe("API methods", () => {
// disables
// enables
// selects an option
});
});
//# sourceMappingURL=Select.spec.js.map