[REF] *: use iframe hoot pseudo selector in tour triggers

In this commit, we change rest of triggers in tours where an iframe is
selected (suite of #156653).
To do this, we use the :iframe HOOT pseudo-selector.
With this changes, we can now remove the getNodesFromSelector
function in odoo/addons/web_tour/static/src/tour_service/tour_utils.js
Note that in this previous function, a ([is-ready]="true") check was
made for iframe elements but was only necessary for few of them (7).
So, a stepUtils.waitIframeIsReady() has been added to check this state.

closes odoo/design-themes#783

Related: odoo/odoo#157217
Related: odoo/enterprise#58474
Signed-off-by: Julien Mougenot (jum) <jum@odoo.com>
This commit is contained in:
Pierre Pulinckx (PIPU)
2024-03-12 15:27:27 +01:00
parent 833a667000
commit 45061e7cc4
@@ -1,59 +1,61 @@
/** @odoo-module */ /** @odoo-module */
import wTourUtils from '@website/js/tours/tour_utils'; import wTourUtils from '@website/js/tours/tour_utils';
import { stepUtils } from "@web_tour/tour_service/tour_utils";
wTourUtils.registerWebsitePreviewTour('theme_menu_hierarchies', { wTourUtils.registerWebsitePreviewTour('theme_menu_hierarchies', {
url: '/example', url: '/example',
test: true, test: true,
}, () => [ }, () => [
stepUtils.waitIframeIsReady(),
{ {
content: 'Check Mega Menu is correctly created', content: 'Check Mega Menu is correctly created',
trigger: "iframe .top_menu a.o_mega_menu_toggle", trigger: ":iframe .top_menu a.o_mega_menu_toggle",
}, { }, {
content: 'Check Mega Menu content', content: 'Check Mega Menu content',
trigger: "iframe .top_menu div.o_mega_menu.show .fa-cube", trigger: ":iframe .top_menu div.o_mega_menu.show .fa-cube",
run: () => null, // It's a check. run: () => null, // It's a check.
}, { }, {
content: 'Check new top level menu is correctly created', content: 'Check new top level menu is correctly created',
trigger: 'iframe .top_menu .nav-item.dropdown .dropdown-toggle:contains("Example 1")', trigger: ':iframe .top_menu .nav-item.dropdown .dropdown-toggle:contains("Example 1")',
}, { }, {
content: 'Check sub menu are correctly created', content: 'Check sub menu are correctly created',
trigger: 'iframe .top_menu .dropdown-menu.show a.dropdown-item:contains("Item 1")', trigger: ':iframe .top_menu .dropdown-menu.show a.dropdown-item:contains("Item 1")',
run: () => null, // It's a check. run: () => null, // It's a check.
}, { }, {
content: 'The new menu hierarchy should not be included in the navbar', content: 'The new menu hierarchy should not be included in the navbar',
trigger: 'iframe body:not(:has(.top_menu a[href="/dogs"]))', trigger: ':iframe body:not(:has(.top_menu a[href="/dogs"]))',
run: () => null, // It's a check. run: () => null, // It's a check.
}, { }, {
content: 'The new menu hierarchy should be inside the footer', content: 'The new menu hierarchy should be inside the footer',
trigger: 'iframe footer ul li a[href="/dogs"]', trigger: ':iframe footer ul li a[href="/dogs"]',
run: () => null, // It's a check. run: () => null, // It's a check.
}, },
...wTourUtils.clickOnEditAndWaitEditMode(), ...wTourUtils.clickOnEditAndWaitEditMode(),
{ {
content: 'Click on footer', content: 'Click on footer',
trigger: 'iframe footer', trigger: ':iframe footer',
}, { }, {
content: 'The theme custom footer template should be listed and selected', content: 'The theme custom footer template should be listed and selected',
trigger: 'we-select[data-variable="footer-template"] we-toggler img[src*="/theme_test_custo"]', trigger: 'we-select[data-variable="footer-template"] we-toggler img[src*="/theme_test_custo"]',
run: () => null, // It's a check. run: () => null, // It's a check.
}, { }, {
content: 'Click on header', content: 'Click on header',
trigger: 'iframe header', trigger: ':iframe header',
}, { }, {
content: 'The theme custom header template should be listed and selected', content: 'The theme custom header template should be listed and selected',
trigger: 'we-select[data-variable="header-template"] we-toggler img[src*="/theme_test_custo"]', trigger: 'we-select[data-variable="header-template"] we-toggler img[src*="/theme_test_custo"]',
run: () => null, // It's a check. run: () => null, // It's a check.
}, { }, {
content: 'Click on image which has a shape', content: 'Click on image which has a shape',
trigger: 'iframe #wrap .s_text_image img[data-shape]', trigger: ':iframe #wrap .s_text_image img[data-shape]',
}, { }, {
content: 'The theme custom "Blob 01" shape should be listed and selected', content: 'The theme custom "Blob 01" shape should be listed and selected',
trigger: 'we-select[data-name="shape_img_opt"] we-toggler:contains("Blob 01")', trigger: 'we-select[data-name="shape_img_opt"] we-toggler:contains("Blob 01")',
run: () => null, // It's a check. run: () => null, // It's a check.
}, { }, {
content: 'Click on section which has a bg shape', content: 'Click on section which has a bg shape',
trigger: 'iframe #wrap .s_text_block[data-oe-shape-data]', trigger: ':iframe #wrap .s_text_block[data-oe-shape-data]',
}, { }, {
content: 'The theme custom "Curve 01" shape should be listed and selected', content: 'The theme custom "Curve 01" shape should be listed and selected',
trigger: 'we-select[data-name="bg_shape_opt"] we-toggler:contains("Curve 01")', trigger: 'we-select[data-name="bg_shape_opt"] we-toggler:contains("Curve 01")',