@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
57 lines (56 loc) • 3.33 kB
JavaScript
/*!
* 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