Draft: testing

.github/workflows/visual_tests.yml

@@ -105,12 +105,13 @@ jobs:
       fail-fast: false
       matrix:
         STRATEGY: [screenshots, accessibility]
+        THEME: ['material.blue.light']
         CONSTEL: [jquery(1/4), jquery(2/4), jquery(3/4), jquery(4/4)]
     env:
       ACCESSIBILITY_TESTCAFE_REPORT_PATH: "accessibility_testcafe_report"
 
     runs-on: ubuntu-latest
-    name: ${{ matrix.CONSTEL }}-${{ matrix.STRATEGY }}
+    name: ${{ matrix.CONSTEL }}-${{ matrix.STRATEGY }}-${{ matrix.THEME }}
     timeout-minutes: 30
 
     steps:
@@ -162,6 +163,7 @@ jobs:
         CONCURRENCY: 4
         TCQUARANTINE: true
         CONSTEL: ${{ matrix.CONSTEL }}
+        THEME: ${{ matrix.THEME }}
         # DISABLE_DEMO_TEST_SETTINGS: all # Uncomment to ignore all the visualtestrc.json settings
         # DISABLE_DEMO_TEST_SETTINGS: ignore # Uncomment to ignore the `ignore` field
         # DISABLE_DEMO_TEST_SETTINGS: comparison-options # Uncomment to ignore the `comparison-options` field

utils/visual-tests/testcafe-runner.mjs

@@ -1,6 +1,14 @@
 import createTestCafe from 'testcafe';
 import fs from 'fs';
 
+const changeTheme = async(themeName) => createTestCafe.ClientFunction(() => new Promise((resolve) => {
+    // eslint-disable-next-line no-undef
+    window.DevExpress.ui.themes.ready(resolve);
+    // eslint-disable-next-line no-undef
+    window.DevExpress.ui.themes.current(themeName);
+}),
+{ dependencies: { themeName } })();
+
 function reporter() {
   return {
     noColors: false,
@@ -208,17 +216,60 @@
   const runner = tester.createRunner();
   const concurrency = (process.env.CONCURRENCY && (+process.env.CONCURRENCY)) || 1;
 
-  const reporters = [reporter]
+  const reporters = [reporter];
+
+  console.log('current process.env.THEME', process.env.THEME);
 
   if (process.env.STRATEGY === 'accessibility') {
     reporters.push(accessibilityTestCafeReporter);
   }
 
+  const runOptions = { quarantineMode: !!process.env.TCQUARANTINE ? { successThreshold: 1, attemptLimit: 5 } : false };
+
+  runOptions.hooks = {
+                test: {
+                    after: async() => {
+
+                         console.log('calling after test');
+
+                         const result = await new Promise((resolve) => {
+                             resolve('test after resolved');
+                         });
+
+                         console.log(result);
+                    }
+                },
+  };
+
+  console.log('change theme');
+
+  if(process.env.THEME) {
+    const currentTheme = process.env.THEME;
+    runOptions.hooks.test.before = async() => {
+
+await t.eval(() => {
+    console.log('start before test');
+    const urlSegments = location.href.split('/');
+
+    const newUrl = urlSegments.slice(0, -1).join('/');
+    const newLocation = `${newUrl}/dx.greenmist.css`;
+
+    console.log('newLocation', newLocation);
+
+    location.replace(newLocation);
+    location.reload();
+    console.log('end before test');
+  });
+
+    };
+  }
+  console.log('theme changed');
+
   const failedCount = await runner
     .reporter(reporters)
     .browsers(process.env.BROWSERS || 'chrome:headless --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning')
     .concurrency(concurrency || 1)
-    .run({ quarantineMode: !!process.env.TCQUARANTINE ? { successThreshold: 1, attemptLimit: 5 } : false });
+    .run(runOptions);
 
   await tester.close();
   process.exit(failedCount);