import { newSpecPage } from "@stencil/core/testing";
import { BpSdkRadioInput } from "./bp-sdk-radio-input";
describe('bp-sdk-radio-input', () => {
    const choices = [
        {
            id: '1',
            value: 'one',
        },
        {
            id: '2',
            value: 'two',
        },
    ];
    let page;
    let instance;
    describe('rendering', () => {
        beforeEach(async () => {
            page = await createSpecPage();
            instance = page.rootInstance;
            instance.choices = choices;
            await page.waitForChanges();
        });
        it('renders the correct choiceId', () => {
            expect(instance._choiceId).toEqual('1');
        });
        it('renders the correct selection', () => {
            const nodes = page.body.querySelectorAll('input[type="radio"]');
            expect(nodes[0].checked).toEqual(true);
            expect(nodes[1].checked).toEqual(false);
        });
    });
    it('renders', async () => {
        page = await createSpecPage();
        instance = page.rootInstance;
        instance.choices = choices;
        await page.waitForChanges();
        expect(instance._choiceId).toEqual('1');
        expect(instance._choiceId).toEqual('1');
        const nodes = page.body.querySelectorAll('input[type="radio"]');
        expect(nodes[0].checked).toEqual(true);
        expect(nodes[1].checked).toEqual(false);
    });
    it('renders external component if defined', async () => {
        const whenDefinedMock = jest.spyOn(customElements, 'whenDefined').mockResolvedValueOnce({});
        page = await newSpecPage({
            html: '<bp-sdk-radio-input></bp-sdk-radio-input>',
            components: [BpSdkRadioInput],
        });
        await page.waitForChanges();
        const element = page.root.querySelector('div');
        expect(element).toBeFalsy();
        whenDefinedMock.mockRestore();
    });
    it('sets classes', async () => {
        page = await createSpecPage();
        instance = page.rootInstance;
        instance.choices = choices;
        instance.touched = true;
        await page.waitForChanges();
        const element = page.root.querySelector('label');
        expect(element.className).toEqual('bp-sdk-radio__label bp-sdk-touched');
    });
    it('displays errors', async () => {
        page = await createSpecPage();
        instance = page.rootInstance;
        instance.choices = choices;
        instance.touched = true;
        instance.pristine = false;
        instance.errors = ['uh oh'];
        await page.waitForChanges();
        expect(page.root.querySelectorAll('bp-sdk-errors-container').length).toBe(1);
    });
    it('displays errors if is completed', async () => {
        page = await createSpecPage();
        instance = page.rootInstance;
        instance.choices = choices;
        instance.touched = true;
        instance.pristine = false;
        instance.errors = ['uh oh'];
        instance.isCompleted = true;
        await page.waitForChanges();
        expect(page.root.querySelectorAll('bp-sdk-errors-container').length).toBe(1);
    });
    it('displays error text', async () => {
        page = await createSpecPage();
        instance = page.rootInstance;
        instance.choices = choices;
        instance.touched = true;
        instance.pristine = false;
        instance.errorText = 'uh oh';
        await page.waitForChanges();
        expect(page.root.querySelectorAll('bp-sdk-errors-container').length).toBe(1);
    });
    it('hides error text if is completed', async () => {
        page = await createSpecPage();
        instance = page.rootInstance;
        instance.choices = choices;
        instance.touched = true;
        instance.pristine = false;
        instance.errorText = 'uh oh';
        instance.isCompleted = true;
        await page.waitForChanges();
        expect(page.root.querySelectorAll('bp-sdk-errors-container').length).toBe(0);
    });
    it('displays ignores null errors', async () => {
        page = await createSpecPage();
        instance = page.rootInstance;
        instance.choices = choices;
        instance.touched = true;
        instance.pristine = false;
        instance.errors = null;
        await page.waitForChanges();
        expect(page.root.querySelectorAll('bp-sdk-errors-container').length).toBe(0);
    });
    describe('when the component is marked as read only', () => {
        beforeEach(async () => {
            page = await createSpecPage();
            instance = page.rootInstance;
            instance.isReadOnly = true;
            instance.choices = choices;
            instance.choiceId = choices[0].id;
            await page.waitForChanges();
        });
        it('should render a read only value', () => {
            const element = page.body.querySelector('.read-only-value');
            expect(element.textContent).toEqual(choices[0].value);
        });
        it('should not render an input', () => {
            expect(page.body.querySelectorAll('input').length).toEqual(0);
        });
    });
    describe('when the value changes', () => {
        const eventSpy = jest.fn();
        beforeEach(async () => {
            page = await createSpecPage();
            instance = page.rootInstance;
            instance.choices = [{ id: '1', value: '1' }, { id: '2', value: '2' }];
            instance.labelledBy = 'label';
            await page.waitForChanges();
            page.win.addEventListener('valueUpdate', eventSpy);
            // Manually select node and trigger change event
            const node = page.root.querySelector('input[value="2"]');
            node.checked = true;
            node.dispatchEvent(new Event('change'));
            await page.waitForChanges();
        });
        it('should emit an event', () => {
            expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
                detail: '2',
            }));
        });
    });
});
async function createSpecPage() {
    return await newSpecPage({
        html: '<bp-sdk-radio-input code="1" choice="1" choice_id="1"></bp-sdk-radio-input>',
        components: [BpSdkRadioInput],
    });
}
