[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>
This commit is contained in:
Vincent Schippefilt
committed by
Aaron Bohy
Aaron Bohy
co-authored by
Aaron Bohy
Christophe Matthieu
Mathieu Duckerts-Antoine
David Monjoie
Martin Geubelle
svs-odoo
Aaron Bohy
Christophe Matthieu
Mathieu Duckerts-Antoine
David Monjoie
Martin Geubelle
svs-odoo
parent
ab56e637b7
commit
a3dfd04ad6
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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.$('text').first().text(), 'An edited node',
|
||||
"diagram first node should now have new name");
|
||||
|
||||
diagram.destroy();
|
||||
done();
|
||||
});
|
||||
|
||||
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});
|
||||
await testUtils.nextTick();
|
||||
await testUtils.fields.editInput($('.modal-body input:first'), 'An edited node');
|
||||
await testUtils.dom.click($('.modal-footer button.btn-primary'));
|
||||
|
||||
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.containsOnce(diagram, '.o_diagram ellipse',
|
||||
"diagram should contain 1 'ellipse' nodes (node 2)");
|
||||
|
||||
diagram.destroy();
|
||||
done();
|
||||
});
|
||||
|
||||
assert.containsN(diagram, '.o_diagram ellipse', 2,
|
||||
"diagram should contain 2 'ellipse' nodes (nodes 2 and 3)");
|
||||
|
||||
CuteNode.destruction_callback({id: 2});
|
||||
await testUtils.nextTick();
|
||||
await testUtils.dom.click($('.modal-footer button.btn-primary'));
|
||||
|
||||
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");
|
||||
|
||||
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 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};},
|
||||
});
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user