pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web,*: add accordion menu component

Browse Source 
* = project,website

On the small screen, the sub dropdown is a bit weird to positioning, so
we use an accordion instead.
We apply this change also on desktop to avoid split behavior between
small screen and bigger screen and also to avoid duplicating code.

Also, we have made some DOM/CSS change:
* avoid reflow of the search bar menu by adding a min-width on the
  columns and a max-width on the input for custom groupbys and favorite
  filters
* re-align caret vertically for accordion indicators
* reword favorite edition items and add a tooltip
* all menu items have the class `o_menu_item`

closes odoo/odoo#122635

Note: DOM and some tests were adapted to reflect the change
Task-id: 3276542 (Part of)
Related: odoo/enterprise#41563
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
This commit is contained in:
Romeo Fragomeli
2023-06-08 16:10:05 +02:00
parent 1c1aaa883c
commit 976491e012
23 changed files with 370 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/project/static/tests/tours/project_burndown_chart_tour.js
-6
View File
@@ -43,9 +43,6 @@ registry.category("web_tour.tours").add('burndown_chart_tour', {
}, {
content: 'Open the Date group by sub menu',
trigger: '.o_group_by_menu button.o_menu_item:contains("Date")',
run: function () {
this.$anchor[0].dispatchEvent(new Event('mouseenter'));
},
}, {
content: 'Click on the selected Date sub menu',
trigger: '.o_group_by_menu button.o_menu_item:contains("Date") + * .dropdown-item.selected',
@@ -61,9 +58,6 @@ registry.category("web_tour.tours").add('burndown_chart_tour', {
}, {
content: 'Open the Date filter sub menu',
trigger: '.o_filter_menu button.o_menu_item:contains("Date")',
run: function () {
this.$anchor[0].dispatchEvent(new Event('mouseenter'));
},
}, {
content: 'Click on the first Date filter sub menu',
trigger: '.o_filter_menu .o_menu_item:contains("Date") + * .dropdown-item:first-child',
addons/project/static/tests/tours/project_sharing_tour.js
+7 -4
View File
@@ -71,8 +71,11 @@ const projectSharingSteps = [...stepUtils.goToAppSteps("project.menu_main_pm", '
trigger: 'iframe .o_group_by_menu .dropdown-item:first-child',
content: 'click on the first item in the group by menu',
}, {
trigger: 'iframe .o_favorite_menu .o_add_favorite > button',
content: 'click to "save current search" button in favorite menu',
trigger: 'iframe .o_favorite_menu .o_add_favorite',
content: 'open accordion "save current search" in favorite menu',
}, {
trigger: 'iframe .o_favorite_menu .o_accordion_values .o_save_favorite',
content: 'click to "save" button in favorite menu',
}, {
trigger: 'iframe .o_filter_menu .dropdown-item:first-child',
content: 'click on the first item in the filter menu',
@@ -80,8 +83,8 @@ const projectSharingSteps = [...stepUtils.goToAppSteps("project.menu_main_pm", '
trigger: 'iframe .o_group_by_menu .dropdown-item:first-child',
content: 'click on the first item in the group by menu',
}, {
trigger: 'iframe .o_favorite_menu .o_add_favorite > button',
content: 'click to "save current search" button in favorite menu',
trigger: 'iframe .o_favorite_menu .o_accordion_values .o_save_favorite',
content: 'click to "save" button in favorite menu',
}, {
trigger: 'iframe button.o_switch_view.o_list',
content: 'Go to the list view',
addons/web/static/src/core/dropdown/accordion_item.js
+40
View File
@@ -0,0 +1,40 @@
/** @odoo-module **/
import { Component, onPatched, useState } from "@odoo/owl";
export const ACCORDION = Symbol("Accordion");
export class AccordionItem extends Component {
static template = "web.AccordionItem";
static components = {};
static props = {
slots: {
type: Object,
shape: {
default: {},
},
},
description: String,
selected: {
type: Boolean,
optional: true,
},
class: {
type: String,
optional: true,
},
};
static defaultProps = {
class: "",
selected: false,
};
setup() {
this.state = useState({
open: false,
});
this.parentComponent = this.env[ACCORDION];
onPatched(() => {
this.parentComponent?.accordionStateChanged?.();
});
}
}
addons/web/static/src/core/dropdown/accordion_item.scss
+12
View File
@@ -0,0 +1,12 @@
.o_accordion_toggle {
@include caret();
&.open {
@include caret('up');
}
&::after {
@include o-position-absolute($top: 0, $right: 0);
transform: translate(-0.6em, 0.8em) /*rtl:translate(0.6em, 0.8em) scaleX(-1)*/;
}
}
addons/web/static/src/core/dropdown/accordion_item.xml
+21
View File
@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="web.AccordionItem" owl="1">
<div class="o_accordion position-relative">
<button class="o_menu_item o_accordion_toggle dropdown-item" tabindex="0"
t-att-class="{'selected': props.selected, 'open': state.open}"
t-attf-class="{{ props.class }}"
t-att-aria-expanded="state.open ? 'true' : 'false'"
t-esc="props.description"
t-on-click="() => state.open = !state.open"
/>
<t t-if="state.open">
<div class="o_accordion_values ms-4 border-start">
<t t-slot="default"/>
</div>
</t>
</div>
</t>
</templates>
addons/web/static/src/core/dropdown/dropdown_navigation_hook.js
+25 -3
View File
@@ -5,7 +5,8 @@ import { browser } from "../browser/browser";
import { localization } from "@web/core/l10n/localization";
import { scrollTo } from "../utils/scrolling";
import { useComponent, useEffect, useRef } from "@odoo/owl";
import { useChildSubEnv, useComponent, useEffect, useRef } from "@odoo/owl";
import { ACCORDION } from "@web/core/dropdown/accordion_item";
/**
* @typedef {{
@@ -24,8 +25,12 @@ const ACTIVE_MENU_ELEMENT_CLASS = "focus";
const MENU_ELEMENTS_SELECTORS = [
":scope > .dropdown-item",
":scope > .dropdown",
":scope > .o_accordion > .dropdown-item",
":scope > .o_accordion > .o_accordion_values > .dropdown-item",
":scope > .o_dropdown_container > .dropdown-item",
":scope > .o_dropdown_container > .dropdown",
":scope > .o_dropdown_container > .o_accordion > .dropdown-item",
":scope > .o_dropdown_container > .o_accordion > .o_accordion_values > .dropdown-item",
];
const NEXT_ACTIVE_INDEX_FNS = {
FIRST: () => 0,
@@ -70,7 +75,9 @@ export function useDropdownNavigation() {
const menuRef = useRef("menuRef");
/** @type {MenuElement[]} */
let menuElements = [];
useEffect(() => {
let cleanupMenuElements;
const refreshMenuElements = () => {
if (!comp.state.open) {
return;
}
@@ -157,7 +164,7 @@ export function useDropdownNavigation() {
}
addedListeners.push([navTarget, elementListeners]);
}
return () => {
cleanupMenuElements = () => {
menuElements = [];
mouseSelectionActive = true;
@@ -168,6 +175,21 @@ export function useDropdownNavigation() {
}
}
};
return () => cleanupMenuElements();
};
useEffect(refreshMenuElements);
// Set up nested accordion
// This is needed in order to keep the parent dropdown
// aware of the accordion menu elements when its state has changed.
useChildSubEnv({
[ACCORDION]: {
accordionStateChanged: () => {
cleanupMenuElements?.();
refreshMenuElements();
},
},
});
// Set up active menu element helpers --------------------------------------
addons/web/static/src/search/custom_favorite_item/custom_favorite_item.js
+2 -2
View File
@@ -1,6 +1,6 @@
/** @odoo-module **/
import { Dropdown } from "@web/core/dropdown/dropdown";
import { AccordionItem } from "@web/core/dropdown/accordion_item";
import { CheckBox } from "@web/core/checkbox/checkbox";
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
@@ -91,7 +91,7 @@ export class CustomFavoriteItem extends Component {
}
CustomFavoriteItem.template = "web.CustomFavoriteItem";
CustomFavoriteItem.components = { CheckBox, Dropdown };
CustomFavoriteItem.components = { CheckBox, AccordionItem };
CustomFavoriteItem.props = {};
favoriteMenuRegistry.add(
"custom-favorite-item",
addons/web/static/src/search/custom_favorite_item/custom_favorite_item.xml
+5 -8
View File
@@ -2,10 +2,7 @@
<templates xml:space="preserve">
<t t-name="web.CustomFavoriteItem" owl="1" >
<Dropdown class="'o_add_favorite'">
<t t-set-slot="toggler">
Save current search
</t>
<AccordionItem class="'o_add_favorite'" description="'Save current search'">
<div class="px-3 py-2">
<input type="text"
class="o_input"
@@ -14,18 +11,18 @@
t-on-keydown="onInputKeydown"
/>
<CheckBox value="state.isDefault" onChange.bind="onDefaultCheckboxChange">
Use by default
<span data-tooltip="Use this filter by default when opening this view">Default filter</span>
</CheckBox>
<CheckBox value="state.isShared" onChange.bind="onShareCheckboxChange">
Share with all users
<span data-tooltip="Make this filter available to other users">Shared</span>
</CheckBox>
</div>
<div class="px-3 py-2">
<button class="o_save_favorite btn btn-primary" t-on-click="saveFavorite">
<button class="o_save_favorite btn btn-primary w-100" t-on-click="saveFavorite">
Save
</button>
</div>
</Dropdown>
</AccordionItem>
</t>
</templates>
addons/web/static/src/search/custom_group_by_item/custom_group_by_item.js
+2 -2
View File
@@ -1,6 +1,6 @@
/** @odoo-module **/
import { Dropdown } from "@web/core/dropdown/dropdown";
import { AccordionItem } from "@web/core/dropdown/accordion_item";
import { Component, useState } from "@odoo/owl";
@@ -14,7 +14,7 @@ export class CustomGroupByItem extends Component {
}
CustomGroupByItem.template = "web.CustomGroupByItem";
CustomGroupByItem.components = { Dropdown };
CustomGroupByItem.components = { AccordionItem };
CustomGroupByItem.props = {
fields: Array,
onAddCustomGroup: Function,
addons/web/static/src/search/custom_group_by_item/custom_group_by_item.xml
+3 -6
View File
@@ -1,12 +1,9 @@
<templates xml:space="preserve">
<t t-name="web.CustomGroupByItem" owl="1">
<Dropdown class="'o_add_custom_group_menu'">
<t t-set-slot="toggler">
Add Custom Group
</t>
<AccordionItem class="'o_add_custom_group_menu'" description="'Add Custom Group'">
<div class="px-3 py-2">
<select class="w-100 o_input" t-model="state.fieldName">
<select class="o_input" t-model="state.fieldName">
<option t-foreach="props.fields" t-as="field" t-key="field.name"
t-att-value="field.name"
t-esc="field.string"
@@ -20,7 +17,7 @@
Apply
</button>
</div>
</Dropdown>
</AccordionItem>
</t>
</templates>
addons/web/static/src/search/search_bar_menu/search_bar_menu.js
+2
View File
@@ -8,6 +8,7 @@ import { DropdownItem } from "@web/core/dropdown/dropdown_item";
import { registry } from "@web/core/registry";
import { sortBy } from "@web/core/utils/arrays";
import { useBus, useService } from "@web/core/utils/hooks";
import { AccordionItem } from "@web/core/dropdown/accordion_item";
import { CustomGroupByItem } from "@web/search/custom_group_by_item/custom_group_by_item";
import { SearchDropdownItem } from "@web/search/search_dropdown_item/search_dropdown_item";
import { FACET_ICONS, GROUPABLE_TYPES } from "@web/search/utils/misc";
@@ -23,6 +24,7 @@ export class SearchBarMenu extends Component {
DropdownItem,
SearchDropdownItem,
CustomGroupByItem,
AccordionItem,
};
static props = {
slots: {
addons/web/static/src/search/search_bar_menu/search_bar_menu.scss
+7
View File
@@ -3,5 +3,12 @@
.o_search_bar_menu {
.o_dropdown_container {
border-color: $dropdown-divider-bg !important;
min-width: 220px;
}
.o_accordion_values .o_input {
max-width: 17ch;
text-overflow: ellipsis;
white-space: nowrap;
}
}
addons/web/static/src/search/search_bar_menu/search_bar_menu.xml
+5 -11
View File
@@ -22,10 +22,7 @@
<div class="dropdown-divider" role="separator"/>
</t>
<t t-if="item.options">
<Dropdown togglerClass="'o_menu_item' + (item.isActive ? ' selected' : '')">
<t t-set-slot="toggler">
<t t-esc="item.description"/>
</t>
<AccordionItem description="item.description" selected="item.isActive">
<t t-set="subGroup" t-value="null"/>
<t t-foreach="item.options" t-as="option" t-key="option.id">
<t t-if="subGroup !== null and subGroup !== option.groupNumber">
@@ -39,7 +36,7 @@
/>
<t t-set="subGroup" t-value="option.groupNumber"/>
</t>
</Dropdown>
</AccordionItem>
</t>
<t t-else="">
<SearchDropdownItem class="{ o_menu_item: true, selected: item.isActive }"
@@ -54,7 +51,7 @@
<t t-if="filterItems.length">
<div role="separator" class="dropdown-divider"/>
</t>
<DropdownItem onSelected.bind="onAddCustomFilterClick">Add Custom Filter</DropdownItem>
<DropdownItem class="'o_menu_item o_add_custom_filter'" onSelected.bind="onAddCustomFilterClick">Add Custom Filter</DropdownItem>
</div>
</t>
<!-- GroupBy -->
@@ -70,10 +67,7 @@
<div class="dropdown-divider" role="separator"/>
</t>
<t t-if="item.options">
<Dropdown togglerClass="'o_menu_item' + (item.isActive ? ' selected' : '')">
<t t-set-slot="toggler">
<t t-esc="item.description"/>
</t>
<AccordionItem description="item.description" selected="item.isActive">
<t t-set="subGroup" t-value="null"/>
<t t-foreach="item.options" t-as="option" t-key="option.id">
<t t-if="subGroup !== null and subGroup !== option.groupNumber">
@@ -87,7 +81,7 @@
/>
<t t-set="subGroup" t-value="option.groupNumber"/>
</t>
</Dropdown>
</AccordionItem>
</t>
<t t-else="">
<SearchDropdownItem class="{ o_menu_item: true, selected: item.isActive }"
addons/web/static/tests/core/dropdown_accordion_item_tests.js
+123
View File
@@ -0,0 +1,123 @@
/** @odoo-module **/
import { Component, xml } from "@odoo/owl";
import { browser } from "@web/core/browser/browser";
import { Dropdown } from "@web/core/dropdown/dropdown";
import { DropdownItem } from "@web/core/dropdown/dropdown_item";
import { AccordionItem } from "@web/core/dropdown/accordion_item";
import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
import { registry } from "@web/core/registry";
import { uiService } from "@web/core/ui/ui_service";
import { makeTestEnv } from "../helpers/mock_env";
import {
click,
getFixture,
mount,
nextTick,
patchWithCleanup,
triggerHotkey,
} from "../helpers/utils";
const serviceRegistry = registry.category("services");
let env;
let target;
QUnit.module("Components", ({ beforeEach }) => {
beforeEach(async () => {
serviceRegistry.add("hotkey", hotkeyService);
serviceRegistry.add("ui", uiService);
target = getFixture();
patchWithCleanup(browser, {
setTimeout: (fn) => fn(),
clearTimeout: () => {},
});
});
QUnit.module("Dropdown Accordion Item");
QUnit.test("accordion can be rendered", async (assert) => {
class Parent extends Component {}
Parent.template = xml`<AccordionItem description="'Test'" class="'text-primary'" selected="false"><h5>In accordion</h5></AccordionItem>`;
Parent.components = { AccordionItem };
env = await makeTestEnv();
await mount(Parent, target, { env });
assert.strictEqual(
target.querySelector(".o_accordion").outerHTML,
`<div class="o_accordion position-relative"><button class="o_menu_item o_accordion_toggle dropdown-item text-primary" tabindex="0" aria-expanded="false">Test</button></div>`
);
assert.containsOnce(target, "button.o_accordion_toggle");
assert.containsNone(target, ".o_accordion_values");
await click(target, "button.o_accordion_toggle");
assert.containsOnce(target, ".o_accordion_values");
assert.strictEqual(
target.querySelector(".o_accordion_values").innerHTML,
`<h5>In accordion</h5>`
);
});
QUnit.test("dropdown with accordion keyboard navigation", async (assert) => {
class Parent extends Component {}
Parent.template = xml`
<Dropdown>
<DropdownItem>item 1</DropdownItem>
<AccordionItem description="'item 2'" selected="false">
<DropdownItem>item 2-1</DropdownItem>
<DropdownItem>item 2-2</DropdownItem>
</AccordionItem>
<DropdownItem>item 3</DropdownItem>
</Dropdown>
`;
Parent.components = { Dropdown, DropdownItem, AccordionItem };
env = await makeTestEnv();
await mount(Parent, target, { env });
await click(target, ".o-dropdown .dropdown-toggle");
// Navigate with arrows
assert.containsNone(
target,
".dropdown-menu > .focus",
"menu should not have any active items"
);
const scenarioSteps = [
{ key: "arrowdown", expected: "item 1" },
{ key: "arrowdown", expected: "item 2" },
{ key: "arrowdown", expected: "item 3" },
{ key: "arrowdown", expected: "item 1" },
{ key: "tab", expected: "item 2" },
{ key: "enter", expected: "item 2" },
{ key: "tab", expected: "item 2-1" },
{ key: "tab", expected: "item 2-2" },
{ key: "tab", expected: "item 3" },
{ key: "tab", expected: "item 1" },
{ key: "arrowup", expected: "item 3" },
{ key: "arrowup", expected: "item 2-2" },
{ key: "arrowup", expected: "item 2-1" },
{ key: "arrowup", expected: "item 2" },
{ key: "enter", expected: "item 2" },
{ key: "arrowup", expected: "item 1" },
{ key: "shift+tab", expected: "item 3" },
{ key: "shift+tab", expected: "item 2" },
{ key: "shift+tab", expected: "item 1" },
{ key: "end", expected: "item 3" },
{ key: "home", expected: "item 1" },
];
for (const step of scenarioSteps) {
triggerHotkey(step.key);
await nextTick();
assert.strictEqual(
target.querySelector(".dropdown-menu .focus").innerText,
step.expected,
`selected menu should be ${step.expected}`
);
assert.strictEqual(
document.activeElement.innerText,
step.expected,
`document.activeElement should be ${step.expected}`
);
}
});
});
addons/web/static/tests/search/custom_favorite_item_tests.js
+10 -4
View File
@@ -90,14 +90,20 @@ QUnit.module("Search", (hooks) => {
await toggleSearchBarMenu(target);
await toggleSaveFavorite(target);
assert.strictEqual(
target.querySelector('.o_add_favorite input[type="text"]').value,
target.querySelector('.o_add_favorite + .o_accordion_values input[type="text"]').value,
"Action Name"
);
assert.containsN(target, '.o_add_favorite .form-check input[type="checkbox"]', 2);
const labelEls = target.querySelectorAll(".o_add_favorite .form-check label");
assert.containsN(
target,
'.o_add_favorite + .o_accordion_values .form-check input[type="checkbox"]',
2
);
const labelEls = target.querySelectorAll(
".o_add_favorite + .o_accordion_values .form-check label"
);
assert.deepEqual(
[...labelEls].map((e) => e.innerText.trim()),
["Use by default", "Share with all users"]
["Default filter", "Shared"]
);
});
addons/web/static/tests/search/custom_group_by_item_tests.js
+22 -17
View File
@@ -59,20 +59,25 @@ QUnit.module("Search", (hooks) => {
await toggleSearchBarMenu(target);
const customGroupByItem = target.querySelector(".o_add_custom_group_menu");
assert.strictEqual(customGroupByItem.innerText.trim(), "Add Custom Group");
const groupByMenu = target.querySelector(".o_group_by_menu");
assert.strictEqual(
groupByMenu.querySelector(".o_accordion").innerText.trim(),
"Add Custom Group"
);
assert.containsOnce(customGroupByItem, "button.dropdown-toggle");
assert.containsNone(customGroupByItem, ".dropdown-menu");
assert.containsOnce(groupByMenu, "button");
assert.containsNone(groupByMenu, ".o_accordion_values");
await toggleAddCustomGroup(target);
assert.containsOnce(customGroupByItem, ".dropdown-menu");
assert.containsOnce(groupByMenu, ".o_accordion_values");
assert.deepEqual(
[...target.querySelectorAll(".o_add_custom_group_menu select option")].map(
(el) => el.innerText
),
[
...target.querySelectorAll(
".o_add_custom_group_menu + .o_accordion_values select option"
),
].map((el) => el.innerText),
["Birthday", "Date", "Foo"]
);
});
@@ -100,7 +105,7 @@ QUnit.module("Search", (hooks) => {
assert.deepEqual(
[
...target.querySelectorAll(
".o_add_custom_group_menu .dropdown-menu select option"
".o_add_custom_group_menu + .o_accordion_values select option"
),
].map((el) => el.innerText),
["Foo"]
@@ -136,7 +141,7 @@ QUnit.module("Search", (hooks) => {
assert.deepEqual(
[
...target.querySelectorAll(
".o_add_custom_group_menu .dropdown-menu select option"
".o_add_custom_group_menu + .o_accordion_values select option"
),
].map((el) => el.innerText),
["Char A", "M2M Stored"]
@@ -163,7 +168,7 @@ QUnit.module("Search", (hooks) => {
await toggleSearchBarMenu(target);
assert.deepEqual(controlPanel.env.searchModel.groupBy, []);
assert.containsNone(target, ".o_menu_item");
assert.containsOnce(target, ".o_menu_item"); //Add Custom Group
await toggleAddCustomGroup(target);
await applyGroup(target);
@@ -200,16 +205,16 @@ QUnit.module("Search", (hooks) => {
await toggleAddCustomGroup(target);
// Single select node with a single option
assert.containsOnce(target, ".o_add_custom_group_menu .dropdown-menu select");
assert.containsOnce(target, ".o_add_custom_group_menu + .o_accordion_values select");
assert.strictEqual(
target
.querySelector(".o_add_custom_group_menu .dropdown-menu select option")
.querySelector(".o_add_custom_group_menu + .o_accordion_values select option")
.innerText.trim(),
"Super Date"
);
// Button apply
assert.containsOnce(target, ".o_add_custom_group_menu .dropdown-menu .btn");
assert.containsOnce(target, ".o_add_custom_group_menu + .o_accordion_values .btn");
});
QUnit.test(
@@ -235,9 +240,9 @@ QUnit.module("Search", (hooks) => {
await toggleAddCustomGroup(target);
await applyGroup(target);
assert.containsOnce(target, ".o_group_by_menu .o_menu_item");
assert.containsOnce(target, ".o_add_custom_group_menu .dropdown-toggle");
assert.containsOnce(target, ".o_add_custom_group_menu .dropdown-menu");
assert.containsN(target, ".o_group_by_menu .o_menu_item", 2);
assert.containsOnce(target, ".o_add_custom_group_menu.o_accordion_toggle");
assert.containsOnce(target, ".o_add_custom_group_menu + .o_accordion_values");
assert.deepEqual(getFacetTexts(target), ["Candlelight"]);
}
);
addons/web/static/tests/search/helpers.js
+7 -7
View File
@@ -217,7 +217,7 @@ export async function toggleFilterMenu(el) {
}
export async function openAddCustomFilterDialog(el) {
await click(findItem(el, `.o_filter_menu .dropdown-item:not(.o_menu_item)`));
await click(findItem(el, `.o_filter_menu .o_menu_item.o_add_custom_filter`));
}
//////////////////////////////////////////////////////
@@ -277,17 +277,17 @@ export async function toggleGroupByMenu(el) {
}
export async function toggleAddCustomGroup(el) {
await mouseEnter(findItem(el, `.o_add_custom_group_menu .dropdown-toggle`));
await click(findItem(el, `.o_add_custom_group_menu`));
}
export async function selectGroup(el, fieldName) {
const select = findItem(el, `.o_add_custom_group_menu .dropdown-menu select`);
const select = findItem(el, `.o_add_custom_group_menu + .o_accordion_values select`);
select.value = fieldName;
await triggerEvent(select, null, "change");
}
export async function applyGroup(el) {
await click(findItem(el, `.o_add_custom_group_menu .dropdown-menu .btn`));
await click(findItem(el, `.o_add_custom_group_menu + .o_accordion_values .btn`));
}
export async function groupByMenu(el, fieldName) {
@@ -309,20 +309,20 @@ export async function deleteFavorite(el, favoriteFinder) {
}
export async function toggleSaveFavorite(el) {
await mouseEnter(findItem(el, `.o_favorite_menu .o_add_favorite .dropdown-toggle`));
await click(findItem(el, `.o_favorite_menu .o_add_favorite`));
}
export async function editFavoriteName(el, name) {
const input = findItem(
el,
`.o_favorite_menu .o_add_favorite .dropdown-menu input[type="text"]`
`.o_favorite_menu .o_add_favorite + .o_accordion_values input[type="text"]`
);
input.value = name;
await triggerEvent(input, null, "input");
}
export async function saveFavorite(el) {
await click(findItem(el, `.o_favorite_menu .o_add_favorite .dropdown-menu button`));
await click(findItem(el, `.o_favorite_menu .o_add_favorite + .o_accordion_values button`));
}
/** Comparison menu */
addons/web/static/tests/search/search_bar_menu_tests.js
+12 -15
View File
@@ -145,7 +145,6 @@ QUnit.module("Search", (hooks) => {
["Birthday: January 1997", "Date: December 1996"].join("\nor\n"),
"Date: Previous Year",
]);
await toggleMenuItem(target, "Date");
await toggleMenuItemOption(target, "Date", "1996");
assert.deepEqual(getFacetTexts(target), ["Birthday: January 1997"]);
await toggleMenuItem(target, "Birthday: Previous Year");
@@ -306,7 +305,7 @@ QUnit.module("Search", (hooks) => {
await click(document.querySelector("div.o_dialog footer button"));
assert.deepEqual(getFacetTexts(target), []);
assert.containsNone(target, ".o_favorite_menu .o_menu_item");
assert.containsOnce(target, ".o_favorite_menu .o_menu_item");
assert.containsOnce(target, ".o_favorite_menu .o_add_favorite");
assert.verifySteps(["deleteFavorite", "CLEAR-CACHES"]);
});
@@ -497,7 +496,7 @@ QUnit.module("Search", (hooks) => {
await toggleSearchBarMenu(target);
assert.containsNone(target, ".o_menu_item");
assert.containsOnce(target, ".o_menu_item");
assert.containsNone(target, ".dropdown-divider");
assert.containsOnce(target, ".o_add_custom_group_menu");
});
@@ -518,7 +517,7 @@ QUnit.module("Search", (hooks) => {
await toggleSearchBarMenu(target);
assert.containsOnce(target, ".o_menu_item");
assert.containsN(target, ".o_menu_item", 2);
const menuItem = target.querySelector(".o_menu_item");
assert.strictEqual(menuItem.innerText.trim(), "Foo");
assert.strictEqual(menuItem.getAttribute("role"), "menuitemcheckbox");
@@ -752,7 +751,6 @@ QUnit.module("Search", (hooks) => {
]);
// select option 'quarter'
await toggleMenuItem(target, "Date");
await toggleMenuItemOption(target, "Date", "Quarter");
assert.deepEqual(getFacetTexts(target), [
@@ -767,7 +765,6 @@ QUnit.module("Search", (hooks) => {
]);
// unselect option 'week'
await toggleMenuItem(target, "Date");
await toggleMenuItemOption(target, "Date", "Week");
assert.deepEqual(getFacetTexts(target), [
@@ -829,7 +826,6 @@ QUnit.module("Search", (hooks) => {
assert.deepEqual(getFacetTexts(target), ["Date: Day"]);
await toggleMenuItem(target, "Bar");
await toggleMenuItem(target, "Date");
assert.ok(isItemSelected(target, "Date"));
assert.ok(isItemSelected(target, "Bar"));
@@ -845,7 +841,6 @@ QUnit.module("Search", (hooks) => {
assert.deepEqual(getFacetTexts(target), ["Date: Quarter\n>\nDate: Day\n>\nBar"]);
await toggleMenuItem(target, "Bar");
await toggleMenuItem(target, "Date");
assert.ok(isItemSelected(target, "Date"));
assert.notOk(isItemSelected(target, "Bar"));
@@ -970,7 +965,7 @@ QUnit.module("Search", (hooks) => {
});
await toggleSearchBarMenu(target);
assert.containsNone(target, ".o_menu_item");
assert.containsOnce(target, ".o_menu_item");
assert.containsNone(target, ".dropdown-divider");
assert.containsOnce(target, ".dropdown-item");
assert.strictEqual(
@@ -994,13 +989,13 @@ QUnit.module("Search", (hooks) => {
});
await toggleSearchBarMenu(target);
assert.containsOnce(target, ".o_menu_item");
assert.containsN(target, ".o_menu_item", 2);
assert.containsOnce(target, ".o_menu_item[role=menuitemcheckbox]");
assert.deepEqual(target.querySelector(".o_menu_item").ariaChecked, "false");
assert.containsOnce(target, ".dropdown-divider");
assert.containsOnce(target, ".dropdown-item:not(.o_menu_item)");
assert.containsN(target, ".o_menu_item", 2);
assert.strictEqual(
target.querySelector(".dropdown-item:not(.o_menu_item)").innerText,
target.querySelector(".o_menu_item:nth-of-type(2)").innerText,
"Add Custom Filter"
);
});
@@ -1488,10 +1483,12 @@ QUnit.module("Search", (hooks) => {
});
await toggleSearchBarMenu(target);
assert.containsN(target, ".o_filter_menu .o_menu_item", 11);
assert.containsN(target, ".o_filter_menu .o_menu_item", 12);
const menuItemEls = target.querySelectorAll(".o_filter_menu .o_menu_item");
[...menuItemEls].forEach((e, index) => {
const menuItemEls = target.querySelectorAll(
".o_filter_menu .o_menu_item:not(.o_add_custom_filter)"
);
menuItemEls.forEach((e, index) => {
assert.strictEqual(e.innerText.trim(), String(index + 1));
});
});
addons/web/static/tests/views/graph_view_tests.js
-1
View File
@@ -2580,7 +2580,6 @@ QUnit.module("Views", (hooks) => {
await toggleMenuItem(target, "Product");
await toggleMenuItem(target, "Color");
await toggleSaveFavorite(target);
await editFavoriteName(target, "Fourth Favorite");
await saveFavorite(target);
});
addons/web/static/tests/views/kanban/kanban_view_tests.js
+1 -1
View File
@@ -5445,7 +5445,7 @@ QUnit.module("Views", (hooks) => {
// validate presence of the search arch info
await toggleSearchBarMenu(target);
assert.containsOnce(target, ".o_filter_menu .o_menu_item");
assert.containsN(target, ".o_filter_menu .o_menu_item", 2);
});
QUnit.test("kanban view with create=False", async (assert) => {
addons/web/static/tests/views/pivot_view_tests.js
+62 -60
View File
@@ -1091,8 +1091,8 @@ QUnit.module("Views", (hooks) => {
assert.containsN(
target,
".o_control_panel .o_cp_searchview .dropdown-menu .o_menu_item",
3,
"should have 3 dropdown items in searchview groupby"
6,
"should have 6 menu items in searchview"
);
assert.containsOnce(
target,
@@ -1114,17 +1114,15 @@ QUnit.module("Views", (hooks) => {
"should have custom group generator same as searchview groupby"
);
// check custom groupby selection has groupable fields only
await mouseEnter(target, ".dropdown-menu .o_add_custom_group_menu .dropdown-toggle");
await click(target, ".o_add_custom_group_menu");
assert.containsN(
target,
".dropdown-menu .o_add_custom_group_menu .dropdown-menu option",
".o_add_custom_group_menu + .o_accordion_values option",
6,
"should have 6 fields in custom groupby"
);
const optionDescriptions = [
...target.querySelectorAll(
".dropdown-menu .o_add_custom_group_menu .dropdown-menu option"
),
...target.querySelectorAll(".o_add_custom_group_menu + .o_accordion_values option"),
].map((option) => option.innerText.trim());
assert.deepEqual(
optionDescriptions,
@@ -1156,8 +1154,8 @@ QUnit.module("Views", (hooks) => {
assert.containsN(
target,
".o_control_panel .o_cp_searchview .dropdown-menu .o_menu_item",
2,
"should have 2 dropdown items in searchview groupby"
5,
"should have 5 menu items in searchview"
);
// click on closed header to open dropdown
@@ -1165,8 +1163,8 @@ QUnit.module("Views", (hooks) => {
assert.containsN(
target,
".dropdown-menu .o_menu_item",
2,
"should have 2 dropdown items in pivot groupby"
3,
"should have 2 menu items in pivot groupby"
);
// add a custom group in searchview groupby
@@ -1176,29 +1174,34 @@ QUnit.module("Views", (hooks) => {
assert.containsN(
target,
".o_control_panel .o_cp_searchview .dropdown-menu .o_menu_item",
3,
"should have 3 dropdown items in searchview groupby now"
6,
"should have 6 menu items in searchview"
);
await click(target, "tbody tr:last-child .o_pivot_header_cell_closed");
assert.containsN(
target,
".dropdown-menu .o_menu_item",
2,
"should still have 2 dropdown items in pivot groupby"
3,
"should still have 2 menu items in pivot groupby"
);
// add a custom group in pivot groupby
await mouseEnter(target, ".dropdown-menu .o_add_custom_group_menu .dropdown-toggle");
target.querySelector(".dropdown-menu .o_add_custom_group_menu select").value = "date";
await triggerEvent(target, ".dropdown-menu .o_add_custom_group_menu select", "change");
await click(target, ".dropdown-menu .o_add_custom_group_menu .dropdown-menu .btn");
await click(target, ".o_add_custom_group_menu");
target.querySelector(".o_add_custom_group_menu + .o_accordion_values select").value =
"date";
await triggerEvent(
target,
".o_add_custom_group_menu + .o_accordion_values select",
"change"
);
await click(target, ".o_add_custom_group_menu + .o_accordion_values .btn");
// click on closed header to open groupby selection dropdown
await click(target, "tbody tr:last-child .o_pivot_header_cell_closed");
assert.containsN(
target,
".dropdown-menu .o_menu_item",
3,
"should have 3 dropdown items in pivot groupby dropdown"
4,
"should have 4 menu items in pivot groupby dropdown"
);
// applying custom groupby in pivot groupby dropdown will not update search dropdown
@@ -1206,8 +1209,8 @@ QUnit.module("Views", (hooks) => {
assert.containsN(
target,
".o_control_panel .o_cp_searchview .dropdown-menu .o_menu_item",
3,
"should still have 3 dropdown items in searchview groupby dropdown"
6,
"should still have 6 menu items in searchview"
);
});
@@ -1235,21 +1238,21 @@ QUnit.module("Views", (hooks) => {
assert.containsN(
target,
".o_control_panel .o_cp_searchview .dropdown-menu .o_menu_item",
2,
"should have 2 dropdown items in searchview groupby"
5,
"should have 5 menu items in searchview"
);
await toggleAddCustomGroup(target);
await applyGroup(target);
assert.containsN(
target,
".o_control_panel .o_cp_searchview .dropdown-menu .o_menu_item",
3,
"should have 3 dropdown items in searchview groupby now"
6,
"should have 6 menu items in searchview"
);
// click on closed header to open dropdown
await click(target.querySelectorAll("tbody .o_pivot_header_cell_closed")[1]);
let items = target.querySelectorAll(".o_menu_item");
let items = target.querySelectorAll(".o_menu_item:not(.o_accordion_toggle)");
assert.deepEqual(
[...items].map((it) => it.innerText),
["bar", "product"]
@@ -1266,13 +1269,18 @@ QUnit.module("Views", (hooks) => {
);
// add a custom group in pivot groupby
await mouseEnter(target, ".dropdown-menu .o_add_custom_group_menu .dropdown-toggle");
target.querySelector(".o_add_custom_group_menu select").value = "customer";
await triggerEvent(target, ".dropdown-menu .o_add_custom_group_menu select", "change");
await click(target, ".dropdown-menu .o_add_custom_group_menu .dropdown-menu .btn");
await click(target, ".o_add_custom_group_menu");
target.querySelector(".o_add_custom_group_menu + .o_accordion_values select").value =
"customer";
await triggerEvent(
target,
".o_add_custom_group_menu + .o_accordion_values select",
"change"
);
await click(target, ".o_add_custom_group_menu + .o_accordion_values .btn");
await click(target.querySelectorAll("tbody .o_pivot_header_cell_closed")[1]);
items = target.querySelectorAll(".o_menu_item");
items = target.querySelectorAll(".o_menu_item:not(.o_accordion_toggle)");
assert.deepEqual(
[...items].map((it) => it.innerText),
["bar", "product", "Customer"]
@@ -1329,17 +1337,17 @@ QUnit.module("Views", (hooks) => {
// click on closed header to open dropdown and apply groupby on date field
await click(target.querySelector("thead .o_pivot_header_cell_closed"));
await mouseEnter(
target.querySelector(
"thead .dropdown-menu .o_add_custom_group_menu .dropdown-toggle "
)
);
await click(target.querySelector("thead .dropdown-menu .o_add_custom_group_menu "));
checkReadGroup = true;
const select = target.querySelector(".o_add_custom_group_menu select");
const select = target.querySelector(
".o_add_custom_group_menu + .o_accordion_values select"
);
select.value = "date";
select.dispatchEvent(new Event("change"));
await click(target.querySelector(".o_add_custom_group_menu .btn-primary"));
await click(
target.querySelector(".o_add_custom_group_menu + .o_accordion_values .btn-primary")
);
}
);
@@ -1357,10 +1365,11 @@ QUnit.module("Views", (hooks) => {
// open group by dropdown
await toggleSearchBarMenu(target);
assert.containsNone(
assert.containsN(
target,
".o_control_panel .o_cp_searchview .dropdown-menu .o_menu_item",
"should not have any dropdown item in searchview groupby"
3,
"should not have more menu items than default in searchview"
);
assert.containsOnce(
target,
@@ -1372,8 +1381,8 @@ QUnit.module("Views", (hooks) => {
assert.containsN(
target,
"tbody .dropdown-menu .o_menu_item",
6,
"should have 6 dropdown items i.e. all groupable fields available"
7,
"should have 7 menu items i.e. all groupable fields available"
);
assert.containsOnce(
target,
@@ -1427,10 +1436,11 @@ QUnit.module("Views", (hooks) => {
// open group by dropdown
await toggleSearchBarMenu(target);
assert.containsOnce(
assert.containsN(
target,
".o_control_panel .o_cp_searchview .dropdown-menu .o_menu_item",
"should have 1 dropdown item in searchview groupby"
3,
"should have 3 menu item in searchview"
);
assert.containsNone(
target,
@@ -1476,20 +1486,13 @@ QUnit.module("Views", (hooks) => {
// click on closed header to open dropdown
await click(target.querySelector("thead .o_pivot_header_cell_closed"));
assert.containsOnce(target, "thead .dropdown-menu .o_add_custom_group_menu");
await mouseEnter(
target.querySelector(
"thead .dropdown-menu .o_add_custom_group_menu .dropdown-toggle"
)
);
assert.containsOnce(
target,
"thead .dropdown-menu .o_add_custom_group_menu .dropdown-menu"
);
await click(target.querySelector("thead .dropdown-menu .o_add_custom_group_menu"));
assert.containsOnce(target, "thead .dropdown-menu .o_add_custom_group_menu");
// click on apply button should close dropdown
await click(
target.querySelector(
"thead .dropdown-menu .o_add_custom_group_menu .dropdown-menu .btn-primary"
"thead .dropdown-menu .o_add_custom_group_menu + .o_accordion_values .btn-primary"
)
);
assert.containsNone(target, "thead .dropdown-menu");
@@ -2341,8 +2344,7 @@ QUnit.module("Views", (hooks) => {
// activate the unique existing favorite
await toggleSearchBarMenu(target);
await toggleMenuItem(target, 0);
await toggleMenuItem(target, 2);
assert.strictEqual(
target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
"xphone"
@@ -2354,7 +2356,7 @@ QUnit.module("Views", (hooks) => {
);
// desactivate the unique existing favorite
await toggleMenuItem(target, 0);
await toggleMenuItem(target, 2);
assert.strictEqual(
target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
@@ -2382,7 +2384,7 @@ QUnit.module("Views", (hooks) => {
// activate AGAIN the unique existing favorite
await toggleSearchBarMenu(target);
await toggleMenuItem(target, 0);
await toggleMenuItem(target, 2);
assert.strictEqual(
target.querySelector("tbody .o_pivot_header_cell_closed").textContent,
addons/web/static/tests/webclient/actions/window_action_tests.js
-1
View File
@@ -1469,7 +1469,6 @@ QUnit.module("ActionManager", (hooks) => {
await cpHelpers.toggleMenuItem(target, "Bar");
assert.containsN(target, ".o_data_row", 2);
// save filter
await cpHelpers.toggleFavoriteMenu(target);
await cpHelpers.toggleSaveFavorite(target);
await cpHelpers.editFavoriteName(target, "some name");
await cpHelpers.saveFavorite(target);
addons/website/static/tests/tours/page_manager.js
+2 -5
View File
@@ -12,13 +12,10 @@ const checkKanbanGroupBy = [{
trigger: '.o_control_panel .o_searchview_dropdown_toggler',
}, {
content: "Click on Add Custom Group",
trigger: '.o_add_custom_group_menu button',
run: function (actions) {
this.$anchor[0].dispatchEvent(new MouseEvent('mouseenter'));
},
trigger: '.o_add_custom_group_menu',
}, {
content: "Click on Apply", // Active is selected by default
trigger: '.o_add_custom_group_menu .dropdown-menu .btn-primary',
trigger: '.o_add_custom_group_menu + .o_accordion_values .btn-primary',
}, {
content: "Click on List View",
extra_trigger: '.o_kanban_renderer .o_kanban_header',