[REF] *: Adapt all module tests to the new control panel

Use of the new control panel helpers to increase consistency and change the assertions
according to the new DOM/behaviour (e.g. components removed instead of turning invisible).

Part of task 2196029

Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>

5 files changed, 113 insertions, 70 deletions

diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index ada71b91429..eaa41651c20 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -19,6 +19,10 @@ var DebouncedField = basicFields.DebouncedField;
 var JournalDashboardGraph = basicFields.JournalDashboardGraph;
 var _t = core._t;
 
+// Base64 images for testing purpose
+const MY_IMAGE = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
+const PRODUCT_IMAGE = 'R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7';
+
 QUnit.module('fields', {}, function () {
 
 QUnit.module('basic_fields', {
@@ -2516,7 +2520,7 @@ QUnit.module('basic_fields', {
         assert.expect(7);
 
         this.data.partner.records[0].__last_update = '2017-02-08 10:00:00';
-        this.data.partner.records[0].document = 'myimage';
+        this.data.partner.records[0].document = MY_IMAGE;
 
         var form = await createView({
             View: FormView,
@@ -2526,13 +2530,13 @@ QUnit.module('basic_fields', {
                     '<field name="document" widget="image" options="{\'size\': [90, 90]}"/> ' +
                 '</form>',
             res_id: 1,
-            mockRPC: function (route, args) {
+            async mockRPC(route, args) {
                 if (route === '/web/dataset/call_kw/partner/read') {
                     assert.deepEqual(args.args[1], ['document', '__last_update', 'display_name'], "The fields document, display_name and __last_update should be present when reading an image");
                 }
-                if (route === 'data:image/png;base64,myimage') {
+                if (route === `data:image/png;base64,${MY_IMAGE}`) {
                     assert.ok(true, "should called the correct route");
-                    return Promise.resolve('wow');
+                    return 'wow';
                 }
                 return this._super.apply(this, arguments);
             },
@@ -2551,6 +2555,59 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
+    QUnit.test('image fields are correctly replaced when given an incorrect value', async function (assert) {
+        assert.expect(7);
+
+        this.data.partner.records[0].__last_update = '2017-02-08 10:00:00';
+        this.data.partner.records[0].document = 'incorrect_base64_value';
+
+        testUtils.mock.patch(basicFields.FieldBinaryImage, {
+            // Delay the _render function: this will ensure that the error triggered
+            // by the incorrect base64 value is dispatched before the src is replaced
+            // (see test_utils_mock.removeSrcAttribute), since that function is called
+            // when the element is inserted into the DOM.
+            async _render() {
+                const result = this._super.apply(this, arguments);
+                await concurrency.delay(100);
+                return result;
+            },
+        });
+
+        const form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: `
+                <form string="Partners">
+                    <field name="document" widget="image" options="{'size': [90, 90]}"/>
+                </form>`,
+            res_id: 1,
+            async mockRPC(route, args) {
+                const _super = this._super;
+                if (route === '/web/static/src/img/placeholder.png') {
+                    assert.step('call placeholder route');
+                }
+                return _super.apply(this, arguments);
+            },
+        });
+
+        assert.hasClass(form.$('div[name="document"]'),'o_field_image',
+            "the widget should have the correct class");
+        assert.containsOnce(form, 'div[name="document"] > img',
+            "the widget should contain an image");
+        assert.hasClass(form.$('div[name="document"] > img'), 'img-fluid',
+            "the image should have the correct class");
+        assert.hasAttrValue(form.$('div[name="document"] > img'), 'width', "90",
+            "the image should correctly set its attributes");
+        assert.strictEqual(form.$('div[name="document"] > img').css('max-width'), "90px",
+            "the image should correctly set its attributes");
+
+        assert.verifySteps(['call placeholder route']);
+
+        form.destroy();
+        testUtils.mock.unpatch(basicFields.FieldBinaryImage);
+    });
+
     QUnit.test('image: option accepted_file_extensions', async function (assert) {
         assert.expect(2);
 
@@ -2583,9 +2640,9 @@ QUnit.module('basic_fields', {
         assert.expect(6);
 
         this.data.partner.records[0].__last_update = '2017-02-08 10:00:00';
-        this.data.partner.records[0].document = 'myimage';
+        this.data.partner.records[0].document = MY_IMAGE;
         this.data.partner_type.fields.image = {name: 'image', type: 'binary'};
-        this.data.partner_type.records[0].image = 'product_image';
+        this.data.partner_type.records[0].image = PRODUCT_IMAGE;
         this.data.partner.records[0].timmy = [12];
 
         var form = await createView({
@@ -2604,14 +2661,14 @@ QUnit.module('basic_fields', {
                     '</field>' +
                 '</form>',
             res_id: 1,
-            mockRPC: function (route) {
-                if (route === 'data:image/png;base64,myimage') {
+            async mockRPC(route) {
+                if (route === `data:image/png;base64,${MY_IMAGE}`) {
                     assert.step("The view's image should have been fetched");
-                    return Promise.resolve('wow');
+                    return 'wow';
                 }
-                if (route === 'data:image/png;base64,product_image') {
+                if (route === `data:image/gif;base64,${PRODUCT_IMAGE}`) {
                     assert.step("The dialog's image should have been fetched");
-                    return Promise.resolve();
+                    return;
                 }
                 return this._super.apply(this, arguments);
             },
@@ -2634,7 +2691,7 @@ QUnit.module('basic_fields', {
         assert.expect(2);
 
         this.data.partner_type.fields.image = {name: 'image', type: 'binary'};
-        this.data.partner_type.records[0].image = 'product_image';
+        this.data.partner_type.records[0].image = PRODUCT_IMAGE;
         this.data.partner.records[0].timmy = [12];
 
         var form = await createView({
@@ -2649,10 +2706,10 @@ QUnit.module('basic_fields', {
                     '</field>' +
                 '</form>',
             res_id: 1,
-            mockRPC: function (route) {
-                if (route === 'data:image/png;base64,product_image') {
+            async mockRPC(route) {
+                if (route === `data:image/gif;base64,${PRODUCT_IMAGE}`) {
                     assert.ok(true, "The list's image should have been fetched");
-                    return Promise.resolve();
+                    return;
                 }
                 return this._super.apply(this, arguments);
             },
@@ -2961,7 +3018,7 @@ QUnit.module('basic_fields', {
 
     QUnit.module('FieldDateRange');
 
-    QUnit.test('Datetime field', async function (assert) {
+    QUnit.test('Datetime field [REQUIRE FOCUS]', async function (assert) {
         assert.expect(20);
 
         this.data.partner.fields.datetime_end = {string: 'Datetime End', type: 'datetime'};
@@ -3039,7 +3096,7 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
-    QUnit.test('Date field', async function (assert) {
+    QUnit.test('Date field [REQUIRE FOCUS]', async function (assert) {
         assert.expect(18);
 
         this.data.partner.fields.date_end = {string: 'Date End', type: 'date'};
diff --git a/addons/web/static/tests/fields/relational_fields/field_many2many_tests.js b/addons/web/static/tests/fields/relational_fields/field_many2many_tests.js
index a1c306a432c..47fe687d773 100644
--- a/addons/web/static/tests/fields/relational_fields/field_many2many_tests.js
+++ b/addons/web/static/tests/fields/relational_fields/field_many2many_tests.js
@@ -3,6 +3,8 @@ odoo.define('web.field_many_to_many_tests', function (require) {
 
 var FormView = require('web.FormView');
 var testUtils = require('web.test_utils');
+
+const cpHelpers = testUtils.controlPanel;
 var createView = testUtils.createView;
 
 QUnit.module('fields', {}, function () {
@@ -1003,8 +1005,8 @@ QUnit.module('fields', {}, function () {
             assert.strictEqual($('.modal .o_data_row').length, 1,
                 "should contain only one row (gold)");
 
-            await testUtils.fields.triggerKey('press', $('.modal .o_searchview_input'), 's');
-            await testUtils.fields.triggerKeydown($('.modal .o_searchview_input'), 'enter');
+            await cpHelpers.editSearch('.modal', 's');
+            await cpHelpers.validateSearch('.modal');
 
             assert.strictEqual($('.modal .o_data_row').length, 0, "should contain no row");
 
diff --git a/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js b/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js
index 21d74bf0d99..04c934290a1 100644
--- a/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js
+++ b/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js
@@ -9,6 +9,7 @@ var StandaloneFieldManagerMixin = require('web.StandaloneFieldManagerMixin');
 var testUtils = require('web.test_utils');
 var Widget = require('web.Widget');
 
+const cpHelpers = testUtils.controlPanel;
 var createView = testUtils.createView;
 
 QUnit.module('fields', {}, function () {
@@ -244,11 +245,11 @@ QUnit.module('fields', {}, function () {
             // save form
             await testUtils.form.clickSave(form);
             // click next on pager
-            await testUtils.dom.click(form.pager.$('.o_pager_next'));
+            await testUtils.dom.click(form.el.querySelector('.o_pager .o_pager_next'));
 
             // this checks that the view did not ask for confirmation that the
             // record is dirty
-            assert.strictEqual(form.pager.$el.text().trim(), '2 / 2',
+            assert.strictEqual(form.el.querySelector('.o_pager').innerText.trim(), '2 / 2',
                 'pager should be at second page');
             form.destroy();
         });
@@ -316,11 +317,11 @@ QUnit.module('fields', {}, function () {
             // save form
             await testUtils.form.clickSave(form);
             // click next on pager
-            await testUtils.dom.click(form.pager.$('.o_pager_next'));
+            await testUtils.dom.click(form.el.querySelector('.o_pager .o_pager_next'));
 
             // this checks that the view did not ask for confirmation that the
             // record is dirty
-            assert.strictEqual(form.pager.$el.text().trim(), '2 / 2',
+            assert.strictEqual(form.el.querySelector('.o_pager').innerText.trim(), '2 / 2',
                 'pager should be at second page');
             form.destroy();
         });
@@ -506,11 +507,11 @@ QUnit.module('fields', {}, function () {
 
             assert.strictEqual($('tr.o_data_row').length, 9, "should display 9 records");
 
-            await testUtils.dom.click($('button:contains(Filters)'));
-            await testUtils.dom.click($('.o_add_custom_filter:visible'));
-            assert.strictEqual($('.o_filter_condition select.o_searchview_extended_prop_field').val(), 'datetime',
+            await cpHelpers.toggleFilterMenu('.modal');
+            await cpHelpers.toggleAddCustomFilter('.modal');
+            assert.strictEqual(document.querySelector('.modal .o_generator_menu_field').value, 'datetime',
                 "datetime field should be selected");
-            await testUtils.dom.click($('.o_apply_filter'));
+            await cpHelpers.applyFilter('.modal');
 
             assert.strictEqual($('tr.o_data_row').length, 0, "should display 0 records");
             form.destroy();
@@ -592,7 +593,6 @@ QUnit.module('fields', {}, function () {
             assert.containsNone(document.body, '.modal',
                 "No save should be triggered when removing value");
 
-            await testUtils.fields.many2one.clickOpenDropdown('trululu');
             await testUtils.fields.many2one.clickHighlightedItem('trululu');
 
             assert.containsOnce(document.body, '.modal',
@@ -741,8 +741,8 @@ QUnit.module('fields', {}, function () {
             assert.ok(!$('.modal .modal-footer .o_select_button').length,
                 "there should be no 'Select' button in the footer");
             assert.ok($('.modal tbody tr').length > 10, "list should contain more than 10 records");
-            await testUtils.fields.triggerKey('press', $('.modal .o_searchview_input'), 'P'),
-            await testUtils.fields.triggerKeydown($('.modal .o_searchview_input'), 'enter');
+            await cpHelpers.editSearch('.modal', "P");
+            await cpHelpers.validateSearch('.modal');
             assert.strictEqual($('.modal tbody tr').length, 10,
                 "list should be restricted to records containing a P (10 records)");
             // choose a record
diff --git a/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js b/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
index e24341b1019..e93dc2f39ca 100644
--- a/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
+++ b/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
@@ -12,6 +12,7 @@ var relationalFields = require('web.relational_fields');
 var testUtils = require('web.test_utils');
 var fieldUtils = require('web.field_utils');
 
+const cpHelpers = testUtils.controlPanel;
 var createView = testUtils.createView;
 
 QUnit.module('fields', {}, function () {
@@ -1505,7 +1506,7 @@ QUnit.module('fields', {}, function () {
                 "second dialog should be closed");
             assert.strictEqual($('.modal .o_data_row').length, 1,
                 "there should be one record in the one2many in the dialog");
-            assert.notOk($('.modal .o_x2m_control_panel .o_cp_pager div').is(':visible'),
+            assert.containsNone($('.modal'), '.o_x2m_control_panel .o_pager',
                 'm2m pager should be hidden');
 
             // click on 'Save & Close'
@@ -1756,16 +1757,14 @@ QUnit.module('fields', {}, function () {
             // move to record 2, which has 3 related records (and shouldn't contain the
             // related records of record 1 anymore). Two additional RPCs should have
             // been done
-            form.pager.next();
-            await testUtils.nextTick();
+            await cpHelpers.pagerNext(form);
             assert.strictEqual(count, 4, 'two RPCs should have been done');
             assert.strictEqual(form.$('.o_kanban_record:not(".o_kanban_ghost")').length, 3,
                 'one2many kanban should contain 3 cards for record 2');
 
             // move back to record 1, which should contain again its first 40 related
             // records
-            form.pager.previous();
-            await testUtils.nextTick();
+            await cpHelpers.pagerPrevious(form);
             assert.strictEqual(count, 6, 'two RPCs should have been done');
             assert.strictEqual(form.$('.o_kanban_record:not(".o_kanban_ghost")').length, 40,
                 'one2many kanban should contain 40 cards for record 1');
@@ -1778,16 +1777,14 @@ QUnit.module('fields', {}, function () {
                 'one2many kanban should contain 2 cards for record 1 at page 2');
 
             // move to record 2 again and check that everything is correctly updated
-            form.pager.next();
-            await testUtils.nextTick();
+            await cpHelpers.pagerNext(form);
             assert.strictEqual(count, 9, 'two RPCs should have been done');
             assert.strictEqual(form.$('.o_kanban_record:not(".o_kanban_ghost")').length, 3,
                 'one2many kanban should contain 3 cards for record 2');
 
             // move back to record 1 and move to page 2 again: all data should have
             // been correctly reloaded
-            form.pager.previous();
-            await testUtils.nextTick();
+            await cpHelpers.pagerPrevious(form);
             assert.strictEqual(count, 11, 'two RPCs should have been done');
             await testUtils.dom.click(form.$('.o_x2m_control_panel .o_pager_next'));
             assert.strictEqual(count, 12, 'one RPC should have been done');
@@ -2565,7 +2562,7 @@ QUnit.module('fields', {}, function () {
             await testUtils.dom.click(form.$('.o_field_x2many_list_row_add a'));
             await testUtils.dom.click(form.$el);
 
-            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_cp_pager').text().trim(), '1-3 / 5',
+            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_pager').text().trim(), '1-3 / 5',
                 "pager should display the correct total");
             form.destroy();
         });
@@ -2898,7 +2895,7 @@ QUnit.module('fields', {}, function () {
             await testUtils.form.clickEdit(form);
             await testUtils.dom.click(form.$('.o_field_x2many_list_row_add a'));
             // the record currently being added should not count in the pager
-            assert.isNotVisible(form.$('.o_field_widget[name=turtles] .o_cp_pager'));
+            assert.containsNone(form, '.o_field_widget[name=turtles] .o_pager');
 
             form.destroy();
         });
@@ -2931,8 +2928,8 @@ QUnit.module('fields', {}, function () {
             // confirm the discard operation
             await testUtils.dom.click($('.modal .modal-footer .btn-primary'));
 
-            assert.isVisible(form.$('.o_field_widget[name=turtles] .o_cp_pager'));
-            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_cp_pager').text().trim(), '1-3 / 4',
+            assert.isVisible(form.$('.o_field_widget[name=turtles] .o_pager'));
+            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_pager').text().trim(), '1-3 / 4',
                 "pager should display correct values");
 
             form.destroy();
@@ -3001,13 +2998,13 @@ QUnit.module('fields', {}, function () {
             // see a confirm dialog
             await testUtils.dom.click(form.$('.o_field_widget[name=turtles] .o_pager_next'));
 
-            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_cp_pager').text().trim(), '1-3 / 4',
+            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_pager').text().trim(), '1-3 / 4',
                 "pager should still display the correct total");
 
             // click on cancel
             await testUtils.dom.click($('.modal .modal-footer .btn-secondary'));
 
-            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_cp_pager').text().trim(), '1-3 / 4',
+            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_pager').text().trim(), '1-3 / 4',
                 "pager should again display the correct total");
             assert.containsOnce(form, '.o_field_one2many input.o_field_invalid',
                 "there should be an invalid input in the one2many");
@@ -3048,7 +3045,7 @@ QUnit.module('fields', {}, function () {
             await testUtils.dom.click($('.modal .modal-footer .btn-primary'));
 
             assert.containsOnce(form, 'tr.o_data_row');
-            assert.isNotVisible(form.$('.o_field_widget[name=turtles] .o_cp_pager'));
+            assert.containsNone(form, '.o_field_widget[name=turtles] .o_pager');
 
             form.destroy();
         });
@@ -3911,14 +3908,14 @@ QUnit.module('fields', {}, function () {
                     '</form>',
             });
 
-            assert.ok(!form.$('.o_x2m_control_panel .o_cp_pager div').is(':visible'),
+            assert.containsNone(form, '.o_x2m_control_panel .o_pager',
                 'o2m pager should be hidden');
 
             // click to create a subrecord
             await testUtils.dom.click(form.$('tbody td.o_field_x2many_list_row_add a'));
             assert.containsOnce(form, 'tr.o_data_row');
 
-            assert.ok(!form.$('.o_x2m_control_panel .o_cp_pager div').is(':visible'),
+            assert.containsNone(form, '.o_x2m_control_panel .o_pager',
                 'o2m pager should be hidden');
             form.destroy();
         });
diff --git a/addons/web/static/tests/fields/relational_fields_tests.js b/addons/web/static/tests/fields/relational_fields_tests.js
index 11d67bd3752..47703a4ce1f 100644
--- a/addons/web/static/tests/fields/relational_fields_tests.js
+++ b/addons/web/static/tests/fields/relational_fields_tests.js
@@ -8,6 +8,7 @@ var RamStorage = require('web.RamStorage');
 var relationalFields = require('web.relational_fields');
 var testUtils = require('web.test_utils');
 
+const cpHelpers = testUtils.controlPanel;
 var createView = testUtils.createView;
 
 QUnit.module('fields', {}, function () {
@@ -153,24 +154,10 @@ QUnit.module('relational_fields', {
 
     QUnit.test('search more pager is reset when doing a new search', async function (assert) {
         assert.expect(6);
-        for(var i = 10; i < 180; i++) {
-            this.data.partner.records.push({
-                id: i,
-                display_name: "Partner " + i,
-            });
-        }
-
-        async function stringToEvent ($element, string) {
-            for (var i = 0; i < string.length; i++) {
-                var keyAscii = string.charCodeAt(i);
-                $element.val($element.val()+string[i]);
-                $element.trigger($.Event('keyup', {which: keyAscii, keyCode:keyAscii}));
-                await testUtils.nextTick();
-            }
-            $element.trigger($.Event('keyup', {which: $.ui.keyCode.ENTER, keyCode:$.ui.keyCode.ENTER}));
-            await testUtils.nextTick();
-        }
 
+        this.data.partner.records.push(
+            ...new Array(170).fill().map((_, i) => ({ id: i + 10, name: "Partner " + i }))
+        );
         this.data.partner.fields.datetime.searchable = true;
         var form = await createView({
             View: FormView,
@@ -192,7 +179,6 @@ QUnit.module('relational_fields', {
 
         await testUtils.form.clickEdit(form);
 
-
         await testUtils.fields.many2one.clickOpenDropdown('trululu');
         await testUtils.fields.many2one.clickItem('trululu','Search');
         await testUtils.dom.click($('.modal .o_pager_next'));
@@ -201,7 +187,8 @@ QUnit.module('relational_fields', {
         assert.strictEqual($('.o_pager_value').text(), "181-160", "should display the second page");
         assert.strictEqual($('tr.o_data_row').length, 80, "should display 80 record");
 
-        await stringToEvent($('.modal .o_searchview_input'), 'first');
+        await cpHelpers.editSearch('.modal', "first");
+        await cpHelpers.validateSearch('.modal');
 
         assert.strictEqual($('.o_pager_limit').text(), "11", "there should be 1 record");
         assert.strictEqual($('.o_pager_value').text(), "11-1", "should display the first page");
@@ -1708,8 +1695,8 @@ QUnit.module('relational_fields', {
         });
         await testUtils.fields.many2one.clickOpenDropdown('trululu');
         await testUtils.fields.many2one.clickItem('trululu', 'Search');
-        await testUtils.dom.click($('.modal .o_search_options .fa-bars'));
-        await testUtils.dom.click($('.modal .o_search_options .o_group_by_menu a:contains(Bar)'));
+        await cpHelpers.toggleGroupByMenu('.modal');
+        await cpHelpers.toggleMenuItem('.modal', "Bar");
 
         await testUtils.dom.click($('.modal .o_group_header:first'));
 
@@ -1977,7 +1964,7 @@ QUnit.module('relational_fields', {
 
         await testUtils.form.clickSave(form);
 
-        assert.strictEqual(form.el.querySelector('.o_field_many2manytags').innerText, 'new value');
+        assert.strictEqual(form.el.querySelector('.o_field_many2manytags').innerText.trim(), "new value");
 
         form.destroy();
     });