refactor: Do not use installAutoSignalTracking

vaadin · Jun 26, 2024 · b9cb338 · b9cb338
1 parent c282bf1
commit b9cb338
Show file tree

Hide file tree

Showing 10 changed files with 490 additions and 211 deletions.
diff --git a/karma-context.html b/karma-context.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!--
+This is the execution context.
+Loaded within the iframe.
+Reloaded before every execution run.
+-->
+<html>
+<head>
+  <title>Foo</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+</head>
+<body>
+  <!-- The scripts need to be in the body DOM element, as some test running frameworks need the body
+       to have already been created so they can insert their magic into it. For example, if loaded
+       before body, Angular Scenario test framework fails to find the body and crashes and burns in
+       an epic manner. -->
+  <script src="context.js"></script>
+  <script type="text/javascript">
+    // Configure our Karma and set up bindings
+    %CLIENT_CONFIG%
+    window.__karma__.setupContext(window);
+
+    // All served files with the latest timestamps
+    %MAPPINGS%
+  </script>
+  <script type="module">
+window.$RefreshReg$ = () => {}
+window.$RefreshSig$ = () => (type) => type
+window.__vite_plugin_react_preamble_installed__ = true
+  </script>
+  <!-- Dynamically replaced with <script> tags -->
+  %SCRIPTS%
+  <!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
+   This ensures all the tests will have been declared before karma tries to run them. -->
+  <script type="module">
+    window.__karma__.loaded();
+  </script>
+  <script nomodule>
+    window.__karma__.loaded();
+  </script>
+</body>
+</html>
diff --git a/karma-debug.html b/karma-debug.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<!--
+This file is almost the same as context.html - loads all source files,
+but its purpose is to be loaded in the main frame (not within an iframe),
+just for immediate execution, without reporting to Karma server.
+-->
+<html>
+<head>
+  %X_UA_COMPATIBLE%
+  <title>Karma DEBUG RUNNER</title>
+  <link href="favicon.ico" rel="icon" type="image/x-icon" />
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+</head>
+<body>
+  <!-- The scripts need to be at the end of body, so that some test running frameworks
+   (Angular Scenario, for example) need the body to be loaded so that it can insert its magic
+   into it. If it is before body, then it fails to find the body and crashes and burns in an epic
+   manner. -->
+  <script src="context.js"></script>
+  <script src="debug.js"></script>
+  <script type="text/javascript">
+    // Configure our Karma
+    %CLIENT_CONFIG%
+
+    // All served files with the latest timestamps
+    %MAPPINGS%
+  </script>
+  <script type="module">
+window.$RefreshReg$ = () => {}
+window.$RefreshSig$ = () => (type) => type
+window.__vite_plugin_react_preamble_installed__ = true
+  </script>
+  <!-- Dynamically replaced with <script> tags -->
+  %SCRIPTS%
+  <!-- Since %SCRIPTS% might include modules, the `loaded()` call needs to be in a module too.
+   This ensures all the tests will have been declared before karma tries to run them. -->
+  <script type="module">
+    window.__karma__.loaded();
+  </script>
+  <script nomodule>
+    window.__karma__.loaded();
+  </script>
+</body>
+</html>
diff --git a/karma.config.cjs b/karma.config.cjs
@@ -12,6 +12,7 @@ const MagicString = require('magic-string');
 const postcss = require('postcss');
 const cssnanoPlugin = require('cssnano');
 const { karmaMochaConfig } = require('./.mocharc.cjs');
+const reactPlugin = require('@vitejs/plugin-react');
 
 // The current package, one of the packages in the `packages` dir
 const cwd = process.cwd();
@@ -162,7 +163,23 @@ module.exports = (config) => {
             },
           },
         },
-        plugins: [loadRegisterJs(), constructCss()],
+        plugins: [
+          loadRegisterJs(),
+          constructCss(),
+          reactPlugin({
+            include: '**/*.tsx',
+            babel: {
+              plugins: [
+                [
+                  'module:@preact/signals-react-transform',
+                  {
+                    mode: 'all',
+                  },
+                ],
+              ],
+            },
+          }),
+        ],
         resolve: {
           alias: Object.entries(mocks).map(([find, file]) => {
             const replacement = join(cwd, `test/mocks/${file}`);
@@ -186,7 +203,8 @@ module.exports = (config) => {
     client: {
       mocha: karmaMochaConfig,
     },
-
+    customContextFile: resolve(cwd, '../../../karma-context.html'),
+    customDebugFile: resolve(cwd, '../../../karma-debug.html'),
     // Viewport configuration
     viewport: {
       breakpoints: [