Skip to content

[IMP] html_builder: Tests for NavbarLinkPopover and MenuDataPlugin #4602

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

Open
wants to merge 3 commits into
base: master-mysterious-egg
Choose a base branch
from
+275 −2
Open

[IMP] html_builder: Tests for NavbarLinkPopover and MenuDataPlugin #4602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5df6914
[FIX] html_builder: Added export to MenuDataPlugin
dabo-odoo May 7, 2025
a96bf7e
[FIX] website: Small fix to MenuDialog for Owl tests
dabo-odoo May 8, 2025
5934928
[IMP] html_builder: Tests for NavbarLinkPopover and MenuDataPlugin
dabo-odoo May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion addons/html_builder/static/src/website_builder/plugins/menu_data_plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { NavbarLinkPopover } from "@html_editor/main/link/navbar_link_popover";
import { MenuDialog, EditMenuDialog } from "@website/components/dialog/edit_menu";
import { withSequence } from "@html_editor/utils/resource";

class MenuDataPlugin extends Plugin {
export class MenuDataPlugin extends Plugin {
static id = "menuDataPlugin";
resources = {
link_popovers: [
Expand Down
273 changes: 273 additions & 0 deletions addons/html_builder/static/tests/menu_data.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,273 @@
import { describe, expect, test } from "@odoo/hoot";
import { waitFor, waitForNone, click } from "@odoo/hoot-dom";
import { defineWebsiteModels } from "./website_helpers";
import { setupEditor } from "@html_editor/../tests/_helpers/editor";
import { setContent } from "@html_editor/../tests/_helpers/selection";
import { patchWithCleanup, mockService } from "@web/../tests/web_test_helpers";
import { MAIN_PLUGINS } from "@html_editor/plugin_sets";
import { MenuDataPlugin } from "@html_builder/website_builder/plugins/menu_data_plugin";
import { MenuDialog } from "@website/components/dialog/edit_menu";

defineWebsiteModels();

describe("Top Menu should open a NavbarLinkPopover", () => {
test("should open a navbar popover when the selection is inside a top menu link and close outside of a top menu link", async () => {
const { el } = await setupEditor(
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span>Top Menu Item</span>
</a>
</li>
</ul>
<p>Outside</p>`,
{
config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] },
}
);
expect(".o-we-linkpopover").toHaveCount(0);
// selection inside a top menu link
setContent(
el,
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span>Top Me[]nu Item</span>
</a>
</li>
</ul>
<p>Outside</p>`
);
await waitFor(".o-we-linkpopover", { timeout: 1500 });
// remove link button replaced with sitemap button
expect(".o-we-linkpopover:has(i.fa-chain-broken)").toHaveCount(0);
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
// selection outside a top menu link
setContent(
el,
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span>Top Menu Item</span>
</a>
</li>
</ul>
<p>Out[]side</p>`
);
await waitForNone(".o-we-linkpopover", { timeout: 1500 });
expect(".o-we-linkpopover").toHaveCount(0);
});

test("should open a navbar popover when the selection is inside a top menu link and stay open if selection move in the same link", async () => {
const { el } = await setupEditor(
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span>Top Menu Item</span>
</a>
</li>
</ul>`,
{
config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] },
}
);
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0);
// open navbar link popover
setContent(
el,
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span>Top Me[]nu Item</span>
</a>
</li>
</ul>`
);
await waitFor(".o-we-linkpopover", { timeout: 1500 });
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
// selection in the same link
setContent(
el,
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span>Top Menu It[]em</span>
</a>
</li>
</ul>`
);
await waitFor(".o-we-linkpopover", { timeout: 1500 });
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
});

test("should open a navbar popover when the selection is inside a top menu dropdown link", async () => {
const { el } = await setupEditor(
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span>Top Menu Item</span>
</a>
</li>
<div class="dropdown">
<a class="dropdown-toggle" data-bs-toggle="dropdown"></a>
<div class="dropdown-menu">
<li>
<a class="dropdown-item" href="exists">
<span>Dropdown Menu Item</span>
</a>
</li>
</div>
</div>
</ul>`,
{
config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] },
}
);
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0);
// selection in dropdown menu
setContent(
el,
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span>Top Menu Item</span>
</a>
</li>
<div class="dropdown">
<a class="dropdown-toggle" data-bs-toggle="dropdown"></a>
<div class="dropdown-menu">
<li>
<a class="dropdown-item" href="exists">
<span>Dropdown Me[]nu Item</span>
</a>
</li>
</div>
</div>
</ul>`
);
await waitFor(".o-we-linkpopover", { timeout: 1500 });
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
});
});

describe("should open dialogs when editing link or menu", () => {
test("after clicking on edit link button, a MenuDialog should appear", async () => {
const { el } = await setupEditor(
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span data-oe-id="5">Top Menu Item</span>
</a>
</li>
</ul>`,
{
config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] },
}
);
patchWithCleanup(MenuDialog.prototype, {
setup() {
super.setup();
this.website.pageDocument = el.ownerDocument;
},
});
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0);
// open navbar link popover
setContent(
el,
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span data-oe-id="5">Top Me[]nu Item</span>
</a>
</li>
</ul>`
);
await waitFor(".o-we-linkpopover", { timeout: 1500 });
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
// click the link edit button
await click(".o_we_edit_link");
// check that MenuDialog is open and that name and url have been passed correctly
await waitFor(".o_website_dialog", { timeout: 1500 });
expect("input.form-control:not(#url_input)").toHaveValue("Top Menu Item");
expect("#url_input").toHaveValue("exists");
});

test("after clicking on edit menu button, a EditMenuDialog should appear", async () => {
const { el } = await setupEditor(
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span>Top Menu Item</span>
</a>
</li>
</ul>`,
{
config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] },
}
);
mockService("website", {
get currentWebsite() {
return {
id: 1,
metadata: {
lang: "en_EN",
},
};
},
});
const fakeORMService = {
call: (model, method, args, kwargs) => {
expect(model).toBe("website.menu");
expect(method).toBe("get_tree");
expect(args[0]).toBe(1);
return {
fields: {
id: 4,
name: "Top Menu",
url: "#",
new_window: false,
is_mega_menu: false,
sequence: 0,
parent_id: false,
},
children: [
{
fields: {
id: 5,
name: "Top Menu Item",
url: "exists",
new_window: false,
is_mega_menu: false,
sequence: 10,
parent_id: 4,
},
children: [],
is_homepage: true,
},
],
is_homepage: false,
};
},
};
mockService("orm", fakeORMService);
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0);
// open navbar link popover
setContent(
el,
`<ul class="top_menu">
<li>
<a class="nav-link" href="exists">
<span data-oe-id="5">Top Me[]nu Item</span>
</a>
</li>
</ul>`
);
await waitFor(".o-we-linkpopover", { timeout: 1500 });
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
// click on edit menu button
await click(".js_edit_menu");
// check that EditMenuDialog is open
await waitFor(".o_website_dialog");
expect(".oe_menu_editor").toHaveCount(1);
});
});
2 changes: 1 addition & 1 deletion addons/website/static/src/components/dialog/edit_menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export class MenuDialog extends Component {
this.url.input.value = input.value;
},
};
const unmountAutocompleteWithPages = wUtils.autocompleteWithPages(input, options);
const unmountAutocompleteWithPages = wUtils.autocompleteWithPages(input, options, this.env);
return () => unmountAutocompleteWithPages();
}, () => [this.urlInputRef.el]);
}
Expand Down