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();
    });
});
});