diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml index 967d922c2742..0842518492d2 100644 --- a/.github/workflows/testcafe_tests.yml +++ b/.github/workflows/testcafe_tests.yml @@ -101,8 +101,10 @@ jobs: { componentFolder: "scheduler/timezones", name: "scheduler (America/Los_Angeles)", timezone: "America/Los_Angeles" }, { componentFolder: "form", name: "form (1/2)", indices: "1/2" }, { componentFolder: "form", name: "form (2/2)", indices: "2/2" }, - { componentFolder: "form", name: "form - material (1/2)", theme: 'material.blue.light', indices: "1/2" }, - { componentFolder: "form", name: "form - material (2/2)", theme: 'material.blue.light', indices: "2/2" }, + { componentFolder: "form", name: "form - material (1/4)", theme: 'material.blue.light', indices: "1/4" }, + { componentFolder: "form", name: "form - material (2/4)", theme: 'material.blue.light', indices: "2/4" }, + { componentFolder: "form", name: "form - material (3/4)", theme: 'material.blue.light', indices: "3/4" }, + { componentFolder: "form", name: "form - material (4/4)", theme: 'material.blue.light', indices: "4/4" }, { componentFolder: "form", name: "form - fluent (1/2)", theme: 'fluent.blue.light', indices: "1/2" }, { componentFolder: "form", name: "form - fluent (2/2)", theme: 'fluent.blue.light', indices: "2/2" }, { componentFolder: "editors", name: "editors (1/2)", indices: "1/2" }, diff --git a/apps/demos/testing/common.test.js b/apps/demos/testing/common.test.js index 13487166c615..b018a6e6678e 100644 --- a/apps/demos/testing/common.test.js +++ b/apps/demos/testing/common.test.js @@ -120,6 +120,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] }, @@ -131,9 +134,12 @@ const SKIPPED_TESTS = { Charts: [ { demo: 'PiesWithEqualSize', themes: [THEME.material] }, { demo: 'CustomAnnotations', themes: [THEME.material] }, + { demo: 'ServerSideDataProcessing', themes: [THEME.material] }, + { demo: 'SubvalueIndicatorTextFormatting', themes: [THEME.material] }, ], 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] }, @@ -148,6 +154,7 @@ const SKIPPED_TESTS = { { demo: 'ItemDragging', themes: [THEME.fluent, THEME.material] }, ], VectorMap: [ + { demo: 'Overview', themes: [THEME.material] }, { demo: 'PieMarkers', themes: [THEME.material] }, { demo: 'CustomMapData', themes: [THEME.material] }, { demo: 'CustomProjection', themes: [THEME.material] }, @@ -164,6 +171,8 @@ const SKIPPED_TESTS = { { demo: 'LayoutCustomization', themes: [THEME.material] }, ], Gauges: [ + { demo: 'SubvalueIndicatorTextFormatting', themes: [THEME.material] }, + { demo: 'VariableNumberOfSubvalueIndicators', themes: [THEME.material] }, { demo: 'DifferentValueIndicatorTypesLinearGauge', themes: [THEME.material] }, { demo: 'ScaleLabelFormatting', themes: [THEME.material] }, ], @@ -173,9 +182,12 @@ const SKIPPED_TESTS = { { demo: 'TilingAlgorithms', themes: [THEME.material] }, { demo: 'ExportAndPrintingAPI', themes: [THEME.material] }, { demo: 'DiscreteAxisZoomingAndScrolling', themes: [THEME.material] }, + { demo: 'Line', themes: [THEME.material] }, + { demo: 'Spline', themes: [THEME.material] }, { 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] }, @@ -186,6 +198,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] }, @@ -202,7 +215,9 @@ const SKIPPED_TESTS = { ], Gauges: [ { demo: 'Overview', themes: [THEME.material] }, + { demo: 'VariableNumberOfSubvalueIndicators', themes: [THEME.material] }, { demo: 'ScaleLabelFormatting', themes: [THEME.material] }, + { demo: 'SubvalueIndicatorTextFormatting', themes: [THEME.material] }, { demo: 'DifferentValueIndicatorTypes', themes: [THEME.material] }, { demo: 'DifferentValueIndicatorTypesLinearGauge', themes: [THEME.material] }, ], @@ -215,6 +230,10 @@ const SKIPPED_TESTS = { { demo: 'LayoutCustomization', themes: [THEME.material] }, ], VectorMap: [ + { demo: 'CustomProjection', themes: [THEME.material] }, + { demo: 'Spline', themes: [THEME.material] }, + { demo: 'CustomAnnotations', themes: [THEME.material] }, + { demo: 'Palette', themes: [THEME.material] }, { demo: 'Overview', themes: [THEME.material] }, { demo: 'PieMarkers', themes: [THEME.material] }, { demo: 'TooltipHTMLSupport', themes: [THEME.material] }, @@ -223,7 +242,9 @@ const SKIPPED_TESTS = { { demo: 'AreaWithLabelsAndTwoLegends', themes: [THEME.material] }, ], Gantt: [ - { demo: 'Validation', themes: [THEME.material] }, + { 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 f5b821b194bb..b1b4cffebd05 100644 --- a/apps/demos/utils/visual-tests/matrix-test-helper.js +++ b/apps/demos/utils/visual-tests/matrix-test-helper.js @@ -220,6 +220,7 @@ const SKIPPED_TESTS = { { demo: 'Overview', themes: [THEME.material] }, { demo: 'ZoomingAndScrollingAPI', themes: [THEME.material] }, { demo: 'ZoomingOnAreaSelection', themes: [THEME.material] }, + { demo: 'CustomLegendMarkers', themes: [THEME.material] }, { demo: 'DialogsAndNotificationsOverview', themes: [THEME.material] }, ], VectorMap: [ @@ -245,6 +246,9 @@ const SKIPPED_TESTS = { Charts: [ { demo: 'Overview', themes: [THEME.material] }, { demo: 'ZoomingAndScrollingAPI', themes: [THEME.material] }, + { demo: 'Crosshair', themes: [THEME.material] }, + { demo: 'CustomAnnotations', themes: [THEME.material] }, + { demo: 'CustomLegendMarkers', themes: [THEME.material] }, ], DataGrid: [ { demo: 'BatchEditing', themes: [THEME.fluent] }, diff --git a/e2e/testcafe-devextreme/helpers/themeUtils.ts b/e2e/testcafe-devextreme/helpers/themeUtils.ts index 38b99c8ff3d7..d188c1740bce 100644 --- a/e2e/testcafe-devextreme/helpers/themeUtils.ts +++ b/e2e/testcafe-devextreme/helpers/themeUtils.ts @@ -58,5 +58,7 @@ export async function testScreenshot( .ok(); } - await changeTheme(process.env.theme ?? defaultThemeName); + if (isString(theme) || shouldTestInCompact) { + await changeTheme(process.env.theme ?? defaultThemeName); + } } diff --git a/e2e/testcafe-devextreme/runner.js b/e2e/testcafe-devextreme/runner.js index 78958892e6ee..9151d415e9c1 100644 --- a/e2e/testcafe-devextreme/runner.js +++ b/e2e/testcafe-devextreme/runner.js @@ -59,7 +59,9 @@ createTestCafe({ fs.rmSync('./screenshots', { recursive: true }); } - const browsers = args.browsers.split(' ').map(expandBrowserAlias); + const browsers = args.browsers + .split(' ') + .map((browser) => expandBrowserAlias(browser, args.componentFolder.trim())); // eslint-disable-next-line no-console console.log('Browsers:', browsers); @@ -113,24 +115,22 @@ createTestCafe({ quarantineMode: { successThreshold: 1, attemptLimit: 5 }, }; - if(args.componentFolder.trim() !== 'renovation') { - runOptions.hooks = { - test: { - before: async() => { - if(args.shadowDom) { - await addShadowRootTree(); - } - - if(args.theme) { - await changeTheme(args.theme); - } - }, - after: async() => { - await testPageUtils.clearTestPage(); + runOptions.hooks = { + test: { + before: async() => { + if(args.shadowDom) { + await addShadowRootTree(); + } + + if(args.theme) { + await changeTheme(args.theme); } }, - }; - } + after: async() => { + await testPageUtils.clearTestPage(); + } + }, + }; if(args.browsers === 'chrome:docker') { runOptions.disableScreenshots = true; @@ -155,7 +155,7 @@ function setShadowDom(args) { process.env.shadowDom = args.shadowDom; } -function expandBrowserAlias(browser) { +function expandBrowserAlias(browser, componentFolder) { switch(browser) { case 'chrome:devextreme-shr2': return 'chrome:headless --disable-gpu --window-size=1200,800'; diff --git a/e2e/testcafe-devextreme/tests/editors/dateBox/dateBoxGeometry.ts b/e2e/testcafe-devextreme/tests/editors/dateBox/dateBoxGeometry.ts index 4483edc74b90..150511ef46bb 100644 --- a/e2e/testcafe-devextreme/tests/editors/dateBox/dateBoxGeometry.ts +++ b/e2e/testcafe-devextreme/tests/editors/dateBox/dateBoxGeometry.ts @@ -15,9 +15,13 @@ safeSizeTest('Geometry is good', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); const dateBox = new DateBox('#container'); + await dateBox.option('opened', true); + await testScreenshot(t, takeScreenshot, 'Datebox with calendar.png'); + await dateBox.option('opened', false); await dateBox.option('type', 'datetime'); + await dateBox.option('opened', true); await testScreenshot(t, takeScreenshot, 'Datebox with datetime.png'); @@ -40,7 +44,6 @@ safeSizeTest('Geometry is good', async (t) => { await waitFont(); return createWidget('dxDateBox', { - opened: true, pickerType: 'calendar', width: 200, value: new Date(1.5e12), diff --git a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row, rtl (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row, rtl (material-blue-light).png index b0b8c1d5ca00..fdc3ab58c0ad 100644 Binary files a/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row, rtl (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dateRangeBox/etalons/DRB range, startDate inside row, hover is start in view & row, rtl (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (generic-light).png b/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (generic-light).png index e2b6e57bb7cb..aa0434670793 100644 Binary files a/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (generic-light).png and b/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (material-blue-light).png b/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (material-blue-light).png index 3c393ac01676..dc75ec0fd573 100644 Binary files a/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (material-blue-light).png and b/e2e/testcafe-devextreme/tests/editors/dropDownBox/etalons/T1245111-dropDownBox-resize (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_left,cCount_1 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_left,cCount_1 (material-blue-light).png index 419b89957484..72a9f1e34c4f 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_left,cCount_1 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_left,cCount_1 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_right,cCount_2 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_right,cCount_2 (material-blue-light).png index 884da85812c6..fcce52eb5153 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_right,cCount_2 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_right,cCount_2 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_top,cCount_1 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_top,cCount_1 (material-blue-light).png index 0c4443f4bca8..ea88f1e1a510 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_top,cCount_1 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_top,cCount_1 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_top,cCount_2 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_top,cCount_2 (material-blue-light).png index fdedc159f6c8..bd784a018acb 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_top,cCount_2 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_1,location_top,cCount_2 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_left,cCount_2 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_left,cCount_2 (material-blue-light).png index 419b89957484..72a9f1e34c4f 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_left,cCount_2 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_left,cCount_2 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_right,cCount_1 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_right,cCount_1 (material-blue-light).png index e8fe87d3b2de..3162cca3413c 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_right,cCount_1 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_right,cCount_1 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_top,cCount_2 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_top,cCount_2 (material-blue-light).png index 0c4443f4bca8..ea88f1e1a510 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_top,cCount_2 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,item1_cSpan_2,item2_cSpan_2,location_top,cCount_2 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_left,cCount_3,itemsCount_1 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_left,cCount_3,itemsCount_1 (material-blue-light).png index b0d9c45e030d..611ab302d466 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_left,cCount_3,itemsCount_1 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_left,cCount_3,itemsCount_1 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_right,cCount_2,itemsCount_1 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_right,cCount_2,itemsCount_1 (material-blue-light).png index e677652ea71f..bdca7ceec1c2 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_right,cCount_2,itemsCount_1 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_right,cCount_2,itemsCount_1 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_right,cCount_2,itemsCount_2 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_right,cCount_2,itemsCount_2 (material-blue-light).png index ee6b46666d5b..2c3dfe9725a9 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_right,cCount_2,itemsCount_2 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_right,cCount_2,itemsCount_2 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_top,cCount_1,itemsCount_1 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_top,cCount_1,itemsCount_1 (material-blue-light).png index 68a0059417ee..7ae07dc60283 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_top,cCount_1,itemsCount_1 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_top,cCount_1,itemsCount_1 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_top,cCount_2,itemsCount_1 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_top,cCount_2,itemsCount_1 (material-blue-light).png index 20a0b35904fd..c320d7a619e6 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_top,cCount_2,itemsCount_1 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_false,location_top,cCount_2,itemsCount_1 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_left,cCount_1,itemsCount_2 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_left,cCount_1,itemsCount_2 (material-blue-light).png index e8fe87d3b2de..3162cca3413c 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_left,cCount_1,itemsCount_2 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_left,cCount_1,itemsCount_2 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_right,cCount_1,itemsCount_1 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_right,cCount_1,itemsCount_1 (material-blue-light).png index 7b77939903fa..705acf1c9524 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_right,cCount_1,itemsCount_1 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_right,cCount_1,itemsCount_1 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_top,cCount_2,itemsCount_2 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_top,cCount_2,itemsCount_2 (material-blue-light).png index 2046035fbbd6..fe4a93cebcef 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_top,cCount_2,itemsCount_2 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_top,cCount_2,itemsCount_2 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_top,cCount_3,itemsCount_1 (material-blue-light).png b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_top,cCount_3,itemsCount_1 (material-blue-light).png index 17299c811611..4b4c9a1352bb 100644 Binary files a/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_top,cCount_3,itemsCount_1 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/form/etalons/SimpleItem,rtl_true,location_top,cCount_3,itemsCount_1 (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..498a9bf71e55 100644 --- a/e2e/testcafe-devextreme/tests/form/form.labelMode.ts +++ b/e2e/testcafe-devextreme/tests/form/form.labelMode.ts @@ -1,7 +1,10 @@ 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'; +import { isMaterial, 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')); @@ -23,6 +26,11 @@ fixture.disablePageReloads`Form` return; } + if (labelVisible && isMaterial()) { + // There is no specificity for the Material theme + return; + } + const testName = `Form,lMode=${formLabelMode},lLoc=${formLabelLocation},lVis=${labelVisible},lAl=${labelAlignment},e.lMode=${editorLabelMode ?? 'undef'},e.sMode=${editorStylingMode}`; test(testName, async (t) => { @@ -33,229 +41,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.labelMode.ts b/e2e/testcafe-devextreme/tests/form/form.simpleItem.labelMode.ts index de90004b1c46..756849c49dac 100644 --- a/e2e/testcafe-devextreme/tests/form/form.simpleItem.labelMode.ts +++ b/e2e/testcafe-devextreme/tests/form/form.simpleItem.labelMode.ts @@ -17,30 +17,32 @@ fixture.disablePageReloads`Form` test(testName, async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - await waitFont(); - await testScreenshot(t, takeScreenshot, `${testName}.png`, { element: '#container' }); await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); - }).before(async () => createWidget('dxForm', { - width: 200, - rtlEnabled, - labelMode, - showOptionalMark, - optionalMark: 'opt', - requiredMark: '**', - formData: { - item1: 'some value', - }, - items: [ - { itemType: 'empty' }, - { dataField: 'item1', isRequired: true }, - { dataField: 'item2', isRequired: true }, - { dataField: 'item3', isRequired: false }, - ], - })); + }).before(async () => { + await waitFont(); + + return createWidget('dxForm', { + width: 200, + rtlEnabled, + labelMode, + showOptionalMark, + optionalMark: 'opt', + requiredMark: '**', + formData: { + item1: 'some value', + }, + items: [ + { itemType: 'empty' }, + { dataField: 'item1', isRequired: true }, + { dataField: 'item2', isRequired: true }, + { dataField: 'item3', isRequired: false }, + ], + }); + }); }); }); }); diff --git a/e2e/testcafe-devextreme/tests/form/form.simpleItem.ts b/e2e/testcafe-devextreme/tests/form/form.simpleItem.ts index d3836a0774d7..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}` })), + }); + }); }); }); }); @@ -38,32 +42,34 @@ fixture.disablePageReloads`Form` test('widget alignment (T1086611)', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - await waitFont(); - await testScreenshot(t, takeScreenshot, `Form with labelLocation=${labelLocation}.png`, { element: '#container' }); await t .expect(compareResults.isValid()) .ok(compareResults.errorMessages()); - }).before(async () => createWidget('dxForm', { - labelLocation, - colCount: 2, - width: 1000, - formData: {}, - items: [{ - dataField: 'FirstName', - editorType: 'dxTextBox', - }, { - dataField: 'Position', - editorType: 'dxSelectBox', - }, { - dataField: 'BirthDate', - editorType: 'dxDateBox', - }, { - dataField: 'Notes', - editorType: 'dxTextArea', - }], - })); + }).before(async () => { + await waitFont(); + + return createWidget('dxForm', { + labelLocation, + colCount: 2, + width: 1000, + formData: {}, + items: [{ + dataField: 'FirstName', + editorType: 'dxTextBox', + }, { + dataField: 'Position', + editorType: 'dxSelectBox', + }, { + dataField: 'BirthDate', + editorType: 'dxDateBox', + }, { + dataField: 'Notes', + editorType: 'dxTextArea', + }], + }); + }); }); [() => 'xs', () => 'md', () => 'lg'].forEach((screenByWidth) => {