[REF] web_diagram: 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>

4 files changed, 129 insertions, 146 deletions

diff --git a/addons/web_diagram/static/src/js/diagram_model.js b/addons/web_diagram/static/src/js/diagram_model.js
index 8ebd5724337..5d83de0d699 100644
--- a/addons/web_diagram/static/src/js/diagram_model.js
+++ b/addons/web_diagram/static/src/js/diagram_model.js
@@ -30,7 +30,7 @@ var DiagramModel = AbstractModel.extend({
     /**
      * @override
      * @param {Object} params
-     * @returns {Deferred}
+     * @returns {Promise}
      */
     load: function (params) {
         this.modelName = params.modelName;
@@ -58,7 +58,7 @@ var DiagramModel = AbstractModel.extend({
     /**
      * @private
      * @param {any} record
-     * @returns {Deferred}
+     * @returns {Promise}
      */
     _fetchDiagramInfo: function () {
         var self = this;
diff --git a/addons/web_diagram/static/src/js/diagram_renderer.js b/addons/web_diagram/static/src/js/diagram_renderer.js
index 7e41bf4817f..02539009790 100644
--- a/addons/web_diagram/static/src/js/diagram_renderer.js
+++ b/addons/web_diagram/static/src/js/diagram_renderer.js
@@ -14,7 +14,7 @@ var DiagramRenderer = AbstractRenderer.extend({
     template: 'DiagramView',
     /**
      * @override
-     * @returns {Deferred}
+     * @returns {Promise}
      */
     start: function () {
         var $header = this.$el.filter('.o_diagram_header');
@@ -32,7 +32,7 @@ var DiagramRenderer = AbstractRenderer.extend({
 
     /**
      * @override
-     * @returns {Deferred}
+     * @returns {Promise}
      */
     _render: function () {
         var self = this;
@@ -109,10 +109,10 @@ var DiagramRenderer = AbstractRenderer.extend({
         };
         CuteNode.destruction_callback = function (cutenode) {
             self.trigger_up('remove_node', {id: cutenode.id});
-            // return a rejected deferred to prevent the library from removing
+            // return a rejected promise to prevent the library from removing
             // the node directly,as the diagram will be redrawn once the node is
             // deleted
-            return $.Deferred().reject();
+            return Promise.reject();
         };
         CuteEdge.double_click_callback = function (cuteedge) {
             self.trigger_up('edit_edge', {id: cuteedge.id});
@@ -129,10 +129,10 @@ var DiagramRenderer = AbstractRenderer.extend({
         };
         CuteEdge.destruction_callback = function (cuteedge) {
             self.trigger_up('remove_edge', {id: cuteedge.id});
-            // return a rejected deferred to prevent the library from removing
+            // return a rejected promise to prevent the library from removing
             // the edge directly, as the diagram will be redrawn once the edge
             // is deleted
-            return $.Deferred().reject();
+            return Promise.reject();
         };
         return this._super.apply(this, arguments);
     },
diff --git a/addons/web_diagram/static/src/js/graph.js b/addons/web_diagram/static/src/js/graph.js
index 57eaff582ee..d7e54389340 100644
--- a/addons/web_diagram/static/src/js/graph.js
+++ b/addons/web_diagram/static/src/js/graph.js
@@ -87,11 +87,11 @@
             dummy_circle.animate({'r': close_button_radius }, 400, 'linear');
 
             if(entity_type == "node"){
-                $.when(GraphNode.destruction_callback(entity)).done(function () {
+                Promise.resolve(GraphNode.destruction_callback(entity)).then(function () {
                     entity.remove();
                 });
             }else if(entity_type == "edge"){
-                $.when(GraphEdge.destruction_callback(entity)).done(function () {
+                Promise.resolve(GraphEdge.destruction_callback(entity)).then(function () {
                     entity.remove();
                 });
             }
diff --git a/addons/web_diagram/static/tests/diagram_tests.js b/addons/web_diagram/static/tests/diagram_tests.js
index 564da7c0bc3..0e28b2c3101 100644
--- a/addons/web_diagram/static/tests/diagram_tests.js
+++ b/addons/web_diagram/static/tests/diagram_tests.js
@@ -5,7 +5,7 @@ var DiagramView = require('web_diagram.DiagramView');
 
 var testUtils = require('web.test_utils');
 
-var createAsyncView = testUtils.createAsyncView;
+var createView = testUtils.createView;
 
 QUnit.module('Views', {
     beforeEach: function () {
@@ -73,7 +73,7 @@ QUnit.module('Views', {
             var transition_records = _.filter(data.transition_model.records, function (record) {
                 return _.findWhere(node_records, {id: record.source_id});
             });
-            return $.when({
+            return Promise.resolve({
                 parent_field: 'workflow_id',
                 display_name: _.findWhere(data.workflow.records, {id: args.id}).name,
                 nodes: _.map(node_records, function (record) {
@@ -97,47 +97,41 @@ QUnit.module('Views', {
                 }),
             });
         };
-    }
+    },
 }, function () {
 
     QUnit.module('DiagramView');
 
-    QUnit.test('simple diagram rendering', function (assert) {
+    QUnit.test('simple diagram rendering', async function (assert) {
         assert.expect(6);
 
-        var done = assert.async();
-
-        createAsyncView({
+        var diagram = await createView({
             View: DiagramView,
             model: 'workflow',
             data: this.data,
             arch: this.arch,
             res_id: 1,
             mockRPC: this.mockRPC,
-        }).then(function (diagram) {
-            assert.containsOnce(diagram, '.o_diagram svg',
-                "draw the diagram inside the .o_diagram div");
-            assert.strictEqual(diagram.$('.o_diagram path:not(#raphael-marker-block)').length, 3,
-                "diagram should contain 3 transitions");
-            assert.containsN(diagram, '.o_diagram ellipse', 2,
-                "diagram should contain 2 'ellipse' nodes (nodes 2 and 3)");
-            assert.strictEqual(diagram.$('.o_diagram rect').length - 1, 1, // -1 because the lib always generates a rect tag that isn't a node
-                "diagram should contain 1 'rectangle' node (node 1)");
-            assert.containsN(diagram, '.o_diagram_header span', 2,
-                "diagram should contain 2 header rows");
-            assert.strictEqual(diagram.$('.o_diagram_header span:eq(0)').text(), 'A first label',
-                "diagram label is correctly inserted");
-            diagram.destroy();
-            done();
         });
+        assert.containsOnce(diagram, '.o_diagram svg',
+            "draw the diagram inside the .o_diagram div");
+        assert.strictEqual(diagram.$('.o_diagram path:not(#raphael-marker-block)').length, 3,
+            "diagram should contain 3 transitions");
+        assert.containsN(diagram, '.o_diagram ellipse', 2,
+            "diagram should contain 2 'ellipse' nodes (nodes 2 and 3)");
+        assert.strictEqual(diagram.$('.o_diagram rect').length - 1, 1, // -1 because the lib always generates a rect tag that isn't a node
+            "diagram should contain 1 'rectangle' node (node 1)");
+        assert.containsN(diagram, '.o_diagram_header span', 2,
+            "diagram should contain 2 header rows");
+        assert.strictEqual(diagram.$('.o_diagram_header span:eq(0)').text(), 'A first label',
+            "diagram label is correctly inserted");
+        diagram.destroy();
     });
 
-    QUnit.test('node creation', function (assert) {
+    QUnit.test('node creation', async function (assert) {
         assert.expect(4);
 
-        var done = assert.async();
-
-        createAsyncView({
+        var diagram = await createView({
             View: DiagramView,
             model: 'workflow',
             data: this.data,
@@ -145,33 +139,30 @@ QUnit.module('Views', {
             archs: this.archs,
             res_id: 1,
             mockRPC: this.mockRPC,
-        }).then(function (diagram) {
-            assert.containsN(diagram, '.o_diagram ellipse', 2,
-                "diagram should contain 2 'ellipse' nodes (nodes 2 and 3)");
-            assert.strictEqual(diagram.$('text:contains(a new node)').length, 0,
-                "diagram should only have the default nodes at start");
-
-            testUtils.dom.click(diagram.$buttons.find('.o_diagram_new_button'));
-            testUtils.fields.editInput($('.modal-body input:first'), 'a new node');
-            testUtils.fields.editInput($('.modal-body input:last'), 1);
-            testUtils.dom.click($('.modal-footer button.btn-primary'));
-
-            assert.containsN(diagram, '.o_diagram ellipse', 3,
-                "diagram should contain 3 'ellipse' nodes now (nodes 2, 3 and the new one)");
-            assert.strictEqual(diagram.$('text:contains(a new node)').length, 1,
-                "diagram should only have the default nodes at start");
-
-            diagram.destroy();
-            done();
         });
+
+        assert.containsN(diagram, '.o_diagram ellipse', 2,
+            "diagram should contain 2 'ellipse' nodes (nodes 2 and 3)");
+        assert.strictEqual(diagram.$('text:contains(a new node)').length, 0,
+            "diagram should only have the default nodes at start");
+
+        await testUtils.dom.click(diagram.$buttons.find('.o_diagram_new_button'));
+        await testUtils.fields.editInput($('.modal-body input:first'), 'a new node');
+        await testUtils.fields.editInput($('.modal-body input:last'), 1);
+        await testUtils.dom.click($('.modal-footer button.btn-primary'));
+
+        assert.containsN(diagram, '.o_diagram ellipse', 3,
+            "diagram should contain 3 'ellipse' nodes now (nodes 2, 3 and the new one)");
+        assert.strictEqual(diagram.$('text:contains(a new node)').length, 1,
+            "diagram should only have the default nodes at start");
+
+        diagram.destroy();
     });
 
-    QUnit.test('node edition', function (assert) {
+    QUnit.test('node edition', async function (assert) {
         assert.expect(2);
 
-        var done = assert.async();
-
-        createAsyncView({
+         var diagram = await createView({
             View: DiagramView,
             model: 'workflow',
             data: this.data,
@@ -179,55 +170,51 @@ QUnit.module('Views', {
             archs: this.archs,
             res_id: 1,
             mockRPC: this.mockRPC,
-        }).then(function (diagram) {
-            assert.strictEqual(diagram.$('.o_diagram text').first().text(), 'A first node',
-                "diagram first node should have default name at first");
+        });
 
-            CuteNode.double_click_callback({id: 1});
-            testUtils.fields.editInput($('.modal-body input:first'), 'An edited node');
-            testUtils.dom.click($('.modal-footer button.btn-primary'));
+        assert.strictEqual(diagram.$('.o_diagram text').first().text(), 'A first node',
+            "diagram first node should have default name at first");
 
-            assert.strictEqual(diagram.$('text').first().text(), 'An edited node',
-                "diagram first node should now have new name");
+        CuteNode.double_click_callback({id: 1});
+        await testUtils.nextTick();
+        await testUtils.fields.editInput($('.modal-body input:first'), 'An edited node');
+        await testUtils.dom.click($('.modal-footer button.btn-primary'));
 
-            diagram.destroy();
-            done();
-        });
+        assert.strictEqual(diagram.$('text').first().text(), 'An edited node',
+            "diagram first node should now have new name");
+
+        diagram.destroy();
     });
 
-    QUnit.test('node deletion', function (assert) {
+    QUnit.test('node deletion', async function (assert) {
         assert.expect(2);
 
-        var done = assert.async();
-
-        createAsyncView({
+         var diagram = await createView({
             View: DiagramView,
             model: 'workflow',
             data: this.data,
             arch: this.arch,
             res_id: 1,
             mockRPC: this.mockRPC,
-        }).then(function (diagram) {
-            assert.containsN(diagram, '.o_diagram ellipse', 2,
-                "diagram should contain 2 'ellipse' nodes (nodes 2 and 3)");
+        });
 
-            CuteNode.destruction_callback({id: 2});
-            testUtils.dom.click($('.modal-footer button.btn-primary'));
+        assert.containsN(diagram, '.o_diagram ellipse', 2,
+            "diagram should contain 2 'ellipse' nodes (nodes 2 and 3)");
 
-            assert.containsOnce(diagram, '.o_diagram ellipse',
-                "diagram should contain 1 'ellipse' nodes (node 2)");
+        CuteNode.destruction_callback({id: 2});
+        await testUtils.nextTick();
+        await testUtils.dom.click($('.modal-footer button.btn-primary'));
 
-            diagram.destroy();
-            done();
-        });
+        assert.containsOnce(diagram, '.o_diagram ellipse',
+            "diagram should contain 1 'ellipse' nodes (node 2)");
+
+        diagram.destroy();
     });
 
-    QUnit.test('edge creation', function (assert) {
+    QUnit.test('edge creation', async function (assert) {
         assert.expect(4);
 
-        var done = assert.async();
-
-        createAsyncView({
+         var diagram = await createView({
             View: DiagramView,
             model: 'workflow',
             data: this.data,
@@ -235,35 +222,33 @@ QUnit.module('Views', {
             archs: this.archs,
             res_id: 1,
             mockRPC: this.mockRPC,
-        }).then(function (diagram) {
-            assert.containsN(diagram, '.o_diagram path', 4,
-                "diagram should contain 4 'path' nodes (#raphael-marker-block, and transitions 1, 2 and 3)");
-            assert.strictEqual(diagram.$('text:contains(a transition from 1 to 3)').length, 0,
-                "diagram should not have a transition from 1 to 3 at start");
-
-            CuteEdge.new_edge_callback({
-                get_start: function () {return {id: 1};},
-                get_end: function () {return {id: 3};},
-            });
-            testUtils.fields.editInput($('.modal-body input:first'), 'a transition from 1 to 3');
-            testUtils.dom.click($('.modal-footer button.btn-primary'));
+        });
 
-            assert.containsN(diagram, '.o_diagram path', 5,
-                "diagram should contain 4 'path' nodes (#raphael-marker-block, transitions 1, 2, 3, and the new one)");
-            assert.strictEqual(diagram.$('text:contains(a transition from 1 to 3)').length, 1,
-                "diagram should now have a transition from 1 to 3");
+        assert.containsN(diagram, '.o_diagram path', 4,
+            "diagram should contain 4 'path' nodes (#raphael-marker-block, and transitions 1, 2 and 3)");
+        assert.strictEqual(diagram.$('text:contains(a transition from 1 to 3)').length, 0,
+            "diagram should not have a transition from 1 to 3 at start");
 
-            diagram.destroy();
-            done();
+        CuteEdge.new_edge_callback({
+            get_start: function () {return {id: 1};},
+            get_end: function () {return {id: 3};},
         });
+        await testUtils.nextTick();
+        await testUtils.fields.editInput($('.modal-body input:first'), 'a transition from 1 to 3');
+        await testUtils.dom.click($('.modal-footer button.btn-primary'));
+
+        assert.containsN(diagram, '.o_diagram path', 5,
+            "diagram should contain 4 'path' nodes (#raphael-marker-block, transitions 1, 2, 3, and the new one)");
+        assert.strictEqual(diagram.$('text:contains(a transition from 1 to 3)').length, 1,
+            "diagram should now have a transition from 1 to 3");
+
+        diagram.destroy();
     });
 
-    QUnit.test('edge edition', function (assert) {
+    QUnit.test('edge edition', async function (assert) {
         assert.expect(4);
 
-        var done = assert.async();
-
-        createAsyncView({
+         var diagram = await createView({
             View: DiagramView,
             model: 'workflow',
             data: this.data,
@@ -271,55 +256,53 @@ QUnit.module('Views', {
             archs: this.archs,
             res_id: 1,
             mockRPC: this.mockRPC,
-        }).then(function (diagram) {
-            assert.strictEqual(diagram.$('text:contains(a transition from 1 to 2)').length, 1,
-                "diagram edge should have default name at start");
-            assert.strictEqual(diagram.$('text:contains(An edited edge)').length, 0,
-                "diagram should only have the default edges at start");
-
-            CuteEdge.double_click_callback({id: 1});
-            testUtils.fields.editInput($('.modal-body input:first'), 'An edited edge');
-            testUtils.dom.click($('.modal-footer button.btn-primary'));
-
-            assert.strictEqual(diagram.$('text:contains(a transition from 1 to 2)').length, 0,
-                "diagram edge should not have default name anymore");
-            assert.strictEqual(diagram.$('text:contains(An edited edge)').length, 1,
-                "diagram should now have the new edge");
-
-            diagram.destroy();
-            done();
         });
+
+        assert.strictEqual(diagram.$('text:contains(a transition from 1 to 2)').length, 1,
+            "diagram edge should have default name at start");
+        assert.strictEqual(diagram.$('text:contains(An edited edge)').length, 0,
+            "diagram should only have the default edges at start");
+
+        CuteEdge.double_click_callback({id: 1});
+        await testUtils.nextTick();
+        await testUtils.fields.editInput($('.modal-body input:first'), 'An edited edge');
+        await testUtils.dom.click($('.modal-footer button.btn-primary'));
+
+        assert.strictEqual(diagram.$('text:contains(a transition from 1 to 2)').length, 0,
+            "diagram edge should not have default name anymore");
+        assert.strictEqual(diagram.$('text:contains(An edited edge)').length, 1,
+            "diagram should now have the new edge");
+
+        diagram.destroy();
     });
 
-    QUnit.test('edge deletion', function (assert) {
+    QUnit.test('edge deletion', async function (assert) {
         assert.expect(4);
 
-        var done = assert.async();
-
-        createAsyncView({
+         var diagram = await createView({
             View: DiagramView,
             model: 'workflow',
             data: this.data,
             arch: this.arch,
             res_id: 1,
             mockRPC: this.mockRPC,
-        }).then(function (diagram) {
-            assert.containsN(diagram, '.o_diagram path', 4,
-                "diagram should contain 4 'path' nodes (#raphael-marker-block, and transitions 1, 2 and 3)");
-            assert.strictEqual(diagram.$('text:contains(a transition from 2 to 1)').length, 1,
-                "diagram edge should have default name at start");
-
-            CuteEdge.destruction_callback({id: 3});
-            testUtils.dom.click($('.modal-footer button.btn-primary'));
-
-            assert.containsN(diagram, '.o_diagram path', 3,
-                "diagram should contain 3 'path' nodes (#raphael-marker-block, and transitions 1 and 2)");
-            assert.strictEqual(diagram.$('text:contains(a transition from 2 to 1)').length, 0,
-                "diagram edge label should have been deleted");
-
-            diagram.destroy();
-            done();
         });
+
+        assert.containsN(diagram, '.o_diagram path', 4,
+            "diagram should contain 4 'path' nodes (#raphael-marker-block, and transitions 1, 2 and 3)");
+        assert.strictEqual(diagram.$('text:contains(a transition from 2 to 1)').length, 1,
+            "diagram edge should have default name at start");
+
+        CuteEdge.destruction_callback({id: 3});
+        await testUtils.nextTick();
+        await testUtils.dom.click($('.modal-footer button.btn-primary'));
+
+        assert.containsN(diagram, '.o_diagram path', 3,
+            "diagram should contain 3 'path' nodes (#raphael-marker-block, and transitions 1 and 2)");
+        assert.strictEqual(diagram.$('text:contains(a transition from 2 to 1)').length, 0,
+            "diagram edge label should have been deleted");
+
+        diagram.destroy();
     });
 });
 });