326 lines
13 KiB
JavaScript
326 lines
13 KiB
JavaScript
flectra.define('web_diagram.diagram_tests', function (require) {
|
|
"use strict";
|
|
|
|
var DiagramView = require('web_diagram.DiagramView');
|
|
|
|
var testUtils = require('web.test_utils');
|
|
|
|
var createAsyncView = testUtils.createAsyncView;
|
|
|
|
QUnit.module('Views', {
|
|
beforeEach: function () {
|
|
this.data = {
|
|
workflow: {
|
|
fields: {
|
|
name: {string: 'Name', type: "char"},
|
|
},
|
|
records: [
|
|
{id: 1, name: "a workflow"},
|
|
],
|
|
},
|
|
node_model: {
|
|
fields: {
|
|
name: {string: 'Name', type: 'char'},
|
|
workflow_id: {string: 'Workflow ID', type: 'many2one', relation: 'workflow'},
|
|
},
|
|
records: [
|
|
{id: 1, name: "A first node", workflow_id: 1},
|
|
{id: 2, name: "A second node", workflow_id: 1},
|
|
{id: 3, name: "A third node", workflow_id: 1},
|
|
],
|
|
},
|
|
transition_model: {
|
|
fields: {
|
|
name: {string: 'Name', type: 'char'},
|
|
source_id: {string: 'Source ID', type: 'many2one', relation: 'node_model'},
|
|
dest_id: {string: 'Destination ID', type: 'many2one', relation: 'node_model'},
|
|
},
|
|
records: [
|
|
{id: 1, name: 'a transition from 1 to 2', source_id: 1, dest_id: 2},
|
|
{id: 2, name: 'a transition from 2 to 3', source_id: 2, dest_id: 3},
|
|
{id: 3, name: 'a transition from 2 to 1', source_id: 2, dest_id: 1},
|
|
],
|
|
},
|
|
};
|
|
this.arch = '<diagram>' +
|
|
'<node object="node_model"/>' +
|
|
'<arrow ' +
|
|
'object="transition_model" ' +
|
|
'source="source_id" ' +
|
|
'destination="dest_id" ' +
|
|
'label="[\'name\']"' +
|
|
'/>' +
|
|
'<label string="A first label"/>' +
|
|
'<label string="A second label"/>' +
|
|
'</diagram>';
|
|
this.archs = {
|
|
'node_model,false,form': '<form string="Create a new node">' +
|
|
'<field name="name"/>' +
|
|
'<field name="workflow_id"/>' +
|
|
'</form>',
|
|
'transition_model,false,form': '<form string="Create an edge">' +
|
|
'<field name="name"/>' +
|
|
'<field name="source_id"/>' +
|
|
'<field name="dest_id"/>' +
|
|
'</form>'
|
|
};
|
|
this.mockRPC = function (route, args) {
|
|
if (route !== '/web_diagram/diagram/get_diagram_info') {
|
|
return this._super.apply(this, arguments);
|
|
}
|
|
var data = this.data;
|
|
var node_records = _.filter(data.node_model.records, {workflow_id: args.id});
|
|
var transition_records = _.filter(data.transition_model.records, function (record) {
|
|
return _.findWhere(node_records, {id: record.source_id});
|
|
});
|
|
return $.when({
|
|
parent_field: 'workflow_id',
|
|
display_name: _.findWhere(data.workflow.records, {id: args.id}).name,
|
|
nodes: _.map(node_records, function (record) {
|
|
return {
|
|
id: record.id,
|
|
name: record.name,
|
|
color: 'gray',
|
|
shape: record.id === 1 ? 'rectangle' : undefined,
|
|
};
|
|
}),
|
|
conn: _.map(transition_records, function (record) {
|
|
var source_node = _.findWhere(data.node_model.records, {id: record.source_id});
|
|
var dest_node = _.findWhere(data.node_model.records, {id: record.dest_id});
|
|
return {
|
|
source: source_node ? source_node.name: '',
|
|
destination: dest_node ? dest_node.name: '',
|
|
s_id: record.source_id,
|
|
d_id: record.dest_id,
|
|
signal: record.name,
|
|
};
|
|
}),
|
|
});
|
|
};
|
|
}
|
|
}, function () {
|
|
|
|
QUnit.module('DiagramView');
|
|
|
|
QUnit.test('simple diagram rendering', function (assert) {
|
|
assert.expect(6);
|
|
|
|
var done = assert.async();
|
|
|
|
createAsyncView({
|
|
View: DiagramView,
|
|
model: 'workflow',
|
|
data: this.data,
|
|
arch: this.arch,
|
|
res_id: 1,
|
|
mockRPC: this.mockRPC,
|
|
}).then(function (diagram) {
|
|
assert.strictEqual(diagram.$('.o_diagram svg').length, 1,
|
|
"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.strictEqual(diagram.$('.o_diagram ellipse').length, 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.strictEqual(diagram.$('.o_diagram_header span').length, 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();
|
|
});
|
|
});
|
|
|
|
QUnit.test('node creation', function (assert) {
|
|
assert.expect(4);
|
|
|
|
var done = assert.async();
|
|
|
|
createAsyncView({
|
|
View: DiagramView,
|
|
model: 'workflow',
|
|
data: this.data,
|
|
arch: this.arch,
|
|
archs: this.archs,
|
|
res_id: 1,
|
|
mockRPC: this.mockRPC,
|
|
}).then(function (diagram) {
|
|
assert.strictEqual(diagram.$('.o_diagram ellipse').length, 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");
|
|
|
|
diagram.$buttons.find('.o_diagram_new_button').click();
|
|
$('.modal .modal-body input:first').val('a new node').trigger('input');
|
|
$('.modal .modal-body input:last').val(1).trigger('input');
|
|
$('.modal .modal-footer button.btn-primary').click(); // save
|
|
|
|
assert.strictEqual(diagram.$('.o_diagram ellipse').length, 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();
|
|
});
|
|
});
|
|
|
|
QUnit.test('node edition', function (assert) {
|
|
assert.expect(2);
|
|
|
|
var done = assert.async();
|
|
|
|
createAsyncView({
|
|
View: DiagramView,
|
|
model: 'workflow',
|
|
data: this.data,
|
|
arch: this.arch,
|
|
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});
|
|
$('.modal .modal-body input:first').val('An edited node').trigger('input');
|
|
$('.modal .modal-footer button.btn-primary').click(); // save
|
|
|
|
assert.strictEqual(diagram.$('text').first().text(), 'An edited node',
|
|
"diagram first node should now have new name");
|
|
|
|
diagram.destroy();
|
|
done();
|
|
});
|
|
});
|
|
|
|
QUnit.test('node deletion', function (assert) {
|
|
assert.expect(2);
|
|
|
|
var done = assert.async();
|
|
|
|
createAsyncView({
|
|
View: DiagramView,
|
|
model: 'workflow',
|
|
data: this.data,
|
|
arch: this.arch,
|
|
res_id: 1,
|
|
mockRPC: this.mockRPC,
|
|
}).then(function (diagram) {
|
|
assert.strictEqual(diagram.$('.o_diagram ellipse').length, 2,
|
|
"diagram should contain 2 'ellipse' nodes (nodes 2 and 3)");
|
|
|
|
CuteNode.destruction_callback({id: 2});
|
|
$('.modal .modal-footer button.btn-primary').click(); // Confirm
|
|
|
|
assert.strictEqual(diagram.$('.o_diagram ellipse').length, 1,
|
|
"diagram should contain 1 'ellipse' nodes (node 2)");
|
|
|
|
diagram.destroy();
|
|
done();
|
|
});
|
|
});
|
|
|
|
QUnit.test('edge creation', function (assert) {
|
|
assert.expect(4);
|
|
|
|
var done = assert.async();
|
|
|
|
createAsyncView({
|
|
View: DiagramView,
|
|
model: 'workflow',
|
|
data: this.data,
|
|
arch: this.arch,
|
|
archs: this.archs,
|
|
res_id: 1,
|
|
mockRPC: this.mockRPC,
|
|
}).then(function (diagram) {
|
|
assert.strictEqual(diagram.$('.o_diagram path').length, 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};},
|
|
});
|
|
$('.modal .modal-body input:first').val('a transition from 1 to 3').trigger('input');
|
|
$('.modal .modal-footer button.btn-primary').click(); // Confirm
|
|
|
|
assert.strictEqual(diagram.$('.o_diagram path').length, 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();
|
|
});
|
|
});
|
|
|
|
QUnit.test('edge edition', function (assert) {
|
|
assert.expect(4);
|
|
|
|
var done = assert.async();
|
|
|
|
createAsyncView({
|
|
View: DiagramView,
|
|
model: 'workflow',
|
|
data: this.data,
|
|
arch: this.arch,
|
|
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});
|
|
$('.modal .modal-body input:first').val('An edited edge').trigger('input');
|
|
$('.modal .modal-footer button.btn-primary').click(); // save
|
|
|
|
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();
|
|
});
|
|
});
|
|
|
|
QUnit.test('edge deletion', function (assert) {
|
|
assert.expect(4);
|
|
|
|
var done = assert.async();
|
|
|
|
createAsyncView({
|
|
View: DiagramView,
|
|
model: 'workflow',
|
|
data: this.data,
|
|
arch: this.arch,
|
|
res_id: 1,
|
|
mockRPC: this.mockRPC,
|
|
}).then(function (diagram) {
|
|
assert.strictEqual(diagram.$('.o_diagram path').length, 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});
|
|
$('.modal .modal-footer button.btn-primary').click(); // Confirm
|
|
|
|
assert.strictEqual(diagram.$('.o_diagram path').length, 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();
|
|
});
|
|
});
|
|
});
|
|
});
|