[REF] web_editor: adapt code after jQuery update

Part of task 1896658

Co-authored-by: Aaron Bohy <aab@odoo.com>
Co-authored-by: Christophe Matthieu <chm@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: David Monjoie <dmo@odoo.com>
Co-authored-by: Martin Geubelle <mge@odoo.com>
Co-authored-by: svs-odoo <svs@odoo.com>
Co-authored-by: Vincent Schippefilt <vsc@odoo.com>

1 files changed, 630 insertions, 676 deletions

diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js
index 46e66eed81e..73ef267bbf8 100644
--- a/addons/web_editor/static/tests/field_html_tests.js
+++ b/addons/web_editor/static/tests/field_html_tests.js
@@ -13,233 +13,226 @@ var _t = core._t;
 
 QUnit.module('web_editor', {}, function () {
 
-QUnit.module('field html', {
-    beforeEach: function () {
-        this.data = weTestUtils.wysiwygData({
-            'note.note': {
-                fields: {
-                    display_name: {
-                        string: "Displayed name",
-                        type: "char"
-                    },
-                    body: {
-                        string: "Message",
-                        type: "html"
+    QUnit.module('field html', {
+        beforeEach: function () {
+            this.data = weTestUtils.wysiwygData({
+                'note.note': {
+                    fields: {
+                        display_name: {
+                            string: "Displayed name",
+                            type: "char"
+                        },
+                        body: {
+                            string: "Message",
+                            type: "html"
+                        },
                     },
+                    records: [{
+                        id: 1,
+                        display_name: "first record",
+                        body: "<p>toto toto toto</p><p>tata</p>",
+                    }],
                 },
-                records: [{
-                    id: 1,
-                    display_name: "first record",
-                    body: "<p>toto toto toto</p><p>tata</p>",
-                }],
-            },
-            'mass.mailing': {
-                fields: {
-                    display_name: {
-                        string: "Displayed name",
-                        type: "char"
-                    },
-                    body_html: {
-                        string: "Message Body inline (to send)",
-                        type: "html"
-                    },
-                    body_arch: {
-                        string: "Message Body for edition",
-                        type: "html"
+                'mass.mailing': {
+                    fields: {
+                        display_name: {
+                            string: "Displayed name",
+                            type: "char"
+                        },
+                        body_html: {
+                            string: "Message Body inline (to send)",
+                            type: "html"
+                        },
+                        body_arch: {
+                            string: "Message Body for edition",
+                            type: "html"
+                        },
                     },
+                    records: [{
+                        id: 1,
+                        display_name: "first record",
+                        body_html: "<div class='field_body' style='background-color: red;'>yep</div>",
+                        body_arch: "<div class='field_body'>yep</div>",
+                    }],
                 },
-                records: [{
-                    id: 1,
-                    display_name: "first record",
-                    body_html: "<div class='field_body' style='background-color: red;'>yep</div>",
-                    body_arch: "<div class='field_body'>yep</div>",
-                }],
-            },
-        });
+            });
 
-        testUtils.mock.patch(ajax, {
-            loadAsset: function (xmlId) {
-                if (xmlId === 'template.assets') {
-                    return $.when({
-                        cssLibs: [],
-                        cssContents: ['body {background-color: red;}']
-                    });
-                }
-                if (xmlId === 'template.assets_all_style') {
-                    return $.when({
-                        cssLibs: $('link[href]:not([type="image/x-icon"])').map(function () {
-                            return $(this).attr('href');
-                        }).get(),
-                        cssContents: ['body {background-color: red;}']
-                    });
-                }
-                throw 'Wrong template';
-            },
+            testUtils.mock.patch(ajax, {
+                loadAsset: function (xmlId) {
+                    if (xmlId === 'template.assets') {
+                        return Promise.resolve({
+                            cssLibs: [],
+                            cssContents: ['body {background-color: red;}']
+                        });
+                    }
+                    if (xmlId === 'template.assets_all_style') {
+                        return Promise.resolve({
+                            cssLibs: $('link[href]:not([type="image/x-icon"])').map(function () {
+                                return $(this).attr('href');
+                            }).get(),
+                            cssContents: ['body {background-color: red;}']
+                        });
+                    }
+                    throw 'Wrong template';
+                },
+            });
+        },
+        afterEach: function () {
+            testUtils.mock.unpatch(ajax);
+        },
+    }, function () {
+
+        QUnit.module('basic');
+
+        QUnit.test('simple rendering', async function (assert) {
+            assert.expect(3);
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px"/>' +
+                    '</form>',
+                res_id: 1,
+            });
+            var $field = form.$('.oe_form_field[name="body"]');
+            assert.strictEqual($field.children('.o_readonly').html(),
+                '<p>toto toto toto</p><p>tata</p>',
+                "should have rendered a div with correct content in readonly");
+            assert.strictEqual($field.attr('style'), 'height: 100px',
+                "should have applied the style correctly");
+
+            await testUtils.form.clickEdit(form);
+            await testUtils.nextTick();
+            $field = form.$('.oe_form_field[name="body"]');
+            assert.strictEqual($field.find('.note-editable').html(),
+                '<p>toto toto toto</p><p>tata</p>',
+                "should have rendered the field correctly in edit");
+
+            form.destroy();
         });
-    },
-    afterEach: function () {
-        testUtils.mock.unpatch(ajax);
-    },
-}, function () {
-
-QUnit.module('basic');
-
-QUnit.test('simple rendering', function (assert) {
-    var done = assert.async();
-    assert.expect(3);
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px"/>' +
-            '</form>',
-        res_id: 1,
-    }).then(function (form) {
-        var $field = form.$('.oe_form_field[name="body"]');
-        assert.strictEqual($field.children('.o_readonly').html(),
-            '<p>toto toto toto</p><p>tata</p>',
-            "should have rendered a div with correct content in readonly");
-        assert.strictEqual($field.attr('style'), 'height: 100px',
-            "should have applied the style correctly");
-
-        form.$buttons.find('.o_form_button_edit').click();
-
-        $field = form.$('.oe_form_field[name="body"]');
-        assert.strictEqual($field.find('.note-editable').html(),
-            '<p>toto toto toto</p><p>tata</p>',
-            "should have rendered the field correctly in edit");
-
-        form.destroy();
-        done();
-    });
-});
 
-QUnit.test('colorpicker', function (assert) {
-    var done = assert.async();
-    assert.expect(6);
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px"/>' +
-            '</form>',
-        res_id: 1,
-    }).then(function (form) {
-        form.$buttons.find('.o_form_button_edit').click();
-        var $field = form.$('.oe_form_field[name="body"]');
-
-        // select the text
-        var pText = $field.find('.note-editable p').first().contents()[0];
-        Wysiwyg.setRange(pText, 1, pText, 10);
-        // text is selected
-
-        var range = Wysiwyg.getRange($field[0]);
-        assert.strictEqual(range.sc, pText,
-            "should select the text");
-
-        $field.find('.note-toolbar .note-bg-color button:first').mousedown().click();
-
-        assert.ok($field.find('.note-bg-color').hasClass('show') && $field.find('.note-bg-color .dropdown-menu').hasClass('show'),
-            "should display the color picker");
-
-        $field.find('.note-toolbar .note-bg-color button[data-value="#00FFFF"]').mousedown().click();
-
-        assert.ok(!$field.find('.note-bg-color').hasClass('show') && !$field.find('.note-bg-color .dropdown-menu').hasClass('show'),
-            "should close the color picker");
-
-        assert.strictEqual($field.find('.note-editable').html(),
-            '<p>t<font style="background-color: rgb(0, 255, 255);">oto toto&nbsp;</font>toto</p><p>tata</p>',
-            "should have rendered the field correctly in edit");
-
-        var fontContent = $field.find('.note-editable font').contents()[0];
-        var rangeControl = {
-            sc: fontContent,
-            so: 0,
-            ec: fontContent,
-            eo: fontContent.length,
-        };
-        range = Wysiwyg.getRange($field[0]);
-        assert.deepEqual(_.pick(range, 'sc', 'so', 'ec', 'eo'), rangeControl,
-            "should select the text after color change");
-
-        // select the text
-        pText = $field.find('.note-editable p').first().contents()[2];
-        Wysiwyg.setRange(fontContent, 5, pText, 2);
-        // text is selected
-
-        $field.find('.note-toolbar .note-bg-color button:first').mousedown().click();
-        $field.find('.note-toolbar .note-bg-color button[data-value="bg-gamma"]').mousedown().click();
-
-        assert.strictEqual($field.find('.note-editable').html(),
-            '<p>t<font style="background-color: rgb(0, 255, 255);">oto t</font><font class="bg-gamma">oto&nbsp;to</font>to</p><p>tata</p>',
-            "should have rendered the field correctly in edit");
-
-        form.destroy();
-        done();
-    });
-});
+        QUnit.test('colorpicker', async function (assert) {
+            assert.expect(6);
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px"/>' +
+                    '</form>',
+                res_id: 1,
+            });
+            await testUtils.form.clickEdit(form);
+            var $field = form.$('.oe_form_field[name="body"]');
 
-QUnit.test('media dialog: image', function (assert) {
-    var done = assert.async();
-    assert.expect(1);
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px"/>' +
-            '</form>',
-        res_id: 1,
-        mockRPC: function (route, args) {
-            if (args.model === 'ir.attachment') {
-                if (args.method === "generate_access_token") {
-                    return $.when();
-                }
-                if (args.kwargs.domain[7][2].join(',') === "image/gif,image/jpe,image/jpeg,image/jpg,image/gif,image/png") {
-                    return $.when([{
-                        "id": 1,
-                        "public": true,
-                        "name": "image",
-                        "datas_fname": "image.png",
-                        "mimetype": "image/png",
-                        "checksum": false,
-                        "url": "/web_editor/static/src/img/transparent.png",
-                        "type": "url",
-                        "res_id": 0,
-                        "res_model": false,
-                        "access_token": false
-                    }]);
-                }
-            }
-            return this._super(route, args);
-        },
-    }).then(function (form) {
-        form.$buttons.find('.o_form_button_edit').click();
-        var $field = form.$('.oe_form_field[name="body"]');
-
-        // the dialog load some xml assets
-        var defMediaDialog = $.Deferred();
-        testUtils.mock.patch(MediaDialog, {
-            init: function () {
-                this._super.apply(this, arguments);
-                this.opened(defMediaDialog.resolve.bind(defMediaDialog));
-            }
+            // select the text
+            var pText = $field.find('.note-editable p').first().contents()[0];
+            Wysiwyg.setRange(pText, 1, pText, 10);
+            // text is selected
+
+            var range = Wysiwyg.getRange($field[0]);
+            assert.strictEqual(range.sc, pText,
+                "should select the text");
+
+            $field.find('.note-toolbar .note-bg-color button:first').mousedown().click();
+
+            assert.ok($field.find('.note-bg-color').hasClass('show') && $field.find('.note-bg-color .dropdown-menu').hasClass('show'),
+                "should display the color picker");
+
+            $field.find('.note-toolbar .note-bg-color button[data-value="#00FFFF"]').mousedown().click();
+
+            assert.ok(!$field.find('.note-bg-color').hasClass('show') && !$field.find('.note-bg-color .dropdown-menu').hasClass('show'),
+                "should close the color picker");
+
+            assert.strictEqual($field.find('.note-editable').html(),
+                '<p>t<font style="background-color: rgb(0, 255, 255);">oto toto&nbsp;</font>toto</p><p>tata</p>',
+                "should have rendered the field correctly in edit");
+
+            var fontContent = $field.find('.note-editable font').contents()[0];
+            var rangeControl = {
+                sc: fontContent,
+                so: 0,
+                ec: fontContent,
+                eo: fontContent.length,
+            };
+            range = Wysiwyg.getRange($field[0]);
+            assert.deepEqual(_.pick(range, 'sc', 'so', 'ec', 'eo'), rangeControl,
+                "should select the text after color change");
+
+            // select the text
+            pText = $field.find('.note-editable p').first().contents()[2];
+            Wysiwyg.setRange(fontContent, 5, pText, 2);
+            // text is selected
+
+            $field.find('.note-toolbar .note-bg-color button:first').mousedown().click();
+            $field.find('.note-toolbar .note-bg-color button[data-value="bg-gamma"]').mousedown().click();
+
+            assert.strictEqual($field.find('.note-editable').html(),
+                '<p>t<font style="background-color: rgb(0, 255, 255);">oto t</font><font class="bg-gamma">oto&nbsp;to</font>to</p><p>tata</p>',
+                "should have rendered the field correctly in edit");
+
+            form.destroy();
         });
 
-        var pText = $field.find('.note-editable p').first().contents()[0];
-        Wysiwyg.setRange(pText, 1);
+        QUnit.test('media dialog: image', async function (assert) {
+            assert.expect(1);
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px"/>' +
+                    '</form>',
+                res_id: 1,
+                mockRPC: function (route, args) {
+                    if (args.model === 'ir.attachment') {
+                        if (args.method === "generate_access_token") {
+                            return Promise.resolve();
+                        }
+                        if (args.kwargs.domain[7][2].join(',') === "image/gif,image/jpe,image/jpeg,image/jpg,image/gif,image/png") {
+                            return Promise.resolve([{
+                                "id": 1,
+                                "public": true,
+                                "name": "image",
+                                "datas_fname": "image.png",
+                                "mimetype": "image/png",
+                                "checksum": false,
+                                "url": "/web_editor/static/src/img/transparent.png",
+                                "type": "url",
+                                "res_id": 0,
+                                "res_model": false,
+                                "access_token": false
+                            }]);
+                        }
+                    }
+                    return this._super(route, args);
+                },
+            });
+            await testUtils.form.clickEdit(form);
+            var $field = form.$('.oe_form_field[name="body"]');
+
+            // the dialog load some xml assets
+            var defMediaDialog = testUtils.makeTestPromise();
+            testUtils.mock.patch(MediaDialog, {
+                init: function () {
+                    this._super.apply(this, arguments);
+                    this.opened(defMediaDialog.resolve.bind(defMediaDialog));
+                }
+            });
+
+            var pText = $field.find('.note-editable p').first().contents()[0];
+            Wysiwyg.setRange(pText, 1);
 
-        $field.find('.note-toolbar .note-insert button:has(.fa-file-image-o)').mousedown().click();
+            $field.find('.note-toolbar .note-insert button:has(.fa-file-image-o)').mousedown().click();
 
-        // load static xml file (dialog, media dialog, unsplash image widget)
-        defMediaDialog.then(function () {
-            $('.modal #editor-media-image .o_image:first').click();
-            $('.modal .modal-footer button.btn-primary').click();
+            // load static xml file (dialog, media dialog, unsplash image widget)
+            await defMediaDialog;
+            await testUtils.dom.click($('.modal #editor-media-image .o_image:first'));
+            await testUtils.dom.click($('.modal .modal-footer button.btn-primary'));
 
             var $editable = form.$('.oe_form_field[name="body"] .note-editable');
 
@@ -250,53 +243,49 @@ QUnit.test('media dialog: image', function (assert) {
             testUtils.mock.unpatch(MediaDialog);
 
             form.destroy();
-            done();
         });
-    });
-});
 
-QUnit.test('media dialog: icon', function (assert) {
-    var done = assert.async();
-    assert.expect(1);
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px"/>' +
-            '</form>',
-        res_id: 1,
-        mockRPC: function (route, args) {
-            if (args.model === 'ir.attachment') {
-                return $.when([]);
-            }
-            return this._super(route, args);
-        },
-    }).then(function (form) {
-        form.$buttons.find('.o_form_button_edit').click();
-        var $field = form.$('.oe_form_field[name="body"]');
-
-        // the dialog load some xml assets
-        var defMediaDialog = $.Deferred();
-        testUtils.mock.patch(MediaDialog, {
-            init: function () {
-                this._super.apply(this, arguments);
-                this.opened(defMediaDialog.resolve.bind(defMediaDialog));
-            }
-        });
+        QUnit.test('media dialog: icon', async function (assert) {
+            assert.expect(1);
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px"/>' +
+                    '</form>',
+                res_id: 1,
+                mockRPC: function (route, args) {
+                    if (args.model === 'ir.attachment') {
+                        return Promise.resolve([]);
+                    }
+                    return this._super(route, args);
+                },
+            });
+            await testUtils.form.clickEdit(form);
+            var $field = form.$('.oe_form_field[name="body"]');
+
+            // the dialog load some xml assets
+            var defMediaDialog = testUtils.makeTestPromise();
+            testUtils.mock.patch(MediaDialog, {
+                init: function () {
+                    this._super.apply(this, arguments);
+                    this.opened(defMediaDialog.resolve.bind(defMediaDialog));
+                }
+            });
 
-        var pText = $field.find('.note-editable p').first().contents()[0];
-        Wysiwyg.setRange(pText, 1);
+            var pText = $field.find('.note-editable p').first().contents()[0];
+            Wysiwyg.setRange(pText, 1);
 
-        $field.find('.note-toolbar .note-insert button:has(.fa-file-image-o)').mousedown().click();
+            $field.find('.note-toolbar .note-insert button:has(.fa-file-image-o)').mousedown().click();
 
-        // load static xml file (dialog, media dialog, unsplash image widget)
-        defMediaDialog.then(function () {
+            // load static xml file (dialog, media dialog, unsplash image widget)
+            await defMediaDialog;
             $('.modal .tab-content .tab-pane').removeClass('fade'); // to be sync in test
-            $('.modal a[aria-controls="editor-media-icon"]').click();
-            $('.modal #editor-media-icon .font-icons-icon.fa-glass').click();
-            $('.modal .modal-footer button.btn-primary').click();
+            await testUtils.dom.click($('.modal a[aria-controls="editor-media-icon"]'));
+            await testUtils.dom.click($('.modal #editor-media-icon .font-icons-icon.fa-glass'));
+            await testUtils.dom.click($('.modal .modal-footer button.btn-primary'));
 
             var $editable = form.$('.oe_form_field[name="body"] .note-editable');
 
@@ -307,146 +296,136 @@ QUnit.test('media dialog: icon', function (assert) {
             testUtils.mock.unpatch(MediaDialog);
 
             form.destroy();
-            done();
-        }, 200);
-    });
-});
+        });
 
-QUnit.test('save', function (assert) {
-    var done = assert.async();
-    assert.expect(1);
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px"/>' +
-            '</form>',
-        res_id: 1,
-        mockRPC: function (route, args) {
-            if (args.method === "write") {
-                assert.strictEqual(args.args[1].body,
-                    '<p>t<font class="bg-gamma">oto toto&nbsp;</font>toto</p><p>tata</p>',
-                    "should save the content");
-
-            }
-            return this._super.apply(this, arguments);
-        },
-    }).then(function (form) {
-        form.$buttons.find('.o_form_button_edit').click();
-        var $field = form.$('.oe_form_field[name="body"]');
+        QUnit.test('save', async function (assert) {
+            assert.expect(1);
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px"/>' +
+                    '</form>',
+                res_id: 1,
+                mockRPC: function (route, args) {
+                    if (args.method === "write") {
+                        assert.strictEqual(args.args[1].body,
+                            '<p>t<font class="bg-gamma">oto toto&nbsp;</font>toto</p><p>tata</p>',
+                            "should save the content");
+
+                    }
+                    return this._super.apply(this, arguments);
+                },
+            });
+            await testUtils.form.clickEdit(form);
+            var $field = form.$('.oe_form_field[name="body"]');
 
-        // select the text
-        var pText = $field.find('.note-editable p').first().contents()[0];
-        Wysiwyg.setRange(pText, 1, pText, 10);
-        // text is selected
+            // select the text
+            var pText = $field.find('.note-editable p').first().contents()[0];
+            Wysiwyg.setRange(pText, 1, pText, 10);
+            // text is selected
 
-        $field.find('.note-toolbar .note-bg-color button:first').mousedown().click();
-        $field.find('.note-toolbar .note-bg-color button[data-value="bg-gamma"]').mousedown().click();
+            await testUtils.dom.click($field.find('.note-toolbar .note-bg-color button:first').mousedown());
+            await testUtils.dom.click($field.find('.note-toolbar .note-bg-color button[data-value="bg-gamma"]').mousedown());
 
-        form.$buttons.find('.o_form_button_save').click();
+            await testUtils.form.clickSave(form);
 
-        form.destroy();
-        done();
-    });
-});
+            form.destroy();
+        });
 
