test(checkbox): add tests

Author: Kiarokh

src/components/checkbox/checkbox.spec.ts

@@ -0,0 +1,126 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { Checkbox } from './checkbox';
+
+describe('limel-checkbox (aria semantics)', () => {
+    async function setup(props: Partial<Checkbox> = {}) {
+        const page = await newSpecPage({
+            components: [Checkbox],
+            html: `<limel-checkbox></limel-checkbox>`,
+        });
+        const host = page.root as HTMLLimelCheckboxElement;
+        Object.assign(host, props);
+        await page.waitForChanges();
+        const input: HTMLInputElement | null = host.shadowRoot?.querySelector(
+            'input[type="checkbox"]'
+        );
+        return { page, host, input };
+    }
+
+    it('sets aria-checked="false" when unchecked', async () => {
+        const { input } = await setup({ checked: false });
+        expect(input?.getAttribute('aria-checked')).toBe('false');
+    });
+
+    it('sets aria-checked="true" when checked', async () => {
+        const { host, page } = await setup({ checked: false });
+        host.checked = true;
+        await page.waitForChanges();
+        const input = host.shadowRoot?.querySelector('input[type="checkbox"]');
+        expect(input?.getAttribute('aria-checked')).toBe('true');
+    });
+
+    it('sets aria-checked="mixed" and checked property true when indeterminate', async () => {
+        const { host, page } = await setup({ checked: false });
+        host.indeterminate = true;
+        await page.waitForChanges();
+        const input = host.shadowRoot?.querySelector(
+            'input[type="checkbox"]'
+        ) as HTMLInputElement;
+        expect(input.getAttribute('aria-checked')).toBe('mixed');
+        // Visual hook: component forces input.checked when indeterminate for CSS
+        expect(input.checked).toBe(true);
+        expect(input.indeterminate).toBe(true);
+    });
+
+    it('returns to aria-checked="false" when indeterminate cleared and still unchecked', async () => {
+        const { host, page } = await setup({
+            checked: false,
+            indeterminate: true,
+        });
+        host.indeterminate = false;
+        await page.waitForChanges();
+        const input = host.shadowRoot?.querySelector('input[type="checkbox"]');
+        expect(input?.getAttribute('aria-checked')).toBe('false');
+    });
+
+    it('emits change event with correct detail when toggled', async () => {
+        const { host, input, page } = await setup({ checked: false });
+        const handler = jest.fn();
+        host.addEventListener('change', (e: CustomEvent<boolean>) =>
+            handler(e.detail)
+        );
+        (input as HTMLInputElement).checked = true;
+        input?.dispatchEvent(
+            new Event('change', { bubbles: true, composed: true })
+        );
+        await page.waitForChanges();
+        expect(handler).toHaveBeenCalledTimes(1);
+        expect(handler).toHaveBeenCalledWith(true);
+    });
+
+    it('renders dynamic-label instead of native input when readonly', async () => {
+        const { host } = await setup({ readonly: true, checked: true });
+        const input = host.shadowRoot?.querySelector('input[type="checkbox"]');
+        const dyn = host.shadowRoot?.querySelector('limel-dynamic-label');
+        expect(input).toBeNull();
+        expect(dyn).not.toBeNull();
+    });
+
+    it('does not emit change when disabled', async () => {
+        const { host, input } = await setup({ disabled: true, checked: false });
+        const handler = jest.fn();
+        host.addEventListener('change', (e: CustomEvent<boolean>) =>
+            handler(e.detail)
+        );
+        // Even if we simulate a change event, component logic should still emit
+        // because we currently don't guard in handler, but native input wouldn't fire in real UI.
+        // This test documents current behavior; adjust if handler changes.
+        (input as HTMLInputElement).checked = true;
+        input?.dispatchEvent(new Event('change'));
+        expect(handler).toHaveBeenCalledWith(true);
+    });
+
+    it('marks invalid when required and unchecked after interaction', async () => {
+        const { host, input, page } = await setup({
+            required: true,
+            checked: false,
+        });
+        // Simulate user interaction (toggle true then false) to set modified
+        (input as HTMLInputElement).checked = true;
+        input?.dispatchEvent(new Event('change', { bubbles: true }));
+        await page.waitForChanges();
+        (input as HTMLInputElement).checked = false;
+        input?.dispatchEvent(new Event('change', { bubbles: true }));
+        await page.waitForChanges();
+        // invalid state applied to wrapper div
+        const wrapper = host.shadowRoot?.querySelector('.checkbox');
+        expect(wrapper?.classList.contains('invalid')).toBe(true);
+    });
+
+    it('clears indeterminate state properties when toggled from mixed to checked', async () => {
+        const { host, page } = await setup({
+            indeterminate: true,
+            checked: false,
+        });
+        // Simulate consumer changing to checked true and indeterminate false
+        host.checked = true;
+        host.indeterminate = false;
+        await page.waitForChanges();
+        const input = host.shadowRoot?.querySelector(
+            'input[type="checkbox"]'
+        ) as HTMLInputElement;
+        expect(input.indeterminate).toBe(false);
+        expect(input.checked).toBe(true);
+        expect(input.getAttribute('aria-checked')).toBe('true');
+    });
+});