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

/** @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],
    });
}