Odoo18-Base/addons/web/static/tests/mobile/helpers.js

125 lines
3.6 KiB
JavaScript
Raw Permalink Normal View History

2025-03-10 10:52:11 +07:00
/** @odoo-module **/
import { findElement, triggerEvent } from "../helpers/utils";
async function swipe(target, selector, direction) {
const touchTarget = findElement(target, selector);
if (direction === "left") {
// The scrollable element is set at its right limit
touchTarget.scrollLeft = touchTarget.scrollWidth - touchTarget.offsetWidth;
} else {
// The scrollable element is set at its left limit
touchTarget.scrollLeft = 0;
}
await triggerEvent(target, selector, "touchstart", {
touches: [
{
identifier: 0,
clientX: 0,
clientY: 0,
target: touchTarget,
},
],
});
await triggerEvent(target, selector, "touchmove", {
touches: [
{
identifier: 0,
clientX: (direction === "left" ? -1 : 1) * touchTarget.clientWidth,
clientY: 0,
target: touchTarget,
},
],
});
await triggerEvent(target, selector, "touchend", {});
}
/**
* Will simulate a swipe right on the target element with the given selector.
*
* @param {HTMLElement} target
* @param {DOMSelector} [selector]
* @returns {Promise}
*/
export async function swipeRight(target, selector) {
return swipe(target, selector, "right");
}
/**
* Will simulate a swipe left on the target element with the given selector.
*
* @param {HTMLElement} target
* @param {DOMSelector} [selector]
* @returns {Promise}
*/
export async function swipeLeft(target, selector) {
return swipe(target, selector, "left");
}
/**
* Simulate a "TAP" (touch) on the target element with the given selector.
*
* @param {HTMLElement} target
* @param {DOMSelector} [selector]
* @returns {Promise}
*/
export async function tap(target, selector) {
const touchTarget = findElement(target, selector);
const box = touchTarget.getBoundingClientRect();
const x = box.left + box.width / 2;
const y = box.top + box.height / 2;
const touch = {
identifier: 0,
target: touchTarget,
clientX: x,
clientY: y,
pageX: x,
pageY: y,
};
await triggerEvent(touchTarget, null, "touchstart", {
touches: [touch],
});
await triggerEvent(touchTarget, null, "touchend", {});
}
/**
* Simulate a "TAP" (touch) on the target element with the given selector.
*
* @param {HTMLElement} target
* @param {DOMSelector} startSelector
* @param {DOMSelector} endSelector
* @param {{start: "center"|"top", end: "center"|"bottom"}} [positions]
* Specify where the touches will occur in the start and end elements.
* @returns {Promise}
*/
export async function tapAndMove(
target,
startSelector,
endSelector,
positions = { start: "center", end: "center" }
) {
const startTarget = findElement(target, startSelector);
const startBox = startTarget.getBoundingClientRect();
const touch = {
identifier: 0,
target: startTarget,
pageX: startBox.x + startBox.width / 2,
pageY: positions.start === "center" ? startBox.y + startBox.height / 2 : startBox.y + 1,
};
await triggerEvent(startTarget, null, "touchstart", {
touches: [touch],
});
const endTarget = findElement(target, endSelector);
const endBox = endTarget.getBoundingClientRect();
touch.pageX = endBox.x + endBox.width / 2;
touch.pageY = positions.end === "center" ? endBox.y + endBox.height / 2 : endBox.y - 1;
await triggerEvent(startTarget, null, "touchmove", {
touches: [touch],
});
await triggerEvent(startTarget, null, "touchend", {
touches: [touch],
});
}