910 lines
29 KiB
JavaScript
910 lines
29 KiB
JavaScript
/** @odoo-module **/
|
|
|
|
import { browser } from "@web/core/browser/browser";
|
|
import { isMacOS } from "@web/core/browser/feature_detection";
|
|
import { download } from "@web/core/network/download";
|
|
import { Deferred } from "@web/core/utils/concurrency";
|
|
import { patch, unpatch } from "@web/core/utils/patch";
|
|
import { isVisible } from "@web/core/utils/ui";
|
|
import { registerCleanup } from "./cleanup";
|
|
import { templates } from "@web/core/assets";
|
|
|
|
import { App, onMounted, onPatched, useComponent } from "@odoo/owl";
|
|
|
|
/**
|
|
* Patch the native Date object
|
|
*
|
|
* Note that it will be automatically unpatched at the end of the test
|
|
*
|
|
* @param {number} [year]
|
|
* @param {number} [month]
|
|
* @param {number} [day]
|
|
* @param {number} [hours]
|
|
* @param {number} [minutes]
|
|
* @param {number} [seconds]
|
|
*/
|
|
export function patchDate(year, month, day, hours, minutes, seconds) {
|
|
var RealDate = window.Date;
|
|
var actualDate = new RealDate();
|
|
|
|
// By default, RealDate uses the browser offset, so we must replace it with the offset fixed in luxon.
|
|
var fakeDate = new RealDate(year, month, day, hours, minutes, seconds);
|
|
if (!(luxon.Settings.defaultZone instanceof luxon.FixedOffsetZone)) {
|
|
throw new Error("luxon.Settings.defaultZone must be a FixedOffsetZone");
|
|
}
|
|
const browserOffset = -fakeDate.getTimezoneOffset();
|
|
const patchedOffset = luxon.Settings.defaultZone.offset();
|
|
const offsetDiff = patchedOffset - browserOffset;
|
|
const correctedMinutes = fakeDate.getMinutes() - offsetDiff;
|
|
fakeDate.setMinutes(correctedMinutes);
|
|
|
|
var timeInterval = actualDate.getTime() - fakeDate.getTime();
|
|
|
|
// eslint-disable-next-line no-global-assign
|
|
window.Date = (function (NativeDate) {
|
|
function Date(Y, M, D, h, m, s, ms) {
|
|
var length = arguments.length;
|
|
let date;
|
|
if (arguments.length > 0) {
|
|
date =
|
|
length == 1 && String(Y) === Y // isString(Y)
|
|
? // We explicitly pass it through parse:
|
|
new NativeDate(Date.parse(Y))
|
|
: // We have to manually make calls depending on argument
|
|
// length here
|
|
length >= 7
|
|
? new NativeDate(Y, M, D, h, m, s, ms)
|
|
: length >= 6
|
|
? new NativeDate(Y, M, D, h, m, s)
|
|
: length >= 5
|
|
? new NativeDate(Y, M, D, h, m)
|
|
: length >= 4
|
|
? new NativeDate(Y, M, D, h)
|
|
: length >= 3
|
|
? new NativeDate(Y, M, D)
|
|
: length >= 2
|
|
? new NativeDate(Y, M)
|
|
: length >= 1
|
|
? new NativeDate(Y)
|
|
: new NativeDate();
|
|
// Prevent mixups with unfixed Date object
|
|
date.constructor = Date;
|
|
return date;
|
|
} else {
|
|
date = new NativeDate();
|
|
var time = date.getTime();
|
|
time -= timeInterval;
|
|
date.setTime(time);
|
|
return date;
|
|
}
|
|
}
|
|
|
|
// Copy any custom methods a 3rd party library may have added
|
|
for (var key in NativeDate) {
|
|
Date[key] = NativeDate[key];
|
|
}
|
|
|
|
// Copy "native" methods explicitly; they may be non-enumerable
|
|
// exception: 'now' uses fake date as reference
|
|
Date.now = function () {
|
|
var date = new NativeDate();
|
|
var time = date.getTime();
|
|
time -= timeInterval;
|
|
return time;
|
|
};
|
|
Date.UTC = NativeDate.UTC;
|
|
Date.prototype = NativeDate.prototype;
|
|
Date.prototype.constructor = Date;
|
|
|
|
// Upgrade Date.parse to handle simplified ISO 8601 strings
|
|
Date.parse = NativeDate.parse;
|
|
return Date;
|
|
})(Date);
|
|
|
|
registerCleanup(() => {
|
|
window.Date = RealDate;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Applies a fixed time zone to luxon based on an offset to the UTC time zone.
|
|
*
|
|
* @param {number} offset the number of minutes ahead or behind the UTC time zone
|
|
* +120 => UTC+2
|
|
* -120 => UTC-2
|
|
*/
|
|
export function patchTimeZone(offset) {
|
|
const originalZone = luxon.Settings.defaultZone;
|
|
luxon.Settings.defaultZone = new luxon.FixedOffsetZone.instance(offset);
|
|
registerCleanup(() => {
|
|
luxon.Settings.defaultZone = originalZone;
|
|
});
|
|
}
|
|
|
|
let nextId = 1;
|
|
|
|
/**
|
|
*
|
|
* @param {Object} obj object to patch
|
|
* @param {Object} patchValue the actual patch description
|
|
* @param {{pure?: boolean}} [options]
|
|
*/
|
|
export function patchWithCleanup(obj, patchValue, options) {
|
|
const patchName = `__test_patch_${nextId++}__`;
|
|
patch(obj, patchName, patchValue, options);
|
|
registerCleanup(() => {
|
|
unpatch(obj, patchName);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @returns {HTMLElement}
|
|
*/
|
|
export function getFixture() {
|
|
if (!window.QUnit) {
|
|
return document;
|
|
}
|
|
if (QUnit.config.debug) {
|
|
return document.body;
|
|
} else {
|
|
return document.querySelector("#qunit-fixture");
|
|
}
|
|
}
|
|
|
|
export async function nextTick() {
|
|
await new Promise((resolve) => window.requestAnimationFrame(resolve));
|
|
await new Promise((resolve) => setTimeout(resolve));
|
|
}
|
|
|
|
export function makeDeferred() {
|
|
return new Deferred();
|
|
}
|
|
|
|
export function findElement(el, selector) {
|
|
let target = el;
|
|
if (selector) {
|
|
const els = el.querySelectorAll(selector);
|
|
if (els.length === 0) {
|
|
throw new Error(`No element found (selector: ${selector})`);
|
|
}
|
|
if (els.length > 1) {
|
|
throw new Error(`Found ${els.length} elements, instead of 1 (selector: ${selector})`);
|
|
}
|
|
target = els[0];
|
|
}
|
|
return target;
|
|
}
|
|
|
|
function keyboardEventBubble(args) {
|
|
return Object.assign({}, args, {
|
|
bubbles: true,
|
|
keyCode: args.which,
|
|
cancelable: true,
|
|
});
|
|
}
|
|
|
|
function mouseEventMapping(args) {
|
|
return {
|
|
clientX: args ? args.pageX : undefined,
|
|
clientY: args ? args.pageY : undefined,
|
|
...args,
|
|
bubbles: true,
|
|
cancelable: true,
|
|
view: window,
|
|
};
|
|
}
|
|
|
|
function mouseEventNoBubble(args) {
|
|
return {
|
|
clientX: args ? args.pageX : undefined,
|
|
clientY: args ? args.pageY : undefined,
|
|
...args,
|
|
bubbles: false,
|
|
cancelable: false,
|
|
view: window,
|
|
};
|
|
}
|
|
|
|
function touchEventMapping(args) {
|
|
return {
|
|
...args,
|
|
cancelable: true,
|
|
bubbles: true,
|
|
composed: true,
|
|
view: window,
|
|
rotation: 0.0,
|
|
zoom: 1.0,
|
|
touches: args.touches ? [...args.touches.map((e) => new Touch(e))] : undefined,
|
|
};
|
|
}
|
|
|
|
function touchEventCancelMapping(args) {
|
|
return {
|
|
...touchEventMapping(args),
|
|
cancelable: false,
|
|
};
|
|
}
|
|
|
|
function noBubble(args) {
|
|
return Object.assign({}, args, { bubbles: false });
|
|
}
|
|
|
|
function onlyBubble(args) {
|
|
return Object.assign({}, args, { bubbles: true });
|
|
}
|
|
|
|
// TriggerEvent constructor/args processor mapping
|
|
const EVENT_TYPES = {
|
|
auxclick: { constructor: MouseEvent, processParameters: mouseEventMapping },
|
|
click: { constructor: MouseEvent, processParameters: mouseEventMapping },
|
|
contextmenu: {
|
|
constructor: MouseEvent,
|
|
processParameters: mouseEventMapping,
|
|
},
|
|
dblclick: { constructor: MouseEvent, processParameters: mouseEventMapping },
|
|
mousedown: { constructor: MouseEvent, processParameters: mouseEventMapping },
|
|
mouseup: { constructor: MouseEvent, processParameters: mouseEventMapping },
|
|
mousemove: { constructor: MouseEvent, processParameters: mouseEventMapping },
|
|
mouseenter: {
|
|
constructor: MouseEvent,
|
|
processParameters: mouseEventNoBubble,
|
|
},
|
|
mouseleave: {
|
|
constructor: MouseEvent,
|
|
processParameters: mouseEventNoBubble,
|
|
},
|
|
mouseover: { constructor: MouseEvent, processParameters: mouseEventMapping },
|
|
mouseout: { constructor: MouseEvent, processParameters: mouseEventMapping },
|
|
focus: { constructor: FocusEvent, processParameters: noBubble },
|
|
focusin: { constructor: FocusEvent, processParameters: onlyBubble },
|
|
blur: { constructor: FocusEvent, processParameters: noBubble },
|
|
cut: { constructor: ClipboardEvent, processParameters: onlyBubble },
|
|
copy: { constructor: ClipboardEvent, processParameters: onlyBubble },
|
|
paste: { constructor: ClipboardEvent, processParameters: onlyBubble },
|
|
keydown: {
|
|
constructor: KeyboardEvent,
|
|
processParameters: keyboardEventBubble,
|
|
},
|
|
keypress: {
|
|
constructor: KeyboardEvent,
|
|
processParameters: keyboardEventBubble,
|
|
},
|
|
keyup: { constructor: KeyboardEvent, processParameters: keyboardEventBubble },
|
|
drag: { constructor: DragEvent, processParameters: onlyBubble },
|
|
dragend: { constructor: DragEvent, processParameters: onlyBubble },
|
|
dragenter: { constructor: DragEvent, processParameters: onlyBubble },
|
|
dragstart: { constructor: DragEvent, processParameters: onlyBubble },
|
|
dragleave: { constructor: DragEvent, processParameters: onlyBubble },
|
|
dragover: { constructor: DragEvent, processParameters: onlyBubble },
|
|
drop: { constructor: DragEvent, processParameters: onlyBubble },
|
|
input: { constructor: InputEvent, processParameters: onlyBubble },
|
|
compositionstart: {
|
|
constructor: CompositionEvent,
|
|
processParameters: onlyBubble,
|
|
},
|
|
compositionend: {
|
|
constructor: CompositionEvent,
|
|
processParameters: onlyBubble,
|
|
},
|
|
};
|
|
|
|
if (typeof TouchEvent === "function") {
|
|
Object.assign(EVENT_TYPES, {
|
|
touchstart: {
|
|
constructor: TouchEvent,
|
|
processParameters: touchEventMapping,
|
|
},
|
|
touchend: { constructor: TouchEvent, processParameters: touchEventMapping },
|
|
touchmove: {
|
|
constructor: TouchEvent,
|
|
processParameters: touchEventMapping,
|
|
},
|
|
touchcancel: {
|
|
constructor: TouchEvent,
|
|
processParameters: touchEventCancelMapping,
|
|
},
|
|
});
|
|
}
|
|
|
|
function _makeEvent(eventType, eventAttrs) {
|
|
let event;
|
|
if (eventType in EVENT_TYPES) {
|
|
const { constructor, processParameters } = EVENT_TYPES[eventType];
|
|
event = new constructor(eventType, processParameters(eventAttrs));
|
|
} else {
|
|
event = new Event(eventType, Object.assign({}, eventAttrs, { bubbles: true }));
|
|
}
|
|
return event;
|
|
}
|
|
|
|
export function triggerEvent(el, selector, eventType, eventAttrs = {}, options = {}) {
|
|
const event = _makeEvent(eventType, eventAttrs);
|
|
const target = findElement(el, selector);
|
|
if (!target) {
|
|
throw new Error(`Can't find a target to trigger ${eventType} event`);
|
|
}
|
|
if (!options.skipVisibilityCheck) {
|
|
if (!isVisible(target)) {
|
|
throw new Error(`Called triggerEvent ${eventType} on invisible target`);
|
|
}
|
|
}
|
|
target.dispatchEvent(event);
|
|
if (!options.fast) {
|
|
return nextTick().then(() => event);
|
|
}
|
|
return event;
|
|
}
|
|
|
|
export async function triggerEvents(el, querySelector, events, options) {
|
|
for (let e = 0; e < events.length; e++) {
|
|
if (Array.isArray(events[e])) {
|
|
triggerEvent(el, querySelector, events[e][0], events[e][1], options);
|
|
} else {
|
|
triggerEvent(el, querySelector, events[e], {}, options);
|
|
}
|
|
}
|
|
await nextTick();
|
|
}
|
|
|
|
/**
|
|
* Triggers a scroll event on the given target
|
|
*
|
|
* If the target cannot be scrolled or an axis has reached
|
|
* the end of the scrollable area, the event can be transmitted
|
|
* to its nearest parent until it can be triggered
|
|
*
|
|
* @param {HTMLElement} target target of the scroll event
|
|
* @param {Object} coordinates
|
|
* @param {Number} coordinates[left] coordinates to scroll horizontally
|
|
* @param {Number} coordinates[top] coordinates to scroll vertically
|
|
* @param {Boolean} canPropagate states if the scroll can propagate to a scrollable parent
|
|
*/
|
|
export async function triggerScroll(
|
|
target,
|
|
coordinates = { left: null, top: null },
|
|
canPropagate = true
|
|
) {
|
|
const isScrollable =
|
|
(target.scrollHeight > target.clientHeight && target.clientHeight > 0) ||
|
|
(target.scrollWidth > target.clientWidth && target.clientWidth > 0);
|
|
if (!isScrollable && !canPropagate) {
|
|
return;
|
|
}
|
|
if (isScrollable) {
|
|
const canScrollFrom = {
|
|
left:
|
|
coordinates.left > target.scrollLeft
|
|
? target.scrollLeft + target.clientWidth < target.scrollWidth
|
|
: target.scrollLeft > 0,
|
|
top:
|
|
coordinates.top > target.scrollTop
|
|
? target.scrollTop + target.clientHeight < target.scrollHeight
|
|
: target.scrollTop > 0,
|
|
};
|
|
const scrollCoordinates = {};
|
|
Object.entries(coordinates).forEach(([key, value]) => {
|
|
if (value !== null && canScrollFrom[key]) {
|
|
scrollCoordinates[key] = value;
|
|
delete coordinates[key];
|
|
}
|
|
});
|
|
target.scrollTo(scrollCoordinates);
|
|
target.dispatchEvent(new UIEvent("scroll"));
|
|
await nextTick();
|
|
if (!canPropagate || !Object.entries(coordinates).length) {
|
|
return;
|
|
}
|
|
}
|
|
target.parentElement
|
|
? triggerScroll(target.parentElement, coordinates)
|
|
: window.dispatchEvent(new UIEvent("scroll"));
|
|
await nextTick();
|
|
}
|
|
|
|
export function click(el, selector, skipVisibilityCheck = false) {
|
|
return triggerEvent(
|
|
el,
|
|
selector,
|
|
"click",
|
|
{ bubbles: true, cancelable: true },
|
|
{ skipVisibilityCheck }
|
|
);
|
|
}
|
|
|
|
export function clickCreate(htmlElement) {
|
|
if (htmlElement.querySelectorAll(".o_form_button_create").length) {
|
|
return click(htmlElement, ".o_form_button_create");
|
|
} else if (htmlElement.querySelectorAll(".o_list_button_create").length) {
|
|
return click(htmlElement, ".o_list_button_create");
|
|
} else {
|
|
throw new Error("No edit button found to be clicked.");
|
|
}
|
|
}
|
|
|
|
export function clickEdit(htmlElement) {
|
|
if (htmlElement.querySelectorAll(".o_list_button_edit").length) {
|
|
return click(htmlElement, ".o_list_button_edit");
|
|
} else {
|
|
throw new Error("No edit button found to be clicked.");
|
|
}
|
|
}
|
|
|
|
export async function clickSave(htmlElement) {
|
|
if (htmlElement.querySelectorAll(".o_form_status_indicator").length) {
|
|
await mouseEnter(htmlElement, ".o_form_status_indicator");
|
|
}
|
|
if (htmlElement.querySelectorAll(".o_form_button_save").length) {
|
|
return click(htmlElement, ".o_form_button_save");
|
|
} else if (htmlElement.querySelectorAll(".o_list_button_save").length) {
|
|
return click(htmlElement, ".o_list_button_save");
|
|
} else {
|
|
throw new Error("No save button found to be clicked.");
|
|
}
|
|
}
|
|
|
|
export async function clickDiscard(htmlElement) {
|
|
if (htmlElement.querySelectorAll(".o_form_status_indicator").length) {
|
|
await mouseEnter(htmlElement, ".o_form_status_indicator");
|
|
}
|
|
if (htmlElement.querySelectorAll(".o_form_button_cancel").length) {
|
|
return click(htmlElement, ".o_form_button_cancel");
|
|
} else if (htmlElement.querySelectorAll(".o_list_button_discard").length) {
|
|
return click(htmlElement, ".o_list_button_discard");
|
|
} else {
|
|
throw new Error("No discard button found to be clicked.");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Triggers a mouseenter event on the given target. If no
|
|
* coordinates are given, the event is located by default
|
|
* in the middle of the target to simplify the test process
|
|
*
|
|
* @param {HTMLElement} el
|
|
* @param {string} selector
|
|
* @param {Object} coordinates position of the mouseenter event
|
|
*/
|
|
export async function mouseEnter(el, selector, coordinates) {
|
|
const target = el.querySelector(selector) || el;
|
|
const atPos = coordinates || {
|
|
clientX: target.getBoundingClientRect().left + target.getBoundingClientRect().width / 2,
|
|
clientY: target.getBoundingClientRect().top + target.getBoundingClientRect().height / 2,
|
|
};
|
|
return triggerEvent(target, null, "mouseenter", atPos);
|
|
}
|
|
|
|
export async function editInput(el, selector, value) {
|
|
const input = findElement(el, selector);
|
|
if (!(input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement)) {
|
|
throw new Error("Only 'input' and 'textarea' elements can be edited with 'editInput'.");
|
|
}
|
|
if (
|
|
!["text", "textarea", "email", "search", "color", "number", "file", "tel"].includes(
|
|
input.type
|
|
)
|
|
) {
|
|
throw new Error(`Type "${input.type}" not supported by 'editInput'.`);
|
|
}
|
|
|
|
const eventOpts = {};
|
|
if (input.type === "file") {
|
|
const files = Array.isArray(value) ? value : [value];
|
|
const dataTransfer = new DataTransfer();
|
|
for (const file of files) {
|
|
if (!(file instanceof File)) {
|
|
throw new Error(`File input value should be one or several File objects.`);
|
|
}
|
|
dataTransfer.items.add(file);
|
|
}
|
|
input.files = dataTransfer.files;
|
|
eventOpts.skipVisibilityCheck = true;
|
|
} else {
|
|
input.value = value;
|
|
}
|
|
|
|
await triggerEvents(input, null, ["input", "change"], eventOpts);
|
|
|
|
if (input.type === "file") {
|
|
// Need to wait for the file to be loaded by the input
|
|
await nextTick();
|
|
await nextTick();
|
|
}
|
|
}
|
|
|
|
export function editSelect(el, selector, value) {
|
|
const select = findElement(el, selector);
|
|
if (select.tagName !== "SELECT") {
|
|
throw new Error("Only select tag can be edited with selectInput.");
|
|
}
|
|
select.value = value;
|
|
return triggerEvent(select, null, "change");
|
|
}
|
|
|
|
/**
|
|
* Triggers an hotkey properly disregarding the operating system.
|
|
*
|
|
* @param {string} hotkey
|
|
* @param {boolean} addOverlayModParts
|
|
* @param {KeyboardEventInit} eventAttrs
|
|
* @returns {{ keydownEvent: KeyboardEvent, keyupEvent: KeyboardEvent }}
|
|
*/
|
|
export function triggerHotkey(hotkey, addOverlayModParts = false, eventAttrs = {}) {
|
|
eventAttrs.key = hotkey.split("+").pop();
|
|
|
|
if (/shift/i.test(hotkey)) {
|
|
eventAttrs.shiftKey = true;
|
|
}
|
|
|
|
if (/control/i.test(hotkey)) {
|
|
if (isMacOS()) {
|
|
eventAttrs.metaKey = true;
|
|
} else {
|
|
eventAttrs.ctrlKey = true;
|
|
}
|
|
}
|
|
|
|
if (/alt/i.test(hotkey) || addOverlayModParts) {
|
|
if (isMacOS()) {
|
|
eventAttrs.ctrlKey = true;
|
|
} else {
|
|
eventAttrs.altKey = true;
|
|
}
|
|
}
|
|
|
|
if (!("bubbles" in eventAttrs)) {
|
|
eventAttrs.bubbles = true;
|
|
}
|
|
|
|
const keydownEvent = new KeyboardEvent("keydown", eventAttrs);
|
|
const keyupEvent = new KeyboardEvent("keyup", eventAttrs);
|
|
document.activeElement.dispatchEvent(keydownEvent);
|
|
document.activeElement.dispatchEvent(keyupEvent);
|
|
return { keydownEvent, keyupEvent };
|
|
}
|
|
|
|
export async function legacyExtraNextTick() {
|
|
return nextTick();
|
|
}
|
|
|
|
export function mockDownload(cb) {
|
|
patchWithCleanup(download, { _download: cb });
|
|
}
|
|
|
|
export const hushConsole = Object.create(null);
|
|
for (const propName of Object.keys(window.console)) {
|
|
hushConsole[propName] = () => {};
|
|
}
|
|
|
|
export function mockSendBeacon(mock) {
|
|
patchWithCleanup(navigator, {
|
|
sendBeacon: (url, blob) => {
|
|
return mock(url, blob) !== false;
|
|
},
|
|
});
|
|
}
|
|
|
|
export function mockTimeout() {
|
|
const timeouts = new Map();
|
|
let currentTime = 0;
|
|
let id = 1;
|
|
patchWithCleanup(browser, {
|
|
setTimeout(fn, delay = 0) {
|
|
timeouts.set(id, { fn, scheduledFor: delay + currentTime, id });
|
|
return id++;
|
|
},
|
|
clearTimeout(id) {
|
|
timeouts.delete(id);
|
|
},
|
|
});
|
|
return {
|
|
execRegisteredTimeouts() {
|
|
for (const { fn } of timeouts.values()) {
|
|
fn();
|
|
}
|
|
timeouts.clear();
|
|
},
|
|
async advanceTime(duration) {
|
|
// wait here so all microtasktick scheduled in this frame can be
|
|
// executed and possibly register their own timeout
|
|
await nextTick();
|
|
currentTime += duration;
|
|
for (const { fn, scheduledFor, id } of timeouts.values()) {
|
|
if (scheduledFor <= currentTime) {
|
|
fn();
|
|
timeouts.delete(id);
|
|
}
|
|
}
|
|
// wait here to make sure owl can update the UI
|
|
await nextTick();
|
|
},
|
|
};
|
|
}
|
|
|
|
export function mockAnimationFrame() {
|
|
const callbacks = new Map();
|
|
let id = 1;
|
|
patchWithCleanup(browser, {
|
|
requestAnimationFrame(fn) {
|
|
callbacks.set(id, fn);
|
|
return id++;
|
|
},
|
|
cancelAnimationFrame(id) {
|
|
callbacks.delete(id);
|
|
},
|
|
});
|
|
return function execRegisteredCallbacks() {
|
|
for (const fn of callbacks.values()) {
|
|
fn();
|
|
}
|
|
callbacks.clear();
|
|
};
|
|
}
|
|
|
|
export async function mount(Comp, target, config = {}) {
|
|
let { props, env } = config;
|
|
env = env || {};
|
|
const configuration = {
|
|
env,
|
|
templates,
|
|
test: true,
|
|
props,
|
|
};
|
|
if (env.services && "localization" in env.services) {
|
|
configuration.translateFn = env._t;
|
|
}
|
|
const app = new App(Comp, configuration);
|
|
registerCleanup(() => app.destroy());
|
|
return app.mount(target);
|
|
}
|
|
|
|
export function destroy(comp) {
|
|
comp.__owl__.app.destroy();
|
|
}
|
|
|
|
export function findChildren(comp, predicate = (e) => e) {
|
|
const queue = [];
|
|
[].unshift.apply(queue, Object.values(comp.__owl__.children));
|
|
|
|
while (queue.length > 0) {
|
|
const curNode = queue.pop();
|
|
if (predicate(curNode)) {
|
|
return curNode;
|
|
}
|
|
[].unshift.apply(queue, Object.values(curNode.component.__owl__.children));
|
|
}
|
|
}
|
|
|
|
// partial replacement of t-ref on component
|
|
export function useChild() {
|
|
const node = useComponent().__owl__;
|
|
const setChild = () => {
|
|
const componentNode = Object.values(node.children)[0];
|
|
node.component.child = componentNode.component;
|
|
};
|
|
onMounted(setChild);
|
|
onPatched(setChild);
|
|
}
|
|
|
|
const lifeCycleHooks = [
|
|
"onError",
|
|
"onMounted",
|
|
"onPatched",
|
|
"onRendered",
|
|
"onWillDestroy",
|
|
"onWillPatch",
|
|
"onWillRender",
|
|
"onWillStart",
|
|
"onWillUnmount",
|
|
"onWillUpdateProps",
|
|
];
|
|
export function useLogLifeCycle(logFn, name = "") {
|
|
const component = owl.useComponent();
|
|
let loggedName = `${component.constructor.name}`;
|
|
if (name) {
|
|
loggedName = `${component.constructor.name} ${name}`;
|
|
}
|
|
for (const hook of lifeCycleHooks) {
|
|
owl[hook](() => {
|
|
logFn(`${hook} ${loggedName}`);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns the list of nodes containing n2 (included) that do not contain n1.
|
|
*
|
|
* @param {Node} n1
|
|
* @param {Node} n2
|
|
* @returns {Node[]}
|
|
*/
|
|
function getDifferentParents(n1, n2) {
|
|
const parents = [n2];
|
|
while (parents[0].parentNode) {
|
|
const parent = parents[0].parentNode;
|
|
if (parent.contains(n1)) {
|
|
break;
|
|
}
|
|
parents.unshift(parent);
|
|
}
|
|
return parents;
|
|
}
|
|
|
|
/**
|
|
* Helper performing a drag and drop sequence.
|
|
*
|
|
* - the 'fromSelector' is used to determine the element on which the drag will
|
|
* start;
|
|
* - the 'toSelector' will determine the element on which the first one will be
|
|
* dropped.
|
|
*
|
|
* The first element will be dragged by its center, and will be dropped on the
|
|
* bottom-right inner pixel of the target element. This behavior covers both
|
|
* cases of appending the first element to the end of a list (toSelector =
|
|
* target list) or moving it at the position of another element, effectively
|
|
* placing the first element before the second (toSelector = other element).
|
|
*
|
|
* A position can be given to drop the first element above, below, or on the
|
|
* side of the second (default is inside, as specified above).
|
|
*
|
|
* Note that only the last event is awaited, since all the others are
|
|
* considered to be synchronous.
|
|
*
|
|
* @param {Element|string} from
|
|
* @param {Element|string} to
|
|
* @param {string} [position] "top" | "bottom" | "left" | "right"
|
|
* @returns {Promise<void>}
|
|
*/
|
|
export async function dragAndDrop(from, to, position) {
|
|
const dropFunction = drag(from, to, position);
|
|
await dropFunction();
|
|
}
|
|
|
|
/**
|
|
* Helper performing a drag.
|
|
*
|
|
* - the 'from' selector is used to determine the element on which the drag will
|
|
* start;
|
|
* - the 'to' selector will determine the element on which the dragged element will be
|
|
* moved.
|
|
*
|
|
* Returns a drop function
|
|
* @param {Element|string} from
|
|
* @param {Element|string} to
|
|
* @param {string} [position] "top" | "bottom" | "left" | "right"
|
|
* @returns {function: Promise<void>}
|
|
*/
|
|
export function drag(from, to, position) {
|
|
const fixture = getFixture();
|
|
from = from instanceof Element ? from : fixture.querySelector(from);
|
|
to = to instanceof Element ? to : fixture.querySelector(to);
|
|
|
|
// Mouse down on main target
|
|
const fromRect = from.getBoundingClientRect();
|
|
const toRect = to.getBoundingClientRect();
|
|
triggerEvent(from, null, "mousedown", {
|
|
clientX: fromRect.x + fromRect.width / 2,
|
|
clientY: fromRect.y + fromRect.height / 2,
|
|
});
|
|
|
|
// Find target position
|
|
const toPos = {
|
|
clientX: toRect.x + toRect.width / 2,
|
|
clientY: toRect.y + toRect.height / 2,
|
|
};
|
|
if (position && typeof position === "object") {
|
|
// x and y coordinates start from the element's initial coordinates
|
|
toPos.clientX += position.x || 0;
|
|
toPos.clientY += position.y || 0;
|
|
} else {
|
|
switch (position) {
|
|
case "top": {
|
|
toPos.clientY = toRect.y - 1;
|
|
break;
|
|
}
|
|
case "bottom": {
|
|
toPos.clientY = toRect.y + toRect.height + 1;
|
|
break;
|
|
}
|
|
case "left": {
|
|
toPos.clientX = toRect.x - 1;
|
|
break;
|
|
}
|
|
case "right": {
|
|
toPos.clientX = toRect.x + toRect.width + 1;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Move, enter and drop the element on the target
|
|
triggerEvent(window, null, "mousemove", toPos);
|
|
// "mouseenter" is fired on every parent of `to` that do not contain
|
|
// `from` (typically: different parent lists).
|
|
for (const target of getDifferentParents(from, to)) {
|
|
triggerEvent(target, null, "mouseenter", toPos);
|
|
}
|
|
|
|
return function () {
|
|
return drop(from, toPos);
|
|
};
|
|
}
|
|
|
|
function drop(from, toPos) {
|
|
return triggerEvent(from, null, "mouseup", toPos);
|
|
}
|
|
|
|
export async function clickDropdown(target, fieldName) {
|
|
const dropdownInput = target.querySelector(`[name='${fieldName}'] .dropdown input`);
|
|
dropdownInput.focus();
|
|
await nextTick();
|
|
await click(dropdownInput);
|
|
}
|
|
|
|
export async function clickOpenedDropdownItem(target, fieldName, itemContent) {
|
|
const dropdowns = target.querySelectorAll(`[name='${fieldName}'] .dropdown .dropdown-menu`);
|
|
if (dropdowns.length === 0) {
|
|
throw new Error(`No dropdown found for field ${fieldName}`);
|
|
} else if (dropdowns.length > 1) {
|
|
throw new Error(`Found ${dropdowns.length} dropdowns for field ${fieldName}`);
|
|
}
|
|
const dropdownItems = dropdowns[0].querySelectorAll("li");
|
|
const indexToClick = Array.from(dropdownItems)
|
|
.map((html) => html.textContent)
|
|
.indexOf(itemContent);
|
|
if (indexToClick === -1) {
|
|
throw new Error(`The element '${itemContent}' does not exist in the dropdown`);
|
|
}
|
|
await click(dropdownItems[indexToClick], null, "click");
|
|
}
|
|
|
|
export async function selectDropdownItem(target, fieldName, itemContent) {
|
|
await clickDropdown(target, fieldName);
|
|
await clickOpenedDropdownItem(target, fieldName, itemContent);
|
|
}
|
|
|
|
export function getNodesTextContent(nodes) {
|
|
return Array.from(nodes).map((n) => n.textContent);
|
|
}
|
|
|
|
/**
|
|
* Click to open the dropdown on a many2one
|
|
*/
|
|
export async function clickOpenM2ODropdown(el, fieldName, selector) {
|
|
const m2oSelector = `${selector || ""} .o_field_many2one[name=${fieldName}] input`;
|
|
const matches = el.querySelectorAll(m2oSelector);
|
|
if (matches.length !== 1) {
|
|
throw new Error(
|
|
`cannot open m2o: selector ${selector} has been found ${matches.length} instead of 1`
|
|
);
|
|
}
|
|
|
|
await click(matches[0]);
|
|
return matches[0];
|
|
}
|
|
|
|
/**
|
|
* Click on the active (highlighted) selection in a m2o dropdown.
|
|
*/
|
|
// TO FIX
|
|
export async function clickM2OHighlightedItem(el, fieldName, selector) {
|
|
const m2oSelector = `${selector || ""} .o_field_many2one[name=${fieldName}] input`;
|
|
// const $dropdown = $(m2oSelector).autocomplete('widget');
|
|
const matches = el.querySelectorAll(m2oSelector);
|
|
if (matches.length !== 1) {
|
|
throw new Error(
|
|
`cannot open m2o: selector ${selector} has been found ${matches.length} instead of 1`
|
|
);
|
|
}
|
|
// clicking on an li (no matter which one), will select the focussed one
|
|
return click(matches[0].parentElement.querySelector("li"));
|
|
}
|
|
|
|
// X2Many
|
|
export async function addRow(target, selector) {
|
|
await click(target.querySelector(`${selector ? selector : ""} .o_field_x2many_list_row_add a`));
|
|
}
|
|
|
|
export async function removeRow(target, index) {
|
|
await click(target.querySelectorAll(".o_list_record_remove")[index]);
|
|
}
|