diff --git a/packages/devextreme/testing/tests/DevExpress.knockout/fieldset_bundled.generic.tests.js b/packages/devextreme/testing/tests/DevExpress.knockout/fieldset_bundled.generic.tests.js deleted file mode 100644 index 4ccbc4bca41d..000000000000 --- a/packages/devextreme/testing/tests/DevExpress.knockout/fieldset_bundled.generic.tests.js +++ /dev/null @@ -1,4 +0,0 @@ -require('generic_light.css!'); - -const testFieldsetsOnPlatform = require('./fieldsetParts/shared.js'); -testFieldsetsOnPlatform('generic.light', { testSwitchBaseline: false }); diff --git a/packages/devextreme/testing/tests/DevExpress.knockout/fieldsetParts/shared.js b/packages/devextreme/testing/tests/DevExpress.knockout/fieldset_bundled.tests.js similarity index 92% rename from packages/devextreme/testing/tests/DevExpress.knockout/fieldsetParts/shared.js rename to packages/devextreme/testing/tests/DevExpress.knockout/fieldset_bundled.tests.js index af43c23b23b2..fca674de95b1 100644 --- a/packages/devextreme/testing/tests/DevExpress.knockout/fieldsetParts/shared.js +++ b/packages/devextreme/testing/tests/DevExpress.knockout/fieldset_bundled.tests.js @@ -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'); @@ -146,10 +147,10 @@ const checkThatTestingIsPossible = function() { return true; }; -const defaultOptions = { +const options = { numberBoxAlign: 'right', testVerticalOffset: true, - testSwitchBaseline: true, + testSwitchBaseline: false, testDateBox: true }; @@ -180,7 +181,7 @@ const testBaselineOffset = function($labelContainer, $valueContainer) { $imgForInput = $('').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(); @@ -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); @@ -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')); @@ -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'); @@ -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'); @@ -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) { @@ -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) { @@ -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) { @@ -443,3 +450,5 @@ module.exports = function(themeName, options) { runTestModule(); }; + +testFieldsetsOnPlatform(); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/slider.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/slider.tests.js index 67646d83cdef..96f4a03c88c8 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/slider.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/slider.tests.js @@ -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'; @@ -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 = ` @@ -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) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textArea.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textArea.tests.js index 777db79aacbb..747bdcd4e402 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textArea.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/textArea.tests.js @@ -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'; @@ -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) { @@ -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'); }); }); @@ -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'); }); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageUploadIntegration.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageUploadIntegration.tests.js index a37e42942c78..ca77332ea74e 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageUploadIntegration.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/imageUploadIntegration.tests.js @@ -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'); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/resizingIntegration.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/resizingIntegration.tests.js index 013b88b365f9..fac8380642c7 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/resizingIntegration.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/resizingIntegration.tests.js @@ -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() { @@ -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) { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableProperties.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableProperties.tests.js index de53c281c303..081bfa223fe7 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableProperties.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableProperties.tests.js @@ -181,7 +181,7 @@ module('Table properties forms', { assert.strictEqual(backgroundColorEditor.option('value'), tableBackgroundColor, 'backgroundColorEditor value is correct'); assert.strictEqual(alignmentEditor.option('selectedItemKeys')[0], 'left', 'alignmentEditor selectedItemKeys is correct'); assert.roughEqual(heightEditor.option('value'), 73, 3, 'heightEditor value is correct'); - assert.roughEqual(widthEditor.option('value'), 400, 3, 'widthEditor value is correct'); + assert.roughEqual(widthEditor.option('value'), 397, 3, 'widthEditor value is correct'); }); test('Check properties edititng at the table Form (without dimensions)', function(assert) { @@ -368,7 +368,7 @@ module('Table properties forms', { assert.strictEqual(borderStyleEditor.option('value'), 'solid', 'borderStyleEditor value is correct'); assert.strictEqual(borderWidthEditor.option('value'), 1, 'borderWidthEditor value is correct'); - assert.strictEqual(borderColorEditor.option('value'), 'rgb(221, 221, 221)', 'borderColorEditor value is correct'); + assert.strictEqual(borderColorEditor.option('value'), 'rgb(224, 224, 224)', 'borderColorEditor value is correct'); assert.strictEqual(backgroundColorEditor.option('value'), 'rgba(0, 0, 0, 0)', 'backgroundColorEditor value is correct'); assert.strictEqual(horizontalPaddingEditor.option('value'), 5, 'horizontalPaddingEditor value is correct'); assert.strictEqual(verticalPaddingEditor.option('value'), 2, 'verticalPaddingEditor value is correct'); @@ -621,7 +621,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'); }); @@ -704,8 +704,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) { @@ -739,9 +739,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'); }); @@ -772,11 +772,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) { @@ -795,11 +795,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) { @@ -832,9 +832,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) { @@ -991,11 +991,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) { @@ -1050,7 +1050,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'); @@ -1130,8 +1130,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'); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableResizingIntegration.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableResizingIntegration.tests.js index 6fc15c7a1004..2084e035dce2 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableResizingIntegration.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableResizingIntegration.tests.js @@ -20,6 +20,7 @@ const DX_HIGHLIGHTED_COLUMN_CLASS = 'dx-htmleditor-highlighted-column'; const TIME_TO_WAIT = 200; const DRAGGABLE_ELEMENT_OFFSET = 2; +const HTML_EDITOR_CONTENT_MARGIN = 1; const TABLE_BORDERS = 1; const tableMarkup = '\ @@ -381,10 +382,10 @@ module('Table resizing integration', { const tablePosition = getBoundingRect(this.$element.find('table').get(0)); const framePosition = getBoundingRect($resizeFrame.get(0)); - assert.strictEqual(tablePosition.left, framePosition.left, 'Left is correrct'); - assert.strictEqual(tablePosition.top, framePosition.top, 'Top is correrct'); - assert.strictEqual(tablePosition.height, framePosition.height, 'Height is correrct'); - assert.strictEqual(tablePosition.width, framePosition.width, 'Width is correrct'); + assert.strictEqual(tablePosition.left, framePosition.top, 'Left is correct'); + assert.strictEqual(tablePosition.top - HTML_EDITOR_CONTENT_MARGIN, framePosition.top, 'Top is correct'); + assert.strictEqual(tablePosition.height, framePosition.height, 'Height is correct'); + assert.strictEqual(tablePosition.width, framePosition.width, 'Width is correct'); }); test('Check table resize frame position after content height changes', function(assert) { @@ -401,10 +402,10 @@ module('Table resizing integration', { const rowBorderOffsets = getRowBordersOffset(this.$element.find('table').eq(0)); const $rowResizerElements = $resizeFrame.find(`.${DX_ROW_RESIZER_CLASS}`); - assert.strictEqual(tablePosition.left, framePosition.left, 'Left is correrct'); - assert.strictEqual(tablePosition.top, framePosition.top, 'Top is correrct'); - assert.strictEqual(tablePosition.height, framePosition.height, 'Height is correrct'); - assert.strictEqual(tablePosition.width, framePosition.width, 'Width is correrct'); + assert.strictEqual(tablePosition.left, framePosition.left, 'Left is correct'); + assert.strictEqual(tablePosition.top - HTML_EDITOR_CONTENT_MARGIN, framePosition.top, 'Top is correct'); + assert.strictEqual(tablePosition.height, framePosition.height, 'Height is correct'); + assert.strictEqual(tablePosition.width, framePosition.width, 'Width is correct'); checkResizerPositions(assert, $rowResizerElements, rowBorderOffsets, 'top'); }); @@ -439,7 +440,7 @@ module('Table resizing integration', { const tablePosition = getBoundingRect(this.$element.find('table').get(0)); const framePosition = getBoundingRect($resizeFrame.get(0)); - assert.strictEqual(tablePosition.top, framePosition.top, 'Frame top position is correrct'); + assert.strictEqual(tablePosition.top - HTML_EDITOR_CONTENT_MARGIN, framePosition.top, 'Frame top position is correct'); }); }); @@ -479,8 +480,8 @@ module('Table resizing integration', { checkResizerPositions(assert, $columnResizerElements, columnBorderOffsets); - assert.roughEqual(columnBorderOffsets[0], 150, 2.01); - assert.roughEqual(columnBorderOffsets[1], 200, 2.01); + assert.roughEqual(columnBorderOffsets[0], 150, 4.01); + assert.roughEqual(columnBorderOffsets[1], 200, 4.01); }); test('The widget raise valueChange event after resizing (T1041884)', function(assert) { @@ -543,8 +544,8 @@ module('Table resizing integration', { checkResizerPositions(assert, $columnResizerElements, columnBorderOffsets); - assert.roughEqual(columnBorderOffsets[0], 150, 2.01); - assert.roughEqual(columnBorderOffsets[1], 200, 2.01); + assert.roughEqual(columnBorderOffsets[0], 150, 4.01); + assert.roughEqual(columnBorderOffsets[1], 200, 4.01); }); test('Frame should change height if the table height is changed by horizontal drag', function(assert) { @@ -689,6 +690,7 @@ module('Table resizing integration', { this.instance.option('tableResizing.minColumnWidth', 50); const $table = this.$element.find('table'); + const initialWidth = $table.find('tr').eq(0).find('td:last-child').outerWidth(); $columnResizerElements.eq(3) .trigger('dxpointerdown'); @@ -705,7 +707,7 @@ module('Table resizing integration', { this.clock.tick(TIME_TO_WAIT); - assert.roughEqual($table.find('tr').eq(0).find('td:last-child').outerWidth(), 50, 3); + assert.roughEqual($table.find('tr').eq(0).find('td:last-child').outerWidth(), initialWidth - 30, 3); assert.ok(checkingElement.is(':visible')); }); @@ -775,7 +777,7 @@ module('Table resizing integration', { .start() .dragStart(); - dragLoop(pointerMockInstance, 5, [-20, 0]); + dragLoop(pointerMockInstance, 5, [-19, 0]); this.clock.tick(TIME_TO_WAIT); @@ -815,9 +817,9 @@ module('Table resizing integration', { const columnBorderOffsets = getColumnBordersOffset($table); const $highlightedElement = this.$element.find(`.${DX_HIGHLIGHTED_COLUMN_CLASS}`); - assert.roughEqual(columnBorderOffsets[0], 160, 3); + assert.roughEqual(columnBorderOffsets[0], 140, 3); assert.roughEqual(columnBorderOffsets[1], 200, 3); - assert.roughEqual(parseInt($highlightedElement.css('left')), 160, 3); + assert.roughEqual(parseInt($highlightedElement.css('left')), 140, 3); PointerMock($draggableElement).dragEnd(); }); @@ -1477,7 +1479,7 @@ module('Table resizing integration', { $table = this.$element.find('table'); - assert.roughEqual($table.outerWidth(), startTableWidth, 2.01, 'Table width is not changed'); + assert.roughEqual($table.outerWidth(), startTableWidth, 4.01, 'Table width is not changed'); }); test('Column resizers should be updated after a some columns insert', function(assert) { @@ -1594,7 +1596,7 @@ module('Table resizing integration', { checkResizerPositions(assert, $columnResizerElements, columnBorderOffsets); - assert.roughEqual($table.outerWidth(), tableWidth, 2, 'Table width is not changed'); + assert.roughEqual($table.outerWidth(), tableWidth, 3, 'Table width is not changed'); }); test('Table should save custom row height after the first row deletion', function(assert) { @@ -1653,10 +1655,10 @@ module('Table resizing integration', { const tablePosition = getBoundingRect(this.$element.find('table').get(1)); const framePosition = getBoundingRect($resizeFrame.get(1)); - assert.strictEqual(tablePosition.left, framePosition.left, 'Left is correrct'); - assert.strictEqual(tablePosition.top, framePosition.top, 'Top is correrct'); - assert.strictEqual(tablePosition.height, framePosition.height, 'Height is correrct'); - assert.strictEqual(tablePosition.width, framePosition.width, 'Width is correrct'); + assert.strictEqual(tablePosition.left, framePosition.left, 'Left is correct'); + assert.strictEqual(tablePosition.top - HTML_EDITOR_CONTENT_MARGIN, framePosition.top, 'Top is correct'); + assert.strictEqual(tablePosition.height, framePosition.height, 'Height is correct'); + assert.strictEqual(tablePosition.width, framePosition.width, 'Width is correct'); }); test('Row resizers should be updated on the table structure update after resize', function(assert) { @@ -1889,9 +1891,9 @@ module('Table resizing integration', { setTimeout(() => { - assert.roughEqual($columns.eq(2).outerWidth(), 60, 2, 'Changes is reverted for the resized column'); - assert.roughEqual($columns.eq(3).outerWidth(), 140, 2, 'Changes is reverted for the next column'); - assert.roughEqual($table.outerWidth(), 400, 2, 'Table width is correct'); + assert.roughEqual($columns.eq(2).outerWidth(), 60, 4, 'Changes is reverted for the resized column'); + assert.roughEqual($columns.eq(3).outerWidth(), 140, 4, 'Changes is reverted for the next column'); + assert.roughEqual($table.outerWidth(), 400, 4, 'Table width is correct'); done(); }, TIME_TO_WAIT); @@ -1930,10 +1932,10 @@ module('Table resizing integration', { setTimeout(() => { $table.find('tr').eq(0).find('td').each((i, columnElement) => { - assert.roughEqual($(columnElement).outerWidth(), 100, 2, 'Column has expected width, index = ' + i); + assert.roughEqual($(columnElement).outerWidth(), 100, 4, 'Column has expected width, index = ' + i); }); - assert.roughEqual($table.outerWidth(), 400, 2, 'Table width is correct'); + assert.roughEqual($table.outerWidth(), 400, 4, 'Table width is correct'); done(); }, TIME_TO_WAIT); @@ -1975,10 +1977,10 @@ module('Table resizing integration', { setTimeout(() => { $table.find('tr').eq(0).find('td').each((i, columnElement) => { - assert.roughEqual($(columnElement).outerWidth(), expectedWidths[i], 2, 'Column has expected width, index = ' + i); + assert.roughEqual($(columnElement).outerWidth(), expectedWidths[i], 4, 'Column has expected width, index = ' + i); }); - assert.roughEqual($table.outerWidth(), 360, 2, 'Table width is correct'); + assert.roughEqual($table.outerWidth(), 360, 4, 'Table width is correct'); done(); }, TIME_TO_WAIT); @@ -2101,10 +2103,10 @@ module('Table resizing integration', { setTimeout(() => { $table.find('tr').eq(0).find('td').each((i, columnElement) => { - assert.roughEqual($(columnElement).outerWidth(), expectedWidths[i], 2, 'Column has expected width, index = ' + i); + assert.roughEqual($(columnElement).outerWidth(), expectedWidths[i], 4, 'Column has expected width, index = ' + i); }); - assert.roughEqual($table.outerWidth(), 240, 2, 'Table width is correct'); + assert.roughEqual($table.outerWidth(), 240, 4, 'Table width is correct'); done(); }, TIME_TO_WAIT); @@ -2191,8 +2193,8 @@ module('Table resizing integration', { checkResizerPositions(assert, $columnResizerElements, columnBorderOffsets, 'right'); - assert.roughEqual(columnBorderOffsets[0], 70, 3); - assert.roughEqual(columnBorderOffsets[1], 200, 3); + assert.roughEqual(columnBorderOffsets[0], 70, 4); + assert.roughEqual(columnBorderOffsets[1], 200, 4); }); test('Columns resizers should be positioned correctly if the rtl mode is enabled at runtime', function(assert) { @@ -2240,8 +2242,8 @@ module('Table resizing integration', { checkResizerPositions(assert, $columnResizerElements, columnBorderOffsets, 'right'); - assert.roughEqual(columnBorderOffsets[0], 70, 3); - assert.roughEqual(columnBorderOffsets[1], 200, 3); + assert.roughEqual(columnBorderOffsets[0], 70, 4); + assert.roughEqual(columnBorderOffsets[1], 200, 4); }); }); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarIntegration.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarIntegration.tests.js index 0f1fd42015ff..c8fc091a85be 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarIntegration.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarIntegration.tests.js @@ -321,7 +321,7 @@ export default function() { const buttonContent = $('#htmlEditor') .find(`.${DROPDOWNMENU_CLASS} .${BUTTON_CONTENT_CLASS}`) .html(); - const expectedContent = ''; + const expectedContent = '
'; assert.equal(buttonContent, expectedContent); }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarModule.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarModule.tests.js index f644f7370438..4c7d92409628 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarModule.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarModule.tests.js @@ -1,6 +1,6 @@ import $ from 'jquery'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; import 'ui/select_box'; import '__internal/ui/color_box/m_color_view'; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/detailsView.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/detailsView.tests.js index 60ad80cdcf29..6306f1bd0ed6 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/detailsView.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/detailsView.tests.js @@ -798,7 +798,7 @@ QUnit.module('Details View', moduleConfig, () => { const fileManager = this.wrapper.getInstance(); fileManager.option({ width: 500, - height: 250, + height: 300, fileSystemProvider: createHugeFileSystem(), itemView: { showParentFolder: true @@ -839,7 +839,7 @@ QUnit.module('Details View', moduleConfig, () => { const fileManager = this.wrapper.getInstance(); fileManager.option({ width: 500, - height: 250, + height: 300, fileSystemProvider: createHugeFileSystem(), itemView: { showParentFolder: true diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/markup.tests.js index 8f624000ac21..8a4f09a4c016 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/markup.tests.js @@ -8,7 +8,7 @@ import windowUtils from 'core/utils/window'; import { FileManagerWrapper, createTestFileSystem, Consts } from '../../../helpers/fileManagerHelpers.js'; import devices from '__internal/core/m_devices'; -import 'generic_light.css!'; +import 'fluent_blue_light.css!'; const getDefaultConfig = () => { return { diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/progressPanel.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/progressPanel.tests.js index a05552b84601..0d272816e69a 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/progressPanel.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/fileManagerParts/progressPanel.tests.js @@ -740,8 +740,8 @@ QUnit.module('Progress panel integration tests', integrationModuleConfig, () => const details = infos[0].details; assert.equal(details.length, 1, 'one detail item rendered'); - assert.strictEqual(details[0].$image.css('width'), '36px', 'detail item icon has correct width'); - assert.strictEqual(details[0].$image.css('height'), '36px', 'detail item icon has correct height'); + assert.strictEqual(details[0].$image.css('width'), '40px', 'detail item icon has correct width'); + assert.strictEqual(details[0].$image.css('height'), '40px', 'detail item icon has correct height'); }); test('upload operation must be finalized correctly when notifications.showPanel is false (T1136702)', function(assert) {