Testcafe demos tests: use ts instead of js (DevExpress#31206)

Author: sjbur

apps/demos/.testcaferc.json

@@ -1,6 +1,6 @@
 {
   "src": [
-    "./testing/**/*.test.js"
+    "./testing/**/*.test.ts"
   ],
   "screenshots": {
     "path": "./",

apps/demos/babel.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-  presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
 };

apps/demos/eslint.config.mjs

@@ -460,11 +460,11 @@ export default [
   ...compat.extends('devextreme/testcafe').map(config => ({
     ...config,
     rules: changeRulesToStylistic(config.rules || {}),
-    files: ['testing/**/*.js', 'utils/visual-tests/**/*.*'],
+    files: ['testing/**/*.{js,ts}', 'utils/visual-tests/**/*.*'],
   })),
 
   {
-    files: ['testing/**/*.js'],
+    files: ['testing/**/*.{js,ts}'],
     languageOptions: {
       globals: {
         testUtils: true,

apps/demos/package.json

@@ -168,8 +168,8 @@
         "lint-css": "stylelint **/*.{css,vue}",
         "lint-non-demos": "pnpx nx run-many -t lint-js lint-css lint-html -p devextreme-demos",
         "lint": "pnpm run lint-non-demos && pnpm run lint-demos",
-        "test-testcafe": "node utils/visual-tests/testcafe-runner.mjs",
-        "test-testcafe:accessibility": "cross-env STRATEGY=accessibility CONSTEL=jquery node utils/visual-tests/testcafe-runner.mjs",
+        "test-testcafe": "ts-node utils/visual-tests/testcafe-runner.ts",
+        "test-testcafe:accessibility": "cross-env STRATEGY=accessibility CONSTEL=jquery node utils/visual-tests/testcafe-runner.ts",
         "fix-lint": "prettier --write . && eslint --fix . && stylelint **/*.{css,vue} --fix",
         "prettier": "prettier",
         "build-bundles": "gulp bundles",

apps/demos/testing/common.test.js apps/demos/testing/common.test.tsapps/demos/testing/common.test.js renamed to apps/demos/testing/common.test.ts

@@ -65,12 +65,13 @@ FRAMEWORKS.forEach((approach) => {
       t.ctx.watchDogHandle = setTimeout(() => { throw new Error('test timeout exceeded'); }, 3 * 60 * 1000);
       await t.resizeWindow(1000, 800);
     })
-    .afterEach((t) => clearTimeout(t.ctx.watchDogHandle))
+    .afterEach(async (t) => clearTimeout(t.ctx.watchDogHandle))
     .clientScripts([
       { module: 'mockdate' },
       { module: 'axe-core/axe.min.js' },
+      // @ts-expect-error Type 'string' is not assignable to type 'ClientScript'
       join(__dirname, '../utils/visual-tests/inject/test-utils.js'),
-      { content: injectStyle(globalReadFrom(__dirname, '../utils/visual-tests/inject/test-styles.css')) },
+      { content: injectStyle(globalReadFrom(__dirname, '../utils/visual-tests/inject/test-styles.css', (x) => x)) },
       {
         content: `
           window.addEventListener('error', function (e) {
@@ -93,8 +94,8 @@ FRAMEWORKS.forEach((approach) => {
     const testName = `${widgetName}-${demoName}`;
 
     const clientScriptSource = readFrom('../client-script.js', (x) => [{ content: x }]) || [];
-    const testCodeSource = readFrom('../test-code.js');
-    const testCafeCodeSource = readFrom('../testcafe-test-code.js');
+    const testCodeSource = readFrom('../test-code.js', (x) => x);
+    const testCafeCodeSource = readFrom('../testcafe-test-code.js', (x) => x);
     const visualTestSettings = readFrom('../visualtestrc.json', (x) => JSON.parse(x));
     const visualTestStyles = readFrom('../test-styles.css', (x) => injectStyle(x));
 

…ting/widgets/accordion/Accordion.test.js …ting/widgets/accordion/Accordion.test.tsapps/demos/testing/widgets/accordion/Accordion.test.js renamed to apps/demos/testing/widgets/accordion/Accordion.test.ts apps/demos/testing/widgets/accordion/Accordion.test.js renamed to apps/demos/testing/widgets/accordion/Accordion.test.ts

@@ -6,6 +6,13 @@ fixture('Charts.Export')
     ctx.initialWindowSize = [900, 600];
   });
 
+declare global {
+  interface Window {
+    originalCreateObjectURL: (obj: Blob | MediaSource) => string;
+    testedValue: string;
+  }
+}
+
 runManualTest('Charts', 'ExportCustomMarkup', (test) => {
   test('Export', async (t) => {
     let isFileCreateForDownload = false;
@@ -14,7 +21,9 @@ runManualTest('Charts', 'ExportCustomMarkup', (test) => {
       window.originalCreateObjectURL = URL.createObjectURL;
       window.testedValue = '';
 
+      // @ts-expect-error wrong type
       URL.createObjectURL = (blob) => {
+        // @ts-expect-error Blob.type is not typed
         window.testedValue = blob.type;
 
         return Promise.reject();