diff --git a/apps/demos/testing/common.test.js b/apps/demos/testing/common.test.js index d7c0b22b13eb..d692da58802e 100644 --- a/apps/demos/testing/common.test.js +++ b/apps/demos/testing/common.test.js @@ -125,6 +125,9 @@ const SKIPPED_TESTS = { ], VectorMap: [ { demo: 'Palette', themes: [THEME.material] }, + { demo: 'Overview', themes: [THEME.material] }, + { demo: 'PieMarkers', themes: [THEME.material] }, + { demo: 'AreaWithLabelsAndTwoLegends', themes: [THEME.material] }, { demo: 'CustomAnnotations', themes: [THEME.material] }, { demo: 'CustomProjection', themes: [THEME.material] }, { demo: 'MultipleLayers', themes: [THEME.material] }, @@ -139,6 +142,7 @@ const SKIPPED_TESTS = { ], DataGrid: [ { demo: 'SignalRService', themes: [THEME.material, THEME.fluent] }, + { demo: 'EditStateManagement', themes: [THEME.material] }, { demo: 'MultipleRecordSelectionModes', themes: [THEME.fluent] }, { demo: 'ToolbarCustomization', themes: [THEME.fluent, THEME.material] }, { demo: 'MultipleRecordSelectionAPI', themes: [THEME.material] }, @@ -174,6 +178,7 @@ const SKIPPED_TESTS = { { demo: 'LayoutCustomization', themes: [THEME.material] }, ], Gauges: [ + { demo: 'VariableNumberOfSubvalueIndicators', themes: [THEME.material] }, { demo: 'DifferentValueIndicatorTypesLinearGauge', themes: [THEME.material] }, { demo: 'ScaleLabelFormatting', themes: [THEME.material] }, ], @@ -186,6 +191,7 @@ const SKIPPED_TESTS = { { demo: 'Colorization', themes: [THEME.material] }, { demo: 'SignalRService', themes: [THEME.material] }, { demo: 'PointsAggregation', themes: [THEME.material] }, + { demo: 'SubvalueIndicatorTextFormatting', themes: [THEME.material] }, { demo: 'AxisLabelsOverlapping', themes: [THEME.material] }, { demo: 'ServerSideDataProcessing', themes: [THEME.material] }, { demo: 'PiesWithEqualSize', themes: [THEME.material] }, @@ -196,6 +202,7 @@ const SKIPPED_TESTS = { ], DataGrid: [ { demo: 'SignalRService', themes: [THEME.fluent, THEME.material] }, + { demo: 'EditStateManagement', themes: [THEME.material] }, { demo: 'ToolbarCustomization', themes: [THEME.fluent, THEME.material] }, { demo: 'MultipleRecordSelectionModes', themes: [THEME.fluent] }, { demo: 'FilteringAPI', themes: [THEME.material] }, @@ -229,6 +236,7 @@ const SKIPPED_TESTS = { Gauges: [ { demo: 'Overview', themes: [THEME.material] }, { demo: 'ScaleLabelFormatting', themes: [THEME.material] }, + { demo: 'SubvalueIndicatorTextFormatting', themes: [THEME.material] }, { demo: 'DifferentValueIndicatorTypes', themes: [THEME.material] }, { demo: 'DifferentValueIndicatorTypesLinearGauge', themes: [THEME.material] }, ], @@ -242,6 +250,8 @@ const SKIPPED_TESTS = { ], VectorMap: [ { demo: 'CustomProjection', themes: [THEME.material] }, + { demo: 'Spline', themes: [THEME.material] }, + { demo: 'Palette', themes: [THEME.material] }, { demo: 'Overview', themes: [THEME.material] }, { demo: 'PieMarkers', themes: [THEME.material] }, { demo: 'TooltipHTMLSupport', themes: [THEME.material] }, @@ -250,6 +260,7 @@ const SKIPPED_TESTS = { { demo: 'AreaWithLabelsAndTwoLegends', themes: [THEME.material] }, ], Gantt: [ + { demo: 'ContextMenu', themes: [THEME.material] }, { demo: 'Validation', themes: [THEME.generic, THEME.material, THEME.fluent] }, { demo: 'TaskTemplate', themes: [THEME.generic, THEME.material, THEME.fluent] }, ], diff --git a/apps/demos/utils/visual-tests/matrix-test-helper.js b/apps/demos/utils/visual-tests/matrix-test-helper.js index 7ee9916ea47e..ff6036ed266d 100644 --- a/apps/demos/utils/visual-tests/matrix-test-helper.js +++ b/apps/demos/utils/visual-tests/matrix-test-helper.js @@ -307,6 +307,7 @@ const SKIPPED_TESTS = { Charts: [ { demo: 'Overview', themes: [THEME.material] }, { demo: 'ZoomingAndScrollingAPI', themes: [THEME.material] }, + { demo: 'CustomLegendMarkers', themes: [THEME.material] }, ], DataGrid: [ { demo: 'BatchEditing', themes: [THEME.fluent] }, diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (fluent-blue-light).png index e727bc371243..b1c44b928235 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (generic-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (generic-light).png index d17da80ea69d..68729eacb680 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (generic-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (material-blue-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (material-blue-light).png index 2c38ce5b5e98..a1bd71b4aef2 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (material-blue-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist appearance in RTL mode (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-dark).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-dark).png index 0ae55fd970e3..4fe80d4cafc7 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-dark).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-dark).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light).png index c961a032c5c9..fba14eba43de 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light-compact).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light-compact).png index d74bca85fa61..68618e80ae81 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light-compact).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (fluent-blue-light-compact).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-dark).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-dark).png index c0c87cca3890..e600f27969fa 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-dark).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-dark).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-light).png index a050cd635ffa..3532286f2b71 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-light-compact).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-light-compact).png index cf169786b383..69134172dfa4 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-light-compact).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (generic-light-compact).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-dark).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-dark).png index 5e79a9a71d14..0cb6d3ee414b 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-dark).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-dark).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light).png index 13a1061fb46f..82a91ad02104 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light-compact).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light-compact).png index 9226de576ac3..b3e16687d7d5 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light-compact).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with long text in error (material-blue-light-compact).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (fluent-blue-light).png index d10e4775b57a..eaa320490d26 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (generic-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (generic-light).png index d000ffc07925..09c662e02799 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (generic-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (material-blue-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (material-blue-light).png index 46cc14a78aa2..18367a08d2a4 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (material-blue-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Alertlist with one error (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/etalons/Typing indicator with a lot of items (material-blue-light).png b/e2e/testcafe-devextreme/tests/chat/etalons/Typing indicator with a lot of items (material-blue-light).png index d54feb083b42..e47376b653fe 100644 Binary files a/e2e/testcafe-devextreme/tests/chat/etalons/Typing indicator with a lot of items (material-blue-light).png and b/e2e/testcafe-devextreme/tests/chat/etalons/Typing indicator with a lot of items (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/chat/messageList.ts b/e2e/testcafe-devextreme/tests/chat/messageList.ts index 2c5a35f3cbf6..73c71a63ffc8 100644 --- a/e2e/testcafe-devextreme/tests/chat/messageList.ts +++ b/e2e/testcafe-devextreme/tests/chat/messageList.ts @@ -154,9 +154,7 @@ test('Messagelist should scrolled to the latest messages after being rendered in test('Messagelist with loadindicator appearance on initial loading', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - const chat = new Chat('#container'); - await chat.repaint(); await testScreenshot(t, takeScreenshot, 'Messagelist loadindicator position on initial loading.png', { element: '#container' }); await t diff --git a/e2e/testcafe-devextreme/tests/chat/typingIndicator.ts b/e2e/testcafe-devextreme/tests/chat/typingIndicator.ts index 62875ae649e9..6f545352b115 100644 --- a/e2e/testcafe-devextreme/tests/chat/typingIndicator.ts +++ b/e2e/testcafe-devextreme/tests/chat/typingIndicator.ts @@ -88,6 +88,7 @@ test('Chat: typing indicator', async (t) => { await testScreenshot(t, takeScreenshot, 'Typing indicator with 1 user.png', { element: '#chat' }); const chat = new Chat('#chat'); + await chat.repaint(); const userFirst = createUser(1, 'Camille'); const userSecond = createUser(2, 'Sophie'); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/row_selection_with_sticky_columns_1_(material.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/row_selection_with_sticky_columns_1_(material.blue.light).png index f260bab869de..f86a5b39652e 100644 Binary files a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/row_selection_with_sticky_columns_1_(material.blue.light).png and b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/row_selection_with_sticky_columns_1_(material.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/row_selection_with_sticky_columns_2_(material.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/row_selection_with_sticky_columns_2_(material.blue.light).png index 66ea51e1f47a..7e6d9f525474 100644 Binary files a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/row_selection_with_sticky_columns_2_(material.blue.light).png and b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/row_selection_with_sticky_columns_2_(material.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/form.labelMode.ts b/e2e/testcafe-devextreme/tests/form/form.labelMode.ts index 818b8d94fbd0..5d58561ba9de 100644 --- a/e2e/testcafe-devextreme/tests/form/form.labelMode.ts +++ b/e2e/testcafe-devextreme/tests/form/form.labelMode.ts @@ -1,8 +1,11 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; +import { ClientFunction } from 'testcafe'; import url from '../../helpers/getPageUrl'; import { createWidget } from '../../helpers/createWidget'; import { isMaterialBased, testScreenshot } from '../../helpers/themeUtils'; +const waitFont = ClientFunction(() => (window as any).DevExpress.ui.themes.waitWebFont('Item123somevalu*op ', 400)); + fixture.disablePageReloads`Form` .page(url(__dirname, '../container.html')); @@ -33,229 +36,233 @@ fixture.disablePageReloads`Form` await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); - }).before(async () => createWidget('dxForm', { - width: 1100, - height: 800, - labelMode: formLabelMode, - labelLocation: formLabelLocation, - colCount: 3, - items: [ - { - dataField: 'field1', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxAutocomplete', - editorOptions: { - items: ['1', '2'], - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field2', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxTextBox', - editorOptions: { - value: 'dxTextBox', - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field3', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxCheckBox', - editorOptions: { - value: true, - text: 'dxCheckBox', - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field4', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxColorBox', - editorOptions: { - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field5', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxDateBox', - editorOptions: { - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field6', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxDropDownBox', - editorOptions: { - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field7', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxTextArea', - editorOptions: { - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field8', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxLookup', - editorOptions: { - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field9', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxNumberBox', - editorOptions: { - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field10', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxRadioGroup', - editorOptions: { - items: ['1', '2'], - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field11', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxRangeSlider', - editorOptions: { - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field12', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxSelectBox', - editorOptions: { - items: ['1', '2'], - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field13', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxSlider', - editorOptions: { - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field14', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxSwitch', - editorOptions: { - value: true, - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field15', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxTagBox', - editorOptions: { - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - { - dataField: 'field16', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxHtmlEditor', - editorOptions: { - labelMode: editorLabelMode, - height: 100, - stylingMode: editorStylingMode, - toolbar: { items: ['undo', 'redo', 'separator', 'insertTable', 'deleteTable', 'insertRowAbove', 'insertRowBelow', 'deleteRow'] }, - }, - }, - { - dataField: 'field17', - label: { - visible: labelVisible, - alignment: labelAlignment, - }, - editorType: 'dxCalendar', - editorOptions: { - value: new Date(2021, 9, 17), - labelMode: editorLabelMode, - stylingMode: editorStylingMode, - }, - }, - ], - })); + }).before(async () => { + await waitFont(); + + return createWidget('dxForm', { + width: 1100, + height: 800, + labelMode: formLabelMode, + labelLocation: formLabelLocation, + colCount: 3, + items: [ + { + dataField: 'field1', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxAutocomplete', + editorOptions: { + items: ['1', '2'], + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field2', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxTextBox', + editorOptions: { + value: 'dxTextBox', + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field3', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxCheckBox', + editorOptions: { + value: true, + text: 'dxCheckBox', + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field4', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxColorBox', + editorOptions: { + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field5', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxDateBox', + editorOptions: { + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field6', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxDropDownBox', + editorOptions: { + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field7', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxTextArea', + editorOptions: { + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field8', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxLookup', + editorOptions: { + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field9', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxNumberBox', + editorOptions: { + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field10', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxRadioGroup', + editorOptions: { + items: ['1', '2'], + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field11', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxRangeSlider', + editorOptions: { + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field12', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxSelectBox', + editorOptions: { + items: ['1', '2'], + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field13', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxSlider', + editorOptions: { + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field14', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxSwitch', + editorOptions: { + value: true, + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field15', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxTagBox', + editorOptions: { + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + { + dataField: 'field16', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxHtmlEditor', + editorOptions: { + labelMode: editorLabelMode, + height: 100, + stylingMode: editorStylingMode, + toolbar: { items: ['undo', 'redo', 'separator', 'insertTable', 'deleteTable', 'insertRowAbove', 'insertRowBelow', 'deleteRow'] }, + }, + }, + { + dataField: 'field17', + label: { + visible: labelVisible, + alignment: labelAlignment, + }, + editorType: 'dxCalendar', + editorOptions: { + value: new Date(2021, 9, 17), + labelMode: editorLabelMode, + stylingMode: editorStylingMode, + }, + }, + ], + }); + }); }); }); }); diff --git a/e2e/testcafe-devextreme/tests/form/form.simpleItem.colSpan.ts b/e2e/testcafe-devextreme/tests/form/form.simpleItem.colSpan.ts index c937f62a1915..44ecb9ed1a5b 100644 --- a/e2e/testcafe-devextreme/tests/form/form.simpleItem.colSpan.ts +++ b/e2e/testcafe-devextreme/tests/form/form.simpleItem.colSpan.ts @@ -1,10 +1,13 @@ /* eslint-disable no-restricted-syntax */ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import Form from 'devextreme-testcafe-models/form/form'; +import { ClientFunction } from 'testcafe'; import url from '../../helpers/getPageUrl'; import { createWidget } from '../../helpers/createWidget'; import { testScreenshot } from '../../helpers/themeUtils'; +const waitFont = ClientFunction(() => (window as any).DevExpress.ui.themes.waitWebFont('Item123somevalu*op ', 400)); + fixture.disablePageReloads`Form` .page(url(__dirname, '../container.html')); @@ -28,13 +31,17 @@ test('SimpleItem: item1_cSpan_2', async (t) => { await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); -}).before(async () => createWidget('dxForm', { - width: 500, - height: 100, - colCount: 1, - labelLocation: 'left', - items: [{ dataField: 'item_1', colSpan: 2 }], -})); +}).before(async () => { + await waitFont(); + + return createWidget('dxForm', { + width: 500, + height: 100, + colCount: 1, + labelLocation: 'left', + items: [{ dataField: 'item_1', colSpan: 2 }], + }); +}); test('SimpleItem: item1_cSpan_2,item2_cSpan_1', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); @@ -54,16 +61,20 @@ test('SimpleItem: item1_cSpan_2,item2_cSpan_1', async (t) => { await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); -}).before(async () => createWidget('dxForm', { - width: 500, - height: 100, - colCount: 1, - labelLocation: 'left', - items: [ - { dataField: 'item_1', colSpan: 2 }, - { dataField: 'item_2', colSpan: 1 }, - ], -})); +}).before(async () => { + await waitFont(); + + return createWidget('dxForm', { + width: 500, + height: 100, + colCount: 1, + labelLocation: 'left', + items: [ + { dataField: 'item_1', colSpan: 2 }, + { dataField: 'item_2', colSpan: 1 }, + ], + }); +}); test('SimpleItem: item1_cSpan_1,item2_cSpan_2', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); @@ -83,16 +94,20 @@ test('SimpleItem: item1_cSpan_1,item2_cSpan_2', async (t) => { await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); -}).before(async () => createWidget('dxForm', { - width: 500, - height: 100, - colCount: 1, - labelLocation: 'left', - items: [ - { dataField: 'item_1', colSpan: 1 }, - { dataField: 'item_2', colSpan: 2 }, - ], -})); +}).before(async () => { + await waitFont(); + + return createWidget('dxForm', { + width: 500, + height: 100, + colCount: 1, + labelLocation: 'left', + items: [ + { dataField: 'item_1', colSpan: 1 }, + { dataField: 'item_2', colSpan: 2 }, + ], + }); +}); test('SimpleItem: item1_cSpan_1,item2_cSpan_2', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); @@ -112,13 +127,17 @@ test('SimpleItem: item1_cSpan_1,item2_cSpan_2', async (t) => { await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); -}).before(async () => createWidget('dxForm', { - width: 500, - height: 100, - colCount: 1, - labelLocation: 'left', - items: [ - { dataField: 'item_1', colSpan: 2 }, - { dataField: 'item_2', colSpan: 2 }, - ], -})); +}).before(async () => { + await waitFont(); + + return createWidget('dxForm', { + width: 500, + height: 100, + colCount: 1, + labelLocation: 'left', + items: [ + { dataField: 'item_1', colSpan: 2 }, + { dataField: 'item_2', colSpan: 2 }, + ], + }); +}); diff --git a/e2e/testcafe-devextreme/tests/form/form.simpleItem.ts b/e2e/testcafe-devextreme/tests/form/form.simpleItem.ts index 31c9f45fa285..1461f330cb2b 100644 --- a/e2e/testcafe-devextreme/tests/form/form.simpleItem.ts +++ b/e2e/testcafe-devextreme/tests/form/form.simpleItem.ts @@ -22,13 +22,17 @@ fixture.disablePageReloads`Form` await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); - }).before(async () => createWidget('dxForm', { - width: 500, - colCount, - rtlEnabled, - labelLocation, - items: Array(itemsCount).fill(null).map((_, i) => ({ dataField: `item_${i + 1}` })), - })); + }).before(async () => { + await waitFont(); + + return createWidget('dxForm', { + width: 500, + colCount, + rtlEnabled, + labelLocation, + items: Array(itemsCount).fill(null).map((_, i) => ({ dataField: `item_${i + 1}` })), + }); + }); }); }); });