fix quill loading

Author: EugeniyKiyashko

e2e/testcafe-devextreme/helpers/testPageUtils.ts

@@ -118,6 +118,23 @@ export async function loadAspNetData(t: TestController): Promise<void> {
   }));
 }
 
+export async function loadDevExtreme(t: TestController): Promise<void> {
+  await t.eval(() => new Promise<void>((resolve, reject) => {
+    // @ts-expect-error ts-error
+    if (window.DevExpress?.data?.AspNet) {
+      resolve();
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = '../../../packages/devextreme/artifacts/js/dx.all.js';
+    // @ts-expect-error ts-error
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  }));
+}
+
 // interface LoadOptions {
 //   basePath?: string;
 //   checkExists?: string;

e2e/testcafe-devextreme/helpers/themeUtils.ts

@@ -41,13 +41,16 @@ export async function testScreenshot(
     themeChanged,
   } = options ?? {};
 
+  const baseName = screenshotName.endsWith('.png') ? screenshotName.slice(0, -4) : screenshotName;
+  const getScreenshotName = (themePostfix?: string) => `${baseName}${themePostfix ?? getThemePostfix(theme)}.png`;
+
   if (isString(theme)) {
     await changeTheme(theme);
     await themeChanged?.();
   }
 
   await t
-    .expect(await takeScreenshot(screenshotName.replace('.png', `${getThemePostfix(theme)}.png`), element))
+    .expect(await takeScreenshot(getScreenshotName(), element))
     .ok();
 
   if (shouldTestInCompact) {
@@ -57,7 +60,7 @@ export async function testScreenshot(
     await compactCallBack?.();
 
     await t
-      .expect(await takeScreenshot(screenshotName.replace('.png', `${getThemePostfix(`${themeName}-compact`)}.png`), element))
+      .expect(await takeScreenshot(getScreenshotName(getThemePostfix(`${themeName}-compact`)), element))
       .ok();
   }
 

e2e/testcafe-devextreme/runner.ts

@@ -9,6 +9,7 @@ import {
   clearTestPage,
   loadAspNetData,
   loadAxeCore,
+  loadDevExtreme,
   loadGantt,
   loadQuill,
 } from './helpers/testPageUtils';
@@ -255,6 +256,11 @@ createTestCafe(TESTCAFE_CONFIG)
       disableNativeAutomation: true,
       // @ts-expect-error ts-error
       hooks: {
+        // testRun: {
+        //   before: async () => {
+
+        //   },
+        // },
         test: {
           before: async (t: TestController) => {
             if (!componentFolder.includes('accessibility')) {
@@ -263,14 +269,16 @@ createTestCafe(TESTCAFE_CONFIG)
 
               if (meta?.loadQuill) {
                 await loadQuill(t);
-              }
-
-              if (meta?.loadGantt) {
-                await loadGantt(t);
-              }
+                await loadDevExtreme(t);
+              } else {
+                await loadDevExtreme(t);
+                if (meta?.loadGantt) {
+                  await loadGantt(t);
+                }
 
-              if (meta?.loadAspNetData) {
-                await loadAspNetData(t);
+                if (meta?.loadAspNetData) {
+                  await loadAspNetData(t);
+                }
               }
 
               await ClientFunction(() => {

e2e/testcafe-devextreme/tests/common/pivotGrid/runningTotal/runningTotal.ts

@@ -1,7 +1,7 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import PivotGrid from 'devextreme-testcafe-models/pivotGrid';
 import url from '../../../../helpers/getPageUrl';
-import { isMaterialBased } from '../../../../helpers/themeUtils';
+import { isMaterialBased, testScreenshot } from '../../../../helpers/themeUtils';
 import { createWidget } from '../../../../helpers/createWidget';
 
 const testFixture = () => (isMaterialBased() ? fixture.skip : fixture);
@@ -75,7 +75,7 @@ test('Should correctly sum cells values with runningTotal', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
 
-  await takeScreenshot('running-total_seamless-data.png', pivotGrid.element);
+  await testScreenshot(t, takeScreenshot, 'running-total_seamless-data.png', { element: pivotGrid.element });
 
   await t
     .expect(compareResults.isValid())
@@ -112,12 +112,12 @@ test('Should correctly sum cells values with runningTotal with partial data (T11
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
 
-  await takeScreenshot('running-total_partial-data_render-0.png', pivotGrid.element);
+  await testScreenshot(t, takeScreenshot, 'running-total_partial-data_render-0.png', { element: pivotGrid.element });
 
   const rowToCollapse = pivotGrid.getRowsArea().getCell(3);
   await t.click(rowToCollapse);
 
-  await takeScreenshot('running-total_partial-data_render-1.png', pivotGrid.element);
+  await testScreenshot(t, takeScreenshot, 'running-total_partial-data_render-1.png', { element: pivotGrid.element });
 
   await t
     .expect(compareResults.isValid())

e2e/testcafe-devextreme/tests/common/pivotGrid/scrolling.ts

@@ -195,14 +195,14 @@ generateOptionMatrix({
 
     const firstCellToClick = pivotGrid.getRowsArea().getCell(1);
     await t.click(firstCellToClick);
-    await takeScreenshot(`scrollbar-margin_step-0_useNative-${nativeScrolling}_rtl-${rtlEnabled}`, pivotGrid.element);
+    await testScreenshot(t, takeScreenshot, `scrollbar-margin_step-0_useNative-${nativeScrolling}_rtl-${rtlEnabled}`, { element: pivotGrid.element });
 
     const secondCellToClick = pivotGrid.getRowsArea().getCell(6);
     await t.click(secondCellToClick);
-    await takeScreenshot(`scrollbar-margin_step-1_useNative-${nativeScrolling}_rtl-${rtlEnabled}`, pivotGrid.element);
+    await testScreenshot(t, takeScreenshot, `scrollbar-margin_step-1_useNative-${nativeScrolling}_rtl-${rtlEnabled}`, { element: pivotGrid.element });
 
     await t.click(secondCellToClick);
-    await takeScreenshot(`scrollbar-margin_step-2_useNative-${nativeScrolling}_rtl-${rtlEnabled}`, pivotGrid.element);
+    await testScreenshot(t, takeScreenshot, `scrollbar-margin_step-2_useNative-${nativeScrolling}_rtl-${rtlEnabled}`, { element: pivotGrid.element });
 
     await t
       .expect(compareResults.isValid())

e2e/testcafe-devextreme/tests/common/pivotGrid/virtualScrolling_T1210807.ts

@@ -2,7 +2,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import PivotGrid from 'devextreme-testcafe-models/pivotGrid';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
-import { isMaterialBased } from '../../../helpers/themeUtils';
+import { isMaterialBased, testScreenshot } from '../../../helpers/themeUtils';
 
 const testFixture = (): FixtureFn => {
   if (isMaterialBased()) {
@@ -41,7 +41,8 @@ test.meta({ unstable: true })('Row fields overlap data fields if dataFieldArea i
   await pivotGrid.scrollBy({ top: 30000 });
   await pivotGrid.scrollBy({ top: 30000 });
 
-  await takeScreenshot('rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807.png', pivotGrid.element);
+  await testScreenshot(t, takeScreenshot, 'rows_do_not_overlap_data_fields_if_virtual_scrolling_enabled_T1210807.png', { element: pivotGrid.element });
+
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());

e2e/testcafe-devextreme/tests/common/treeList/API.ts

@@ -2,6 +2,7 @@ import TreeList from 'devextreme-testcafe-models/treeList';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
+import { testScreenshot } from '../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Public methods`
   .page(url(__dirname, '../../container.html'));
@@ -39,7 +40,7 @@ const getItems = (): Record<string, unknown>[] => {
         .expect(treeList.getDataCell(131, 0).element.textContent)
         .contains('item_');
 
-      await takeScreenshot(`T1275775-navigateToRow-with-async-cell-templates_(renderAsync=${renderAsync}_useNativeScrolling=${useNativeScrolling})`, treeList.element);
+      await testScreenshot(t, takeScreenshot, `T1275775-navigateToRow-with-async-cell-templates_(renderAsync=${renderAsync}_useNativeScrolling=${useNativeScrolling})`, { element: treeList.element });
 
       await t
         .expect(compareResults.isValid())

e2e/testcafe-devextreme/tests/common/treeList/aiColumn/visual.ts

@@ -2,6 +2,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import TreeList from 'devextreme-testcafe-models/treeList';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
+import { testScreenshot } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Ai Column.Visual`
   .page(url(__dirname, '../../../container.html'));
@@ -15,7 +16,7 @@ test('Default render', async (t) => {
 
   await t.expect(treeList.isReady()).ok();
 
-  await takeScreenshot('treelist__ai-column__default.png', treeList.element);
+  await testScreenshot(t, takeScreenshot, 'treelist__ai-column__default.png', { element: treeList.element });
 
   // assert
   await t

e2e/testcafe-devextreme/tests/common/treeList/columns.ts

@@ -3,6 +3,7 @@ import TreeList from 'devextreme-testcafe-models/treeList';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { changeTheme } from '../../../helpers/changeTheme';
+import { testScreenshot } from '../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Columns`
   .page(url(__dirname, '../../container.html'));
@@ -12,9 +13,9 @@ test('CheckBox position with double rows columns', async (t) => {
   const treeList = new TreeList('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  await testScreenshot(t, takeScreenshot, 'T1054312-material.blue.light', { element: treeList.getHeaders().element });
+
   await t
-    .expect(await takeScreenshot('T1054312-material.blue.light', treeList.getHeaders().element))
-    .ok()
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
 }).before(async () => {
@@ -44,9 +45,9 @@ test('Correct display border to last column', async (t) => {
   const treeList = new TreeList('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  await testScreenshot(t, takeScreenshot, 'T1053931-material.blue.light', { element: treeList.getHeaders().element });
+
   await t
-    .expect(await takeScreenshot('T1053931-material.blue.light', treeList.getHeaders().element))
-    .ok()
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
 }).before(async () => {

e2e/testcafe-devextreme/tests/common/treeList/keyboardNavigation/markup.screenshots.ts

@@ -2,6 +2,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import TreeList from 'devextreme-testcafe-models/treeList';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
+import { testScreenshot } from '../../../../helpers/themeUtils';
 
 fixture
   .disablePageReloads`Keyboard Navigation - screenshots`
@@ -17,11 +18,11 @@ test('Focused cells should look correctly', async (t) => {
 
   await t.click(headerCellToFocus.element)
     .pressKey('tab');
-  await takeScreenshot('tree-list_keyboard-navigation-header-cell-focused.png');
+  await testScreenshot(t, takeScreenshot, 'tree-list_keyboard-navigation-header-cell-focused.png');
 
   await t.click(dataCellToFocus.element)
     .pressKey('tab');
-  await takeScreenshot('tree_list_keyboard-navigation-data-cell-focused.png');
+  await testScreenshot(t, takeScreenshot, 'tree_list_keyboard-navigation-data-cell-focused.png');
 
   await t.expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
@@ -61,10 +62,10 @@ test('Focused custom buttons should look correctly', async (t) => {
 
   await t.click(headerCellToFocus.element)
     .pressKey('tab');
-  await takeScreenshot('tree-list_keyboard-navigation-custom-buttons-cell-focused.png');
+  await testScreenshot(t, takeScreenshot, 'tree-list_keyboard-navigation-custom-buttons-cell-focused.png');
 
   await t.pressKey('tab');
-  await takeScreenshot('tree-list_keyboard-navigation-custom-button-focused.png');
+  await testScreenshot(t, takeScreenshot, 'tree-list_keyboard-navigation-custom-button-focused.png');
 
   await t.expect(compareResults.isValid())
     .ok(compareResults.errorMessages());