QUnit tests: ensure compatibility with Fluent and drop Generic theme testing (Navigation)

packages/devextreme/testing/tests/DevExpress.knockout/overlay.tests.js

@@ -6,7 +6,7 @@ require('ui/overlay/ui.overlay');
 require('ui/slider');
 require('integration/knockout');
 
-require('generic_light.css!');
+require('fluent_blue_light.css!');
 
 const moduleWithoutCsp = QUnit.urlParams['nocsp'] ? QUnit.module : QUnit.module.skip;
 
@@ -45,6 +45,6 @@ QUnit.test('slider within overlay does not properly display its current position
     const $handle = $container.find('.dx-slider .dx-slider-handle');
     const $sliderBar = $container.find('.dx-slider-bar');
     const handleCenter = $handle.position().left + $handle.outerWidth() / 2 + parseInt($handle.css('border-left-width'));
-    assert.equal($sliderBar.outerWidth(), 100);
-    assert.equal(handleCenter, 50);
+    assert.equal($sliderBar.outerWidth(), 94);
+    assert.equal(handleCenter, 48);
 });

packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.label.tests.js

@@ -1,6 +1,6 @@
 import { getWidth } from 'core/utils/size';
 import { EDITORS_WITHOUT_LABELS } from '__internal/ui/form/form.layout_manager.utils';
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 import $ from 'jquery';
 import 'ui/autocomplete';
 import 'ui/calendar';
