[MERGE] forward port branch saas-12.5 up to 197474e5b9a

2 files changed, 50 insertions, 32 deletions

diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js
index b092604bd64..9a19beac4f6 100644
--- a/addons/web_editor/static/tests/field_html_tests.js
+++ b/addons/web_editor/static/tests/field_html_tests.js
@@ -55,6 +55,19 @@ QUnit.module('web_editor', {}, function () {
                         body_arch: "<div class='field_body'>yep</div>",
                     }],
                 },
+                "ir.translation": {
+                    fields: {
+                        lang_code: {type: "char"},
+                        value: {type: "char"},
+                        res_id: {type: "integer"}
+                    },
+                    records: [{
+                        id: 99,
+                        res_id: 12,
+                        value: '',
+                        lang_code: 'en_US'
+                    }]
+                },
             });
 
             testUtils.mock.patch(ajax, {
@@ -382,7 +395,7 @@ QUnit.module('web_editor', {}, function () {
         QUnit.module('translation');
 
         QUnit.test('field html translatable', async function (assert) {
-            assert.expect(3);
+            assert.expect(4);
 
             var multiLang = _t.database.multi_lang;
             _t.database.multi_lang = true;
@@ -400,7 +413,13 @@ QUnit.module('web_editor', {}, function () {
                 mockRPC: function (route, args) {
                     if (route === '/web/dataset/call_button' && args.method === 'translate_fields') {
                         assert.deepEqual(args.args, ['note.note', 1, 'body'], "should call 'call_button' route");
-                        return Promise.resolve();
+                        return Promise.resolve({
+                            domain: [],
+                            context: {search_default_name: 'partnes,foo'},
+                        });
+                    }
+                    if (route === "/web/dataset/call_kw/res.lang/get_installed") {
+                        return Promise.resolve([["en_US"], ["fr_BE"]]);
                     }
                     return this._super.apply(this, arguments);
                 },
@@ -412,6 +431,7 @@ QUnit.module('web_editor', {}, function () {
             var $button = form.$('.oe_form_field_html .o_field_translate');
             assert.strictEqual($button.length, 1, "should have a translate button");
             await testUtils.dom.click($button);
+            assert.containsOnce($(document), '.o_translation_dialog', 'should have a modal to translate');
 
             form.destroy();
             _t.database.multi_lang = multiLang;
diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js
index 3b1563d3182..7898ed63f95 100644
--- a/addons/web_editor/static/tests/test_utils.js
+++ b/addons/web_editor/static/tests/test_utils.js
@@ -79,25 +79,24 @@ MockServer.include({
                         'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
                         '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
                         '    <div data-js="colorpicker" data-selector=".test_option_all">' +
-                        '       <div class="dropdown-submenu">' +
-                        '           <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Background Color</a>' +
-                        '           <div class="dropdown-menu" role="menu"/>' +
-                        '       </div>' +
+                        '       <we-collapse-area>' +
+                        '           <we-toggler><i class="fa fa-eyedropper"/> Background Color</we-toggler>' +
+                        '           <we-collapse/>' +
+                        '       </we-collapse-area>' +
                         '    </div>' +
                         '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <a tabindex="-1" href="#" class="dropdown-item" data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/>Background Image</a>' +
+                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
                         '    </div>' +
                         '    <div data-js="option_test" data-selector=".s_hr">' +
-                        '        <div class="dropdown-submenu">' +
-                        '            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-arrows-v"/>Alignment</a>' +
-                        '            <div class="dropdown-menu" role="menu">' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-start">Top</a>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-center">Middle</a>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-end">Bottom</a>' +
-                        '                <div class="dropdown-divider"/>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-stretch">Equal height</a>' +
-                        '            </div>' +
-                        '        </div>' +
+                        '        <we-collapse-area>' +
+                        '            <we-toggler><i class="fa fa-arrows-v"/> Alignment</we-toggler>' +
+                        '            <we-collapse>' +
+                        '                <we-button data-select-class="align-items-start">Top</we-button>' +
+                        '                <we-button data-select-class="align-items-center">Middle</we-button>' +
+                        '                <we-button data-select-class="align-items-end">Bottom</we-button>' +
+                        '                <we-button data-select-class="align-items-stretch">Equal height</we-button>' +
+                        '            </we-collapse>' +
+                        '        </we-collapse-area>' +
                         '    </div>' +
                         '</div>';
                 return Promise.resolve(template);
@@ -255,25 +254,24 @@ function wysiwygData(data) {
                         'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
                         '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
                         '    <div data-js="colorpicker" data-selector=".test_option_all">' +
-                        '       <div class="dropdown-submenu">' +
-                        '           <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Background Color</a>' +
-                        '           <div class="dropdown-menu" role="menu"/>' +
-                        '       </div>' +
+                        '       <we-collapse-area>' +
+                        '           <we-toggler><i class="fa fa-eyedropper"/>Background Color</we-toggler>' +
+                        '           <we-collapse/>' +
+                        '       </we-collapse-area>' +
                         '    </div>' +
                         '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <a tabindex="-1" href="#" class="dropdown-item" data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/>Background Image</a>' +
+                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
                         '    </div>' +
                         '    <div data-js="option_test" data-selector=".s_hr">' +
-                        '        <div class="dropdown-submenu">' +
-                        '            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-arrows-v"/>Alignment</a>' +
-                        '            <div class="dropdown-menu" role="menu">' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-start">Top</a>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-center">Middle</a>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-end">Bottom</a>' +
-                        '                <div class="dropdown-divider"/>' +
-                        '                <a href="#" class="dropdown-item" data-select-class="align-items-stretch">Equal height</a>' +
-                        '            </div>' +
-                        '        </div>' +
+                        '        <we-collapse-area>' +
+                        '            <we-toggler><i class="fa fa-arrows-v"/> Alignment</we-toggler>' +
+                        '            <we-collapse>' +
+                        '                <we-button data-select-class="align-items-start">Top</we-button>' +
+                        '                <we-button data-select-class="align-items-center">Middle</we-button>' +
+                        '                <we-button data-select-class="align-items-end">Bottom</we-button>' +
+                        '                <we-button data-select-class="align-items-stretch">Equal height</we-button>' +
+                        '            </we-collapse>' +
+                        '        </we-collapse-area>' +
                         '    </div>' +
                         '</div>';
                 }