Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FIX] web: position_hook select iframe content through hoot-dom #159436

Closed
wants to merge 1 commit into from
Closed

[FIX] web: position_hook select iframe content through hoot-dom #159436

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
62 changes: 32 additions & 30 deletions addons/web/static/tests/core/position/position_hook.test.js
View file
Open in desktop
@@ -1,13 +1,13 @@
import { beforeEach, destroy, expect, getFixture, test } from "@odoo/hoot";
import { queryAll, queryOne, scroll } from "@odoo/hoot-dom";
import { animationFrame } from "@odoo/hoot-mock";
import { before, destroy, expect, getFixture, test } from "@odoo/hoot";
import { queryOne, scroll } from "@odoo/hoot-dom";
import { Deferred, animationFrame } from "@odoo/hoot-mock";
import { Component, xml, useRef, onMounted } from "@odoo/owl";
import { defineParams, mountWithCleanup } from "@web/../tests/web_test_helpers";
import { usePosition } from "@web/core/position/position_hook";

beforeEach(
before(
() =>
document.readyState === "complete" ||
document.readyState !== "loading" ||
new Promise((resolve) => addEventListener("load", resolve, { once: true }))
);

Expand Down Expand Up @@ -410,19 +410,20 @@ test("is positioned relative to its containing block", async () => {
});

test("iframe: popper is outside, target inside", async () => {
await mountWithCleanup(/* xml */ `
<iframe class="container" style="height: 200px; width: 400px; margin: 25px" srcdoc="&lt;div id='target-iframe' /&gt;" />
`);

await Promise.all(
queryAll("iframe").map(
(iframe) =>
iframe.contentDocument.readyState === "complete" ||
new Promise((resolve) => iframe.addEventListener("load", resolve))
)
);
await mountWithCleanup(`<div id="container"/>`);

const iframe = document.createElement("iframe");
Object.assign(iframe.style, {
height: "200px",
width: "400px",
margin: "25px",
});
iframe.srcdoc = `<div id="target-iframe" />`;
const def = new Deferred();
iframe.onload = () => def.resolve();
queryOne("#container").appendChild(iframe);
await def;

const iframe = queryOne("iframe");
const iframeBody = iframe.contentDocument.body;
Object.assign(iframeBody.style, {
display: "flex",
Expand Down Expand Up @@ -474,7 +475,7 @@ test("iframe: popper is outside, target inside", async () => {
// Scrolling inside the iframe should reposition the popover accordingly
const previousPositionSolution = onPositionedArgs.solution;
const scrollOffset = 100;
scroll(iframe.contentDocument.documentElement, { y: scrollOffset });
scroll(queryOne("iframe").contentDocument.documentElement, { y: scrollOffset });
await animationFrame();
expect(["bottom-middle"]).toVerifySteps();
expect(previousPositionSolution.top).toBe(onPositionedArgs.solution.top + scrollOffset);
Expand All @@ -493,19 +494,20 @@ test("iframe: popper is outside, target inside", async () => {
});

test("iframe: both popper and target inside", async () => {
await mountWithCleanup(/* xml */ `
<iframe class="container" style="height: 300px; width: 400px" srcdoc="&lt;div id='inner-container' /&gt;" />
`);

await Promise.all(
queryAll("iframe").map(
(iframe) =>
iframe.contentDocument.readyState === "complete" ||
new Promise((resolve) => iframe.addEventListener("load", resolve))
)
);
await mountWithCleanup(`<div id="container"/>`);

const iframe = document.createElement("iframe");
Object.assign(iframe.style, {
height: "200px",
width: "400px",
margin: "25px",
});
iframe.srcdoc = `<div id="inner-container" />`;
const def = new Deferred();
iframe.onload = () => def.resolve();
queryOne("#container").appendChild(iframe);
await def;

const iframe = queryOne("iframe");
const iframeBody = iframe.contentDocument.body;
Object.assign(iframeBody.style, {
display: "flex",
Expand Down