Attempt 5 (attempt 4 - 20 min)

Author: EugeniyKiyashko

.github/workflows/testcafe_tests.yml

@@ -15,6 +15,7 @@ env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
   NX_SKIP_NX_CACHE: ${{ (github.event_name != 'pull_request' || contains( github.event.pull_request.labels.*.name, 'skip-cache')) && 'true' || 'false' }}
   BUILD_TEST_INTERNAL_PACKAGE: true
+  CI: true
 
 jobs:
   build:

e2e/testcafe-devextreme/runner.js

@@ -71,7 +71,8 @@ createTestCafe(TESTCAFE_CONFIG)
 
         const args = getArgs();
         const testName = args.test.trim();
-        const reporter = typeof args.reporter === 'string' ? args.reporter.trim() : args.reporter;
+        // const reporter = typeof args.reporter === 'string' ? args.reporter.trim() : args.reporter;
+        const reporter = 'list';
         const indices = args.indices.trim();
         let componentFolder = args.componentFolder.trim();
         const file = args.file.trim();
@@ -162,12 +163,20 @@ createTestCafe(TESTCAFE_CONFIG)
         }
 
         const runOptions = {
-            quarantineMode: { successThreshold: 1, attemptLimit: 10 },
+            quarantineMode: { successThreshold: 1, attemptLimit: 5 },
         };
 
+        const attemptsCounter = new Map();
+
         runOptions.hooks = {
             test: {
                 before: async(t) => {
+                    const testName = t.testRun.test.name;
+                    const prev = attemptsCounter.get(testName) || 0;
+                    attemptsCounter.set(testName, prev + 1);
+
+                    console.log(`▶️ ${testName}, attempt №${prev + 1}`);
+
                     const [width, height] = DEFAULT_BROWSER_SIZE;
                     await t.resizeWindow(width, height);
 
@@ -227,7 +236,7 @@ function getArgs() {
             browsers: 'chrome',
             test: '',
             // reporter: [process.env.CI === 'true' ? 'list' : 'spec'],
-            reporter: 'spec',
+            reporter: 'list',
             componentFolder: '',
             file: '*',
             cache: true,

e2e/testcafe-devextreme/tests/cardView/columnSortable/visual.ts

@@ -79,35 +79,35 @@ test('dropzone appear in headerPanel when drag from columnChooser a column', asy
   ],
 }));
 
-test('dropzone appears in headerPanel when drag from columnChooser a column with allowReordering: false', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-  const cardView = new CardView(CARD_VIEW_SELECTOR);
-  const columnElement = getColumnItem(cardView, 0, 'columnChooser');
-
-  await cardView.apiShowColumnChooser();
-
-  await triggerDragStart(columnElement);
-  await t.wait(500); // wait for dropzone animation to finish
-  await testScreenshot(t, takeScreenshot, 'card-view_column-sortable_header-panel_dropzone_1.png', { element: cardView.element });
-
-  await triggerDragEnd(columnElement);
-  await t.wait(500); // wait for dropzone animation to finish
-  await testScreenshot(t, takeScreenshot, 'card-view_column-sortable_header-panel_dropzone_2.png', { element: cardView.element });
-
-  await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-
-  await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
-}).before(async () => createWidget('dxCardView', {
-  allowColumnReordering: true,
-  columnChooser: {
-    enabled: true,
-  },
-  height: 600,
-  columns: [
-    { dataField: 'Column 1' },
-    { dataField: 'Column 2', visible: false, allowReordering: false },
-  ],
-}));
+// test('dropzone appears in headerPanel when drag from columnChooser a column with allowReordering: false', async (t) => {
+//   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+//   const cardView = new CardView(CARD_VIEW_SELECTOR);
+//   const columnElement = getColumnItem(cardView, 0, 'columnChooser');
+
+//   await cardView.apiShowColumnChooser();
+
+//   await triggerDragStart(columnElement);
+//   await t.wait(500); // wait for dropzone animation to finish
+//   await testScreenshot(t, takeScreenshot, 'card-view_column-sortable_header-panel_dropzone_1.png', { element: cardView.element });
+
+//   await triggerDragEnd(columnElement);
+//   await t.wait(500); // wait for dropzone animation to finish
+//   await testScreenshot(t, takeScreenshot, 'card-view_column-sortable_header-panel_dropzone_2.png', { element: cardView.element });
+
+//   await t
+//     .expect(compareResults.isValid())
+//     .ok(compareResults.errorMessages());
+
+//   await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
+// }).before(async () => createWidget('dxCardView', {
+//   allowColumnReordering: true,
+//   columnChooser: {
+//     enabled: true,
+//   },
+//   height: 600,
+//   columns: [
+//     { dataField: 'Column 1' },
+//     { dataField: 'Column 2', visible: false, allowReordering: false },
+//   ],
+// }));

packages/devextreme-scss/package.json

@@ -20,6 +20,7 @@
   },
   "scripts": {
     "build": "gulp",
+    "build:ci": "gulp style-compiler-themes-ci",
     "lint": "stylelint scss/widgets",
     "test": "jest --no-coverage --runInBand --config=./tests/jest.config.json",
     "watch": "gulp watch"

packages/devextreme-scss/project.json

@@ -34,6 +34,27 @@
         "{projectRoot}/**/*"
       ],
       "cache": true
+    },
+    "build-ci": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "build:ci"
+      },
+      "inputs": [
+        "{projectRoot}/build/**/*",
+        "{projectRoot}/fonts/**/*",
+        "{projectRoot}/icons/**/*",
+        "{projectRoot}/images/**/*",
+        "{projectRoot}/scss/**/*",
+        "{projectRoot}/gulpfile.js"
+      ],
+      "outputs": [
+        "{projectRoot}/scss/bundles",
+        "{workspaceRoot}/packages/devextreme/artifacts/css/dx.*.css",
+        "{workspaceRoot}/packages/devextreme/artifacts/css/fonts",
+        "{workspaceRoot}/packages/devextreme/artifacts/css/icons"
+      ],
+      "cache": true
     }
   },
   "tags": []

tools/scripts/build-all.ts

@@ -55,7 +55,10 @@ if (!devMode) {
 if (devMode) {
     sh.exec('pnpx nx build devextreme');
 } else {
-    sh.exec('pnpx nx build devextreme-scss');
+    const isCI = process.env.CI === 'true';
+    const scssCommand = isCI ? 'pnpx nx build-ci devextreme-scss' : 'pnpx nx build devextreme-scss';
+    
+    sh.exec(scssCommand);
     sh.exec('pnpx nx build-dist devextreme --skipNxCache', {
         env: {
             ...sh.env,