Skip to content

Commit 2a55690

Browse files
pharret31pharret31
authored
QUnit tests: get rid of material testing where possible (#31459) (#31481)
1 parent 1059789 commit 2a55690

File tree

14 files changed

+291
-840
lines changed

14 files changed

+291
-840
lines changed

‎e2e/testcafe-devextreme/tests/navigation/accordion/common.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,21 @@ test('Accordion items render (T865742)', async (t) => {
3333
await createWidget('dxAccordion', { items, width: 500 }, '#accordion');
3434
return createWidget('dxAccordion', { items, rtlEnabled: true, width: 500 }, '#accordion2');
3535
});
36+
37+
test('Icon-only button should be rendered correctly (T851081)', async (t) => {
38+
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
39+
40+
const screenshotName = 'Accordion with icon-only button.png';
41+
42+
await testScreenshot(t, takeScreenshot, screenshotName, { element: '#container' });
43+
44+
await t
45+
.expect(compareResults.isValid())
46+
.ok(compareResults.errorMessages());
47+
}).before(async () => {
48+
await appendElementTo('#container', 'div', 'accordion');
49+
50+
const itemTitleTemplate = () => ($('<div>') as any).dxButton({ icon: 'coffee' });
51+
52+
await createWidget('dxAccordion', { dataSource: [{}], itemTitleTemplate }, '#accordion');
53+
});

‎e2e/testcafe-devextreme/tests/navigation/accordion/etalons/Accordion with icon-only button (fluent-blue-light).png‎

1.7 KB
Loading

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.material.tests.js‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
import $ from 'jquery';
2+
3+
import 'ui/form';
4+
5+
import 'material_blue_light.css!';
6+
import { FIELD_ITEM_CONTENT_WRAPPER_CLASS } from '__internal/ui/form/components/field_item';
7+
8+
QUnit.testStart(function() {
9+
const markup = '<div id="form"></div>';
10+
$('#qunit-fixture').html(markup);
11+
});
12+
13+
QUnit.module('dx-invalid class on dx-field-item-content-wrapper (T949285)', {
14+
beforeEach: function() {
15+
this.clock = sinon.useFakeTimers();
16+
},
17+
afterEach: function() {
18+
this.clock.restore();
19+
}
20+
}, function() {
21+
const invalidClass = 'dx-invalid';
22+
const formData = {
23+
field1: ''
24+
};
25+
26+
QUnit.testInActiveWindow('dx-invalid class is added for invalid focused editor (simple item)', function(assert) {
27+
const formInstance = $('#form').dxForm({
28+
formData,
29+
items: [{
30+
dataField: 'field1',
31+
helpText: 'help',
32+
isRequired: true
33+
}]
34+
}).dxForm('instance');
35+
36+
formInstance.validate();
37+
38+
const editorInstance = formInstance.getEditor('field1');
39+
const wrapper = $(editorInstance.element()).closest(`.${FIELD_ITEM_CONTENT_WRAPPER_CLASS}`);
40+
41+
assert.notOk(wrapper.hasClass(invalidClass));
42+
editorInstance.focus();
43+
this.clock.tick();
44+
assert.ok(wrapper.hasClass(invalidClass));
45+
});
46+
47+
QUnit.testInActiveWindow('dx-invalid class is added for invalid focused editor (template)', function(assert) {
48+
let editorElement;
49+
$('#form').dxForm({
50+
validationGroup: 'formGroup',
51+
formData,
52+
items: [
53+
{
54+
dataField: 'field1',
55+
helpText: 'help',
56+
template: function(data, itemElement) {
57+
editorElement = $('<div>').dxTextBox({
58+
value: ''
59+
}).dxValidator({
60+
validationGroup: 'formGroup',
61+
validationRules: [{
62+
type: 'required',
63+
message: 'LastName is required'
64+
}]
65+
}).appendTo(itemElement);
66+
}
67+
}
68+
]
69+
})
70+
.dxForm('instance')
71+
.validate();
72+
73+
const wrapper = $(editorElement).closest(`.${FIELD_ITEM_CONTENT_WRAPPER_CLASS}`);
74+
75+
assert.notOk(wrapper.hasClass(invalidClass));
76+
$(editorElement).dxTextBox('instance').focus();
77+
this.clock.tick();
78+
assert.ok(wrapper.hasClass(invalidClass));
79+
});
80+
81+
QUnit.testInActiveWindow('dx-invalid class is added for invalid focused editor (async template) (T1107088)', function(assert) {
82+
let $editorElement;
83+
const form = $('#form').dxForm({
84+
formData,
85+
items: [
86+
{
87+
dataField: 'field1',
88+
helpText: 'help',
89+
template: 'itemTemplate'
90+
}
91+
],
92+
templatesRenderAsynchronously: true,
93+
integrationOptions: {
94+
templates: {
95+
itemTemplate: {
96+
render({ container, onRendered }) {
97+
98+
$editorElement = $('<div>').appendTo(container);
99+
100+
setTimeout(() => {
101+
$editorElement.dxTextBox({}).dxValidator({
102+
validationRules: [{
103+
type: 'required',
104+
message: 'LastName is required'
105+
}]
106+
});
107+
108+
$editorElement.dxValidator('instance').validate();
109+
onRendered();
110+
});
111+
}
112+
}
113+
}
114+
},
115+
}).dxForm('instance');
116+
117+
const $itemContentWrapper = $editorElement.closest(`.${FIELD_ITEM_CONTENT_WRAPPER_CLASS}`);
118+
119+
assert.strictEqual($itemContentWrapper.hasClass(invalidClass), false);
120+
this.clock.tick();
121+
122+
form.validate();
123+
$editorElement.dxTextBox('instance').focus();
124+
assert.strictEqual($itemContentWrapper.hasClass(invalidClass), true);
125+
126+
$editorElement.dxTextBox('instance').blur();
127+
assert.strictEqual($itemContentWrapper.hasClass(invalidClass), false);
128+
});
129+
130+
QUnit.testInActiveWindow('dx-invalid class is added for invalid focused editor (async template) with dx-template-wrapper class (T1107088)', function(assert) {
131+
let $editorElement;
132+
const form = $('#form').dxForm({
133+
formData,
134+
items: [
135+
{
136+
dataField: 'field1',
137+
helpText: 'help',
138+
template: 'itemTemplate'
139+
}
140+
],
141+
templatesRenderAsynchronously: true,
142+
integrationOptions: {
143+
templates: {
144+
itemTemplate: {
145+
render({ container, onRendered }) {
146+
$editorElement = $('<div>')
147+
.addClass('dx-template-wrapper')
148+
.appendTo(container);
149+
150+
setTimeout(() => {
151+
$editorElement.dxTextBox({}).dxValidator({
152+
validationRules: [{
153+
type: 'required',
154+
message: 'LastName is required'
155+
}]
156+
});
157+
158+
$editorElement.dxValidator('instance').validate();
159+
onRendered();
160+
});
161+
}
162+
}
163+
}
164+
},
165+
}).dxForm('instance');
166+
167+
const $itemContentWrapper = $editorElement.closest(`.${FIELD_ITEM_CONTENT_WRAPPER_CLASS}`);
168+
169+
assert.strictEqual($itemContentWrapper.hasClass(invalidClass), false);
170+
this.clock.tick();
171+
172+
form.validate();
173+
$editorElement.dxTextBox('instance').focus();
174+
assert.strictEqual($itemContentWrapper.hasClass(invalidClass), true);
175+
176+
$editorElement.dxTextBox('instance').blur();
177+
assert.strictEqual($itemContentWrapper.hasClass(invalidClass), false);
178+
});
179+
180+
QUnit.testInActiveWindow('dx-invalid class is added for invalid editor if validationMessageMode: "always" (T1026923)', function(assert) {
181+
const formInstance = $('#form').dxForm({
182+
formData,
183+
customizeItem: function(item) {
184+
if(item.itemType === 'simple') {
185+
item.editorOptions = { ...item.editorOptions, validationMessageMode: 'always' };
186+
}
187+
},
188+
items: [{
189+
dataField: 'field1',
190+
helpText: 'help',
191+
isRequired: true
192+
}]
193+
}).dxForm('instance');
194+
195+
formInstance.validate();
196+
197+
const editorInstance = formInstance.getEditor('field1');
198+
const wrapper = $(editorInstance.element()).closest(`.${FIELD_ITEM_CONTENT_WRAPPER_CLASS}`);
199+
200+
assert.ok(wrapper.hasClass(invalidClass));
201+
});
202+
});

0 commit comments

Comments
 (0)