Skip to content

Commit 768ff90

Browse files
marker-daoZedwagmarker dao ®
authored
QUnit tests: ensure compatibility with Fluent and drop Generic theme testing (Editors) (#32071)
Co-authored-by: Alexander Kozlovskiy <[email protected]> Co-authored-by: marker dao ® <[email protected]>
1 parent 69d1795 commit 768ff90

File tree

13 files changed

+110
-96
lines changed

13 files changed

+110
-96
lines changed

‎packages/devextreme/testing/tests/DevExpress.knockout/fieldset_bundled.generic.tests.js‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

packages/devextreme/testing/tests/DevExpress.knockout/fieldsetParts/shared.js renamed to packages/devextreme/testing/tests/DevExpress.knockout/fieldset_bundled.tests.js

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ const ko = require('knockout');
33
const browser = require('core/utils/browser');
44
const devices = require('core/devices');
55

6-
require('../../../helpers/executeAsyncMock.js');
6+
require('fluent_blue_light.css!');
7+
require('../../helpers/executeAsyncMock.js');
78
require('integration/knockout');
89
require('bundles/modules/parts/widgets-web');
910

@@ -146,10 +147,10 @@ const checkThatTestingIsPossible = function() {
146147
return true;
147148
};
148149

149-
const defaultOptions = {
150+
const options = {
150151
numberBoxAlign: 'right',
151152
testVerticalOffset: true,
152-
testSwitchBaseline: true,
153+
testSwitchBaseline: false,
153154
testDateBox: true
154155
};
155156

@@ -180,7 +181,7 @@ const testBaselineOffset = function($labelContainer, $valueContainer) {
180181
$imgForInput = $('<img/>').height(1).width(1).appendTo($valueContainer);
181182
$imgForLabel.closest('.dx-field-label').css('whiteSpace', 'nowrap');
182183
$imgForInput.closest('.dx-field-value').css('whiteSpace', 'nowrap');
183-
QUnit.assert.roughEqual($imgForLabel.offset().top, $imgForInput.offset().top, 0.99);
184+
QUnit.assert.roughEqual($imgForLabel.offset().top, $imgForInput.offset().top, 1.99);
184185
} finally {
185186
$imgForLabel.remove();
186187
$imgForInput.remove();
@@ -199,16 +200,13 @@ const testVerticalAlign = function($parent, inputSelector, isContainer, testVert
199200
testBaselineOffset($label, $valueContainer);
200201
};
201202

202-
module.exports = function(themeName, options) {
203+
const testFieldsetsOnPlatform = function() {
203204
if(!checkThatTestingIsPossible()) {
204205
return;
205206
}
206207

207-
options = options || {};
208-
options = $.extend({}, defaultOptions, options);
209-
210-
const runTestModule = function(themeName) {
211-
moduleWithoutCsp(themeName, {
208+
const runTestModule = function() {
209+
moduleWithoutCsp('fluent.blue.light', {
212210
beforeEach: function() {
213211
DevExpress.testing.executeAsyncMock.setup();
214212
$('#qunit-fixture').html(fieldsetFixtureTemplate);
@@ -222,11 +220,15 @@ module.exports = function(themeName, options) {
222220
});
223221

224222
QUnit.test('Horizontal align for same widgets on and in field-value', function(assert) {
225-
const offsetRightForSwitchOnField = getFullOffsetRight($('#switchOnField ' + VALUE + ' .dx-switch-wrapper'));
226-
const offsetRightForSwitchInField = getFullOffsetRight($('#switchInField ' + VALUE + ' .dx-switch-wrapper'));
223+
const offsetRightForSwitchOnField = getFullOffsetRight($('#switchOnField ' + VALUE));
224+
const offsetRightForSwitchOnFieldContainer = getFullOffsetRight($('#switchOnField ' + VALUE).parent());
225+
const offsetBetweenOnFieldAndInFieldSwitch = offsetRightForSwitchOnFieldContainer - offsetRightForSwitchOnField;
226+
const offsetRightForSwitchInField = getFullOffsetRight($('#switchInField ' + VALUE));
227227

228-
const offsetRightForCheckboxOnField = getFullOffsetRight($('#checkboxOnField ' + VALUE + ' .dx-checkbox-icon'));
229-
const offsetRightForCheckboxInField = getFullOffsetRight($('#checkboxInField ' + VALUE + ' .dx-checkbox-icon'));
228+
const offsetRightForCheckboxOnField = getFullOffsetRight($('#checkboxOnField ' + VALUE));
229+
const offsetRightForCheckboxOnFieldContainer = getFullOffsetRight($('#checkboxOnField ' + VALUE).parent());
230+
const offsetBetweenOnFieldAndInFieldCheckbox = offsetRightForCheckboxOnFieldContainer - offsetRightForCheckboxOnField;
231+
const offsetRightForCheckboxInField = getFullOffsetRight($('#checkboxInField ' + VALUE));
230232

231233
const offsetLeftForSliderOnField = getFullOffsetLeft($('#sliderOnField ' + VALUE + ' .dx-slider-wrapper'));
232234
const offsetLeftForSliderInField = getFullOffsetLeft($('#sliderInField ' + VALUE + ' .dx-slider-wrapper'));
@@ -255,8 +257,8 @@ module.exports = function(themeName, options) {
255257
const offsetLeftForNumberBoxOnField = getFullOffsetLeft($('#numberboxOnField ' + VALUE + ' input'));
256258
const offsetLeftForNumberBoxInField = getFullOffsetLeft($('#numberboxInField ' + VALUE + ' input'));
257259

258-
assert.equal(offsetRightForSwitchOnField, offsetRightForSwitchInField, 'Horizontal align for switches');
259-
assert.equal(offsetRightForCheckboxOnField, offsetRightForCheckboxInField, 'Horizontal align for checkboxes');
260+
assert.equal(offsetRightForSwitchOnField + offsetBetweenOnFieldAndInFieldSwitch, offsetRightForSwitchInField, 'Horizontal align for switches');
261+
assert.equal(offsetRightForCheckboxOnField + offsetBetweenOnFieldAndInFieldCheckbox, offsetRightForCheckboxInField, 'Horizontal align for checkboxes');
260262
assert.equal(offsetLeftForSliderOnField, offsetLeftForSliderInField, 'Horizontal align for sliders');
261263
assert.equal(offsetLeftForTextBoxOnField, offsetLeftForTextBoxInField, 'Horizontal align for textboxes');
262264
assert.equal(offsetLeftForAutocompleteOnField, offsetLeftForAutocompleteInField, 'Horizontal align for autocompletes');
@@ -288,7 +290,8 @@ module.exports = function(themeName, options) {
288290

289291
const offsetLeftForSimpleOnField = getFullOffsetLeft($('#simpleTextOnField ' + VALUE));
290292

291-
const paddingTextAreaDifference = 0;
293+
const paddingTextAreaDifference = -2;
294+
const paddingLookupDifference = -1;
292295

293296
assert.equal(offsetLeftForTextBoxOnField, offsetLeftForAutocompleteOnField, 'Horizontal align for textbox and autocomplete');
294297

@@ -300,7 +303,7 @@ module.exports = function(themeName, options) {
300303

301304
assert.equal(offsetLeftForDateBoxOnField, offsetLeftForTextAreaOnField + paddingTextAreaDifference, 'Horizontal align for datebox and textarea');
302305
assert.equal(offsetLeftForTextAreaOnField + paddingTextAreaDifference, offsetLeftForLookupOnField, 'Horizontal align for textarea and lookup');
303-
assert.equal(offsetLeftForLookupOnField, offsetLeftForSimpleOnField, 'Horizontal align for lookup and simpletext');
306+
assert.equal(offsetLeftForLookupOnField + paddingLookupDifference, offsetLeftForSimpleOnField, 'Horizontal align for lookup and simpletext');
304307
});
305308

306309
QUnit.test('Equal width for same widgets on and in field-value', function(assert) {
@@ -396,7 +399,9 @@ module.exports = function(themeName, options) {
396399

397400
QUnit.test('dxTextarea on Field', function(assert) {
398401
const $parent = $('#textareaOnField');
399-
const $label = $parent.find(LABEL);
402+
const $label = $parent.find(LABEL)
403+
.css('align-self', 'flex-start')
404+
.css('padding-top', '8px');
400405
const $valueInput = $parent.find(VALUE + ' textarea');
401406

402407
if(options.verticalOffsetTest) {
@@ -419,7 +424,9 @@ module.exports = function(themeName, options) {
419424

420425
QUnit.test('dxTextarea in Field', function(assert) {
421426
const $parent = $('#textareaInField');
422-
const $label = $parent.find(LABEL);
427+
const $label = $parent.find(LABEL)
428+
.css('align-self', 'flex-start')
429+
.css('padding-top', '8px');
423430
const $valueInput = $parent.find(VALUE + ' textarea');
424431

425432
if(options.verticalOffsetTest) {
@@ -443,3 +450,5 @@ module.exports = function(themeName, options) {
443450

444451
runTestModule();
445452
};
453+
454+
testFieldsetsOnPlatform();

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/slider.tests.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import fx from 'common/core/animation/fx';
22
import positionUtils from 'common/core/animation/position';
3-
import 'generic_light.css!';
3+
import 'fluent_blue_light.css!';
44
import config from 'core/config';
55
import resizeCallbacks from 'core/utils/resize_callbacks';
66
import { triggerShownEvent } from 'common/core/events/visibility_change';
@@ -15,7 +15,7 @@ import { normalizeKeyName } from 'common/core/events/utils/index';
1515

1616

1717
const { module, testStart, test, testInActiveWindow } = QUnit;
18-
const SLIDER_PADDING = 7;
18+
const SLIDER_PADDING = 10;
1919

2020
testStart(() => {
2121
const markup = `
@@ -1514,7 +1514,7 @@ module('tooltip integration', {
15141514
const tooltipRightBorder = $tooltipContent.offset().left + $tooltipContent.outerWidth() - this.$slider.offset().left;
15151515
const boundaryOffset = sliderWidth - tooltipRightBorder;
15161516

1517-
assert.roughEqual(boundaryOffset, 2, 0.3, 'tooltip content should have correct boundary offset');
1517+
assert.roughEqual(boundaryOffset, 2, 0.5, 'tooltip content should have correct boundary offset');
15181518
});
15191519

15201520
test('arrow should be centered after dimension was changed', function(assert) {

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textArea.tests.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import devices from '__internal/core/m_devices';
66
import resizeCallbacks from 'core/utils/resize_callbacks';
77
import { parseHeight } from 'core/utils/size.js';
88

9-
import 'generic_light.css!';
9+
import 'fluent_blue_light.css!';
1010
import 'ui/text_area';
1111
import 'ui/scroll_view/ui.scrollable';
1212

@@ -41,6 +41,7 @@ const INPUT_CLASS = 'dx-texteditor-input';
4141
const PLACEHOLDER_CLASS = 'dx-placeholder';
4242
const AUTO_RESIZE_CLASS = 'dx-texteditor-input-auto-resize';
4343
const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
44+
const TEXTEDITOR_INPUT_CONTAINER_CLASS = 'dx-texteditor-input-container';
4445

4546
QUnit.module('rendering', () => {
4647
QUnit.test('onContentReady fired after the widget is fully ready', function(assert) {
@@ -221,7 +222,11 @@ QUnit.module('options changing', () => {
221222
const height = 500;
222223

223224
instance.option('height', height);
224-
assert.equal($element.find(`.${INPUT_CLASS}`).outerHeight(), $element.height(), 'input outer height should be equal widget height');
225+
226+
const inputContainerMargin = parseInt($element.find(`.${TEXTEDITOR_INPUT_CONTAINER_CLASS}`).css('margin'));
227+
const expectedInputHeight = $element.height() - 2 * (inputContainerMargin);
228+
229+
assert.equal($element.find(`.${INPUT_CLASS}`).outerHeight(), expectedInputHeight, 'input outer height should be equal widget height');
225230
});
226231
});
227232

@@ -257,9 +262,10 @@ QUnit.module('widget sizing render', () => {
257262
const $input = $element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
258263
const inputHeight = $input.outerHeight();
259264
const borderHeight = parseInt($element.css('borderTopWidth'));
265+
const inputContainerMargin = parseInt($element.find(`.${TEXTEDITOR_INPUT_CONTAINER_CLASS}`).css('margin'));
260266
const parsedMinHeight = typeof minHeight === 'number' ? minHeight : parseHeight(minHeight, $element.get(0).parentNode, $element.get(0));
261267

262-
assert.strictEqual(inputHeight + 2 * borderHeight, parsedMinHeight, 'height is ok');
268+
assert.roughEqual(inputHeight + 2 * (borderHeight + inputContainerMargin), parsedMinHeight, 0.1, 'height is ok');
263269
});
264270
});
265271
});

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageUploadIntegration.tests.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,7 @@ module('Image uploading integration', {
343343
assert.strictEqual($(`.${ADD_IMAGE_DIALOG_CLASS}`).length, 0, 'has no add image dialog class');
344344
assert.strictEqual($(`.${ADD_IMAGE_DIALOG_WITH_TABS_CLASS}`).length, 0, 'has no add image dialog with tabs class');
345345
assert.strictEqual(formInstance.option('colCount'), 1, 'has correct form callCount');
346-
assert.strictEqual(formInstance.option('labelLocation'), 'left', 'has correct form labelLocation');
346+
assert.strictEqual(formInstance.option('labelLocation'), 'top', 'has correct form labelLocation');
347347
assert.strictEqual($(DIALOG_OK_BUTTON_SELECTOR).first().text(), 'OK', 'dialog ok button text is reverted');
348348
});
349349

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/resizingIntegration.tests.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const RESIZABLE_HANDLER_CLASS = 'dx-resizable-handle-corner-bottom-right';
1414
const IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYGWNgZGT8DwABDQEDEkMQNQAAAABJRU5ErkJggg==';
1515
const IMAGE_SIZE = 100;
1616
const BORDER_PADDING_WIDTH = 2;
17+
const HTML_EDITOR_CONTENT_MARGIN = 1;
1718

1819
module('Resizing integration', {
1920
beforeEach: function() {
@@ -174,7 +175,7 @@ module('Resizing integration', {
174175
.getBoundingClientRect();
175176

176177
assert.strictEqual(frameLeft + BORDER_PADDING_WIDTH, imageLeft, 'Frame positioned correctly by the left');
177-
assert.strictEqual(frameTop + BORDER_PADDING_WIDTH, imageTop, 'Frame positioned correctly by the top');
178+
assert.strictEqual(frameTop + BORDER_PADDING_WIDTH + HTML_EDITOR_CONTENT_MARGIN, imageTop, 'Frame positioned correctly by the top');
178179
});
179180

180181
test('resizing frame should update its position after formatting', function(assert) {

0 commit comments

Comments
 (0)