Skip to content

QUnit tests: ensure compatibility with Fluent and drop Generic theme testing (Editors) #32070

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marker-dao merged 6 commits into from
Dec 30, 2025
Merged

QUnit tests: ensure compatibility with Fluent and drop Generic theme testing (Editors) #32070

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e464a84
Switch rest Editors squad QUnits to fluent theme
Zedwag Dec 25, 2025
5593665
fix tests
Zedwag Dec 25, 2025
92756ff
Update shared.js
Zedwag Dec 25, 2025
75d9ed6
refactor(fieldset_bundled.tests.js)
Dec 29, 2025
b4b1aed
fix(ty[o)
Dec 29, 2025
7e2fd37
fix(tableProps tests)
Dec 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions packages/devextreme/testing/tests/DevExpress.knockout/fieldset_bundled.generic.tests.js
View file
Open in desktop

This file was deleted.

49 changes: 29 additions & 20 deletions ...vExpress.knockout/fieldsetParts/shared.js → ...xpress.knockout/fieldset_bundled.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ const ko = require('knockout');
const browser = require('core/utils/browser');
const devices = require('core/devices');

require('../../../helpers/executeAsyncMock.js');
require('fluent_blue_light.css!');
require('../../helpers/executeAsyncMock.js');
require('integration/knockout');
require('bundles/modules/parts/widgets-web');

Expand Down Expand Up @@ -146,10 +147,10 @@ const checkThatTestingIsPossible = function() {
return true;
};

const defaultOptions = {
const options = {
numberBoxAlign: 'right',
testVerticalOffset: true,
testSwitchBaseline: true,
testSwitchBaseline: false,
testDateBox: true
};

Expand Down Expand Up @@ -180,7 +181,7 @@ const testBaselineOffset = function($labelContainer, $valueContainer) {
$imgForInput = $('<img/>').height(1).width(1).appendTo($valueContainer);
$imgForLabel.closest('.dx-field-label').css('whiteSpace', 'nowrap');
$imgForInput.closest('.dx-field-value').css('whiteSpace', 'nowrap');
QUnit.assert.roughEqual($imgForLabel.offset().top, $imgForInput.offset().top, 0.99);
QUnit.assert.roughEqual($imgForLabel.offset().top, $imgForInput.offset().top, 1.99);
} finally {
$imgForLabel.remove();
$imgForInput.remove();
Expand All @@ -199,16 +200,13 @@ const testVerticalAlign = function($parent, inputSelector, isContainer, testVert
testBaselineOffset($label, $valueContainer);
};

module.exports = function(themeName, options) {
const testFieldsetsOnPlatform = function() {
if(!checkThatTestingIsPossible()) {
return;
}

options = options || {};
options = $.extend({}, defaultOptions, options);

const runTestModule = function(themeName) {
moduleWithoutCsp(themeName, {
const runTestModule = function() {
moduleWithoutCsp('fluent.blue.light', {
beforeEach: function() {
DevExpress.testing.executeAsyncMock.setup();
$('#qunit-fixture').html(fieldsetFixtureTemplate);
Expand All @@ -222,11 +220,15 @@ module.exports = function(themeName, options) {
});

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

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

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

assert.equal(offsetRightForSwitchOnField, offsetRightForSwitchInField, 'Horizontal align for switches');
assert.equal(offsetRightForCheckboxOnField, offsetRightForCheckboxInField, 'Horizontal align for checkboxes');
assert.equal(offsetRightForSwitchOnField + offsetBetweenOnFieldAndInFieldSwitch, offsetRightForSwitchInField, 'Horizontal align for switches');
assert.equal(offsetRightForCheckboxOnField + offsetBetweenOnFieldAndInFieldCheckbox, offsetRightForCheckboxInField, 'Horizontal align for checkboxes');
assert.equal(offsetLeftForSliderOnField, offsetLeftForSliderInField, 'Horizontal align for sliders');
assert.equal(offsetLeftForTextBoxOnField, offsetLeftForTextBoxInField, 'Horizontal align for textboxes');
assert.equal(offsetLeftForAutocompleteOnField, offsetLeftForAutocompleteInField, 'Horizontal align for autocompletes');
Expand Down Expand Up @@ -288,7 +290,8 @@ module.exports = function(themeName, options) {

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

const paddingTextAreaDifference = 0;
const paddingTextAreaDifference = -2;
const paddingLookupDifference = -1;

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

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

assert.equal(offsetLeftForDateBoxOnField, offsetLeftForTextAreaOnField + paddingTextAreaDifference, 'Horizontal align for datebox and textarea');
assert.equal(offsetLeftForTextAreaOnField + paddingTextAreaDifference, offsetLeftForLookupOnField, 'Horizontal align for textarea and lookup');
assert.equal(offsetLeftForLookupOnField, offsetLeftForSimpleOnField, 'Horizontal align for lookup and simpletext');
assert.equal(offsetLeftForLookupOnField + paddingLookupDifference, offsetLeftForSimpleOnField, 'Horizontal align for lookup and simpletext');
});

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

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

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

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

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

runTestModule();
};

testFieldsetsOnPlatform();
6 changes: 3 additions & 3 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/slider.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import fx from 'common/core/animation/fx';
import positionUtils from 'common/core/animation/position';
import 'generic_light.css!';
import 'fluent_blue_light.css!';
import config from 'core/config';
import resizeCallbacks from 'core/utils/resize_callbacks';
import { triggerShownEvent } from 'common/core/events/visibility_change';
Expand All @@ -15,7 +15,7 @@ import { normalizeKeyName } from 'common/core/events/utils/index';


const { module, testStart, test, testInActiveWindow } = QUnit;
const SLIDER_PADDING = 7;
const SLIDER_PADDING = 10;

testStart(() => {
const markup = `
Expand Down Expand Up @@ -1514,7 +1514,7 @@ module('tooltip integration', {
const tooltipRightBorder = $tooltipContent.offset().left + $tooltipContent.outerWidth() - this.$slider.offset().left;
const boundaryOffset = sliderWidth - tooltipRightBorder;

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

test('arrow should be centered after dimension was changed', function(assert) {
Expand Down
12 changes: 9 additions & 3 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textArea.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import devices from '__internal/core/m_devices';
import resizeCallbacks from 'core/utils/resize_callbacks';
import { parseHeight } from 'core/utils/size.js';

import 'generic_light.css!';
import 'fluent_blue_light.css!';
import 'ui/text_area';
import 'ui/scroll_view/ui.scrollable';

Expand Down Expand Up @@ -41,6 +41,7 @@ const INPUT_CLASS = 'dx-texteditor-input';
const PLACEHOLDER_CLASS = 'dx-placeholder';
const AUTO_RESIZE_CLASS = 'dx-texteditor-input-auto-resize';
const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
const TEXTEDITOR_INPUT_CONTAINER_CLASS = 'dx-texteditor-input-container';

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

instance.option('height', height);
assert.equal($element.find(`.${INPUT_CLASS}`).outerHeight(), $element.height(), 'input outer height should be equal widget height');

const inputContainerMargin = parseInt($element.find(`.${TEXTEDITOR_INPUT_CONTAINER_CLASS}`).css('margin'));
const expectedInputHeight = $element.height() - 2 * (inputContainerMargin);

assert.equal($element.find(`.${INPUT_CLASS}`).outerHeight(), expectedInputHeight, 'input outer height should be equal widget height');
});
});

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

assert.strictEqual(inputHeight + 2 * borderHeight, parsedMinHeight, 'height is ok');
assert.roughEqual(inputHeight + 2 * (borderHeight + inputContainerMargin), parsedMinHeight, 0.1, 'height is ok');
});
});
});
Expand Down
2 changes: 1 addition & 1 deletion ...ng/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageUploadIntegration.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@ module('Image uploading integration', {
assert.strictEqual($(`.${ADD_IMAGE_DIALOG_CLASS}`).length, 0, 'has no add image dialog class');
assert.strictEqual($(`.${ADD_IMAGE_DIALOG_WITH_TABS_CLASS}`).length, 0, 'has no add image dialog with tabs class');
assert.strictEqual(formInstance.option('colCount'), 1, 'has correct form callCount');
assert.strictEqual(formInstance.option('labelLocation'), 'left', 'has correct form labelLocation');
assert.strictEqual(formInstance.option('labelLocation'), 'top', 'has correct form labelLocation');
assert.strictEqual($(DIALOG_OK_BUTTON_SELECTOR).first().text(), 'OK', 'dialog ok button text is reverted');
});

Expand Down
3 changes: 2 additions & 1 deletion ...sting/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/resizingIntegration.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const RESIZABLE_HANDLER_CLASS = 'dx-resizable-handle-corner-bottom-right';
const IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYGWNgZGT8DwABDQEDEkMQNQAAAABJRU5ErkJggg==';
const IMAGE_SIZE = 100;
const BORDER_PADDING_WIDTH = 2;
const HTML_EDITOR_CONTENT_MARGIN = 1;

module('Resizing integration', {
beforeEach: function() {
Expand Down Expand Up @@ -174,7 +175,7 @@ module('Resizing integration', {
.getBoundingClientRect();

assert.strictEqual(frameLeft + BORDER_PADDING_WIDTH, imageLeft, 'Frame positioned correctly by the left');
assert.strictEqual(frameTop + BORDER_PADDING_WIDTH, imageTop, 'Frame positioned correctly by the top');
assert.strictEqual(frameTop + BORDER_PADDING_WIDTH + HTML_EDITOR_CONTENT_MARGIN, imageTop, 'Frame positioned correctly by the top');
});

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