wix-style-react
Version:
wix-style-react
95 lines • 4.42 kB
JavaScript
import { Simulate } from 'react-dom/test-utils';
import { act } from './actCompat';
import { reactUniDriver } from '@wix/wix-ui-test-utils/vanilla';
/**
*Temporary workaround for implementing missing Unidriver methods in React/DOM only.
*
* @param {UniDriver} base
*/
export function ReactBase(base) {
const htmlElement = () => {
if (base.type !== 'react') {
throw new Error('Supported only in React/DOM.');
}
return base.getNative();
};
const pendingUnidriverFeatures = {
isFocus: async () => {
return document.activeElement === (await htmlElement());
},
paste: async () => act(async () => Simulate.paste(await htmlElement())),
select: async (selectedIndex) => {
const element = await htmlElement();
if (!element.disabled) {
await act(async () => {
Simulate.change(element, {
target: { selectedIndex, value: '' },
});
});
}
},
drop: async (eventData) => act(async () => Simulate.drop(await htmlElement(), eventData)),
};
const unidriverRejected = {
// Event Simulation
focus: async () => {
const elm = await htmlElement();
await act(async () => {
elm.focus();
Simulate.focus(elm); // TODO: Is this redundant?
});
},
blur: async () => {
const elm = await htmlElement();
await act(async () => {
elm.blur();
Simulate.blur(elm); // TODO: Is this redundant?
});
},
};
// Instead of using this methods you should use proper data hooks
// and data attributes the query the required elements
const deprecated = {
_DEPRECATED_getClassList: async () => (await htmlElement()).classList,
/** @returns {array} array of children unidrivers */
_DEPRECATED_children: async () => {
const ch = (await htmlElement()).children;
const uniChildren = [];
for (let i = 0; i < ch.length; i++) {
uniChildren.push(reactUniDriver(ch[i]));
}
return uniChildren;
},
};
const shouldBePrivate = {
wheel: async (eventData) => act(async () => Simulate.wheel(await htmlElement(), eventData)),
keyUp: async (eventData) => act(async () => Simulate.keyUp(await htmlElement(), eventData)),
keyDown: async (eventData) => act(async () => Simulate.keyDown(await htmlElement(), eventData)),
mouseEnter: async (eventData) => act(async () => Simulate.mouseEnter(await htmlElement(), eventData)),
mouseLeave: async (eventData) => act(async () => Simulate.mouseLeave(await htmlElement(), eventData)),
beforeInput: async (eventData) => act(async () => Simulate(await (await htmlElement()).getNative(), new InputEvent('beforeinput', eventData))),
};
const _private = {
mouseDown: async (eventData) => act(async () => Simulate.mouseDown(await htmlElement(), eventData)),
mouseOver: async (eventData) => act(async () => Simulate.mouseOver(await htmlElement(), eventData)),
mouseOut: async (eventData) => act(async () => Simulate.mouseOut(await htmlElement(), eventData)),
compositionStart: async () => act(async () => Simulate.compositionStart(await htmlElement())),
compositionEnd: async () => act(async () => Simulate.compositionEnd(await htmlElement())),
};
return {
...pendingUnidriverFeatures,
...unidriverRejected,
...deprecated,
...shouldBePrivate,
_private, // should be used inside private drivers only
};
}
/*
Deprecated - still here for backward compatibility.
No need to use it inside new drivers, because drivers should not expose clickOutside functions.
Tests should click on the outside container regardless easily without the help of a driver.
*/
ReactBase.clickBody = () => act(async () => document.body.dispatchEvent(new Event('mouseup', { cancelable: true, bubbles: true })));
// TODO: Find out why some tests need clickOutSide to be on document and some on body
ReactBase.clickDocument = () => act(async () => document.dispatchEvent(new Event('mousedown', { cancelable: true, bubbles: true })));
//# sourceMappingURL=ReactBase.js.map