qsm-odoo
e10a4303c2
With BS4, I had to change the dropdown structure and with it the messy way we handled "selected" items. Sub-filters items were still not adapted correctly: use the "selected" class on dropdown-item elements, not one of its parent.
206 lines
9.0 KiB
JavaScript
206 lines
9.0 KiB
JavaScript
odoo.define('web.dropdown_menu_tests', function (require) {
|
|
"use strict";
|
|
|
|
var DropdownMenu = require('web.DropdownMenu');
|
|
var testUtils = require('web.test_utils');
|
|
|
|
function createDropdownMenu(dropdownTitle, groups, params) {
|
|
params = params || {};
|
|
var target = params.debug ? document.body : $('#qunit-fixture');
|
|
var menu = new DropdownMenu(null, dropdownTitle, groups);
|
|
testUtils.addMockEnvironment(menu, params);
|
|
menu.appendTo(target);
|
|
return menu;
|
|
}
|
|
|
|
QUnit.module('Web', {
|
|
beforeEach: function () {
|
|
this.items = [
|
|
{
|
|
isActive: false,
|
|
isOpen: false,
|
|
description: 'Some Item',
|
|
itemId: 1,
|
|
groupId: 1,
|
|
},
|
|
{
|
|
isActive: true,
|
|
description: 'Some other Item',
|
|
itemId: 2,
|
|
options: [],
|
|
isRemovable: true,
|
|
groupId: 2,
|
|
},
|
|
];
|
|
this.dropdownHeader = {
|
|
title: "Menu",
|
|
icon: "fa fa-bars",
|
|
};
|
|
},
|
|
}, function () {
|
|
QUnit.module('DropdownMenu');
|
|
|
|
QUnit.test('simple rendering', function (assert) {
|
|
assert.expect(2);
|
|
|
|
var dropdownMenu = createDropdownMenu(this.dropdownHeader, this.items);
|
|
assert.strictEqual(dropdownMenu.$('.dropdown-divider, .dropdown-item, .dropdown-item-text').length, 4, 'should have 4 elements counting the dividers');
|
|
assert.strictEqual(dropdownMenu.$('.dropdown-divider, .dropdown-item, .dropdown-item-text').eq(1).text().trim(), 'Some Item',
|
|
'first element should have "Some Item" description');
|
|
dropdownMenu.destroy();
|
|
});
|
|
|
|
QUnit.test('click on an item should toggle item', function (assert) {
|
|
assert.expect(9);
|
|
|
|
var eventNumber = 0;
|
|
|
|
var dropdownMenu = createDropdownMenu(this.dropdownHeader, this.items, {
|
|
intercepts: {
|
|
menu_item_toggled: function (ev) {
|
|
eventNumber++;
|
|
assert.strictEqual(ev.data.itemId, 1);
|
|
if (eventNumber === 1) {
|
|
assert.strictEqual(ev.data.isActive, true);
|
|
} else {
|
|
assert.strictEqual(ev.data.isActive, false);
|
|
}
|
|
},
|
|
},
|
|
});
|
|
dropdownMenu.$('button:first').click();
|
|
assert.ok(!dropdownMenu.$('.o_menu_item:first > .dropdown-item').hasClass('selected'));
|
|
dropdownMenu.$('.o_menu_item a').first().click();
|
|
assert.ok(dropdownMenu.$('.o_menu_item:first > .dropdown-item').hasClass('selected'));
|
|
assert.ok(dropdownMenu.$('.o_menu_item:first').is(':visible'),
|
|
'item should still be visible');
|
|
dropdownMenu.$('.o_menu_item a').first().click();
|
|
assert.ok(!dropdownMenu.$('.o_menu_item:first > .dropdown-item').hasClass('selected'));
|
|
assert.ok(dropdownMenu.$('.o_menu_item:first').is(':visible'),
|
|
'item should still be visible');
|
|
|
|
dropdownMenu.destroy();
|
|
});
|
|
|
|
QUnit.test('click on an item should not change url', function (assert) {
|
|
assert.expect(0);
|
|
|
|
var dropdownMenu = createDropdownMenu(this.dropdownHeader, this.items);
|
|
dropdownMenu.$el.click(function () {
|
|
// we do not want a click to get out and change the url, for example
|
|
throw new Error('No click should get out of the dropdown menu');
|
|
});
|
|
dropdownMenu.$('.o_menu_item a').first().click();
|
|
|
|
dropdownMenu.destroy();
|
|
});
|
|
|
|
QUnit.test('options rendering', function (assert) {
|
|
assert.expect(3);
|
|
|
|
this.items[0].options = [{optionId: 1, description: "First Option", groupId: 1}, {optionId: 2, description: "Second Option", groupId: 1}];
|
|
|
|
var dropdownMenu = createDropdownMenu(this.dropdownHeader, this.items);
|
|
// open dropdown
|
|
dropdownMenu.$('button:first').click();
|
|
assert.strictEqual(dropdownMenu.$('.dropdown-divider, .dropdown-item, .dropdown-item-text').length, 4);
|
|
// open options menu
|
|
dropdownMenu.$('span.fa-caret-right').click();
|
|
assert.strictEqual(dropdownMenu.$('.dropdown-divider, .dropdown-item, .dropdown-item-text').length, 7);
|
|
// close options menu
|
|
dropdownMenu.$('span.fa-caret-down').click();
|
|
assert.strictEqual(dropdownMenu.$('.dropdown-divider, .dropdown-item, .dropdown-item-text').length, 4);
|
|
|
|
dropdownMenu.destroy();
|
|
});
|
|
|
|
QUnit.test('close menu closes also submenu', function (assert) {
|
|
assert.expect(2);
|
|
|
|
this.items[0].options = [{optionId: 1, description: "First Option"}, {optionId: 2, description: "Second Option"}];
|
|
|
|
var dropdownMenu = createDropdownMenu(this.dropdownHeader, this.items);
|
|
dropdownMenu.$('button:first').click();
|
|
// open options menu
|
|
dropdownMenu.$('span.fa-caret-right').click();
|
|
assert.strictEqual(dropdownMenu.$('.dropdown-divider, .dropdown-item, .dropdown-item-text').length, 7);
|
|
dropdownMenu.$('button:first').click();
|
|
dropdownMenu.$('button:first').click();
|
|
assert.strictEqual(dropdownMenu.$('.dropdown-divider, .dropdown-item, .dropdown-item-text').length, 4);
|
|
|
|
dropdownMenu.destroy();
|
|
});
|
|
|
|
QUnit.test('click on an option should toggle options and item states properly', function (assert) {
|
|
assert.expect(22);
|
|
|
|
this.items[0].options = [{optionId: 1, description: "First Option"}, {optionId: 2, description: "Second Option"}];
|
|
|
|
var eventNumber = 0;
|
|
|
|
var dropdownMenu = createDropdownMenu(this.dropdownHeader, this.items, {
|
|
intercepts: {
|
|
menu_item_toggled: function (ev) {
|
|
eventNumber++;
|
|
if (eventNumber === 1) {
|
|
assert.strictEqual(ev.data.itemId, 1);
|
|
assert.strictEqual(ev.data.isActive, true);
|
|
assert.strictEqual(ev.data.optionId, 1);
|
|
} else {
|
|
assert.strictEqual(ev.data.itemId, 1);
|
|
assert.strictEqual(ev.data.isActive, false);
|
|
assert.strictEqual(ev.data.optionId, false);
|
|
}
|
|
},
|
|
item_option_changed: function (ev) {
|
|
if (eventNumber === 1) {
|
|
assert.strictEqual(ev.data.itemId, 1);
|
|
assert.strictEqual(ev.data.isActive, true);
|
|
assert.strictEqual(ev.data.optionId, 2);
|
|
}
|
|
},
|
|
},
|
|
});
|
|
// open dropdown menu
|
|
dropdownMenu.$('button:first').click();
|
|
// open options menu
|
|
dropdownMenu.$('span.fa-caret-right').click();
|
|
assert.strictEqual(dropdownMenu.$('.dropdown-divider, .dropdown-item, .dropdown-item-text').length, 7);
|
|
// Don't forget there is a hidden li.divider element at first place among children
|
|
assert.ok(!dropdownMenu.$('.o_menu_item:nth-child(2) > .dropdown-item').hasClass('selected'));
|
|
assert.ok(!dropdownMenu.$('.o_item_option:nth-child(2) > .dropdown-item').hasClass('selected'));
|
|
assert.ok(!dropdownMenu.$('.o_item_option:nth-child(3) > .dropdown-item').hasClass('selected'));
|
|
dropdownMenu.$('.o_item_option:first').click();
|
|
assert.ok(dropdownMenu.$('.o_menu_item:nth-child(2) > .dropdown-item').hasClass('selected'));
|
|
assert.ok(dropdownMenu.$('.o_item_option:nth-child(2) > .dropdown-item').hasClass('selected'));
|
|
assert.ok(!dropdownMenu.$('.o_item_option:nth-child(3) > .dropdown-item').hasClass('selected'));
|
|
dropdownMenu.$('.o_item_option:nth-child(3)').click();
|
|
assert.ok(dropdownMenu.$('.o_menu_item:nth-child(2) > .dropdown-item').hasClass('selected'));
|
|
assert.ok(!dropdownMenu.$('.o_item_option:nth-child(2) > .dropdown-item').hasClass('selected'));
|
|
assert.ok(dropdownMenu.$('.o_item_option:nth-child(3) > .dropdown-item').hasClass('selected'));
|
|
dropdownMenu.$('.o_item_option:nth-child(3)').click();
|
|
assert.ok(!dropdownMenu.$('.o_menu_item:nth-child(2) > .dropdown-item').hasClass('selected'));
|
|
assert.ok(!dropdownMenu.$('.o_item_option:nth-child(2) > .dropdown-item').hasClass('selected'));
|
|
assert.ok(!dropdownMenu.$('.o_item_option:nth-child(3) > .dropdown-item').hasClass('selected'));
|
|
dropdownMenu.destroy();
|
|
});
|
|
|
|
QUnit.test('trash an item should be possible', function (assert) {
|
|
assert.expect(3);
|
|
|
|
var dropdownMenu = createDropdownMenu(this.dropdownHeader, this.items, {
|
|
intercepts: {
|
|
menu_item_deleted: function (ev) {
|
|
assert.strictEqual(ev.data.itemId, 2);
|
|
},
|
|
},
|
|
});
|
|
dropdownMenu.$('button:first').click();
|
|
assert.strictEqual(dropdownMenu.$('.dropdown-divider, .dropdown-item, .dropdown-item-text').length, 4);
|
|
dropdownMenu.$('span.o_trash_button').click();
|
|
assert.strictEqual(dropdownMenu.$('.dropdown-divider, .dropdown-item, .dropdown-item-text').length, 2);
|
|
dropdownMenu.destroy();
|
|
});
|
|
});
|
|
});
|