import { newSpecPage } from "@stencil/core/testing";
import { BpSdkCheckboxInput } from "./bp-sdk-checkbox-input";
describe('bp-sdk-checkbox-input', () => {
    it('renders', async () => {
        const page = await newSpecPage({
            html: '<bp-sdk-checkbox-input code="1" answer-id="answerId" label="some label"></bp-sdk-checkbox-input>',
            components: [BpSdkCheckboxInput],
        });
        await page.waitForChanges();
        const element = page.root.querySelector('input');
        expect(element.id).toEqual(`bp-sdk-checkbox-1-answerId-input`);
    });
    it('renders external component if defined', async () => {
        const whenDefinedMock = jest.spyOn(customElements, 'whenDefined').mockResolvedValueOnce({});
        const page = await newSpecPage({
            html: '<bp-sdk-checkbox-input></bp-sdk-checkbox-input>',
            components: [BpSdkCheckboxInput],
        });
        await page.waitForChanges();
        const element = page.root.querySelector('div');
        expect(element).toBeFalsy();
        whenDefinedMock.mockRestore();
    });
    it('displays errors', async () => {
        const page = await newSpecPage({
            html: '<bp-sdk-checkbox-input code="1" label="some label"></bp-sdk-checkbox-input>',
            components: [BpSdkCheckboxInput],
        });
        const instance = page.rootInstance;
        instance.errors = ['Error message'];
        instance.touched = true;
        instance.pristine = false;
        await page.waitForChanges();
        expect(page.root.querySelectorAll('bp-sdk-errors-container').length).toBe(1);
    });
    it('displays error text', async () => {
        const page = await newSpecPage({
            html: '<bp-sdk-checkbox-input code="1" label="some label"></bp-sdk-checkbox-input>',
            components: [BpSdkCheckboxInput],
        });
        const instance = page.rootInstance;
        instance.errorText = 'Error message';
        instance.touched = true;
        instance.pristine = false;
        await page.waitForChanges();
        expect(page.root.querySelectorAll('bp-sdk-errors-container').length).toBe(1);
    });
    it('hides error text if completed', async () => {
        const page = await newSpecPage({
            html: '<bp-sdk-checkbox-input code="1" label="some label"></bp-sdk-checkbox-input>',
            components: [BpSdkCheckboxInput],
        });
        const instance = page.rootInstance;
        instance.errorText = 'Error message';
        instance.touched = true;
        instance.pristine = false;
        instance.isCompleted = true;
        await page.waitForChanges();
        expect(page.root.querySelectorAll('bp-sdk-errors-container').length).toBe(0);
    });
    it('hides error text if completed', async () => {
        const page = await newSpecPage({
            html: '<bp-sdk-checkbox-input code="1" label="some label"></bp-sdk-checkbox-input>',
            components: [BpSdkCheckboxInput],
        });
        const instance = page.rootInstance;
        instance.errorText = 'Error message';
        instance.touched = true;
        instance.pristine = false;
        instance.isCompleted = true;
        await page.waitForChanges();
        expect(page.root.querySelectorAll('bp-sdk-errors-container').length).toBe(0);
    });
    it('handles null errors', async () => {
        const page = await newSpecPage({
            html: '<bp-sdk-checkbox-input code="1" label="some label"></bp-sdk-checkbox-input>',
            components: [BpSdkCheckboxInput],
        });
        const instance = page.rootInstance;
        instance.errors = null;
        instance.touched = true;
        instance.pristine = false;
        await page.waitForChanges();
        expect(page.root.querySelectorAll('bp-sdk-errors-container').length).toBe(0);
    });
    describe('when the component is marked as read only', () => {
        let page;
        let instance;
        beforeEach(async () => {
            page = await newSpecPage({
                html: '<bp-sdk-checkbox-input></bp-sdk-checkbox-input>',
                components: [BpSdkCheckboxInput],
            });
            instance = page.rootInstance;
            instance.isReadOnly = true;
        });
        describe('if the checkbox is checked', () => {
            const value = true;
            beforeEach(async () => {
                instance.value = value;
                await page.waitForChanges();
            });
            it('should render a read only value', () => {
                const element = page.body.querySelector('.read-only-value');
                expect(element.textContent).toEqual('Yes');
            });
            it('should not render an input', () => {
                expect(page.body.querySelectorAll('input').length).toEqual(0);
            });
        });
        describe('if the checkbox is not checked', () => {
            const value = false;
            beforeEach(async () => {
                instance.value = value;
                await page.waitForChanges();
            });
            it('should render a read only value', () => {
                const element = page.body.querySelector('.read-only-value');
                expect(element.textContent).toEqual('No');
            });
            it('should not render an input', () => {
                expect(page.body.querySelectorAll('input').length).toEqual(0);
            });
        });
    });
    describe('onChange', () => {
        it('displays emits check state', async () => {
            const page = await newSpecPage({
                html: '<bp-sdk-checkbox-input code="1" label="some label"></bp-sdk-checkbox-input>',
                components: [BpSdkCheckboxInput],
            });
            const instance = page.rootInstance;
            jest.spyOn(instance.valueUpdate, 'emit').mockImplementation(() => ({}));
            instance.onChange({
                target: {
                    checked: true,
                },
            });
            expect(instance.valueUpdate.emit).toHaveBeenCalledWith(true);
            expect(instance.valueUpdate.emit).toBeCalledTimes(1);
        });
    });
});
