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

Co-authored-by: marker dao ® <[email protected]>

Author: marker-dao

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/autocomplete.tests.js

@@ -12,7 +12,7 @@ import { isRenderer } from 'core/utils/type';
 import { normalizeKeyName } from 'common/core/events/utils/index';
 import { getHeight, getOuterHeight } from 'core/utils/size';
 
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 import 'ui/select_box';
 
 QUnit.testStart(() => {
@@ -55,6 +55,8 @@ const KEY_ENTER = 'Enter';
 const KEY_ESC = 'Escape';
 const KEY_TAB = 'Tab';
 
+const BORDER_WIDTH = 1;
+
 QUnit.module('dxAutocomplete', {
     beforeEach: function() {
         fx.off = true;
@@ -180,9 +182,11 @@ QUnit.module('dxAutocomplete', {
         autocomplete.option('height', initialHeight + increment);
         autocomplete.option('width', initialWidth + increment);
 
+        const overlayContentWidth = $overlayContent.width() - BORDER_WIDTH * 2;
+
         const dHeight = $autocomplete.height() - initialHeight;
         const dWidth = $autocomplete.width() - initialWidth;
-        const dPopupWidth = $overlayContent.width() - initialPopupWidth;
+        const dPopupWidth = overlayContentWidth - initialPopupWidth;
 
         assert.notEqual(dHeight, 0, 'Height could be changed');
         assert.notEqual(dWidth, 0, 'Width could be changed');

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dateRangeBox.tests.js

@@ -9,7 +9,7 @@ import keyboardMock from '../../helpers/keyboardMock.js';
 import localization from 'localization';
 
 import 'ui/validator';
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 QUnit.testStart(() => {
     const markup =
@@ -166,7 +166,7 @@ QUnit.module('DateRangeBox Initialization', moduleConfig, () => {
                 invalidStartDateMessage: 'Start value must be a date',
                 invalidEndDateMessage: 'End value must be a date',
                 isValid: true,
-                labelMode: 'static',
+                labelMode: 'outside',
                 max: undefined,
                 min: undefined,
                 onChange: null,
@@ -225,7 +225,7 @@ QUnit.module('DateRangeBox Initialization', moduleConfig, () => {
             inputAttr: {},
             isValid: true,
             label: '',
-            labelMode: 'static',
+            labelMode: 'outside',
             max: undefined,
             min: undefined,
             name: '',

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js

@@ -21,7 +21,7 @@ import '../../helpers/calendarFixtures.js';
 
 import 'ui/date_box';
 import 'ui/validator';
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 QUnit.testStart(() => {
     const markup =
@@ -1553,7 +1553,7 @@ QUnit.module('widget sizing render', {}, () => {
         const { width: actualWidth } = component.$element().get(0).getBoundingClientRect();
         const { width: buttonWidth } = $(`.${BUTTONS_CONTAINER_CLASS}`).get(0).getBoundingClientRect();
 
-        assert.strictEqual(actualWidth, initialWidth + buttonWidth);
+        assert.strictEqual(actualWidth >= initialWidth + buttonWidth, true);
     });
 
     QUnit.test('change width', function(assert) {

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownBox.tests.js

@@ -10,7 +10,7 @@ import { normalizeKeyName } from 'common/core/events/utils/index';
 import { CustomStore } from 'common/data/custom_store';
 import { DataSource } from 'common/data/data_source/data_source';
 
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 import 'ui/validator';
 import { implementationsMap } from 'core/utils/size';
 
@@ -27,11 +27,13 @@ QUnit.testStart(() => {
     $('#qunit-fixture').addClass('qunit-fixture-visible');
 });
 
-const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 const TAB_KEY_CODE = 'Tab';
+
+const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 const DX_STATE_FOCUSED_CLASS = 'dx-state-focused';
 const OVERLAY_CONTENT_CLASS = 'dx-overlay-content';
 const CLEAR_BUTTON_AREA_CLASS = 'dx-clear-button-area';
+const POPUP_CLASS = 'dx-popup';
 
 const moduleConfig = {
     beforeEach: function() {
@@ -695,25 +697,36 @@ QUnit.module('popup options', moduleConfig, () => {
 
     QUnit.test('maxHeight should be distance between the popup top bound and the element top bound if the popup has been rendered at the top already and the window was scrolled (T874949, T942217)', function(assert) {
         const scrollTopValue = 50;
-        this.$element.dxDropDownBox({
+
+        const instance = this.$element.dxDropDownBox({
             width: 300,
-            contentTemplate: (e) => $('<div id=\'dd-content\'></div>')
-        });
+            contentTemplate: () => $('<div id=\'dd-content\'></div>'),
+        }).dxDropDownBox('instance');
 
         const elementHeight = this.$element.height();
         const scrollTop = sinon.stub(renderer.fn, 'scrollTop').returns(scrollTopValue);
         const windowHeight = $(window).height();
-        this.$element.css('margin-top', windowHeight - elementHeight - 1 - scrollTopValue);
-        const instance = this.$element.dxDropDownBox('instance');
+
+        this.$element.css('margin-top', windowHeight + scrollTopValue - elementHeight);
 
         try {
             instance.open();
-            const startPopupHeight = $(instance.content()).parent('.dx-overlay-content').height();
+
+            const $overlayContent = $(instance.content()).parent(`.${OVERLAY_CONTENT_CLASS}`);
+
             $('#dd-content').height(300);
 
-            const popup = this.$element.find('.dx-popup').dxPopup('instance');
+            const popup = this.$element
+                .find(`.${POPUP_CLASS}`)
+                .dxPopup('instance');
+
             const maxHeight = popup.option('maxHeight');
-            assert.roughEqual(maxHeight(), startPopupHeight + scrollTopValue, 1.01, 'maxHeight is correct');
+
+            const overlayOffset = $overlayContent.offset().top;
+            const elementOffset = this.$element.offset().top;
+            const distanceBetweenPopupAndElement = elementOffset - overlayOffset;
+
+            assert.roughEqual(maxHeight(), distanceBetweenPopupAndElement, 1.01, 'maxHeight is correct');
         } finally {
             scrollTop.restore();
         }

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js

@@ -30,7 +30,7 @@ import keyboardMock from '../../helpers/keyboardMock.js';
 import ariaAccessibilityTestHelper from '../../helpers/ariaAccessibilityTestHelper.js';
 import { TextEditorLabel } from '__internal/ui/text_box/m_text_editor.label';
 
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 QUnit.testStart(function() {
     const markup =
@@ -3866,7 +3866,7 @@ QUnit.module('default options', {
 
             const $popup = $('.dx-popup-wrapper');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -($popup.find('.dx-overlay-content').height() - $('.dx-list-item').height()) / 2, 2, 'offset of the lookup if fourth item is selected');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -($popup.find('.dx-overlay-content').height() - $('.dx-list-item').height()) / 2, 4, 'offset of the lookup if fourth item is selected');
 
             lookup.close();
 
@@ -3892,15 +3892,15 @@ QUnit.module('default options', {
 
             const $popup = $('.dx-popup-wrapper');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -3.5, 1, 'offset of the lookup if first item is selected');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -5, 1, 'offset of the lookup if first item is selected');
 
             getList().scrollTo(100);
 
             lookup.close();
 
             $(lookup.field()).trigger('dxclick');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -3.5, 1, 'offset of the lookup after scrolling and without item selecting');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -5, 1, 'offset of the lookup after scrolling and without item selecting');
 
             lookup.close();
 
@@ -3912,16 +3912,16 @@ QUnit.module('default options', {
 
             $(lookup.field()).trigger('dxclick');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -2.5 - materialLookupPadding, 1, 'offset of the lookup after scrolling and cut-off item selecting');
-            assert.roughEqual($('.dx-list-item').eq(1).position().top, getList().scrollTop(), 2, 'position of the selected item after scrolling and cut-off item selecting');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -1 - materialLookupPadding, 1, 'offset of the lookup after scrolling and cut-off item selecting');
+            assert.roughEqual($('.dx-list-item').eq(1).position().top, 38, 2, 'position of the selected item after scrolling and cut-off item selecting');
 
             lookup.close();
 
             lookup.option('value', 'purple');
 
             $(lookup.field()).trigger('dxclick');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -2.5 - materialLookupPadding, 1, 'offset of the lookup if last item is selected');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -1 - materialLookupPadding, 1, 'offset of the lookup if last item is selected');
 
             lookup.close();
 
@@ -3949,7 +3949,7 @@ QUnit.module('default options', {
 
             const $popup = $('.dx-popup-content');
 
-            assert.roughEqual($popup.height(), 112, 1, 'popup height if DataSource without items and `searchEnabled: true`');
+            assert.roughEqual($popup.height(), 80, 1, 'popup height if DataSource without items and `searchEnabled: true`');
         } finally {
             $lookup.remove();
             themes.isMaterial = origIsMaterial;
@@ -3971,7 +3971,7 @@ QUnit.module('default options', {
 
             let $popup = $('.dx-popup-wrapper');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -2.5 - materialLookupPadding, 1, 'popup position if second item is selected and there is not top place');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -1 - materialLookupPadding, 1, 'popup position if second item is selected and there is not top place');
 
             lookup.close();
 
@@ -3981,7 +3981,7 @@ QUnit.module('default options', {
 
             $popup = $('.dx-popup-wrapper');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -2.5 - $('.dx-list-item').height(), 2, 'popup position if second item is selected and there is top place');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -7 - $('.dx-list-item').height(), 2, 'popup position if second item is selected and there is top place');
 
             lookup.close();
 
@@ -3993,7 +3993,7 @@ QUnit.module('default options', {
 
             $popup = $('.dx-popup-wrapper');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -2.5 - $('.dx-list-item').height() * 2, 3, 'third item is centered');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -5 - $('.dx-list-item').height() * 2, 3, 'third item is centered');
 
             lookup.close();
 
@@ -4003,7 +4003,7 @@ QUnit.module('default options', {
 
             $popup = $('.dx-popup-wrapper');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -2.5 - $('.dx-list-item').height() * 2 - materialLookupPadding * 2, 3, 'fourth item is centered');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, 5 - $('.dx-list-item').height() * 2 - materialLookupPadding * 2, 3, 'fourth item is centered');
 
             lookup.close();
 
@@ -4013,7 +4013,7 @@ QUnit.module('default options', {
 
             $popup = $('.dx-popup-wrapper');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -2.5 - $('.dx-list-item').height() * 4 - materialLookupPadding * 2, 2, 'popup position if last item is selected and there is place');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, 3 - $('.dx-list-item').height() * 4 - materialLookupPadding * 2, 2, 'popup position if last item is selected and there is place');
 
             lookup.close();
 
@@ -4025,7 +4025,7 @@ QUnit.module('default options', {
 
             $popup = $('.dx-popup-wrapper');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -2.5 - $('.dx-list-item').height() - materialLookupPadding * 2, 3, 'popup position if there is not place for two items');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, 9 - $('.dx-list-item').height() - materialLookupPadding * 2, 3, 'popup position if there is not place for two items');
 
             lookup.close();
 
@@ -4035,7 +4035,7 @@ QUnit.module('default options', {
 
             $popup = $('.dx-popup-wrapper');
 
-            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -2.5 - materialLookupPadding, 1, 'popup position if last item is selected and there is not place');
+            assert.roughEqual($popup.find('.dx-overlay-content').position().top, -1 - materialLookupPadding, 1, 'popup position if last item is selected and there is not place');
 
             lookup.close();
 
@@ -4134,7 +4134,7 @@ QUnit.module('default options', {
 
             const $popover = $('.dx-popover-wrapper');
 
-            assert.roughEqual($popover.find('.dx-overlay-content').eq(0).position().top, $(lookup._inputWrapper()).outerHeight() + 8 + 10, 2, 'popover position of lookup field with body padding 8px');
+            assert.roughEqual($popover.find('.dx-overlay-content').eq(0).position().top, $(lookup._inputWrapper()).outerHeight() + 8 + 12, 2, 'popover position of lookup field with body padding 8px');
 
             lookup.close();
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/rangeSlider.tests.js

@@ -8,7 +8,7 @@ import { normalizeKeyName } from 'common/core/events/utils/index';
 import 'ui/range_slider';
 import 'ui/number_box';
 import 'ui/validator';
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 QUnit.testStart(function() {
     const markup =
@@ -32,7 +32,7 @@ const TOOLTIP_CLASS = 'dx-popover';
 
 const FEEDBACK_SHOW_TIMEOUT = 30;
 const FEEDBACK_HIDE_TIMEOUT = 400;
-const CONTAINER_MARGIN = 7;
+const CONTAINER_MARGIN = 10;
 
 const getRight = (el) => $(el).get(0).getBoundingClientRect().right;
 const getLeft = (el) => $(el).get(0).getBoundingClientRect().left;
@@ -88,11 +88,11 @@ const isRangeSliderDimensionsMatchOptions = (id, assert) => {
         }
     }
 
-    assert.roughEqual(calculatedRangeWidth, expectedRangeWidth, 0.5, `${SLIDER_RANGE_CLASS} width`);
-    assert.roughEqual(calculatedRangeLeftOffset, expectedRangeLeftOffset, 0.5, `${SLIDER_RANGE_CLASS} left offset`);
-    assert.roughEqual(calculatedRangeRightOffset, expectedRangeRightOffset, 0.5, `${SLIDER_RANGE_CLASS} right offset`);
-    assert.roughEqual(calculatedStartHandleOffset, expectedRangeLeftOffset, 1, `start ${SLIDER_HANDLE_CLASS} offset`);
-    assert.roughEqual(calculatedEndHandleOffset, expectedRangeRightOffset, 1, `end ${SLIDER_HANDLE_CLASS} offset`);
+    assert.roughEqual(calculatedRangeWidth, expectedRangeWidth, 2.5, `${SLIDER_RANGE_CLASS} width`);
+    assert.roughEqual(calculatedRangeLeftOffset, expectedRangeLeftOffset, 2.5, `${SLIDER_RANGE_CLASS} left offset`);
+    assert.roughEqual(calculatedRangeRightOffset, expectedRangeRightOffset, 2.5, `${SLIDER_RANGE_CLASS} right offset`);
+    assert.roughEqual(calculatedStartHandleOffset, expectedRangeLeftOffset, 2.5, `start ${SLIDER_HANDLE_CLASS} offset`);
+    assert.roughEqual(calculatedEndHandleOffset, expectedRangeRightOffset, 2.5, `end ${SLIDER_HANDLE_CLASS} offset`);
 };
 
 const moduleOptions = {
@@ -159,7 +159,7 @@ QUnit.module('render', moduleOptions, () => {
         pointerMock(el).start().move(450 + el.offset().left).down();
 
         assert.equal(instance.option('start'), 240);
-        assert.equal(instance.option('end'), 456);
+        assert.equal(instance.option('end'), 458);
         isRangeSliderDimensionsMatchOptions('#slider', assert);
 
         pointerMock(el).start().move(500 + el.offset().left).down();
@@ -225,12 +225,12 @@ QUnit.module('user interaction', () => {
 
         pointer.start().down($wrapper.offset().left + CONTAINER_MARGIN + 40, $wrapper.offset().top).move(46);
         assert.equal(instance.option('start'), 60);
-        assert.equal(instance.option('end'), 80);
+        assert.equal(instance.option('end'), 78);
         isRangeSliderDimensionsMatchOptions('#slider', assert);
         pointer.up();
 
         pointer.start().down($wrapper.offset().left + CONTAINER_MARGIN + 80, $wrapper.offset().top).move(-57);
-        assert.equal(instance.option('start'), 30);
+        assert.equal(instance.option('start'), 33);
         assert.equal(instance.option('end'), 60);
         isRangeSliderDimensionsMatchOptions('#slider', assert);
         pointer.up();
@@ -252,7 +252,7 @@ QUnit.module('user interaction', () => {
         const pointer = pointerMock($wrapper);
 
         pointer.start().down($wrapper.offset().left + CONTAINER_MARGIN + 80, $wrapper.offset().top).move(-46);
-        assert.equal(instance.option('start'), 100);
+        assert.equal(instance.option('start'), 102);
         assert.equal(instance.option('end'), 120);
         isRangeSliderDimensionsMatchOptions('#slider', assert);
         pointer.up();
@@ -274,14 +274,14 @@ QUnit.module('user interaction', () => {
         const pointer = pointerMock($wrapper);
 
         pointer.start().down($wrapper.offset().left + CONTAINER_MARGIN + 40, $wrapper.offset().top).move(46);
-        assert.equal(instance.option('start'), 20);
+        assert.equal(instance.option('start'), 22);
         assert.equal(instance.option('end'), 40);
         isRangeSliderDimensionsMatchOptions('#slider', assert);
         pointer.up();
 
         pointer.start().down($wrapper.offset().left + CONTAINER_MARGIN + 80, $wrapper.offset().top).move(-57);
         assert.equal(instance.option('start'), 40);
-        assert.equal(instance.option('end'), 70);
+        assert.equal(instance.option('end'), 68);
         isRangeSliderDimensionsMatchOptions('#slider', assert);
         pointer.up();
     });