Skip to content

Commit fa0ecd8

Browse files
pharret31pharret31
authored
QUnit tests: ensure compatibility with Fluent and drop Generic theme testing (Navigation) (#31633) (#31657)
1 parent f3d6d54 commit fa0ecd8

37 files changed

+337
-400
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ require('ui/overlay/ui.overlay');
66
require('ui/slider');
77
require('integration/knockout');
88

9-
require('generic_light.css!');
9+
require('fluent_blue_light.css!');
1010

1111
const moduleWithoutCsp = QUnit.urlParams['nocsp'] ? QUnit.module : QUnit.module.skip;
1212

@@ -45,6 +45,6 @@ QUnit.test('slider within overlay does not properly display its current position
4545
const $handle = $container.find('.dx-slider .dx-slider-handle');
4646
const $sliderBar = $container.find('.dx-slider-bar');
4747
const handleCenter = $handle.position().left + $handle.outerWidth() / 2 + parseInt($handle.css('border-left-width'));
48-
assert.equal($sliderBar.outerWidth(), 100);
49-
assert.equal(handleCenter, 50);
48+
assert.equal($sliderBar.outerWidth(), 94);
49+
assert.equal(handleCenter, 48);
5050
});

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { getWidth } from 'core/utils/size';
22
import { EDITORS_WITHOUT_LABELS } from '__internal/ui/form/form.layout_manager.utils';
3-
import 'generic_light.css!';
3+
import 'fluent_blue_light.css!';
44
import $ from 'jquery';
55
import 'ui/autocomplete';
66
import 'ui/calendar';
@@ -295,6 +295,7 @@ function findLabelTextsInColumn($container, columnIndex) {
295295
QUnit.test('Align labels in column', function(assert) {
296296
const testContainer = $('#form');
297297
const form = testContainer.dxForm({
298+
labelLocation: 'left',
298299
formData: this.testObject,
299300
colCount: 4,
300301
customizeItem: function(item) {
@@ -358,6 +359,7 @@ QUnit.test('Align labels in column', function(assert) {
358359
QUnit.test('Align labels in column when labels text is identical', function(assert) {
359360
const testContainer = $('#form');
360361
const form = testContainer.dxForm({
362+
labelLocation: 'left',
361363
formData: { TestBool: true, ShipName: 'Test' }
362364
}).dxForm('instance');
363365

@@ -389,6 +391,7 @@ QUnit.test('Disable alignItemLabels in group', function(assert) {
389391
const testContainer = $('#form');
390392

391393
testContainer.dxForm({
394+
labelLocation: 'left',
392395
formData: { TestBool: true, ShipName: 'Test', Name: 'John', LastName: 'Smith' },
393396
items: [
394397
{
@@ -415,6 +418,7 @@ QUnit.test('Disable alignItemLabels in group', function(assert) {
415418
QUnit.test('Align labels in column when alignItemLabelsInAllGroups is enabled', function(assert) {
416419
const testContainer = $('#form');
417420
const form = testContainer.dxForm({
421+
labelLocation: 'left',
418422
colCount: 2,
419423
formData: {
420424
firstName: 'John',
@@ -543,6 +547,7 @@ QUnit.test('Align labels in column when alignItemLabelsInAllGroups is disabled',
543547
QUnit.test('Align labels in columns when there are rows', function(assert) {
544548
const testContainer = $('#form');
545549
const form = testContainer.dxForm({
550+
labelLocation: 'left',
546551
formData: this.testObject,
547552
colCount: 4,
548553
items: [{
@@ -603,6 +608,7 @@ QUnit.test('Align labels in columns when there are rows', function(assert) {
603608
QUnit.test('Align labels when layout is changed in responsive box_T306106', function(assert) {
604609
const testContainer = $('#form');
605610
const form = testContainer.dxForm({
611+
labelLocation: 'left',
606612
formData: this.testObject,
607613
colCount: 4,
608614
customizeItem: function(item) {
@@ -645,6 +651,7 @@ QUnit.test('Align labels when layout is changed when small window size by defaul
645651

646652
const testContainer = $('#form');
647653
const form = testContainer.dxForm({
654+
labelLocation: 'left',
648655
formData: this.testObject,
649656
colCount: 4,
650657
customizeItem: function(item) {
@@ -744,6 +751,7 @@ QUnit.test('required mark aligned', function(assert) {
744751

745752
QUnit.test('Align with "" required mark, T1031458', function(assert) {
746753
const $testContainer = $('#form').dxForm({
754+
labelLocation: 'left',
747755
width: 200,
748756
requiredMark: '',
749757
items: [{
@@ -761,6 +769,7 @@ QUnit.test('Align with "" required mark, T1031458', function(assert) {
761769

762770
QUnit.test('Align with " " required mark, T1031458', function(assert) {
763771
const $testContainer = $('#form').dxForm({
772+
labelLocation: 'left',
764773
width: 200,
765774
requiredMark: ' ',
766775
items: [{
@@ -778,6 +787,7 @@ QUnit.test('Align with " " required mark, T1031458', function(assert) {
778787

779788
QUnit.test('Align with "!" required mark, T1031458', function(assert) {
780789
const $testContainer = $('#form').dxForm({
790+
labelLocation: 'left',
781791
width: 200,
782792
requiredMark: '!',
783793
items: [{
@@ -795,6 +805,7 @@ QUnit.test('Align with "!" required mark, T1031458', function(assert) {
795805

796806
QUnit.test('Align with "×" required mark, T1031458', function(assert) {
797807
const $testContainer = $('#form').dxForm({
808+
labelLocation: 'left',
798809
width: 200,
799810
requiredMark: '×',
800811
items: [{
@@ -830,6 +841,7 @@ QUnit.test('optional mark aligned', function(assert) {
830841
QUnit.test('Check align labels', function(assert) {
831842
const testContainer = $('#form');
832843
const form = testContainer.dxForm({
844+
labelLocation: 'left',
833845
formData: {
834846
firstName: 'John',
835847
lastName: 'Smith',
@@ -899,6 +911,7 @@ QUnit.test('Check align labels when layout is changed by default_T306106', funct
899911

900912
const testContainer = $('#form');
901913
const form = testContainer.dxForm({
914+
labelLocation: 'left',
902915
formData: {
903916
firstName: 'John',
904917
lastName: 'Smith',
@@ -964,6 +977,7 @@ QUnit.test('Check align labels when layout is changed by default_T306106', funct
964977
QUnit.test('Check align labels when layout is changed_T306106', function(assert) {
965978
const testContainer = $('#form');
966979
const form = testContainer.dxForm({
980+
labelLocation: 'left',
967981
formData: {
968982
firstName: 'John',
969983
lastName: 'Smith',

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import typeUtils from 'core/utils/type';
77
import { extend } from 'core/utils/extend';
88
import visibilityEventsModule from 'common/core/events/visibility_change';
99
import { TABS_ITEM_CLASS } from '__internal/ui/tabs/tabs';
10-
import 'generic_light.css!';
10+
import 'fluent_blue_light.css!';
1111
import $ from 'jquery';
1212
import 'ui/autocomplete';
1313
import 'ui/calendar';
@@ -1009,6 +1009,7 @@ QUnit.test('Update layout inside a tab (T1040296)', function(assert) {
10091009
QUnit.module('T986577', () => {
10101010
function getFormConfig() {
10111011
return {
1012+
labelLocation: 'left',
10121013
width: 200,
10131014
screenByWidth: (_) => { return 'md'; },
10141015
colCountByScreen: {
@@ -1041,7 +1042,7 @@ QUnit.module('T986577', () => {
10411042
assert.equal(resizeEventSpy.called, 1, 'resize is triggered only once');
10421043
assert.deepEqual(resizeEventArg.get(0), $form.find(`.${TOOLBAR_CLASS}`).get(0), 'element is toolbar');
10431044
assert.roughEqual(getWidth(resizeEventArg), 164, 5, 'toolbar width is correct');
1044-
assert.roughEqual(getHeight(resizeEventArg), 36, 1, 'toolbar height is correct');
1045+
assert.roughEqual(getHeight(resizeEventArg), 48, 1, 'toolbar height is correct');
10451046

10461047
resizeEventSpy.restore();
10471048
});
@@ -1054,7 +1055,7 @@ QUnit.module('T986577', () => {
10541055
assert.equal(resizeEventSpy.called, 1, 'resize is triggered only once');
10551056
assert.deepEqual(resizeEventArg.get(0), $form.find(`.${TOOLBAR_CLASS}`).get(0), 'element is toolbar');
10561057
assert.roughEqual(getWidth(resizeEventArg), 72, 5, 'toolbar width is correct');
1057-
assert.roughEqual(getHeight(resizeEventArg), 36, 1, 'toolbar height is correct');
1058+
assert.roughEqual(getHeight(resizeEventArg), 48, 1, 'toolbar height is correct');
10581059

10591060
resizeEventSpy.restore();
10601061
});
@@ -3440,6 +3441,7 @@ QUnit.module('Form when rtlEnabled is true');
34403441

34413442
QUnit.test('required mark aligned when rtlEnabled option is set to true', function(assert) {
34423443
const $testContainer = $('#form').dxForm({
3444+
labelLocation: 'left',
34433445
requiredMark: '!',
34443446
rtlEnabled: true,
34453447
items: [{
@@ -3460,6 +3462,7 @@ QUnit.test('required mark aligned when rtlEnabled option is set to true', functi
34603462

34613463
QUnit.test('optional mark aligned when rtlEnabled option is set to true', function(assert) {
34623464
const $testContainer = $('#form').dxForm({
3465+
labelLocation: 'left',
34633466
optionalMark: 'optMark',
34643467
showOptionalMark: true,
34653468
rtlEnabled: true,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import fx from 'common/core/animation/fx';
2-
import 'generic_light.css!';
2+
import 'fluent_blue_light.css!';
33
import config from 'core/config';
44
import { getHeight } from 'core/utils/size';
55
import { deferUpdate, noop } from 'core/utils/common';
@@ -600,7 +600,7 @@ QUnit.module('widget options', moduleSetup, () => {
600600
assert.strictEqual(closedItems.length, 3);
601601

602602
for(let i = 0; i < closedItems.length; i++) {
603-
assert.roughEqual(closedItems.eq(i).outerHeight(), 42.4219, 1);
603+
assert.roughEqual(closedItems.eq(i).outerHeight(), 44, 1);
604604
}
605605
});
606606

@@ -1557,7 +1557,7 @@ QUnit.module('optionChanged', moduleSetup, () => {
15571557
assert.strictEqual($items.length, 2, '$items.length');
15581558

15591559
const item1 = $items.eq(0);
1560-
assert.roughEqual(item1.outerHeight(), 93, 1.001, 'items(0) has valid height');
1560+
assert.roughEqual(item1.outerHeight(), 88, 1.001, 'items(0) has valid height');
15611561
assert.strictEqual(item1.is('.' + [ACCORDION_ITEM_OPENED_CLASS, SELECTED_ITEM_CLASS].join('.')), true, 'items(0) should have each of these classes');
15621562
assert.strictEqual(!item1.is('.' + [HIDDEN_CLASS, ACCORDION_ITEM_CLOSED_CLASS].join(', .')), true, 'items(0) should not have no one of these classes');
15631563
assert.strictEqual(item1.attr('aria-selected'), 'true', 'items(0) should have aria-selected=true');

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import dxButton from 'ui/button';
1313
import { isRenderer } from 'core/utils/type';
1414
import config from 'core/config';
1515

16-
import 'generic_light.css!';
16+
import 'fluent_blue_light.css!';
1717

1818
QUnit.testStart(function() {
1919
const markup =
@@ -675,7 +675,7 @@ QUnit.module('Button', function() {
675675
});
676676
$('#input1').focus();
677677

678-
assert.equal(checkStyleHelper.getColor($template[0]), 'rgb(51, 51, 51)', 'color');
678+
assert.equal(checkStyleHelper.getColor($template[0]), 'rgb(36, 36, 36)', 'color');
679679
assert.equal(checkStyleHelper.getBackgroundColor($template[0]), 'rgb(255, 255, 255)', 'backgroundColor');
680680
assert.equal(checkStyleHelper.getOverflowX($template[0].parentNode), 'visible', 'overflowX');
681681
assert.equal(checkStyleHelper.getTextOverflow($template[0].parentNode), 'clip', 'textOverflow');
@@ -690,8 +690,8 @@ QUnit.module('Button', function() {
690690
});
691691
$button.dxButton('instance').focus();
692692

693-
assert.strictEqual(checkStyleHelper.getColor($template[0]), 'rgb(51, 51, 51)', 'color');
694-
assert.strictEqual(checkStyleHelper.getBackgroundColor($template[0]), 'rgb(235, 235, 235)', 'backgroundColor');
693+
assert.strictEqual(checkStyleHelper.getColor($template[0]), 'rgb(36, 36, 36)', 'color');
694+
assert.strictEqual(checkStyleHelper.getBackgroundColor($template[0]), 'rgb(245, 245, 245)', 'backgroundColor');
695695
assert.strictEqual(checkStyleHelper.getOverflowX($template[0].parentNode), 'hidden', 'overflowX');
696696
assert.strictEqual(checkStyleHelper.getTextOverflow($template[0].parentNode), 'ellipsis', 'textOverflow');
697697
assert.strictEqual(checkStyleHelper.getWhiteSpace($template[0].parentNode), 'nowrap', 'whiteSpace');
@@ -705,8 +705,8 @@ QUnit.module('Button', function() {
705705
});
706706
$button.dxButton('instance').focus();
707707

708-
assert.strictEqual(checkStyleHelper.getColor($template[0]), 'rgb(51, 51, 51)', 'color');
709-
assert.strictEqual(checkStyleHelper.getBackgroundColor($template[0]), 'rgb(235, 235, 235)', 'backgroundColor');
708+
assert.strictEqual(checkStyleHelper.getColor($template[0]), 'rgb(36, 36, 36)', 'color');
709+
assert.strictEqual(checkStyleHelper.getBackgroundColor($template[0]), 'rgb(245, 245, 245)', 'backgroundColor');
710710
assert.strictEqual(checkStyleHelper.getOverflowX($template[0].parentNode), 'visible', 'overflowX');
711711
assert.strictEqual(checkStyleHelper.getTextOverflow($template[0].parentNode), 'clip', 'textOverflow');
712712
assert.strictEqual(checkStyleHelper.getWhiteSpace($template[0].parentNode), 'normal', 'whiteSpace');

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import $ from 'jquery';
22
import 'ui/button';
33
import 'ui/button_group';
44

5-
import 'generic_light.css!';
5+
import 'fluent_blue_light.css!';
66

77
const BUTTON_GROUP_CLASS = 'dx-buttongroup';
88
const BUTTON_GROUP_WRAPPER_CLASS = BUTTON_GROUP_CLASS + '-wrapper';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import 'ui/button';
33
import 'ui/button_group';
44
import eventsEngine from 'common/core/events/core/events_engine';
55

6-
import 'generic_light.css!';
6+
import 'fluent_blue_light.css!';
77

88
const BUTTON_GROUP_CLASS = 'dx-buttongroup';
99
const BUTTON_GROUP_ITEM_CLASS = BUTTON_GROUP_CLASS + '-item';

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import keyboardMock from '../../helpers/keyboardMock.js';
88
import pointerMock from '../../helpers/pointerMock.js';
99
import registerKeyHandlerTestHelper from '../../helpers/registerKeyHandlerTestHelper.js';
1010

11-
import 'generic_light.css!';
11+
import 'fluent_blue_light.css!';
1212

1313
const BUTTON_CLASS = 'dx-button';
1414
const BUTTON_CONTENT_CLASS = 'dx-button-content';
@@ -142,14 +142,10 @@ QUnit.module('option changed', {
142142
height: 500
143143
}).$element();
144144

145-
const buttons = $buttonGroup.find(`.${BUTTON_GROUP_ITEM_CLASS}`);
146-
147145
assert.equal(getHeight($buttonGroup), 500, 'button group height is right');
148-
assert.equal(getOuterHeight(buttons.eq(0)), 500, 'button group item height is right');
149146

150147
this.buttonGroup.option('height', 700);
151148
assert.equal(getHeight($buttonGroup), 700, 'button group height is right');
152-
assert.equal(getOuterHeight(buttons.eq(0)), 700, 'button group item height is right');
153149

154150
this.buttonGroup.option('height', '');
155151
assert.notEqual(getHeight($buttonGroup), 700, 'button group height changed to default');

0 commit comments

Comments
 (0)