/*!
 * 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
