learningcircuit--local-deep-research/tests/js/components/checkbox-handler.test.js

/**
 * Tests for components/checkbox_handler.js
 *
 * Tests the checkbox-hidden input fallback pattern that ensures
 * both checked and unchecked states are submitted in HTML forms.
 */

let handler;

beforeAll(async () => {
    await import('@js/components/checkbox_handler.js');
    handler = window.checkboxHandler;
});

describe('CheckboxHandler', () => {
    let form;

    beforeEach(() => {
        form = document.createElement('form');
        document.body.appendChild(form);
    });

    afterEach(() => {
        form.remove();
    });

    describe('setupCheckbox', () => {
        it('disables hidden input when checkbox is checked', () => {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = true;
            checkbox.setAttribute('data-hidden-fallback', 'hidden-1');

            const hidden = document.createElement('input');
            hidden.type = 'hidden';
            hidden.id = 'hidden-1';
            hidden.value = 'false';

            form.appendChild(checkbox);
            form.appendChild(hidden);

            handler.setupCheckbox(checkbox);
            expect(hidden.disabled).toBe(true);
        });

        it('enables hidden input when checkbox is unchecked', () => {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = false;
            checkbox.setAttribute('data-hidden-fallback', 'hidden-2');

            const hidden = document.createElement('input');
            hidden.type = 'hidden';
            hidden.id = 'hidden-2';
            hidden.value = 'false';

            form.appendChild(checkbox);
            form.appendChild(hidden);

            handler.setupCheckbox(checkbox);
            expect(hidden.disabled).toBe(false);
        });

        it('toggles hidden input on change event', () => {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = false;
            checkbox.setAttribute('data-hidden-fallback', 'hidden-3');

            const hidden = document.createElement('input');
            hidden.type = 'hidden';
            hidden.id = 'hidden-3';

            form.appendChild(checkbox);
            form.appendChild(hidden);

            handler.setupCheckbox(checkbox);
            expect(hidden.disabled).toBe(false);

            checkbox.checked = true;
            checkbox.dispatchEvent(new Event('change'));
            expect(hidden.disabled).toBe(true);

            checkbox.checked = false;
            checkbox.dispatchEvent(new Event('change'));
            expect(hidden.disabled).toBe(false);
        });
    });

    describe('cleanup', () => {
        it('removes event listener from checkbox', () => {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.setAttribute('data-hidden-fallback', 'hidden-4');

            const hidden = document.createElement('input');
            hidden.type = 'hidden';
            hidden.id = 'hidden-4';

            form.appendChild(checkbox);
            form.appendChild(hidden);

            handler.setupCheckbox(checkbox);
            expect(checkbox._checkboxHandlerCleanup).toBeTypeOf('function');

            handler.cleanup(checkbox);
            expect(checkbox._checkboxHandlerCleanup).toBeUndefined();
        });
    });

    describe('prepareFormSubmission', () => {
        it('syncs all checkbox-hidden pairs before submit', () => {
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = true;
            checkbox.setAttribute('data-hidden-fallback', 'hidden-5');

            const hidden = document.createElement('input');
            hidden.type = 'hidden';
            hidden.id = 'hidden-5';
            hidden.disabled = false;

            form.appendChild(checkbox);
            form.appendChild(hidden);

            handler.prepareFormSubmission(form);
            expect(hidden.disabled).toBe(true);
        });
    });
});