@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
82 lines (81 loc) • 4.52 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h } from "@stencil/core";
import { renderFunctionalComponentToSpecPage } from "../../../../utils/testing";
import NativeOptionListFc from "../NativeOptionList";
describe('NativeOptionListFc', () => {
it('should render and match snapshot', async () => {
const options = [{ label: 'Option 1', value: '1' }];
const page = await renderFunctionalComponentToSpecPage(() => (h("div", { id: "jest-test" }, h(NativeOptionListFc, { options: options }))));
expect(page.root).toMatchSnapshot();
});
it('should render with no options', async () => {
const page = await renderFunctionalComponentToSpecPage(() => h(NativeOptionListFc, { options: [] }));
expect(page.root).toBeNull();
});
it('should render with a single option', async () => {
var _a;
const options = [{ label: 'Option 1', value: '1' }];
const page = await renderFunctionalComponentToSpecPage(() => (h("div", { id: "jest-test" }, h(NativeOptionListFc, { options: options }))));
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelectorAll('option').length).toBe(1);
});
it('should render with multiple options', async () => {
var _a;
const options = [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
];
const page = await renderFunctionalComponentToSpecPage(() => (h("div", { id: "jest-test" }, h(NativeOptionListFc, { options: options }))));
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelectorAll('option').length).toBe(2);
});
it('should render with multiple options with selected value', async () => {
var _a, _b, _c;
const options = [
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
];
const page = await renderFunctionalComponentToSpecPage(() => (h("div", { id: "jest-test" }, h(NativeOptionListFc, { options: options, value: 2 }))));
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelectorAll('option').length).toBe(2);
expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.querySelectorAll('option')[0].hasAttribute('selected')).toBe(false);
expect((_c = page.root) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option')[1].hasAttribute('selected')).toBe(true);
});
it('should render with nested option groups', async () => {
var _a, _b;
const options = [
{
label: 'Group 1',
options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
],
},
];
const page = await renderFunctionalComponentToSpecPage(() => (h("div", { id: "jest-test" }, h(NativeOptionListFc, { options: options }))));
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelectorAll('optgroup').length).toBe(1);
expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.querySelectorAll('option').length).toBe(2);
});
it('should render with nested option groups with selected value', async () => {
var _a, _b, _c, _d;
const options = [
{
label: 'Group 1',
options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
],
},
];
const page = await renderFunctionalComponentToSpecPage(() => (h("div", { id: "jest-test" }, h(NativeOptionListFc, { options: options, value: "2" }))));
expect(page.root).toMatchSnapshot();
expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelectorAll('optgroup').length).toBe(1);
expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.querySelectorAll('option').length).toBe(2);
expect((_c = page.root) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option')[0].hasAttribute('selected')).toBe(false);
expect((_d = page.root) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[1].hasAttribute('selected')).toBe(true);
});
});
//# sourceMappingURL=snapshot.test.js.map