312 lines
11 KiB
JavaScript
312 lines
11 KiB
JavaScript
/** @odoo-module**/
|
|
/* global ace */
|
|
|
|
import {clickOnSave, registerWebsitePreviewTour } from "@website/js/tours/tour_utils";
|
|
|
|
const adminCssModif = '#wrap {display: none;}';
|
|
const demoCssModif = '// demo_edition';
|
|
|
|
registerWebsitePreviewTour('html_editor_multiple_templates', {
|
|
url: '/generic',
|
|
edition: true,
|
|
},
|
|
() => [
|
|
{
|
|
content: "drop a snippet group",
|
|
trigger: "#oe_snippets .oe_snippet[name=Intro].o_we_draggable .oe_snippet_thumbnail",
|
|
// id starting by 'oe_structure..' will actually create an inherited view
|
|
run: "drag_and_drop :iframe #oe_structure_test_ui",
|
|
},
|
|
{
|
|
content: "Click on the s_cover snippet",
|
|
trigger: ':iframe .o_snippet_preview_wrap[data-snippet-id="s_cover"]',
|
|
run: "click",
|
|
},
|
|
...clickOnSave(),
|
|
// 2. Edit generic view
|
|
{
|
|
content: "open site menu",
|
|
trigger: 'button[data-menu-xmlid="website.menu_site"]',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "open html editor",
|
|
trigger: 'a[data-menu-xmlid="website.menu_ace_editor"]',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "add something in the generic view",
|
|
trigger: 'div.ace_line .ace_xml:contains("Generic")',
|
|
run() {
|
|
ace.edit(document.querySelector('#resource-editor div')).getSession().insert({row: 3, column: 1}, '<p>somenewcontent</p>\n');
|
|
},
|
|
},
|
|
// 3. Edit oe_structure specific view
|
|
{
|
|
content: "select oe_structure specific view",
|
|
trigger: 'div.ace_line .ace_xml:contains("somenewcontent")',
|
|
},
|
|
{
|
|
content: "open file selector menu",
|
|
trigger: ".o_resource_editor .o_select_menu_toggler",
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "open oe_structure_test_ui view",
|
|
trigger: ".o-dropdown--menu .o-dropdown-item:contains(oe_structure_test_ui)",
|
|
run: "click",
|
|
},
|
|
{
|
|
trigger: '.o_resource_editor .o_select_menu_toggler:contains("oe_structure_test_ui")',
|
|
},
|
|
{
|
|
content: "add something in the oe_structure specific view",
|
|
trigger: 'div.ace_line .ace_xml:contains("s_cover")',
|
|
run() {
|
|
ace.edit(document.querySelector('#resource-editor div')).getSession().insert({row: 2, column: 1}, '<p>anothernewcontent</p>\n');
|
|
},
|
|
},
|
|
{
|
|
trigger: 'div.ace_line .ace_xml:contains("anothernewcontent")',
|
|
},
|
|
{
|
|
content: "save the html editor",
|
|
trigger: ".o_resource_editor button:contains(Save)",
|
|
run: "click",
|
|
},
|
|
{
|
|
trigger: ':iframe #wrapwrap:contains("anothernewcontent")',
|
|
},
|
|
{
|
|
content: "check that the page has both modification",
|
|
trigger: ':iframe #wrapwrap:contains("somenewcontent")',
|
|
},
|
|
]
|
|
);
|
|
|
|
registerWebsitePreviewTour('test_html_editor_scss', {
|
|
url: '/contactus',
|
|
},
|
|
() => [
|
|
// 1. Open Html Editor and select a scss file
|
|
{
|
|
trigger: ":iframe #wrap:visible", // ensure state for later
|
|
},
|
|
{
|
|
trigger: ":iframe h1:contains(contact us)",
|
|
},
|
|
{
|
|
trigger: ":iframe input[name=company]",
|
|
},
|
|
{
|
|
content: "open site menu",
|
|
trigger: 'nav button[data-menu-xmlid="website.menu_site"]:contains(site)',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "open html editor",
|
|
trigger: '.o_popover a[data-menu-xmlid="website.menu_ace_editor"]:contains(/^HTML/)',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "open type switcher",
|
|
trigger: '.o_resource_editor_type_switcher button',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "select scss files",
|
|
trigger: '.o-dropdown--menu .dropdown-item:contains("SCSS")',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "select 'user_custom_rules'",
|
|
trigger: '.o_resource_editor .o_select_menu_toggler:contains("user_custom_rules")',
|
|
},
|
|
// 2. Edit that file and ensure it was saved then reset it
|
|
{
|
|
content: "add some scss content in the file",
|
|
trigger: 'div.ace_line .ace_comment:contains("footer {")',
|
|
run() {
|
|
ace.edit(document.querySelector('#resource-editor div')).getSession().insert({row: 2, column: 0}, `${adminCssModif}\n`);
|
|
},
|
|
},
|
|
{
|
|
trigger: `div.ace_line:contains("${adminCssModif}")`,
|
|
},
|
|
{
|
|
content: "save the html editor",
|
|
trigger: ".o_resource_editor_title button:contains(Save)",
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "check that the scss modification got applied",
|
|
trigger: ':iframe body:has(#wrap:hidden)',
|
|
timeout: 30000, // SCSS compilation might take some time
|
|
},
|
|
{
|
|
content: "reset view (after reload, html editor should have been reopened where it was)",
|
|
trigger: '#resource-editor-id button:contains(Reset)',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "confirm reset warning",
|
|
trigger: '.modal-footer .btn-primary',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "check that the scss file was reset correctly, wrap content should now be visible again",
|
|
trigger: ':iframe #wrap:visible',
|
|
timeout: 30000, // SCSS compilation might take some time
|
|
},
|
|
// 3. Customize again that file (will be used in second part of the test
|
|
// to ensure restricted user can still use the HTML Editor)
|
|
{
|
|
content: "add some scss content in the file",
|
|
trigger: 'div.ace_line .ace_comment:contains("footer {")',
|
|
run() {
|
|
ace.edit(document.querySelector('#resource-editor div')).getSession().insert({row: 2, column: 0}, `${adminCssModif}\n`);
|
|
},
|
|
},
|
|
{
|
|
trigger: `div.ace_line:contains("${adminCssModif}")`,
|
|
},
|
|
{
|
|
content: "save the html editor",
|
|
trigger: ".o_resource_editor_title button:contains(Save)",
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "check that the scss modification got applied",
|
|
trigger: ':iframe body:has(#wrap:hidden)',
|
|
},
|
|
]
|
|
);
|
|
|
|
registerWebsitePreviewTour('test_html_editor_scss_2', {
|
|
url: '/',
|
|
},
|
|
() => [
|
|
// This part of the test ensures that a restricted user can still use
|
|
// the HTML Editor if someone else made a customization previously.
|
|
|
|
// 4. Open Html Editor and select a scss file
|
|
{
|
|
content: "open site menu",
|
|
trigger: 'button[data-menu-xmlid="website.menu_site"]',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "open html editor",
|
|
trigger: '.o_popover a[data-menu-xmlid="website.menu_ace_editor"]:contains(/^HTML/)',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "open type switcher",
|
|
trigger: '.o_resource_editor_type_switcher button',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "select scss files",
|
|
trigger: '.o-dropdown--menu .dropdown-item:contains("SCSS")',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "select 'user_custom_rules'",
|
|
trigger: '.o_resource_editor .o_select_menu_toggler:contains("user_custom_rules")',
|
|
},
|
|
// 5. Edit that file and ensure it was saved then reset it
|
|
{
|
|
content: "add some scss content in the file",
|
|
trigger: `div.ace_line:contains("${adminCssModif}")`,
|
|
// ensure the admin modification is here
|
|
run() {
|
|
ace.edit(document.querySelector('#resource-editor div')).getSession().insert({row: 2, column: 0}, `${demoCssModif}\n`);
|
|
},
|
|
},
|
|
{
|
|
trigger: `div.ace_line:contains("${demoCssModif}")`,
|
|
},
|
|
{
|
|
content: "save the html editor",
|
|
trigger: ".o_resource_editor button:contains(Save)",
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "reset view (after reload, html editor should have been reopened where it was)",
|
|
trigger: '#resource-editor-id button:contains(Reset)',
|
|
timeout: 30000, // SCSS compilation might take some time
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "confirm reset warning",
|
|
trigger: '.modal-footer .btn-primary',
|
|
run: "click",
|
|
},
|
|
{
|
|
trigger: `body:not(:has(div.ace_line:contains("${adminCssModif}")))`,
|
|
},
|
|
{
|
|
content: "check that the scss file was reset correctly",
|
|
trigger: `body:not(:has(div.ace_line:contains("${demoCssModif}")))`,
|
|
timeout: 30000, // SCSS compilation might take some time
|
|
},
|
|
]
|
|
);
|
|
|
|
registerWebsitePreviewTour(
|
|
"website_code_editor_usable",
|
|
{
|
|
// TODO: enable debug mode when failing tests have been fixed (props validation)
|
|
url: "/",
|
|
},
|
|
() => [
|
|
{
|
|
content: "Open Site menu",
|
|
trigger: 'button[data-menu-xmlid="website.menu_site"]',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "Open HTML / CSS Editor",
|
|
trigger: 'a[data-menu-xmlid="website.menu_ace_editor"]',
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "Bypass warning",
|
|
trigger: ".o_resource_editor_wrapper div:nth-child(2) button:nth-child(3)",
|
|
run: "click",
|
|
},
|
|
// Test all 3 file type options
|
|
...[{
|
|
menuItemIndex: 1,
|
|
editorMode: 'qweb',
|
|
}, {
|
|
menuItemIndex: 2,
|
|
editorMode: 'scss',
|
|
}, {
|
|
menuItemIndex: 3,
|
|
editorMode: 'javascript',
|
|
}]
|
|
.map(({ menuItemIndex, editorMode }) => [
|
|
{
|
|
content: "Open file type dropdown",
|
|
trigger: ".o_resource_editor_type_switcher .dropdown-toggle",
|
|
run: "click",
|
|
},
|
|
{
|
|
content: `Select type ${menuItemIndex}`,
|
|
trigger: `.o-overlay-container .o-dropdown--menu .dropdown-item:nth-child(${menuItemIndex})`,
|
|
run: "click",
|
|
},
|
|
{
|
|
content: "Wait for editor mode to change",
|
|
trigger: `.ace_editor[data-mode="${editorMode}"]`,
|
|
},
|
|
{
|
|
content: "Make sure text is being highlighted",
|
|
trigger: ".ace_content .ace_text-layer .ace_line:first-child span",
|
|
},
|
|
])
|
|
.flat(),
|
|
]
|
|
);
|