Skip to content

Switch rest Editors squad QUnits to fluent theme #32050

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

Open
Zedwag wants to merge 3 commits into
base: 26_1
Choose a base branch
from
Open

Switch rest Editors squad QUnits to fluent theme #32050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1ab5047
Switch rest Editors squad QUnits to fluent theme
Zedwag Dec 25, 2025
67026f8
fix tests
Zedwag Dec 25, 2025
21473fb
Update shared.js
Zedwag Dec 25, 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
31 changes: 20 additions & 11 deletions packages/devextreme/testing/tests/DevExpress.knockout/fieldsetParts/shared.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,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 Down Expand Up @@ -222,11 +222,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 +259,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 +292,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 +305,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 +401,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 +426,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 Down
4 changes: 4 additions & 0 deletions packages/devextreme/testing/tests/DevExpress.knockout/fieldset_bundled.fluent.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
require('fluent_blue_light.css!');

const testFieldsetsOnPlatform = require('./fieldsetParts/shared.js');
testFieldsetsOnPlatform('fluent.blue.light', { testSwitchBaseline: false });
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.

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 @@ -1494,7 +1494,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
4 changes: 3 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 @@ -173,8 +174,9 @@ module('Resizing integration', {
.get(0)
.getBoundingClientRect();

debugger;
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
42 changes: 21 additions & 21 deletions ...e/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableProperties.tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -845,7 +845,7 @@ module('Table properties forms', {

assert.strictEqual($targetCell.outerWidth(), 250, 'cell width is applied');
assert.strictEqual($targetCell.get(0).style.width, '250px', 'cell width style is applied');
assert.roughEqual($targetCell.next().outerWidth(), 348, 2, 'next cell width style is correct');
assert.roughEqual($targetCell.next().outerWidth(), 346, 4, 'next cell width style is correct');
assert.strictEqual($targetCell.next().get(0).style.width, '', 'next cell width style is correct');
});

Expand Down Expand Up @@ -928,8 +928,8 @@ module('Table properties forms', {

assert.strictEqual($targetCell.outerWidth(), 250, 'cell width is applied');
assert.strictEqual($targetCell.get(0).style.width, '250px', 'cell width style is applied');
assert.roughEqual(parseInt($targetCell.prev().outerWidth()), 350, 2, 'previous cell width style is correct');
assert.roughEqual(parseInt($targetCell.prev().outerWidth()), 350, 2, 'previous cell width style is correct');
assert.roughEqual(parseInt($targetCell.prev().outerWidth()), 346, 2, 'previous cell width style is correct');
assert.roughEqual(parseInt($targetCell.prev().outerWidth()), 346, 2, 'previous cell width style is correct');
});

test('Check cell width edititing if the table has two column with auto width and one with fixed width', function(assert) {
Expand Down Expand Up @@ -963,9 +963,9 @@ module('Table properties forms', {

assert.strictEqual($targetCell.outerWidth(), 400, 'cell width is applied');
assert.strictEqual($targetCell.get(0).style.width, '400px', 'cell width style is applied');
assert.roughEqual($targetCell.prev().outerWidth(), 300, 2, 'previous cell width is correct');
assert.roughEqual(parseInt($targetCell.prev().get(0).style.width), 300, 2, 'previous cell width style is correct');
assert.roughEqual($targetCell.next().outerWidth(), 200, 2, 'next cell width is correct');
assert.roughEqual($targetCell.prev().outerWidth(), 300, 4, 'previous cell width is correct');
assert.roughEqual(parseInt($targetCell.prev().get(0).style.width), 300, 4, 'previous cell width style is correct');
assert.roughEqual($targetCell.next().outerWidth(), 200, 5, 'next cell width is correct');
assert.strictEqual($targetCell.next().get(0).style.width, '', 'next cell width style is correct');
});

Expand Down Expand Up @@ -996,11 +996,11 @@ module('Table properties forms', {

this.applyFormChanges();

assert.roughEqual($targetCell.outerWidth(), 567, 3, 'cell width is applied');
assert.roughEqual($targetCell.outerWidth(), 561, 3, 'cell width is applied');
assert.strictEqual($targetCell.get(0).style.width, '700px', 'cell width style is applied');
assert.roughEqual($targetCell.next().outerWidth(), 32, 3, 'next cell width style is correct');
assert.strictEqual($targetCell.next().get(0).style.width, '', 'next cell width style is correct');
assert.roughEqual($tableElement.outerWidth(), 600, 2, 'table width is not changed');
assert.roughEqual($tableElement.outerWidth(), 600, 4, 'table width is not changed');
});

test('Check cell width styles if new value is more than the full table width and all columns has fixed width', function(assert) {
Expand All @@ -1019,11 +1019,11 @@ module('Table properties forms', {

this.applyFormChanges();

assert.roughEqual($targetCell.outerWidth(), 567, 3, 'cell width is applied');
assert.roughEqual($targetCell.outerWidth(), 561, 3, 'cell width is applied');
assert.strictEqual($targetCell.get(0).style.width, '700px', 'cell width style is applied');
assert.roughEqual($targetCell.next().outerWidth(), 32, 3, 'next cell width style is correct');
assert.strictEqual($targetCell.next().get(0).style.width, '0px', 'next cell width style is correct');
assert.roughEqual($tableElement.outerWidth(), 600, 2, 'table width is not changed');
assert.roughEqual($tableElement.outerWidth(), 600, 4, 'table width is not changed');
});

test('Check cell width styles if it is changed after the table width was changed (columns width is fixed)', function(assert) {
Expand Down Expand Up @@ -1056,9 +1056,9 @@ module('Table properties forms', {

assert.roughEqual($targetCell.outerWidth(), 150, 2, 'cell width is applied');
assert.strictEqual($targetCell.get(0).style.width, '150px', 'cell width style is applied');
assert.roughEqual(parseInt($targetCell.next().outerWidth()), 250, 2, 'next cell width style is correct');
assert.roughEqual(parseInt($targetCell.next().get(0).style.width), 250, 2, 'next cell width style is correct');
assert.roughEqual($tableElement.outerWidth(), 400, 2, 'table width is correct');
assert.roughEqual(parseInt($targetCell.next().outerWidth()), 250, 4, 'next cell width style is correct');
assert.roughEqual(parseInt($targetCell.next().get(0).style.width), 250, 4, 'next cell width style is correct');
assert.roughEqual($tableElement.outerWidth(), 400, 4, 'table width is correct');
});

test('Check cell width styles if it is changed after the table width was changed (columns width is not fixed)', function(assert) {
Expand Down Expand Up @@ -1215,11 +1215,11 @@ module('Table properties forms', {

const $horizontalCells = $tableElement.find('tr:eq(0) td');

assert.roughEqual($tableElement.outerWidth(), 400, 2, 'table width is changed as expected');
assert.roughEqual($horizontalCells.eq(0).outerWidth(), 200, 2, 'first column cell width is applied');
assert.roughEqual(parseInt($horizontalCells.eq(0).get(0).style.width), 200, 2, 'first column cell width style is applied');
assert.roughEqual(parseInt($horizontalCells.eq(1).outerWidth()), 200, 2, 'second column cell width style is applied');
assert.roughEqual(parseInt($horizontalCells.eq(1).get(0).style.width), 200, 2, 'second column cell width style is applied');
assert.roughEqual($tableElement.outerWidth(), 400, 4, 'table width is changed as expected');
assert.roughEqual($horizontalCells.eq(0).outerWidth(), 200, 4, 'first column cell width is applied');
assert.roughEqual(parseInt($horizontalCells.eq(0).get(0).style.width), 200, 4, 'first column cell width style is applied');
assert.roughEqual(parseInt($horizontalCells.eq(1).outerWidth()), 200, 4, 'second column cell width style is applied');
assert.roughEqual(parseInt($horizontalCells.eq(1).get(0).style.width), 200, 4, 'second column cell width style is applied');
});

test('Check table width edititng if one column width is fixed', function(assert) {
Expand Down Expand Up @@ -1275,7 +1275,7 @@ module('Table properties forms', {

const $horizontalCells = $tableElement.find('tr:eq(0) td');

assert.roughEqual($tableElement.outerWidth(), 90, 3, 'table width is changed as expected');
assert.roughEqual($tableElement.outerWidth(), 90, 4, 'table width is changed as expected');
assert.roughEqual($horizontalCells.eq(0).outerWidth(), 60, 4.01, 'first column cell width is applied');
assert.roughEqual(parseInt($horizontalCells.eq(0).get(0).style.width), 30, 2, 'first column cell width style is applied');
assert.roughEqual(parseInt($horizontalCells.eq(1).outerWidth()), 30, 4.01, 'second column cell width style is applied');
Expand Down Expand Up @@ -1355,8 +1355,8 @@ module('Table properties forms', {
assert.roughEqual($targetCell.outerWidth(), 150, 2, 'cell width is applied');
assert.roughEqual(parseInt($targetCell.get(0).style.width), 150, 2, 'cell width style is applied');
assert.roughEqual($targetCell.next().outerWidth(), 300, 2, 'next cell width style is correct');
assert.strictEqual(parseInt($targetCell.next().get(0).style.width), 300, 'next cell width style is not defined');
assert.roughEqual($tableElement.outerWidth(), 450, 2, 'table width is correct');
assert.roughEqual(parseInt($targetCell.next().get(0).style.width), 300, 4, 'next cell width style is not defined');
assert.roughEqual($tableElement.outerWidth(), 450, 4, 'table width is correct');
});
});

Expand Down
Loading
Loading