initial commit 2

1 files changed, 442 insertions, 0 deletions

diff --git a/addons/web/static/tests/components/dropdown_menu_tests.js b/addons/web/static/tests/components/dropdown_menu_tests.js
new file mode 100644
index 00000000..3aff0ae1
--- /dev/null
+++ b/addons/web/static/tests/components/dropdown_menu_tests.js
@@ -0,0 +1,442 @@
+odoo.define('web.dropdown_menu_tests', function (require) {
+    "use strict";
+
+    const DropdownMenu = require('web.DropdownMenu');
+    const testUtils = require('web.test_utils');
+
+    const { createComponent } = testUtils;
+
+    QUnit.module('Components', {
+        beforeEach: function () {
+            this.items = [
+                {
+                    isActive: false,
+                    description: 'Some Item',
+                    id: 1,
+                    groupId: 1,
+                    groupNumber: 1,
+                    options: [
+                        { description: "First Option", groupNumber: 1, id: 1 },
+                        { description: "Second Option", groupNumber: 2, id: 2 },
+                    ],
+                }, {
+                    isActive: true,
+                    description: 'Some other Item',
+                    id: 2,
+                    groupId: 2,
+                    groupNumber: 2,
+                },
+            ];
+        },
+    }, function () {
+        QUnit.module('DropdownMenu');
+
+        QUnit.test('simple rendering and basic interactions', async function (assert) {
+            assert.expect(8);
+
+            const dropdown = await createComponent(DropdownMenu, {
+                props: {
+                    items: this.items,
+                    title: "Dropdown",
+                },
+            });
+
+            assert.strictEqual(dropdown.el.querySelector('button').innerText.trim(), "Dropdown");
+            assert.containsNone(dropdown, 'ul.o_dropdown_menu');
+
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 3,
+                'should have 3 elements counting the divider');
+            const itemEls = dropdown.el.querySelectorAll('.o_menu_item > .dropdown-item');
+            assert.strictEqual(itemEls[0].innerText.trim(), 'Some Item');
+            assert.doesNotHaveClass(itemEls[0], 'selected');
+            assert.hasClass(itemEls[1], 'selected');
+
+            const dropdownElements = dropdown.el.querySelectorAll('.o_menu_item *');
+            for (const dropdownEl of dropdownElements) {
+                await testUtils.dom.click(dropdownEl);
+            }
+            assert.containsOnce(dropdown, 'ul.o_dropdown_menu',
+                "Clicking on any item of the dropdown should not close it");
+
+            await testUtils.dom.click(document.body);
+
+            assert.containsNone(dropdown, 'ul.o_dropdown_menu',
+                "Clicking outside of the dropdown should close it");
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('only one dropdown rendering at same time (owl vs bootstrap dropdown)', async function (assert) {
+            assert.expect(12);
+
+            const bsDropdown = document.createElement('div');
+            bsDropdown.innerHTML = `<div class="dropdown">
+                <button class="btn dropdown-toggle" type="button" 
+                        data-toggle="dropdown" aria-expanded="false">
+                    BS Dropdown button
+                </button>
+                <div class="dropdown-menu">
+                    <a class="dropdown-item" href="#">BS Action</a>
+                </div>
+            </div>`;
+            document.body.append(bsDropdown);
+
+            const dropdown = await createComponent(DropdownMenu, {
+                props: {
+                    items: this.items,
+                    title: "Dropdown",
+                },
+            });
+
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+
+            assert.hasClass(dropdown.el.querySelector('.dropdown-menu'), 'show');
+            assert.doesNotHaveClass(bsDropdown.querySelector('.dropdown-menu'), 'show');
+
+            assert.isVisible(dropdown.el.querySelector('.dropdown-menu'),
+                "owl dropdown menu should be visible");
+            assert.isNotVisible(bsDropdown.querySelector('.dropdown-menu'),
+                "bs dropdown menu should not be visible");
+
+            await testUtils.dom.click(bsDropdown.querySelector('.btn.dropdown-toggle'));
+
+            assert.doesNotHaveClass(dropdown.el, 'show');
+            assert.containsNone(dropdown.el, '.dropdown-menu',
+                "owl dropdown menu should not be set inside the dom");
+
+            assert.hasClass(bsDropdown.querySelector('.dropdown-menu'), 'show');
+            assert.isVisible(bsDropdown.querySelector('.dropdown-menu'),
+                "bs dropdown menu should be visible");
+
+            await testUtils.dom.click(document.body);
+
+            assert.doesNotHaveClass(dropdown.el, 'show');
+            assert.containsNone(dropdown.el, '.dropdown-menu',
+                "owl dropdown menu should not be set inside the dom");
+
+            assert.doesNotHaveClass(bsDropdown.querySelector('.dropdown-menu'), 'show');
+            assert.isNotVisible(bsDropdown.querySelector('.dropdown-menu'),
+                "bs dropdown menu should not be visible");
+
+            bsDropdown.remove();
+            dropdown.destroy();
+        });
+
+        QUnit.test('click on an item without options should toggle it', async function (assert) {
+            assert.expect(7);
+
+            delete this.items[0].options;
+
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+                intercepts: {
+                    'item-selected': function (ev) {
+                        assert.strictEqual(ev.detail.item.id, 1);
+                        this.state.items[0].isActive = !this.state.items[0].isActive;
+                    },
+                }
+            });
+
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+
+            const firstItemEl = dropdown.el.querySelector('.o_menu_item > a');
+            assert.doesNotHaveClass(firstItemEl, 'selected');
+            await testUtils.dom.click(firstItemEl);
+            assert.hasClass(firstItemEl, 'selected');
+            assert.isVisible(firstItemEl);
+            await testUtils.dom.click(firstItemEl);
+            assert.doesNotHaveClass(firstItemEl, 'selected');
+            assert.isVisible(firstItemEl);
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('click on an item should not change url', async function (assert) {
+            assert.expect(1);
+
+            delete this.items[0].options;
+
+            const initialHref = window.location.href;
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+            });
+
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+            await testUtils.dom.click(dropdown.el.querySelector('.o_menu_item > a'));
+            assert.strictEqual(window.location.href, initialHref,
+                "the url should not have changed after a click on an item");
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('options rendering', async function (assert) {
+            assert.expect(6);
+
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+            });
+
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 3);
+
+            const firstItemEl = dropdown.el.querySelector('.o_menu_item > a');
+            assert.hasClass(firstItemEl.querySelector('i'), 'o_icon_right fa fa-caret-right');
+            // open options menu
+            await testUtils.dom.click(firstItemEl);
+            assert.hasClass(firstItemEl.querySelector('i'), 'o_icon_right fa fa-caret-down');
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 6);
+
+            // close options menu
+            await testUtils.dom.click(firstItemEl);
+            assert.hasClass(firstItemEl.querySelector('i'), 'o_icon_right fa fa-caret-right');
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 3);
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('close menu closes also submenus', async function (assert) {
+            assert.expect(2);
+
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+            });
+
+            // open dropdown menu
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+            // open options menu of first item
+            await testUtils.dom.click(dropdown.el.querySelector('.o_menu_item a'));
+
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 6);
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 3);
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('click on an option should trigger the event "item_option_clicked" with appropriate data', async function (assert) {
+            assert.expect(18);
+
+            let eventNumber = 0;
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+                intercepts: {
+                    'item-selected': function (ev) {
+                        eventNumber++;
+                        const { option } = ev.detail;
+                        assert.strictEqual(ev.detail.item.id, 1);
+                        if (eventNumber === 1) {
+                            assert.strictEqual(option.id, 1);
+                            this.state.items[0].isActive = true;
+                            this.state.items[0].options[0].isActive = true;
+                        }
+                        if (eventNumber === 2) {
+                            assert.strictEqual(option.id, 2);
+                            this.state.items[0].options[1].isActive = true;
+                        }
+                        if (eventNumber === 3) {
+                            assert.strictEqual(option.id, 1);
+                            this.state.items[0].options[0].isActive = false;
+                        }
+                        if (eventNumber === 4) {
+                            assert.strictEqual(option.id, 2);
+                            this.state.items[0].isActive = false;
+                            this.state.items[0].options[1].isActive = false;
+                        }
+                    },
+                }
+            });
+
+            // open dropdown menu
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+            assert.containsN(dropdown, '.dropdown-divider, .o_menu_item', 3);
+
+            // open menu options of first item
+            await testUtils.dom.click(dropdown.el.querySelector('.o_menu_item > a'));
+            let optionELs = dropdown.el.querySelectorAll('.o_menu_item .o_item_option > a');
+
+            // click on first option
+            await testUtils.dom.click(optionELs[0]);
+            assert.hasClass(dropdown.el.querySelector('.o_menu_item > a'), 'selected');
+            optionELs = dropdown.el.querySelectorAll('.o_menu_item .o_item_option > a');
+            assert.hasClass(optionELs[0], 'selected');
+            assert.doesNotHaveClass(optionELs[1], 'selected');
+
+            // click on second option
+            await testUtils.dom.click(optionELs[1]);
+            assert.hasClass(dropdown.el.querySelector('.o_menu_item > a'), 'selected');
+            optionELs = dropdown.el.querySelectorAll('.o_menu_item .o_item_option > a');
+            assert.hasClass(optionELs[0], 'selected');
+            assert.hasClass(optionELs[1], 'selected');
+
+            // click again on first option
+            await testUtils.dom.click(optionELs[0]);
+            // click again on second option
+            await testUtils.dom.click(optionELs[1]);
+            assert.doesNotHaveClass(dropdown.el.querySelector('.o_menu_item > a'), 'selected');
+            optionELs = dropdown.el.querySelectorAll('.o_menu_item .o_item_option > a');
+            assert.doesNotHaveClass(optionELs[0], 'selected');
+            assert.doesNotHaveClass(optionELs[1], 'selected');
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('keyboard navigation', async function (assert) {
+            assert.expect(12);
+
+            // Shorthand method to trigger a specific keydown.
+            // Note that BootStrap handles some of the navigation moves (up and down)
+            // so we need to give the event the proper "which" property. We also give
+            // it when it's not required to check if it has been correctly prevented.
+            async function navigate(key, global) {
+                const which = {
+                    Enter: 13,
+                    Escape: 27,
+                    ArrowLeft: 37,
+                    ArrowUp: 38,
+                    ArrowRight: 39,
+                    ArrowDown: 40,
+                }[key];
+                const target = global ? document.body : document.activeElement;
+                await testUtils.dom.triggerEvent(target, 'keydown', { key, which });
+                if (key === 'Enter') {
+                    // Pressing "Enter" on a focused element triggers a click (HTML5 specs)
+                    await testUtils.dom.click(target);
+                }
+            }
+
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+            });
+
+            // Initialize active element (start at toggle button)
+            dropdown.el.querySelector('button').focus();
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+
+            await navigate('ArrowDown'); // Go to next item
+
+            assert.strictEqual(document.activeElement, dropdown.el.querySelector('.o_menu_item a'));
+            assert.containsNone(dropdown, '.o_item_option');
+
+            await navigate('ArrowRight'); // Unfold first item's options (w/ Right)
+
+            assert.strictEqual(document.activeElement, dropdown.el.querySelector('.o_menu_item a'));
+            assert.containsN(dropdown, '.o_item_option', 2);
+
+            await navigate('ArrowDown'); // Go to next option
+
+            assert.strictEqual(document.activeElement, dropdown.el.querySelector('.o_item_option a'));
+
+            await navigate('ArrowLeft'); // Fold first item's options (w/ Left)
+
+            assert.strictEqual(document.activeElement, dropdown.el.querySelector('.o_menu_item a'));
+            assert.containsNone(dropdown, '.o_item_option');
+
+            await navigate('Enter'); // Unfold first item's options (w/ Enter)
+
+            assert.strictEqual(document.activeElement, dropdown.el.querySelector('.o_menu_item a'));
+            assert.containsN(dropdown, '.o_item_option', 2);
+
+            await navigate('ArrowDown'); // Go to next option
+            await navigate('Escape'); // Fold first item's options (w/ Escape)
+            await testUtils.nextTick();
+
+            assert.strictEqual(dropdown.el.querySelector('.o_menu_item a'), document.activeElement);
+            assert.containsNone(dropdown, '.o_item_option');
+
+            await navigate('Escape', true); // Close the dropdown
+
+            assert.containsNone(dropdown, 'ul.o_dropdown_menu', "Dropdown should be folded");
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('interactions between multiple dropdowns', async function (assert) {
+            assert.expect(7);
+
+            const props = { items: this.items };
+            class Parent extends owl.Component {
+                constructor() {
+                    super(...arguments);
+                    this.state = owl.useState(props);
+                }
+            }
+            Parent.components = { DropdownMenu };
+            Parent.template = owl.tags.xml`
+                <div>
+                    <DropdownMenu class="first" title="'First'" items="state.items"/>
+                    <DropdownMenu class="second" title="'Second'" items="state.items"/>
+                </div>`;
+            const parent = new Parent();
+            await parent.mount(testUtils.prepareTarget(), { position: 'first-child' });
+
+            const [menu1, menu2] = parent.el.querySelectorAll('.o_dropdown');
+
+            assert.containsNone(parent, '.o_dropdown_menu');
+
+            await testUtils.dom.click(menu1.querySelector('button'));
+
+            assert.containsOnce(parent, '.o_dropdown_menu');
+            assert.containsOnce(parent, '.o_dropdown.first .o_dropdown_menu');
+
+            await testUtils.dom.click(menu2.querySelector('button'));
+
+            assert.containsOnce(parent, '.o_dropdown_menu');
+            assert.containsOnce(parent, '.o_dropdown.second .o_dropdown_menu');
+
+            await testUtils.dom.click(menu2.querySelector('.o_menu_item a'));
+            await testUtils.dom.click(menu1.querySelector('button'));
+
+            assert.containsOnce(parent, '.o_dropdown_menu');
+            assert.containsOnce(parent, '.o_dropdown.first .o_dropdown_menu');
+
+            parent.destroy();
+        });
+
+        QUnit.test("dropdown doesn't get close on mousedown inside and mouseup outside dropdown", async function (assert) {
+            // In this test, we simulate a case where the user clicks inside a dropdown menu item
+            // (e.g. in the input of the 'Save current search' item in the Favorites menu), keeps
+            // the click pressed, moves the cursor outside the dropdown and releases the click
+            // (i.e. mousedown and focus inside the item, mouseup and click outside the dropdown).
+            // In this case, we want to keep the dropdown menu open.
+            assert.expect(5);
+
+            const items = this.items;
+            class Parent extends owl.Component {
+                constructor() {
+                    super(...arguments);
+                    this.items = items;
+                }
+            }
+            Parent.components = { DropdownMenu };
+            Parent.template = owl.tags.xml`
+                <div>
+                    <DropdownMenu class="first" title="'First'" items="items"/>
+                </div>`;
+            const parent = new Parent();
+            await parent.mount(testUtils.prepareTarget(), { position: "first-child" });
+
+            const menu = parent.el.querySelector(".o_dropdown");
+            assert.doesNotHaveClass(menu, "show", "dropdown should not be open");
+
+            await testUtils.dom.click(menu.querySelector("button"));
+            assert.hasClass(menu, "show", "dropdown should be open");
+
+            const firstItemEl = menu.querySelector(".o_menu_item > a");
+            // open options menu
+            await testUtils.dom.click(firstItemEl);
+            assert.hasClass(firstItemEl.querySelector("i"), "o_icon_right fa fa-caret-down");
+
+            // force the focus inside the dropdown item and click outside
+            firstItemEl.parentElement.querySelector(".o_menu_item_options .o_item_option a").focus();
+            await testUtils.dom.triggerEvents(parent.el, "click");
+            assert.hasClass(menu, "show", "dropdown should still be open");
+            assert.hasClass(firstItemEl.querySelector("i"), "o_icon_right fa fa-caret-down");
+
+            parent.destroy();
+        });
+    });
+});