@@ -295,6 +295,7 @@ function findLabelTextsInColumn($container, columnIndex) {
 QUnit.test('Align labels in column', function(assert) {
     const testContainer = $('#form');
     const form = testContainer.dxForm({
+        labelLocation: 'left',
         formData: this.testObject,
         colCount: 4,
         customizeItem: function(item) {
@@ -358,6 +359,7 @@ QUnit.test('Align labels in column', function(assert) {
 QUnit.test('Align labels in column when labels text is identical', function(assert) {
     const testContainer = $('#form');
     const form = testContainer.dxForm({
+        labelLocation: 'left',
         formData: { TestBool: true, ShipName: 'Test' }
     }).dxForm('instance');
 
@@ -389,6 +391,7 @@ QUnit.test('Disable alignItemLabels in group', function(assert) {
     const testContainer = $('#form');
 
     testContainer.dxForm({
+        labelLocation: 'left',
         formData: { TestBool: true, ShipName: 'Test', Name: 'John', LastName: 'Smith' },
         items: [
             {
@@ -415,6 +418,7 @@ QUnit.test('Disable alignItemLabels in group', function(assert) {
 QUnit.test('Align labels in column when alignItemLabelsInAllGroups is enabled', function(assert) {
     const testContainer = $('#form');
     const form = testContainer.dxForm({
+        labelLocation: 'left',
         colCount: 2,
         formData: {
             firstName: 'John',
@@ -543,6 +547,7 @@ QUnit.test('Align labels in column when alignItemLabelsInAllGroups is disabled',
 QUnit.test('Align labels in columns when there are rows', function(assert) {
     const testContainer = $('#form');
     const form = testContainer.dxForm({
+        labelLocation: 'left',
         formData: this.testObject,
         colCount: 4,
         items: [{
@@ -603,6 +608,7 @@ QUnit.test('Align labels in columns when there are rows', function(assert) {
 QUnit.test('Align labels when layout is changed in responsive box_T306106', function(assert) {
     const testContainer = $('#form');
     const form = testContainer.dxForm({
+        labelLocation: 'left',
         formData: this.testObject,
         colCount: 4,
         customizeItem: function(item) {
@@ -645,6 +651,7 @@ QUnit.test('Align labels when layout is changed when small window size by defaul
 
     const testContainer = $('#form');
     const form = testContainer.dxForm({
+        labelLocation: 'left',
         formData: this.testObject,
         colCount: 4,
         customizeItem: function(item) {
@@ -744,6 +751,7 @@ QUnit.test('required mark aligned', function(assert) {
 
 QUnit.test('Align with "" required mark, T1031458', function(assert) {
     const $testContainer = $('#form').dxForm({
+        labelLocation: 'left',
         width: 200,
         requiredMark: '',
         items: [{
@@ -761,6 +769,7 @@ QUnit.test('Align with "" required mark, T1031458', function(assert) {
 
 QUnit.test('Align with " " required mark, T1031458', function(assert) {
     const $testContainer = $('#form').dxForm({
+        labelLocation: 'left',
         width: 200,
         requiredMark: ' ',
         items: [{
@@ -778,6 +787,7 @@ QUnit.test('Align with " " required mark, T1031458', function(assert) {
 
 QUnit.test('Align with "!" required mark, T1031458', function(assert) {
     const $testContainer = $('#form').dxForm({
+        labelLocation: 'left',
         width: 200,
         requiredMark: '!',
         items: [{
@@ -795,6 +805,7 @@ QUnit.test('Align with "!" required mark, T1031458', function(assert) {
 
 QUnit.test('Align with "×" required mark, T1031458', function(assert) {
     const $testContainer = $('#form').dxForm({
+        labelLocation: 'left',
         width: 200,
         requiredMark: '×',
         items: [{
@@ -830,6 +841,7 @@ QUnit.test('optional mark aligned', function(assert) {
 QUnit.test('Check align labels', function(assert) {
     const testContainer = $('#form');
     const form = testContainer.dxForm({
+        labelLocation: 'left',
         formData: {
             firstName: 'John',
             lastName: 'Smith',
@@ -899,6 +911,7 @@ QUnit.test('Check align labels when layout is changed by default_T306106', funct
 
     const testContainer = $('#form');
     const form = testContainer.dxForm({
+        labelLocation: 'left',
         formData: {
             firstName: 'John',
             lastName: 'Smith',
@@ -964,6 +977,7 @@ QUnit.test('Check align labels when layout is changed by default_T306106', funct
 QUnit.test('Check align labels when layout is changed_T306106', function(assert) {
     const testContainer = $('#form');
     const form = testContainer.dxForm({
+        labelLocation: 'left',
         formData: {
             firstName: 'John',
             lastName: 'Smith',

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

@@ -8,7 +8,7 @@ import { extend } from 'core/utils/extend';
 import messageLocalization from 'localization/message';
 import visibilityEventsModule from 'common/core/events/visibility_change';
 import { TABS_ITEM_CLASS } from '__internal/ui/tabs/tabs';
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 import $ from 'jquery';
 import 'ui/autocomplete';
 import 'ui/calendar';
@@ -1016,6 +1016,7 @@ QUnit.test('Update layout inside a tab (T1040296)', function(assert) {
 QUnit.module('T986577', () => {
     function getFormConfig() {
         return {
+            labelLocation: 'left',
             width: 200,
             screenByWidth: (_) => { return 'md'; },
             colCountByScreen: {
@@ -1048,7 +1049,7 @@ QUnit.module('T986577', () => {
         assert.equal(resizeEventSpy.called, 1, 'resize is triggered only once');
         assert.deepEqual(resizeEventArg.get(0), $form.find(`.${TOOLBAR_CLASS}`).get(0), 'element is toolbar');
         assert.roughEqual(getWidth(resizeEventArg), 164, 5, 'toolbar width is correct');
-        assert.roughEqual(getHeight(resizeEventArg), 36, 1, 'toolbar height is correct');
+        assert.roughEqual(getHeight(resizeEventArg), 48, 1, 'toolbar height is correct');
 
         resizeEventSpy.restore();
     });
@@ -1061,7 +1062,7 @@ QUnit.module('T986577', () => {
         assert.equal(resizeEventSpy.called, 1, 'resize is triggered only once');
         assert.deepEqual(resizeEventArg.get(0), $form.find(`.${TOOLBAR_CLASS}`).get(0), 'element is toolbar');
         assert.roughEqual(getWidth(resizeEventArg), 72, 5, 'toolbar width is correct');
-        assert.roughEqual(getHeight(resizeEventArg), 36, 1, 'toolbar height is correct');
+        assert.roughEqual(getHeight(resizeEventArg), 48, 1, 'toolbar height is correct');
 
         resizeEventSpy.restore();
     });
@@ -3595,6 +3596,7 @@ QUnit.module('Form when rtlEnabled is true');
 
 QUnit.test('required mark aligned when rtlEnabled option is set to true', function(assert) {
     const $testContainer = $('#form').dxForm({
+        labelLocation: 'left',
         requiredMark: '!',
         rtlEnabled: true,
         items: [{
@@ -3615,6 +3617,7 @@ QUnit.test('required mark aligned when rtlEnabled option is set to true', functi
 
 QUnit.test('optional mark aligned when rtlEnabled option is set to true', function(assert) {
     const $testContainer = $('#form').dxForm({
+        labelLocation: 'left',
         optionalMark: 'optMark',
         showOptionalMark: true,
         rtlEnabled: true,

packages/devextreme/testing/tests/DevExpress.ui.widgets/accordion.tests.js

@@ -1,5 +1,5 @@
 import fx from 'common/core/animation/fx';
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 import config from 'core/config';
 import { getHeight } from 'core/utils/size';
 import { deferUpdate, noop } from 'core/utils/common';
@@ -600,7 +600,7 @@ QUnit.module('widget options', moduleSetup, () => {
         assert.strictEqual(closedItems.length, 3);
 
         for(let i = 0; i < closedItems.length; i++) {
-            assert.roughEqual(closedItems.eq(i).outerHeight(), 42.4219, 1);
+            assert.roughEqual(closedItems.eq(i).outerHeight(), 44, 1);
         }
     });
 
@@ -1557,7 +1557,7 @@ QUnit.module('optionChanged', moduleSetup, () => {
             assert.strictEqual($items.length, 2, '$items.length');
 
             const item1 = $items.eq(0);
-            assert.roughEqual(item1.outerHeight(), 93, 1.001, 'items(0) has valid height');
+            assert.roughEqual(item1.outerHeight(), 88, 1.001, 'items(0) has valid height');
             assert.strictEqual(item1.is('.' + [ACCORDION_ITEM_OPENED_CLASS, SELECTED_ITEM_CLASS].join('.')), true, 'items(0) should have each of these classes');
             assert.strictEqual(!item1.is('.' + [HIDDEN_CLASS, ACCORDION_ITEM_CLOSED_CLASS].join(', .')), true, 'items(0) should not have no one of these classes');
             assert.strictEqual(item1.attr('aria-selected'), 'true', 'items(0) should have aria-selected=true');

packages/devextreme/testing/tests/DevExpress.ui.widgets/button.tests.js

@@ -13,7 +13,7 @@ import dxButton from 'ui/button';
 import { isRenderer } from 'core/utils/type';
 import config from 'core/config';
 
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 QUnit.testStart(function() {
     const markup =
@@ -675,7 +675,7 @@ QUnit.module('Button', function() {
             });
             $('#input1').focus();
 
-            assert.equal(checkStyleHelper.getColor($template[0]), 'rgb(51, 51, 51)', 'color');
+            assert.equal(checkStyleHelper.getColor($template[0]), 'rgb(36, 36, 36)', 'color');
             assert.equal(checkStyleHelper.getBackgroundColor($template[0]), 'rgb(255, 255, 255)', 'backgroundColor');
             assert.equal(checkStyleHelper.getOverflowX($template[0].parentNode), 'visible', 'overflowX');
             assert.equal(checkStyleHelper.getTextOverflow($template[0].parentNode), 'clip', 'textOverflow');
@@ -690,8 +690,8 @@ QUnit.module('Button', function() {
             });
             $button.dxButton('instance').focus();
 
-            assert.strictEqual(checkStyleHelper.getColor($template[0]), 'rgb(51, 51, 51)', 'color');
-            assert.strictEqual(checkStyleHelper.getBackgroundColor($template[0]), 'rgb(235, 235, 235)', 'backgroundColor');
+            assert.strictEqual(checkStyleHelper.getColor($template[0]), 'rgb(36, 36, 36)', 'color');
+            assert.strictEqual(checkStyleHelper.getBackgroundColor($template[0]), 'rgb(245, 245, 245)', 'backgroundColor');
             assert.strictEqual(checkStyleHelper.getOverflowX($template[0].parentNode), 'hidden', 'overflowX');
             assert.strictEqual(checkStyleHelper.getTextOverflow($template[0].parentNode), 'ellipsis', 'textOverflow');
             assert.strictEqual(checkStyleHelper.getWhiteSpace($template[0].parentNode), 'nowrap', 'whiteSpace');
@@ -705,8 +705,8 @@ QUnit.module('Button', function() {
             });
             $button.dxButton('instance').focus();
 
-            assert.strictEqual(checkStyleHelper.getColor($template[0]), 'rgb(51, 51, 51)', 'color');
-            assert.strictEqual(checkStyleHelper.getBackgroundColor($template[0]), 'rgb(235, 235, 235)', 'backgroundColor');
+            assert.strictEqual(checkStyleHelper.getColor($template[0]), 'rgb(36, 36, 36)', 'color');
+            assert.strictEqual(checkStyleHelper.getBackgroundColor($template[0]), 'rgb(245, 245, 245)', 'backgroundColor');
             assert.strictEqual(checkStyleHelper.getOverflowX($template[0].parentNode), 'visible', 'overflowX');
             assert.strictEqual(checkStyleHelper.getTextOverflow($template[0].parentNode), 'clip', 'textOverflow');
             assert.strictEqual(checkStyleHelper.getWhiteSpace($template[0].parentNode), 'normal', 'whiteSpace');

packages/devextreme/testing/tests/DevExpress.ui.widgets/buttonGroup.markup.tests.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import 'ui/button';
 import 'ui/button_group';
 
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 const BUTTON_GROUP_CLASS = 'dx-buttongroup';
 const BUTTON_GROUP_WRAPPER_CLASS = BUTTON_GROUP_CLASS + '-wrapper';

packages/devextreme/testing/tests/DevExpress.ui.widgets/buttonGroup.selection.tests.js

@@ -3,7 +3,7 @@ import 'ui/button';
 import 'ui/button_group';
 import eventsEngine from 'common/core/events/core/events_engine';
 
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 const BUTTON_GROUP_CLASS = 'dx-buttongroup';
 const BUTTON_GROUP_ITEM_CLASS = BUTTON_GROUP_CLASS + '-item';

packages/devextreme/testing/tests/DevExpress.ui.widgets/buttonGroup.tests.js

@@ -8,7 +8,7 @@ import keyboardMock from '../../helpers/keyboardMock.js';
 import pointerMock from '../../helpers/pointerMock.js';
 import registerKeyHandlerTestHelper from '../../helpers/registerKeyHandlerTestHelper.js';
 
-import 'generic_light.css!';
+import 'fluent_blue_light.css!';
 
 const BUTTON_CLASS = 'dx-button';
 const BUTTON_CONTENT_CLASS = 'dx-button-content';
@@ -142,14 +142,10 @@ QUnit.module('option changed', {
             height: 500
         }).$element();
 
-        const buttons = $buttonGroup.find(`.${BUTTON_GROUP_ITEM_CLASS}`);
-
         assert.equal(getHeight($buttonGroup), 500, 'button group height is right');
-        assert.equal(getOuterHeight(buttons.eq(0)), 500, 'button group item height is right');
 
         this.buttonGroup.option('height', 700);
         assert.equal(getHeight($buttonGroup), 700, 'button group height is right');
-        assert.equal(getOuterHeight(buttons.eq(0)), 700, 'button group item height is right');
 
         this.buttonGroup.option('height', '');
         assert.notEqual(getHeight($buttonGroup), 700, 'button group height changed to default');