import { newSpecPage } from "@stencil/core/testing";
import { BpSdkVehiclePanel } from "./bp-sdk-vehicle-panel";
import { BpSdkVehiclePanelButtons } from "../bp-sdk-vehicle-panel-buttons/bp-sdk-vehicle-panel-buttons";
import { BpSdkVehiclePanelContent } from "../bp-sdk-vehicle-panel-content/bp-sdk-vehicle-panel-content";
import { BpSdkVehiclePanelLabel } from "../bp-sdk-vehicle-panel-label/bp-sdk-vehicle-panel-label";
import { BpSdkDynamicInputList } from "../bp-sdk-dynamic-input-list/bp-sdk-dynamic-input-list";
const setupPage = async () => {
    return await newSpecPage({
        html: '<bp-sdk-vehicle-panel></bp-sdk-vehicle-panel>',
        components: [BpSdkVehiclePanel, BpSdkVehiclePanelButtons, BpSdkVehiclePanelContent, BpSdkVehiclePanelLabel, BpSdkDynamicInputList],
    });
};
const setupInstance = (page) => {
    return page.rootInstance;
};
describe('bp-sdk-vehicle-panel', () => {
    describe('renders', () => {
        it('vanilla', async () => {
            const page = await setupPage();
            const instance = setupInstance(page);
            instance.answers = ['1', '2'];
            await page.waitForChanges();
            const element = page.root.querySelector('div');
            expect(element).toBeTruthy();
            const answers = page.root.querySelectorAll('bp-sdk-dynamic-input-redux-container');
            expect(answers.length).toBe(2);
        });
        it('handles canEdit state', async () => {
            const page = await setupPage();
            const instance = setupInstance(page);
            instance.canEdit = true;
            await page.waitForChanges();
            const element = page.root.querySelector('bp-sdk-vehicle-edit-button');
            expect(element).toBeTruthy();
        });
        it('handles canDelete state', async () => {
            const page = await setupPage();
            const instance = setupInstance(page);
            instance.canDelete = true;
            instance.canEdit = true;
            await page.waitForChanges();
            const element = page.root.querySelector('bp-sdk-vehicle-delete-button');
            expect(element).toBeTruthy();
        });
        it("can't delete if you can't edit", async () => {
            const page = await setupPage();
            const instance = setupInstance(page);
            instance.canDelete = true;
            instance.canEdit = false;
            await page.waitForChanges();
            const element = page.root.querySelector('bp-sdk-vehicle-delete-button');
            expect(element).toBeFalsy();
        });
        it('handles isEditing state', async () => {
            const page = await setupPage();
            const instance = setupInstance(page);
            instance.isEditing = true;
            await page.waitForChanges();
            const element = page.root.querySelector('bp-sdk-vehicle-group');
            expect(element).toBeTruthy();
        });
        it('renders external component if defined', async () => {
            const whenDefinedMock = jest.spyOn(customElements, 'whenDefined').mockResolvedValueOnce({});
            const page = await setupPage();
            await page.waitForChanges();
            const element = page.root.querySelector('div');
            expect(element).toBeFalsy();
            whenDefinedMock.mockRestore();
        });
    });
    describe('label', () => {
        const vehicleLabel = 'Vehicle label';
        it('displays a given vehicle label', async () => {
            const page = await setupPage();
            const instance = setupInstance(page);
            instance.vehicleLabel = vehicleLabel;
            instance.isEditing = false;
            await page.waitForChanges();
            const element = page.root.querySelector('.bp-sdk-vehicle-panel-label__container');
            expect(element.textContent).toEqual(vehicleLabel);
        });
        it('uses a default when no vehicle label is given', async () => {
            const page = await setupPage();
            const instance = setupInstance(page);
            instance.isEditing = false;
            await page.waitForChanges();
            const element = page.root.querySelector('.bp-sdk-vehicle-panel-label__container');
            expect(element.textContent).toEqual('Add new vehicle');
        });
    });
    describe('onIsValidChange', () => {
        it('valid', async () => {
            const page = await setupPage();
            const instance = setupInstance(page);
            expect(instance.icon).toEqual('');
            instance.onIsValidChange(true);
            expect(instance.icon).toEqual('check_circle');
        });
        it('invalid', async () => {
            const page = await setupPage();
            const instance = setupInstance(page);
            expect(instance.icon).toEqual('');
            instance.onIsValidChange(false);
            expect(instance.icon).toEqual('error_outline');
        });
    });
    describe('onClick', () => {
        it('calls open if not isExpanded', async () => {
            const page = await setupPage();
            const instance = setupInstance(page);
            instance.handleOpen = jest.fn();
            instance.handleClose = jest.fn();
            instance.isExpanded = false;
            instance.onClick();
            expect(instance.handleClose).toBeCalledTimes(0);
            expect(instance.handleOpen).toBeCalledTimes(1);
        });
        it('calls close if isExpanded', async () => {
            const page = await setupPage();
            const instance = setupInstance(page);
            instance.handleOpen = jest.fn();
            instance.handleClose = jest.fn();
            instance.isExpanded = true;
            instance.onClick();
            expect(instance.handleClose).toBeCalledTimes(1);
            expect(instance.handleOpen).toBeCalledTimes(0);
        });
    });
});
