select-pure
Version:
Custom JavaScript <select> component. Easy-to-use, accessible, mobile friendly and super efficient
133 lines • 8.49 kB
JavaScript
import "./../Option";
import { KEYS } from "./../../constants";
describe("Option component", () => {
describe("render", () => {
it("renders option", async () => {
var _a, _b, _c, _d, _e, _f, _g;
document.body.innerHTML = "<option-pure value='UA'>Ukraine</option-pure>";
const option = document.body.querySelector("option-pure");
await option.updateComplete;
expect((_c = (_b = (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".option")) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.trim()).toEqual("Ukraine");
expect((_e = (_d = option.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector(".option")) === null || _e === void 0 ? void 0 : _e.getAttribute("class")).toEqual("option");
expect((_g = (_f = option.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector(".option")) === null || _g === void 0 ? void 0 : _g.getAttribute("tabindex")).toEqual("0");
});
it("renders with label as an attribute", async () => {
var _a, _b, _c, _d, _e;
document.body.innerHTML = "<option-pure value='PL' label='Poland'></option-pure>";
const option = document.body.querySelector("option-pure");
await option.updateComplete;
expect((_c = (_b = (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".option")) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.trim()).toEqual("Poland");
expect((_e = (_d = option.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector(".option")) === null || _e === void 0 ? void 0 : _e.getAttribute("class")).toEqual("option");
});
it("renders disabled", async () => {
var _a, _b, _c, _d, _e;
document.body.innerHTML = "<option-pure value='PL' label='Poland' disabled></option-pure>";
const option = document.body.querySelector("option-pure");
const mockedOnSelect = jest.fn();
option.setOnSelectCallback(mockedOnSelect);
await option.updateComplete;
expect((_b = (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".option")) === null || _b === void 0 ? void 0 : _b.getAttribute("class")).toEqual("option disabled");
expect((_d = (_c = option.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(".option")) === null || _d === void 0 ? void 0 : _d.getAttribute("tabindex")).toEqual(null);
const optionDiv = (_e = option.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector(".option");
optionDiv === null || optionDiv === void 0 ? void 0 : optionDiv.dispatchEvent(new Event("click"));
expect(mockedOnSelect).not.toHaveBeenCalled();
});
it("renders selected", async () => {
var _a, _b;
document.body.innerHTML = "<option-pure value='PL' label='Poland' disabled selected></option-pure>";
const option = document.body.querySelector("option-pure");
const mockedOnSelect = jest.fn();
option.setOnSelectCallback(mockedOnSelect);
await option.updateComplete;
expect((_b = (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".option")) === null || _b === void 0 ? void 0 : _b.getAttribute("class")).toEqual("option selected disabled");
});
});
describe("keyboard interactions", () => {
it("sellects by pressing enter", async () => {
var _a;
document.body.innerHTML = "<option-pure value='UA' label='Ukraine'></option-pure>";
const option = document.body.querySelector("option-pure");
const mockedOnSelect = jest.fn();
option.setOnSelectCallback(mockedOnSelect);
await option.updateComplete;
const optionDiv = (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".option");
expect(mockedOnSelect).not.toHaveBeenCalled();
optionDiv === null || optionDiv === void 0 ? void 0 : optionDiv.dispatchEvent(new KeyboardEvent("keydown", { key: KEYS.ENTER }));
expect(mockedOnSelect).toHaveBeenCalledTimes(1);
expect(mockedOnSelect).toHaveBeenCalledWith("UA");
});
});
describe("callbacks", () => {
it("fires onSelect callback", async () => {
var _a;
document.body.innerHTML = "<option-pure value='PL' label='Poland'></option-pure>";
const option = document.body.querySelector("option-pure");
const mockedOnSelect = jest.fn();
option.setOnSelectCallback(mockedOnSelect);
await option.updateComplete;
const optionDiv = (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".option");
optionDiv === null || optionDiv === void 0 ? void 0 : optionDiv.dispatchEvent(new Event("click"));
expect(mockedOnSelect).toHaveBeenCalledTimes(1);
expect(mockedOnSelect).toHaveBeenCalledWith("PL");
});
it("fires onReady callback", async () => {
document.body.innerHTML = "<option-pure value='PL'>Poland</option-pure>";
const option = document.body.querySelector("option-pure");
const mockedOnReady = jest.fn();
// eslint-disable-next-line no-magic-numbers
option.setOnReadyCallback(mockedOnReady, 177);
await option.updateComplete;
// :(
option.connectedCallback();
expect(mockedOnReady).toHaveBeenCalledTimes(1);
expect(mockedOnReady.mock.calls).toMatchSnapshot();
});
it("fires onReady callback with selected, disabled, hidden attributes", async () => {
document.body.innerHTML = "<option-pure value='PL' selected disabled hidden>Poland</option-pure>";
const option = document.body.querySelector("option-pure");
const mockedOnReady = jest.fn();
// eslint-disable-next-line no-magic-numbers
option.setOnReadyCallback(mockedOnReady, 177);
await option.updateComplete;
// :(
option.connectedCallback();
expect(mockedOnReady).toHaveBeenCalledTimes(1);
expect(mockedOnReady.mock.calls).toMatchSnapshot();
});
});
describe("public methods", () => {
it("selects", async () => {
var _a, _b;
document.body.innerHTML = "<option-pure value='PL'>Poland</option-pure>";
const option = document.body.querySelector("option-pure");
option.select();
await option.updateComplete;
expect((_b = (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".option")) === null || _b === void 0 ? void 0 : _b.getAttribute("class")).toEqual("option selected");
expect(option.getOption()).toMatchSnapshot();
expect(document.body.innerHTML).toMatchSnapshot();
});
it("unselects", async () => {
var _a, _b;
document.body.innerHTML = "<option-pure value='PL'>Poland</option-pure>";
const option = document.body.querySelector("option-pure");
option.select();
await option.updateComplete;
option.unselect();
await option.updateComplete;
expect((_b = (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".option")) === null || _b === void 0 ? void 0 : _b.getAttribute("class")).toEqual("option");
expect(option.getOption()).toMatchSnapshot();
expect(document.body.innerHTML).toMatchSnapshot();
});
});
it("sets default value to empty string if not provided", () => {
document.body.innerHTML = "<option-pure>Poland</option-pure>";
const option = document.body.querySelector("option-pure");
expect(option.getOption()).toMatchSnapshot();
});
it("sets default value to empty string if it's an empty string attribute", () => {
document.body.innerHTML = "<option-pure label=''></option-pure>";
const option = document.body.querySelector("option-pure");
expect(option.getOption()).toMatchSnapshot();
});
});
//# sourceMappingURL=Option.spec.js.map