/*!
 * KoliBri - The accessible HTML-Standard
 */
import { expect } from "@playwright/test";
import { test } from "@stencil/playwright";
import { Callback } from "../schema/enums";
import { KolEvent } from "../utils/events";
import { INPUTS_SELECTOR } from "./utils/inputsSelector";
const testInputCallbacksAndEvents = ({ additionalProperties = '', componentName, equalityCheck = 'toBe', expectedValue, fillAction, omittedEvents = [], selectInput, testValue = 'Test Input', }) => {
    test.describe('Callbacks and DOM events', () => {
        const EVENTS = [
            ['click', Callback.onClick, KolEvent.click],
            ['focus', Callback.onFocus, KolEvent.focus],
            ['blur', Callback.onBlur, KolEvent.blur],
            ['input', Callback.onInput, KolEvent.input, testValue, expectedValue !== null && expectedValue !== void 0 ? expectedValue : testValue],
            ['change', Callback.onChange, KolEvent.change, testValue, expectedValue !== null && expectedValue !== void 0 ? expectedValue : testValue],
        ];
        EVENTS.filter(([eventName]) => !omittedEvents.includes(eventName)).forEach(([nativeEventName, callbackName, eventName, testValue, expectedValue]) => {
            test(`should call ${callbackName} callback when internal input emits ${nativeEventName}`, async ({ page, browserName }) => {
                test.skip(componentName === 'kol-input-color' && nativeEventName === 'click' && browserName === 'firefox', 'Clicking on an input[type=color] in Firefox currently makes the page close itself.');
                await page.setContent(`<${componentName} _label="Input" ${additionalProperties}></${componentName}>`);
                const component = page.locator(componentName);
                const input = selectInput ? selectInput(page) : page.locator(INPUTS_SELECTOR);
                const callbackPromise = component.evaluate((element, callbackName) => {
                    return new Promise((resolve) => {
                        element._on = {
                            [callbackName]: (_event, value) => {
                                resolve(value);
                            },
                        };
                    });
                }, callbackName);
                const eventPromise = component.evaluate((element, eventName) => {
                    return new Promise((resolve) => {
                        element.addEventListener(eventName, (event) => {
                            resolve(event.detail);
                        });
                    });
                }, eventName);
                await page.waitForChanges();
                if (fillAction) {
                    await fillAction(page);
                }
                else if (typeof testValue === 'string') {
                    await page.locator(INPUTS_SELECTOR).fill(testValue);
                }
                await page.waitForChanges();
                await input.dispatchEvent(nativeEventName);
                await expect(callbackPromise).resolves[equalityCheck](expectedValue);
                await expect(eventPromise).resolves[equalityCheck](expectedValue !== null && expectedValue !== void 0 ? expectedValue : null);
            });
        });
    });
};
export { testInputCallbacksAndEvents };
//# sourceMappingURL=input-callbacks-and-events.js.map