-QUnit.module('inline-style');
-
-QUnit.test('convert style to class on edit', function (assert) {
-    var done = assert.async();
-    assert.expect(5);
-
-    this.data['note.note'].records[0].body = '<p class="pull-right" style="float: right;">toto ' +
-        '<img data-class="fa fa-star" data-style="color: red;" src="/web_editor/font_to_img/61445/rgb(255,0,0)/13" style="border-style:none;vertical-align:middle;height: auto; width: auto;">' +
-        'toto toto</p><p>tata</p>';
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px" options="{\'style-inline\': true}"/>' +
-            '</form>',
-        res_id: 1,
-        mockRPC: function (route, args) {
-            if (args.method === "write") {
-                assert.strictEqual(args.args[1].body,
-                    '<p class="pull-right" style="margin:0px;font-size:13px;font-family:&quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif;float:right;">' +
-                        'toto ' +
-                        '<img ' +
+        QUnit.module('inline-style');
+
+        QUnit.test('convert style to class on edit', async function (assert) {
+            assert.expect(5);
+
+            this.data['note.note'].records[0].body = '<p class="pull-right" style="float: right;">toto ' +
+                '<img data-class="fa fa-star" data-style="color: red;" src="/web_editor/font_to_img/61445/rgb(255,0,0)/13" style="border-style:none;vertical-align:middle;height: auto; width: auto;">' +
+                'toto toto</p><p>tata</p>';
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px" options="{\'style-inline\': true}"/>' +
+                    '</form>',
+                res_id: 1,
+                mockRPC: function (route, args) {
+                    if (args.method === "write") {
+                        assert.strictEqual(args.args[1].body,
+                            '<p class="pull-right" style="margin:0px;font-size:13px;font-family:&quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif;float:right;">' +
+                            'toto ' +
+                            '<img ' +
                             'data-class="fa fa-star" ' +
                             'data-style="color: red;" ' +
                             'style="border-style:none;vertical-align:middle;color: red; height: auto; width: auto;" ' +
                             'data-src="/web_editor/font_to_img/61445/rgb(255,0,0)/13"' +
-                        '>' +
-                        'toto toto' +
-                    '</p>' +
-                    '<p style="margin:0px;font-size:13px;font-family:&quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif;">' +
-                        'tata' +
-                    '</p>',
-                    "should save the content");
-            }
-            if (route.indexOf("/web_editor/font_to_img/61445/rgb(") !== -1) {
-                assert.strictEqual(route,
-                    '/web_editor/font_to_img/61445/rgb(255,0,0)/13',
-                    "should use the image in function of the font and the color");
-                return $.when('#');
-            }
-            return this._super.apply(this, arguments);
-        },
-    }).then(function (form) {
-        var $field = form.$('.oe_form_field[name="body"]');
+                            '>' +
+                            'toto toto' +
+                            '</p>' +
+                            '<p style="margin:0px;font-size:13px;font-family:&quot;Lucida Grande&quot;, Helvetica, Verdana, Arial, sans-serif;">' +
+                            'tata' +
+                            '</p>',
+                            "should save the content");
+                    }
+                    if (route.indexOf("/web_editor/font_to_img/61445/rgb(") !== -1) {
+                        assert.strictEqual(route,
+                            '/web_editor/font_to_img/61445/rgb(255,0,0)/13',
+                            "should use the image in function of the font and the color");
+                        return Promise.resolve('#');
+                    }
+                    return this._super.apply(this, arguments);
+                },
+            });
+            var $field = form.$('.oe_form_field[name="body"]');
 
-        assert.strictEqual($field.children('.o_readonly').html(),
-            '<p class="pull-right" style="float: right;">' +
+            assert.strictEqual($field.children('.o_readonly').html(),
+                '<p class="pull-right" style="float: right;">' +
                 'toto ' +
                 '<img data-class="fa fa-star" data-style="color: red;" ' +
-                    'style="border-style:none;vertical-align:middle;height: auto; width: auto;" ' +
-                    'data-src="/web_editor/font_to_img/61445/rgb(255,0,0)/13">' +
+                'style="border-style:none;vertical-align:middle;height: auto; width: auto;" ' +
+                'data-src="/web_editor/font_to_img/61445/rgb(255,0,0)/13">' +
                 'toto toto' +
-            '</p>' +
-            '<p>tata</p>',
-            "should have rendered a div with correct content in readonly");
+                '</p>' +
+                '<p>tata</p>',
+                "should have rendered a div with correct content in readonly");
 
-        form.$buttons.find('.o_form_button_edit').click();
+            await testUtils.form.clickEdit(form);
 
-        $field = form.$('.oe_form_field[name="body"]');
-        assert.strictEqual($field.find('.note-editable').html(),
-            '<p class="pull-right">' +
+            $field = form.$('.oe_form_field[name="body"]');
+            assert.strictEqual($field.find('.note-editable').html(),
+                '<p class="pull-right">' +
                 'toto ' +
                 '<span class="fa fa-star o_fake_not_editable" style="color: red;" contenteditable="false"></span>' +
                 'toto toto' +
-            '</p>' +
-            '<p>tata</p>',
-            "should have rendered the field correctly in edit (remove inline style that used class)");
+                '</p>' +
+                '<p>tata</p>',
+                "should have rendered the field correctly in edit (remove inline style that used class)");
 
-        form.$buttons.find('.o_form_button_save').click();
+            await testUtils.form.clickSave(form);
 
-        form.destroy();
-        done();
-    });
-});
+            form.destroy();
+        });
 
