import { newSpecPage } from "@stencil/core/testing";
import { BpSdkTabGroup } from "./bp-sdk-tab-group";
describe('bp-sdk-tab-group', () => {
    describe('renders', () => {
        it('vanilla', async () => {
            const page = await newSpecPage({
                html: '<bp-sdk-tab-group></bp-sdk-tab-group>',
                components: [BpSdkTabGroup],
            });
            await page.waitForChanges();
            const element = page.root.querySelector('div');
            expect(element).toBeTruthy();
        });
        it('tabs', async () => {
            const page = await newSpecPage({
                html: '<bp-sdk-tab-group></bp-sdk-tab-group>',
                components: [BpSdkTabGroup],
            });
            const instance = page.rootInstance;
            instance.tabs = ['1', '2', '3'];
            await page.waitForChanges();
            expect(page.root.querySelectorAll('li[role="tab"]').length).toBe(3);
            expect(page.root.querySelectorAll('li[role="tab"][aria-selected]').length).toBe(1);
            expect(page.root.querySelectorAll('div[role="tabpanel"]').length).toBe(3);
            expect(page.root.querySelectorAll('div[role="tabpanel"][aria-hidden]').length).toBe(2);
        });
        it('renders external component if defined', async () => {
            const whenDefinedMock = jest.spyOn(customElements, 'whenDefined').mockResolvedValueOnce({});
            const page = await newSpecPage({
                html: '<bp-sdk-tab-group></bp-sdk-tab-group>',
                components: [BpSdkTabGroup],
            });
            const instance = page.rootInstance;
            instance.tabs = ['1', '2', '3'];
            await page.waitForChanges();
            const element = page.root.querySelector('div');
            expect(element).toBeFalsy();
            whenDefinedMock.mockRestore();
        });
    });
    describe('onTabSelect', () => {
        it('makes expected change', async () => {
            const page = await newSpecPage({
                html: '<bp-sdk-tab-group></bp-sdk-tab-group>',
                components: [BpSdkTabGroup],
            });
            await page.waitForChanges();
            const instance = page.rootInstance;
            jest.spyOn(instance, 'updateIndex').mockImplementation(() => { });
            expect(instance.groupIndex).toBe(0);
            instance.onTabSelect(5)();
            expect(instance.updateIndex).toBeCalledWith(5);
        });
    });
    describe('updateIndex', () => {
        it('makes expected change', async () => {
            const page = await newSpecPage({
                html: '<bp-sdk-tab-group></bp-sdk-tab-group>',
                components: [BpSdkTabGroup],
            });
            await page.waitForChanges();
            const instance = page.rootInstance;
            instance.tabs = ['1', '2'];
            instance.updateIndex(-1);
            expect(instance.groupIndex).toBe(0);
            instance.updateIndex(1);
            expect(instance.groupIndex).toBe(1);
            instance.updateIndex(0);
            expect(instance.groupIndex).toBe(0);
            instance.updateIndex(2);
            expect(instance.groupIndex).toBe(1);
        });
    });
    describe('onKeyboard', () => {
        it('ArrowLeft', async () => {
            const page = await newSpecPage({
                html: '<bp-sdk-tab-group></bp-sdk-tab-group>',
                components: [BpSdkTabGroup],
            });
            await page.waitForChanges();
            const instance = page.rootInstance;
            instance.groupIndex = 2;
            jest.spyOn(instance, 'updateIndex').mockImplementation(() => { });
            instance.onKeyboard(new KeyboardEvent('up', {
                key: 'ArrowLeft',
            }));
            expect(instance.updateIndex).toBeCalledTimes(1);
            expect(instance.updateIndex).toBeCalledWith(1);
        });
        it('ArrowRight', async () => {
            const page = await newSpecPage({
                html: '<bp-sdk-tab-group></bp-sdk-tab-group>',
                components: [BpSdkTabGroup],
            });
            await page.waitForChanges();
            const instance = page.rootInstance;
            instance.groupIndex = 2;
            jest.spyOn(instance, 'updateIndex').mockImplementation(() => { });
            instance.onKeyboard(new KeyboardEvent('up', {
                key: 'ArrowRight',
            }));
            expect(instance.updateIndex).toBeCalledTimes(1);
            expect(instance.updateIndex).toBeCalledWith(3);
        });
        it('other', async () => {
            const page = await newSpecPage({
                html: '<bp-sdk-tab-group></bp-sdk-tab-group>',
                components: [BpSdkTabGroup],
            });
            await page.waitForChanges();
            const instance = page.rootInstance;
            instance.groupIndex = 2;
            jest.spyOn(instance, 'updateIndex').mockImplementation(() => { });
            instance.onKeyboard(new KeyboardEvent('up', {
                key: 'ArrowUp',
            }));
            expect(instance.updateIndex).toBeCalledTimes(0);
        });
    });
});
