Skip to content

Commit d7d76d1

Browse files
S0raxalexslavr
S0rax
and
alexslavr
authored
Gantt: Added milestone tests (T1289594) (DevExpress#29859)
Co-authored-by: alexlavrov <[email protected]>
1 parent c9c578e commit d7d76d1

File tree

5 files changed

+217
-92
lines changed

5 files changed

+217
-92
lines changed

‎packages/devextreme/testing/helpers/ganttHelpers.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ export const Consts = {
66
TREELIST_FILTER_ROW_SELECTOR: '.dx-treelist-filter-row',
77
GANTT_VIEW_SELECTOR: '.dx-gantt-view',
88
GANTT_VIEW_ROW_SELECTOR: '.dx-gantt-altRow',
9+
MILESTONE_WRAPPER_SELECTOR: '.dx-gantt-milestoneWrapper',
910
TASK_WRAPPER_SELECTOR: '.dx-gantt-taskWrapper',
1011
TASK_SELECTED_SELECTOR: '.dx-gantt-selectedTask',
1112
TASK_RESOURCES_SELECTOR: '.dx-gantt-taskRes',
1213
TASK_ARROW_SELECTOR: '.dx-gantt-arrow',
14+
TASK_TITLE_SELECTOR: 'dx-gantt-taskTitle',
1315
TASK_TITLE_IN_SELECTOR: '.dx-gantt-titleIn',
1416
TASK_TITLE_OUT_SELECTOR: '.dx-gantt-titleOut',
1517
TREELIST_EXPANDED_SELECTOR: '.dx-treelist-expanded',
@@ -30,9 +32,9 @@ export const Consts = {
3032
PARENT_TASK_SELECTOR: '.dx-gantt-parent',
3133
TOOLBAR_SEPARATOR_SELECTOR: '.dx-gantt-toolbar-separator',
3234
TOOLTIP_SELECTOR: '.dx-gantt-task-edit-tooltip',
35+
MILESTONE_SELECTOR: 'dx-gantt-milestone',
3336
TASK_SELECTOR: '.dx-gantt-task',
3437
TASK_EDIT_WRAPPER: '.dx-gantt-task-edit-wrapper',
35-
3638
};
3739

3840
export const data = {

‎packages/devextreme/testing/tests/DevExpress.ui.widgets/gantt.tests.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import './ganttParts/undo.tests.js';
3232
import './ganttParts/treeListExpanding.tests.js';
3333
import './ganttParts/scrolling.tests.js';
3434
import './ganttParts/selection.tests.js';
35+
import './ganttParts/milestone.tests.js';
3536

3637
QUnit.testStart(() => {
3738
const markup = '<div id="gantt"></div>';

‎packages/devextreme/testing/tests/DevExpress.ui.widgets/ganttParts/milestone.tests.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import $ from 'jquery';
2+
import 'ui/gantt';
3+
import { Consts } from '../../../helpers/ganttHelpers.js';
4+
import devices from '__internal/core/m_devices';
5+
const { test } = QUnit;
6+
7+
const moduleConfig = {
8+
_customTasks: [
9+
{ 'id': 1, 'parentId': 0, 'title': 'Software Development', 'start': new Date('2019-02-21'), 'end': new Date('2019-03-26'), 'progress': 0 },
10+
{ 'id': 2, 'parentId': 1, 'title': 'Milestone', 'start': new Date('2019-02-21'), 'end': new Date('2019-02-21'), 'progress': 0 },
11+
],
12+
beforeEach: function() {
13+
this.createInstance = (settings) => {
14+
this.instance = this.$element.dxGantt({
15+
tasks: { dataSource: this._customTasks },
16+
taskTitlePosition: 'outside',
17+
...settings
18+
}).dxGantt('instance');
19+
};
20+
21+
this.$element = $('#gantt');
22+
this.clock = sinon.useFakeTimers();
23+
},
24+
afterEach: function() {
25+
this.clock.restore();
26+
}
27+
};
28+
29+
QUnit.module('Milestone', moduleConfig, () => {
30+
test('default', function(assert) {
31+
this.createInstance();
32+
this.clock.tick(10);
33+
const milestoneWrapper = this.$element.find(Consts.MILESTONE_WRAPPER_SELECTOR);
34+
const children = milestoneWrapper.children();
35+
assert.equal(children.length, 2, 'milestone wrapper has 2 children');
36+
assert.true(children.eq(0).hasClass(Consts.TASK_TITLE_SELECTOR), 'first child is task title');
37+
assert.true(children.eq(1).hasClass(Consts.MILESTONE_SELECTOR), 'second child is milestone');
38+
});
39+
40+
test('custom template, default html', function(assert) {
41+
const customHtml = $(document.createElement('div'));
42+
const customTaskFunction = (item, container) => {
43+
if(item.isMilestone) {
44+
const title = $(item.taskHTML[0].cloneNode(true));
45+
const milestone = $(item.taskHTML[1].cloneNode(true));
46+
assert.true(title.hasClass(Consts.TASK_TITLE_SELECTOR), 'taskHTML has task title');
47+
assert.true(milestone.hasClass(Consts.MILESTONE_SELECTOR), 'taskHTML has milestone');
48+
assert.equal(item.taskHTML.length, 2, 'taskHTML has 2 children');
49+
50+
title.appendTo(customHtml);
51+
milestone.appendTo(customHtml);
52+
}
53+
$(item.taskHTML).appendTo(container);
54+
};
55+
const options = { taskContentTemplate: customTaskFunction };
56+
this.createInstance(options);
57+
this.clock.tick(10);
58+
const milestoneWrapper = this.$element.find(Consts.MILESTONE_WRAPPER_SELECTOR);
59+
assert.equal(milestoneWrapper.length, 1, 'milestone wrapper exists');
60+
assert.equal(milestoneWrapper.children().length, 1, 'milestone wrapper has 1 child');
61+
assert.equal(milestoneWrapper.html(), customHtml[0].outerHTML, 'milestone html matches custom html');
62+
});
63+
64+
test('custom template, custom html', function(assert) {
65+
const customHtml = $(document.createElement('div')).text('milestone');
66+
const customTaskFunction = (item, container) => {
67+
if(item.isMilestone) {
68+
return customHtml.text();
69+
}
70+
};
71+
const options = { taskContentTemplate: customTaskFunction };
72+
this.createInstance(options);
73+
this.clock.tick(10);
74+
const milestoneWrapper = this.$element.find(Consts.MILESTONE_WRAPPER_SELECTOR);
75+
assert.equal(milestoneWrapper.length, 1, 'milestone wrapper exists');
76+
assert.equal(milestoneWrapper.html(), customHtml[0].outerHTML, 'milestone html matches custom html');
77+
});
78+
79+
test('custom template, custom html + task html', function(assert) {
80+
const customHtml = $(document.createElement('div')).text('milestone');
81+
const customTaskFunction = (item, container) => {
82+
if(item.isMilestone) {
83+
$(item.taskHTML[1].cloneNode(true)).appendTo(customHtml);
84+
return customHtml.html();
85+
}
86+
};
87+
const options = { taskContentTemplate: customTaskFunction };
88+
this.createInstance(options);
89+
this.clock.tick(10);
90+
const milestoneWrapper = this.$element.find(Consts.MILESTONE_WRAPPER_SELECTOR);
91+
assert.equal(milestoneWrapper.length, 1, 'milestone wrapper exists');
92+
assert.equal(milestoneWrapper.html(), customHtml[0].outerHTML, 'milestone html matches custom html');
93+
});
94+
95+
test('task title inside', function(assert) {
96+
const options = {
97+
taskTitlePosition: 'inside',
98+
taskContentTemplate: (item, container) => $(item.taskHTML).appendTo(container)
99+
};
100+
this.createInstance(options);
101+
this.clock.tick(10);
102+
const milestoneWrapper = this.$element.find(Consts.MILESTONE_WRAPPER_SELECTOR);
103+
assert.equal(milestoneWrapper.length, 1, 'milestone wrapper exists');
104+
const children = milestoneWrapper.children().eq(0).children();
105+
assert.equal(children.length, 1, 'milestone has one child');
106+
assert.true(children.eq(0).hasClass(Consts.MILESTONE_SELECTOR), 'child is milestone');
107+
assert.false(children.eq(0).hasClass(Consts.TASK_TITLE_SELECTOR), 'child is not task title');
108+
});
109+
110+
QUnit.skipInShadowDomMode('position is correctly calculated', function(assert) {
111+
const { platform } = devices.real();
112+
if(['android', 'ios'].includes(platform)) {
113+
assert.expect(0);
114+
return;
115+
}
116+
const customTasks = [
117+
{ 'id': 1, 'parentId': 0, 'title': 'Software Development', 'start': new Date('2019-02-21'), 'end': new Date('2019-03-26'), 'progress': 0 },
118+
{ 'id': 2, 'parentId': 1, 'title': 'Milestone 1', 'start': new Date('2019-02-21'), 'end': new Date('2019-02-21'), 'progress': 0 },
119+
{ 'id': 3, 'parentId': 2, 'title': 'Milestone 2', 'start': new Date('2019-02-21'), 'end': new Date('2019-02-21'), 'progress': 0 },
120+
];
121+
const customTaskFunction = (item, container) => {
122+
if(item.isMilestone) {
123+
const style = item.taskData.id === 2 ? 'width: 10px; height: 10px;' : 'width: 100px; height: 50px;';
124+
return $(document.createElement('div')).attr('style', style);
125+
}
126+
};
127+
const options = {
128+
tasks: { dataSource: customTasks },
129+
taskContentTemplate: customTaskFunction
130+
};
131+
this.createInstance(options);
132+
this.clock.tick(10);
133+
const milestoneWrapper = this.$element.find(Consts.MILESTONE_WRAPPER_SELECTOR);
134+
const firstLeft = parseFloat(milestoneWrapper.eq(0).css('left'));
135+
const secondLeft = parseFloat(milestoneWrapper.eq(1).css('left'));
136+
assert.equal(firstLeft - secondLeft, 45, 'left position is different');
137+
});
138+
});

0 commit comments

Comments
 (0)