-QUnit.module('cssReadonly');
-
-QUnit.test('rendering with iframe for readonly mode', function (assert) {
-    var done = assert.async();
-    assert.expect(3);
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px" options="{\'cssReadonly\': \'template.assets\'}"/>' +
-            '</form>',
-        res_id: 1,
-    }).then(function (form) {
-        var $field = form.$('.oe_form_field[name="body"]');
-        var $iframe = $field.find('iframe.o_readonly');
-        $iframe.data('load-def').then(function () {
+        QUnit.module('cssReadonly');
+
+        QUnit.test('rendering with iframe for readonly mode', async function (assert) {
+            assert.expect(3);
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px" options="{\'cssReadonly\': \'template.assets\'}"/>' +
+                    '</form>',
+                res_id: 1,
+            });
+            var $field = form.$('.oe_form_field[name="body"]');
+            var $iframe = $field.find('iframe.o_readonly');
+            await $iframe.data('loadDef');
             var doc = $iframe.contents()[0];
             assert.strictEqual($(doc).find('#iframe_target').html(),
                 '<p>toto toto toto</p><p>tata</p>',
@@ -456,7 +435,7 @@ QUnit.test('rendering with iframe for readonly mode', function (assert) {
                 'rgb(255, 0, 0)',
                 "should load the asset css");
 
-            form.$buttons.find('.o_form_button_edit').click();
+            await testUtils.form.clickEdit(form);
 
             $field = form.$('.oe_form_field[name="body"]');
             assert.strictEqual($field.find('.note-editable').html(),
@@ -464,40 +443,37 @@ QUnit.test('rendering with iframe for readonly mode', function (assert) {
                 "should have rendered the field correctly in edit");
 
             form.destroy();
-            done();
         });
-    });
-});
 
-QUnit.module('cssEdit');
+        QUnit.module('cssEdit');
 
-QUnit.test('rendering with iframe for edit mode', function (assert) {
-    var done = assert.async();
-    assert.expect(4);
+        QUnit.test('rendering with iframe for edit mode', async function (assert) {
+            assert.expect(4);
 
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px" options="{\'cssEdit\': \'template.assets\'}"/>' +
-            '</form>',
-        res_id: 1,
-    }).then(function (form) {
-        var $field = form.$('.oe_form_field[name="body"]');
-        assert.strictEqual($field.children('.o_readonly').html(),
-            '<p>toto toto toto</p><p>tata</p>',
-            "should have rendered a div with correct content in readonly");
-
-        form.$buttons.find('.o_form_button_edit').click();
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px" options="{\'cssEdit\': \'template.assets\'}"/>' +
+                    '</form>',
+                res_id: 1,
+            });
+            var $field = form.$('.oe_form_field[name="body"]');
+            assert.strictEqual($field.children('.o_readonly').html(),
+                '<p>toto toto toto</p><p>tata</p>',
+                "should have rendered a div with correct content in readonly");
 
-        $field = form.$('.oe_form_field[name="body"]');
-        var $iframe = $field.find('iframe');
+            await testUtils.form.clickEdit(form);
 
-        $iframe.data('load-def').then(function () {
+            $field = form.$('.oe_form_field[name="body"]');
+            var $iframe = $field.find('iframe');
+            await $iframe.data('loadDef');
             var doc = $iframe.contents()[0];
             var $content = $('#iframe_target', doc);
 
+            await testUtils.nextTick();
+
             assert.strictEqual($content.find('.note-editable').html(),
                 '<p>toto toto toto</p><p>tata</p>',
                 "should have rendered a div with correct content in edit mode");
@@ -507,42 +483,41 @@ QUnit.test('rendering with iframe for edit mode', function (assert) {
                 "should load the asset css");
 
             $content.find('.note-toolbar .note-bg-color button:first').mousedown().click();
+            await testUtils.nextTick();
 
             assert.ok($content.find('.note-bg-color').hasClass('show') && $content.find('.note-bg-color .dropdown-menu').hasClass('show'),
                 "should display toolbar dropdown menu in iframe");
 
             form.destroy();
-            done();
         });
-    });
-});
 
-QUnit.test('use colorpicker and save', function (assert) {
-    var done = assert.async();
-    assert.expect(1);
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px" options="{\'cssEdit\': \'template.assets\'}"/>' +
-            '</form>',
-        res_id: 1,
-        mockRPC: function (route, args) {
-            if (args.method === "write") {
-                assert.strictEqual(args.args[1].body,
-                    '<p>t<font class="bg-gamma">oto toto&nbsp;</font>toto</p><p>tata</p>',
-                    "should save the content");
-            }
-            return this._super.apply(this, arguments);
-        },
-    }).then(function (form) {
-        form.$buttons.find('.o_form_button_edit').click();
-        var $field = form.$('.oe_form_field[name="body"]');
-        var $iframe = $field.find('iframe');
+        QUnit.test('use colorpicker and save', async function (assert) {
+            assert.expect(1);
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px" options="{\'cssEdit\': \'template.assets\'}"/>' +
+                    '</form>',
+                res_id: 1,
+                mockRPC: function (route, args) {
+                    if (args.method === "write") {
+                        assert.strictEqual(args.args[1].body,
+                            '<p>t<font class="bg-gamma">oto toto&nbsp;</font>toto</p><p>tata</p>',
+                            "should save the content");
+                    }
+                    return this._super.apply(this, arguments);
+                },
+            });
+            await testUtils.form.clickEdit(form);
+            var $field = form.$('.oe_form_field[name="body"]');
+            var $iframe = $field.find('iframe');
+
+            await $iframe.data('loadDef');
+            await testUtils.nextTick();
 
-        $iframe.data('load-def').then(function () {
             var doc = $iframe.contents()[0];
             var $content = $('#iframe_target', doc);
             var $editable = $content.find('.note-editable');
@@ -552,70 +527,63 @@ QUnit.test('use colorpicker and save', function (assert) {
             Wysiwyg.setRange(pText, 1, pText, 10);
             // text is selected
 
-            $content.find('.note-toolbar .note-bg-color button:first').mousedown().click();
-            $content.find('.note-toolbar .note-bg-color button[data-value="bg-gamma"]').mousedown().click();
-
-
-            form.$buttons.find('.o_form_button_save').click();
+            await testUtils.dom.click($content.find('.note-toolbar .note-bg-color button:first').mousedown());
+            await testUtils.dom.click($content.find('.note-toolbar .note-bg-color button[data-value="bg-gamma"]').mousedown());
 
+            await testUtils.form.clickSave(form);
             form.destroy();
-            done();
         });
-    });
-});
 
-QUnit.module('wrapper');
+        QUnit.module('wrapper');
 
-// todo add test wrapper
+        // todo add test wrapper
 
-QUnit.module('snippet (without iframe)');
+        QUnit.module('snippet (without iframe)');
 
-QUnit.test('rendering with snippet panel', function (assert) {
-    var done = assert.async();
-    assert.expect(1);
+        QUnit.test('rendering with snippet panel', async function (assert) {
+            var done = assert.async();
+            assert.expect(1);
 
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px" options="{\'snippets\': \'web_editor.snippets\'}"/>' +
-            '</form>',
-        res_id: 1,
-    }).then(function (form) {
-        testUtils.mock.intercept(form, "snippets_loaded", function () {
-            assert.strictEqual(form.$('.oe_form_field #oe_snippets').length, 1,
-                "should display the snippet panel");
-            form.destroy();
-            done();
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px" options="{\'snippets\': \'web_editor.snippets\'}"/>' +
+                    '</form>',
+                res_id: 1,
+            });
+            testUtils.mock.intercept(form, "snippets_loaded", function () {
+                assert.strictEqual(form.$('.oe_form_field #oe_snippets').length, 1,
+                    "should display the snippet panel");
+                form.destroy();
+                done();
+            });
+            await testUtils.form.clickEdit(form);
         });
-        form.$buttons.find('.o_form_button_edit').click();
-    });
-});
 
-QUnit.test('drag&drop snippet', function (assert) {
-    var done = assert.async();
-    assert.expect(1);
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px" options="{\'snippets\': \'web_editor.snippets\'}"/>' +
-            '</form>',
-        res_id: 1,
-    }).then(function (form) {
-        var defSnippets = $.Deferred();
-        testUtils.mock.intercept(form, "snippets_loaded", function () {
-            defSnippets.resolve();
-        });
+        QUnit.test('drag&drop snippet', async function (assert) {
+            assert.expect(1);
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px" options="{\'snippets\': \'web_editor.snippets\'}"/>' +
+                    '</form>',
+                res_id: 1,
+            });
+            var defSnippets = testUtils.makeTestPromise();
+            testUtils.mock.intercept(form, "snippets_loaded", function () {
+                defSnippets.resolve();
+            });
 
-        form.$buttons.find('.o_form_button_edit').click();
-        var $field = form.$('.oe_form_field[name="body"]');
-        var $editable = $field.find('.note-editable');
+            await testUtils.form.clickEdit(form);
+            var $field = form.$('.oe_form_field[name="body"]');
+            var $editable = $field.find('.note-editable');
 
-        defSnippets.then(function () {
+            await defSnippets;
             var $hr = $field.find('.oe_snippet_thumbnail:first');
             testUtils.dom.dragAndDrop($hr, $editable.find('p'));
 
@@ -624,60 +592,55 @@ QUnit.test('drag&drop snippet', function (assert) {
                 "should drop the snippet");
 
             form.destroy();
-            done();
         });
-    });
-});
 
-// todo add test snippet + customize snippet
+        // todo add test snippet + customize snippet
 
-QUnit.module('snippet & cssEdit');
+        QUnit.module('snippet & cssEdit');
 
-QUnit.test('rendering with snippet panel', function (assert) {
-    var done = assert.async();
-    assert.expect(1);
+        QUnit.test('rendering with snippet panel', async function (assert) {
+            var done = assert.async();
+            assert.expect(1);
 
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px" options="{\'snippets\': \'web_editor.snippets\', \'cssEdit\': \'template.assets\'}"/>' +
-            '</form>',
-        res_id: 1,
-    }).then(function (form) {
-        testUtils.mock.intercept(form, "snippets_loaded", function () {
-            var doc = form.$('iframe').contents()[0];
-            var $content = $('#iframe_target', doc);
-            assert.strictEqual($content.find('#oe_snippets').length, 1,
-                "should display the snippet panel");
-            form.destroy();
-            done();
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px" options="{\'snippets\': \'web_editor.snippets\', \'cssEdit\': \'template.assets\'}"/>' +
+                    '</form>',
+                res_id: 1,
+            });
+            testUtils.mock.intercept(form, "snippets_loaded", function () {
+                var doc = form.$('iframe').contents()[0];
+                var $content = $('#iframe_target', doc);
+                assert.strictEqual($content.find('#oe_snippets').length, 1,
+                    "should display the snippet panel");
+                form.destroy();
+                done();
+            });
+            await testUtils.form.clickEdit(form);
         });
-        form.$buttons.find('.o_form_button_edit').click();
-    });
-});
 
-QUnit.test('drag&drop snippet', function (assert) {
-    var done = assert.async();
-    assert.expect(1);
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px" options="{\'snippets\': \'web_editor.snippets\', \'cssEdit\': \'template.assets_all_style\'}"/>' +
-            '</form>',
-        res_id: 1,
-    }).then(function (form) {
-        var defSnippets = $.Deferred();
-        testUtils.mock.intercept(form, "snippets_loaded", function () {
-            defSnippets.resolve();
-        });
-        form.$buttons.find('.o_form_button_edit').click();
+        QUnit.test('drag&drop snippet', async function (assert) {
+            assert.expect(1);
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px" options="{\'snippets\': \'web_editor.snippets\', \'cssEdit\': \'template.assets_all_style\'}"/>' +
+                    '</form>',
+                res_id: 1,
+            });
+            var defSnippets = testUtils.makeTestPromise();
+            testUtils.mock.intercept(form, "snippets_loaded", function () {
+                defSnippets.resolve();
+            });
+            await testUtils.form.clickEdit(form);
 
-        defSnippets.then(function () {
+            await defSnippets;
             var doc = form.$('iframe').contents()[0];
             var $content = $('#iframe_target', doc);
             var $editable = $content.find('.note-editable');
@@ -707,188 +670,179 @@ QUnit.test('drag&drop snippet', function (assert) {
                 "should drop the snippet");
 
             form.destroy();
-            done();
-        });
-    });
-});
-
-QUnit.test('drag&drop snippet options', function (assert) {
-    var done = assert.async();
-    assert.expect(6);
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px" options="{\'snippets\': \'web_editor.snippets\', \'cssEdit\': \'template.assets_all_style\'}"/>' +
-            '</form>',
-        res_id: 1,
-    }).then(function (form) {
-        var defSnippets = $.Deferred();
-        testUtils.mock.intercept(form, "snippets_loaded", function () {
-            defSnippets.resolve();
-        });
-
-        var defActivateSnippet;
-        testUtils.mock.intercept(form, "snippet_focused", function (e) {
-            defActivateSnippet.resolve(e.target);
         });
 
-        form.$buttons.find('.o_form_button_edit').click();
+        QUnit.test('drag&drop snippet options', async function (assert) {
+            var done = assert.async();
+            assert.expect(6);
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px" options="{\'snippets\': \'web_editor.snippets\', \'cssEdit\': \'template.assets_all_style\'}"/>' +
+                    '</form>',
+                res_id: 1,
+            });
+            var defSnippets = testUtils.makeTestPromise();
+            testUtils.mock.intercept(form, "snippets_loaded", function () {
+                defSnippets.resolve();
+            });
 
-        defSnippets.then(function () {
-            var doc = form.$('iframe').contents()[0];
-            var $content = $('#iframe_target', doc);
-            var $editable = $content.find('.note-editable');
+            var defActivateSnippet;
+            testUtils.mock.intercept(form, "snippet_focused", function (e) {
+                defActivateSnippet.resolve(e.target);
+            });
 
-            function dropSnippet() {
-                defActivateSnippet = $.Deferred();
-
-                var $hr = $content.find('.oe_snippet_thumbnail:first');
-                var from = $hr.offset();
-                var to = $editable.find('p').offset();
-
-                $hr.trigger($.Event("mousedown", {
-                    which: 1,
-                    pageX: from.left + 1,
-                    pageY: from.top + 1
-                }));
-                $hr.trigger($.Event("mousemove", {
-                    which: 1,
-                    pageX: to.left,
-                    pageY: to.top
-                }));
-                $hr.trigger($.Event("mouseup", {
-                    which: 1,
-                    pageX: to.left,
-                    pageY: to.top
-                }));
-            }
-
-            dropSnippet();
-            defActivateSnippet.then(function (snippet) {
-                assert.strictEqual($editable.data('wysiwyg').getValue().replace(/\s+/g, ' '),
-                    '<div class=\"s_hr pt32 pb32 built focus\"> <hr class=\"s_hr_1px s_hr_solid w-100 mx-auto\"> </div><p>toto toto toto</p><p>tata</p>',
-                    "should drop the snippet");
-
-                assert.strictEqual(snippet.$target.index(), 0,
-                    'should show the snippet editor for the first dropped block');
+            await testUtils.form.clickEdit(form);
+
+            defSnippets.then(function () {
+                var doc = form.$('iframe').contents()[0];
+                var $content = $('#iframe_target', doc);
+                var $editable = $content.find('.note-editable');
+
+                function dropSnippet() {
+                    defActivateSnippet = testUtils.makeTestPromise();
+
+                    var $hr = $content.find('.oe_snippet_thumbnail:first');
+                    var from = $hr.offset();
+                    var to = $editable.find('p').offset();
+
+                    $hr.trigger($.Event("mousedown", {
+                        which: 1,
+                        pageX: from.left + 1,
+                        pageY: from.top + 1
+                    }));
+                    $hr.trigger($.Event("mousemove", {
+                        which: 1,
+                        pageX: to.left,
+                        pageY: to.top
+                    }));
+                    $hr.trigger($.Event("mouseup", {
+                        which: 1,
+                        pageX: to.left,
+                        pageY: to.top
+                    }));
+                }
 
                 dropSnippet();
                 defActivateSnippet.then(function (snippet) {
                     assert.strictEqual($editable.data('wysiwyg').getValue().replace(/\s+/g, ' '),
-                        '<div class=\"s_hr pt32 pb32 built\"> <hr class=\"s_hr_1px s_hr_solid w-100 mx-auto\"> ' +
-                        '</div><div class=\"s_hr pt32 pb32 built focus\"> <hr class=\"s_hr_1px s_hr_solid w-100 mx-auto\"> ' +
-                        '</div><p>toto toto toto</p><p>tata</p>',
+                        '<div class=\"s_hr pt32 pb32 built focus\"> <hr class=\"s_hr_1px s_hr_solid w-100 mx-auto\"> </div><p>toto toto toto</p><p>tata</p>',
                         "should drop the snippet");
 
-                    assert.strictEqual(snippet.$target.index(), 1,
-                        'should show the snippet editor for the second dropped block');
-
-                    assert.strictEqual($('.oe_active .oe_overlay_options .btn:visible', doc).length, 4,
-                        'should show the snippet editor buttons');
+                    assert.strictEqual(snippet.$target.index(), 0,
+                        'should show the snippet editor for the first dropped block');
 
-                    defActivateSnippet = $.Deferred();
-                    $editable.find('hr:first').trigger('click');
+                    dropSnippet();
                     defActivateSnippet.then(function (snippet) {
+                        assert.strictEqual($editable.data('wysiwyg').getValue().replace(/\s+/g, ' '),
+                            '<div class=\"s_hr pt32 pb32 built\"> <hr class=\"s_hr_1px s_hr_solid w-100 mx-auto\"> ' +
+                            '</div><div class=\"s_hr pt32 pb32 built focus\"> <hr class=\"s_hr_1px s_hr_solid w-100 mx-auto\"> ' +
+                            '</div><p>toto toto toto</p><p>tata</p>',
+                            "should drop the snippet");
+
+                        assert.strictEqual(snippet.$target.index(), 1,
+                            'should show the snippet editor for the second dropped block');
+
+                        assert.strictEqual($('.oe_active .oe_overlay_options .btn:visible', doc).length, 4,
+                            'should show the snippet editor buttons');
 
-                        assert.strictEqual(snippet.$target.index(), 0,
-                            'should show the snippet editor for the first dropped block');
+                        defActivateSnippet = testUtils.makeTestPromise();
+                        $editable.find('hr:first').trigger('click');
+                        defActivateSnippet.then(function (snippet) {
 
-                        form.destroy();
-                        done();
+                            assert.strictEqual(snippet.$target.index(), 0,
+                                'should show the snippet editor for the first dropped block');
+
+                            form.destroy();
+                            done();
+                        });
                     });
                 });
             });
         });
-    });
-});
 
-QUnit.module('translation');
-
-QUnit.test('field html translatable', function (assert) {
-    assert.expect(3);
-
-    var multiLang = _t.database.multi_lang;
-    _t.database.multi_lang = true;
-
-    this.data['note.note'].fields.body.translate = true;
-
-    return testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form string="Partners">' +
-            '<field name="body" widget="html"/>' +
-            '</form>',
-        res_id: 1,
-        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 $.when();
-            }
-            return this._super.apply(this, arguments);
-        },
-    }).then(function (form) {
-        assert.strictEqual(form.$('.oe_form_field_html .o_field_translate').length, 0,
-            "should not have a translate button in readonly mode");
+        QUnit.module('translation');
+
+        QUnit.test('field html translatable', async function (assert) {
+            assert.expect(3);
+
+            var multiLang = _t.database.multi_lang;
+            _t.database.multi_lang = true;
+
+            this.data['note.note'].fields.body.translate = true;
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form string="Partners">' +
+                    '<field name="body" widget="html"/>' +
+                    '</form>',
+                res_id: 1,
+                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 this._super.apply(this, arguments);
+                },
+            });
+            assert.strictEqual(form.$('.oe_form_field_html .o_field_translate').length, 0,
+                "should not have a translate button in readonly mode");
 
-        form.$buttons.find('.o_form_button_edit').click();
-        var $button = form.$('.oe_form_field_html .note-toolbar .o_field_translate');
-        assert.strictEqual($button.length, 1, "should have a translate button");
-        $button.click();
+            await testUtils.form.clickEdit(form);
+            var $button = form.$('.oe_form_field_html .note-toolbar .o_field_translate');
+            assert.strictEqual($button.length, 1, "should have a translate button");
+            $button.click();
 
-        form.destroy();
-        _t.database.multi_lang = multiLang;
-    });
-});
+            form.destroy();
+            _t.database.multi_lang = multiLang;
+        });
 
-QUnit.test('field html translatable in iframe', function (assert) {
-    var done = assert.async();
-    assert.expect(2);
-
-    var multiLang = _t.database.multi_lang;
-    _t.database.multi_lang = true;
-
-    this.data['note.note'].fields.body.translate = true;
-
-    testUtils.createAsyncView({
-        View: FormView,
-        model: 'note.note',
-        data: this.data,
-        arch: '<form>' +
-            '<field name="body" widget="html" style="height: 100px" options="{\'cssEdit\': \'template.assets\'}"/>' +
-            '</form>',
-        res_id: 1,
-        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 $.when();
-            }
-            return this._super.apply(this, arguments);
-        },
-    }).then(function (form) {
-        var $field = form.$('.oe_form_field[name="body"]');
-        form.$buttons.find('.o_form_button_edit').click();
-        $field = form.$('.oe_form_field[name="body"]');
-        var $iframe = $field.find('iframe');
+        QUnit.test('field html translatable in iframe', async function (assert) {
+            assert.expect(2);
+
+            var multiLang = _t.database.multi_lang;
+            _t.database.multi_lang = true;
+
+            this.data['note.note'].fields.body.translate = true;
+
+            var form = await testUtils.createView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px" options="{\'cssEdit\': \'template.assets\'}"/>' +
+                    '</form>',
+                res_id: 1,
+                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 this._super.apply(this, arguments);
+                },
+            });
+            var $field = form.$('.oe_form_field[name="body"]');
+            await testUtils.form.clickEdit(form);
+            $field = form.$('.oe_form_field[name="body"]');
+            var $iframe = $field.find('iframe');
 
-        $iframe.data('load-def').then(function () {
+            await $iframe.data('loadDef');
+            await testUtils.nextTick();
             var doc = $iframe.contents()[0];
             var $content = $('#iframe_target', doc);
 
             var $button = $content.find('.note-toolbar .o_field_translate');
             assert.strictEqual($button.length, 1, "should have a translate button");
-            $button.click();
+            await testUtils.dom.click($button);
 
             form.destroy();
             _t.database.multi_lang = multiLang;
-            done();
         });
     });
 });
-
-});
-});
 });