import { newSpecPage } from "@stencil/core/testing";
import { BpSdkMonthYearInput } from "./bp-sdk-month-year-input";
const setupPage = async () => {
    return await newSpecPage({
        html: '<bp-sdk-month-year-input></bp-sdk-month-year-input>',
        components: [BpSdkMonthYearInput],
    });
};
const setupInstance = (page) => {
    return page.rootInstance;
};
describe('bp-sdk-month-year-input', () => {
    describe('external renders', () => {
        it('renders external component if defined', async () => {
            const whenDefinedMock = jest.spyOn(customElements, 'whenDefined').mockResolvedValueOnce({});
            const page = await setupPage();
            await page.waitForChanges();
            expect(page.root.querySelector('bp-sdk-external-month-year-input')).toBeTruthy();
            whenDefinedMock.mockRestore();
        });
    });
    describe('renders', () => {
        let page;
        let element;
        beforeEach(async () => {
            page = await setupPage();
            element = page.rootInstance;
        });
        it('renders', async () => {
            element.value = '12/2023';
            element.labelledBy = 'label';
            element.labelId = 'aria';
            element.answerId = 'answerId';
            element.questionId = 'questionId';
            element.required = true;
            await page.waitForChanges();
            const input = page.root.querySelector('input');
            expect(input.value).toEqual('12/2023');
            expect(input.getAttribute('aria-labelledby')).toEqual('label aria');
            expect(input.minLength).toEqual(7);
            expect(input.maxLength).toEqual(7);
            expect(input.type).toEqual('text');
        });
        it('has no label if label prop is null', async () => {
            element.label = null;
            await page.waitForChanges();
            const label = page.root.querySelector('label');
            expect(label).toBeNull();
        });
        it('has a label if label prop is defined', async () => {
            element.label = 'I am a label';
            await page.waitForChanges();
            const label = page.root.querySelector('label');
            expect(label).toBeDefined();
        });
        it.each([
            ['placeholder', null, 'placeholder'],
            ['placeholder', 'label', null],
            [null, 'label', null],
            [null, null, null],
        ])('when the placeholder is "%s" and the label is "%s", the aria-label should be "%s"', async (placeholder, label, expectedAriaLabel) => {
            element.label = label;
            element.placeholder = placeholder;
            await page.waitForChanges();
            const input = page.root.querySelector('input');
            const ariaLabel = input.getAttribute('aria-label');
            expect(ariaLabel).toEqual(expectedAriaLabel);
        });
        describe('when the component is marked as read only', () => {
            const value = '12/2023';
            beforeEach(async () => {
                element.isReadOnly = true;
                element.value = '12/2023';
                await page.waitForChanges();
            });
            it('should render a read only value', () => {
                const element = page.body.querySelector('.read-only-value');
                expect(element.textContent).toEqual(value);
            });
            it('should not render an input', () => {
                expect(page.body.querySelectorAll('input').length).toEqual(0);
            });
        });
    });
    describe('event handling', () => {
        let page;
        beforeEach(async () => {
            page = await newSpecPage({
                html: '<bp-sdk-month-year-input></bp-sdk-month-year-input>',
                components: [BpSdkMonthYearInput],
            });
        });
        it('emits on change', async () => {
            const inputSpy = jest.fn();
            page.win.addEventListener('valueUpdate', inputSpy);
            await page.waitForChanges();
            const input = page.root.querySelector('input');
            input.value = '12/2022';
            input.dispatchEvent(new Event('change'));
            await page.waitForChanges();
            let ev = inputSpy.mock.calls[inputSpy.mock.calls.length - 1][0].detail;
            expect(ev).toBe('12/2022');
        });
        it('emits on paste', async () => {
            const inputSpy = jest.fn();
            page.win.addEventListener('valueUpdate', inputSpy);
            await page.waitForChanges();
            const input = page.root.querySelector('input');
            input.value = '12/2022';
            input.dispatchEvent(new Event('paste'));
            await page.waitForChanges();
            let ev = inputSpy.mock.calls[inputSpy.mock.calls.length - 1][0].detail;
            expect(ev).toBe('12/2022');
        });
        it('emits on input', async () => {
            const inputSpy = jest.fn();
            page.win.addEventListener('valueUpdate', inputSpy);
            await page.waitForChanges();
            const input = page.root.querySelector('input');
            input.value = '12/2022';
            input.dispatchEvent(new Event('input'));
            await page.waitForChanges();
            let ev = inputSpy.mock.calls[inputSpy.mock.calls.length - 1][0].detail;
            expect(ev).toBe('12/2022');
        });
    });
});
