Skip to content

Commit 0b6ae9c

Browse files
committed
[IMP] html_builder: Tests for NavbarLinkPopover and MenuDataPlugin
1 parent 53d3826 commit 0b6ae9c

File tree

1 file changed

+273
-0
lines changed

1 file changed

+273
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
import { describe, expect, test } from "@odoo/hoot";
2+
import { waitFor, waitForNone, click } from "@odoo/hoot-dom";
3+
import { defineWebsiteModels } from "./website_helpers";
4+
import { setupEditor } from "@html_editor/../tests/_helpers/editor";
5+
import { setContent } from "@html_editor/../tests/_helpers/selection";
6+
import { patchWithCleanup, mockService } from "@web/../tests/web_test_helpers";
7+
import { MAIN_PLUGINS } from "@html_editor/plugin_sets";
8+
import { MenuDataPlugin } from "@html_builder/website_builder/plugins/menu_data_plugin";
9+
import { MenuDialog } from "@website/components/dialog/edit_menu";
10+
11+
defineWebsiteModels();
12+
13+
describe("Top Menu should open a NavbarLinkPopover", () => {
14+
test("should open a navbar popover when the selection is inside a top menu link and close outside of a top menu link", async () => {
15+
const { el } = await setupEditor(
16+
`<ul class="top_menu">
17+
<li>
18+
<a class="nav-link" href="exists">
19+
<span>Top Menu Item</span>
20+
</a>
21+
</li>
22+
</ul>
23+
<p>Outside</p>`,
24+
{
25+
config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] },
26+
}
27+
);
28+
expect(".o-we-linkpopover").toHaveCount(0);
29+
// selection inside a top menu link
30+
setContent(
31+
el,
32+
`<ul class="top_menu">
33+
<li>
34+
<a class="nav-link" href="exists">
35+
<span>Top Me[]nu Item</span>
36+
</a>
37+
</li>
38+
</ul>
39+
<p>Outside</p>`
40+
);
41+
await waitFor(".o-we-linkpopover", { timeout: 1500 });
42+
// remove link button replaced with sitemap button
43+
expect(".o-we-linkpopover:has(i.fa-chain-broken)").toHaveCount(0);
44+
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
45+
// selection outside a top menu link
46+
setContent(
47+
el,
48+
`<ul class="top_menu">
49+
<li>
50+
<a class="nav-link" href="exists">
51+
<span>Top Menu Item</span>
52+
</a>
53+
</li>
54+
</ul>
55+
<p>Out[]side</p>`
56+
);
57+
await waitForNone(".o-we-linkpopover", { timeout: 1500 });
58+
expect(".o-we-linkpopover").toHaveCount(0);
59+
});
60+
61+
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 () => {
62+
const { el } = await setupEditor(
63+
`<ul class="top_menu">
64+
<li>
65+
<a class="nav-link" href="exists">
66+
<span>Top Menu Item</span>
67+
</a>
68+
</li>
69+
</ul>`,
70+
{
71+
config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] },
72+
}
73+
);
74+
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0);
75+
// open navbar link popover
76+
setContent(
77+
el,
78+
`<ul class="top_menu">
79+
<li>
80+
<a class="nav-link" href="exists">
81+
<span>Top Me[]nu Item</span>
82+
</a>
83+
</li>
84+
</ul>`
85+
);
86+
await waitFor(".o-we-linkpopover", { timeout: 1500 });
87+
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
88+
// selection in the same link
89+
setContent(
90+
el,
91+
`<ul class="top_menu">
92+
<li>
93+
<a class="nav-link" href="exists">
94+
<span>Top Menu It[]em</span>
95+
</a>
96+
</li>
97+
</ul>`
98+
);
99+
await waitFor(".o-we-linkpopover", { timeout: 1500 });
100+
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
101+
});
102+
103+
test("should open a navbar popover when the selection is inside a top menu dropdown link", async () => {
104+
const { el } = await setupEditor(
105+
`<ul class="top_menu">
106+
<li>
107+
<a class="nav-link" href="exists">
108+
<span>Top Menu Item</span>
109+
</a>
110+
</li>
111+
<div class="dropdown">
112+
<a class="dropdown-toggle" data-bs-toggle="dropdown"></a>
113+
<div class="dropdown-menu">
114+
<li>
115+
<a class="dropdown-item" href="exists">
116+
<span>Dropdown Menu Item</span>
117+
</a>
118+
</li>
119+
</div>
120+
</div>
121+
</ul>`,
122+
{
123+
config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] },
124+
}
125+
);
126+
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0);
127+
// selection in dropdown menu
128+
setContent(
129+
el,
130+
`<ul class="top_menu">
131+
<li>
132+
<a class="nav-link" href="exists">
133+
<span>Top Menu Item</span>
134+
</a>
135+
</li>
136+
<div class="dropdown">
137+
<a class="dropdown-toggle" data-bs-toggle="dropdown"></a>
138+
<div class="dropdown-menu">
139+
<li>
140+
<a class="dropdown-item" href="exists">
141+
<span>Dropdown Me[]nu Item</span>
142+
</a>
143+
</li>
144+
</div>
145+
</div>
146+
</ul>`
147+
);
148+
await waitFor(".o-we-linkpopover", { timeout: 1500 });
149+
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
150+
});
151+
});
152+
153+
describe("should open dialogs when editing link or menu", () => {
154+
test("after clicking on edit link button, a MenuDialog should appear", async () => {
155+
const { el } = await setupEditor(
156+
`<ul class="top_menu">
157+
<li>
158+
<a class="nav-link" href="exists">
159+
<span data-oe-id="5">Top Menu Item</span>
160+
</a>
161+
</li>
162+
</ul>`,
163+
{
164+
config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] },
165+
}
166+
);
167+
patchWithCleanup(MenuDialog.prototype, {
168+
setup() {
169+
super.setup();
170+
this.website.pageDocument = el.ownerDocument;
171+
},
172+
});
173+
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0);
174+
// open navbar link popover
175+
setContent(
176+
el,
177+
`<ul class="top_menu">
178+
<li>
179+
<a class="nav-link" href="exists">
180+
<span data-oe-id="5">Top Me[]nu Item</span>
181+
</a>
182+
</li>
183+
</ul>`
184+
);
185+
await waitFor(".o-we-linkpopover", { timeout: 1500 });
186+
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
187+
// click the link edit button
188+
await click(".o_we_edit_link");
189+
// check that MenuDialog is open and that name and url have been passed correctly
190+
await waitFor(".o_website_dialog", { timeout: 1500 });
191+
expect("input.form-control:not(#url_input)").toHaveValue("Top Menu Item");
192+
expect("#url_input").toHaveValue("exists");
193+
});
194+
195+
test("after clicking on edit menu button, a EditMenuDialog should appear", async () => {
196+
const { el } = await setupEditor(
197+
`<ul class="top_menu">
198+
<li>
199+
<a class="nav-link" href="exists">
200+
<span>Top Menu Item</span>
201+
</a>
202+
</li>
203+
</ul>`,
204+
{
205+
config: { Plugins: [...MAIN_PLUGINS, MenuDataPlugin] },
206+
}
207+
);
208+
mockService("website", {
209+
get currentWebsite() {
210+
return {
211+
id: 1,
212+
metadata: {
213+
lang: "en_EN",
214+
},
215+
};
216+
},
217+
});
218+
const fakeORMService = {
219+
call: (model, method, args, kwargs) => {
220+
expect(model).toBe("website.menu");
221+
expect(method).toBe("get_tree");
222+
expect(args[0]).toBe(1);
223+
return {
224+
fields: {
225+
id: 4,
226+
name: "Top Menu",
227+
url: "#",
228+
new_window: false,
229+
is_mega_menu: false,
230+
sequence: 0,
231+
parent_id: false,
232+
},
233+
children: [
234+
{
235+
fields: {
236+
id: 5,
237+
name: "Top Menu Item",
238+
url: "exists",
239+
new_window: false,
240+
is_mega_menu: false,
241+
sequence: 10,
242+
parent_id: 4,
243+
},
244+
children: [],
245+
is_homepage: true,
246+
},
247+
],
248+
is_homepage: false,
249+
};
250+
},
251+
};
252+
mockService("orm", fakeORMService);
253+
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(0);
254+
// open navbar link popover
255+
setContent(
256+
el,
257+
`<ul class="top_menu">
258+
<li>
259+
<a class="nav-link" href="exists">
260+
<span data-oe-id="5">Top Me[]nu Item</span>
261+
</a>
262+
</li>
263+
</ul>`
264+
);
265+
await waitFor(".o-we-linkpopover", { timeout: 1500 });
266+
expect(".o-we-linkpopover:has(i.fa-sitemap)").toHaveCount(1);
267+
// click on edit menu button
268+
await click(".js_edit_menu");
269+
// check that EditMenuDialog is open
270+
await waitFor(".o_website_dialog");
271+
expect(".oe_menu_editor").toHaveCount(1);
272+
});
273+
});

0 commit comments

Comments
 (0)