feat: add Firefox and Webkit to karma (#1598)

* add Firefox and Webkit to karma testing

* try adding install to CI

* add display var

* try container prop

* try FirefoxHeadless

* set env var differently

* apply for all configs

* use root karma config

* fix relative link in karma config

* add log

* return as before

* fix path pattern

* move karma to the root

* try moving tsconfig

* return ts config

* use container for playwright

* add FF for firefox and chrome

* use command for playwright

* add retries

* remove retries

Author: weboko

.github/workflows/ci.yml

@@ -64,6 +64,7 @@ jobs:
         with:
           node-version: ${{ env.NODE_JS }}
       - uses: ./.github/actions/npm
+      - run: npx playwright install --with-deps
       - run: npm run build:esm
       - run: npm run test:browser
 

karma.conf.cjs

@@ -0,0 +1,50 @@
+const webpack = require("webpack");
+const playwright = require('playwright');
+
+process.env.CHROME_BIN = playwright.chromium.executablePath();
+process.env.FIREFOX_BIN = playwright.firefox.executablePath();
+process.env.WEBKIT_HEADLESS_BIN = playwright.webkit.executablePath();
+
+module.exports = function (config) {
+  config.set({
+    frameworks: ["webpack", "mocha"],
+    files: ["src/**/!(node).spec.ts"],
+    preprocessors: {
+      "src/**/!(node).spec.ts": ["webpack"]
+    },
+    envPreprocessor: ["CI"],
+    reporters: ["progress"],
+    browsers: ["ChromeHeadless", "FirefoxHeadless", "WebkitHeadless"],
+    singleRun: true,
+    client: {
+      mocha: {
+        timeout: 6000 // Default is 2s
+      }
+    },
+    webpack: {
+      mode: "development",
+      module: {
+        rules: [{ test: /\.([cm]?ts|tsx)$/, loader: "ts-loader" }]
+      },
+      plugins: [
+        new webpack.DefinePlugin({
+          "process.env.CI": process.env.CI || false,
+          "process.env.DISPLAY": "Browser",
+        }),
+        new webpack.ProvidePlugin({
+          process: "process/browser.js"
+        })
+      ],
+      resolve: {
+        extensions: [".ts", ".tsx", ".js"],
+        extensionAlias: {
+          ".js": [".js", ".ts"],
+          ".cjs": [".cjs", ".cts"],
+          ".mjs": [".mjs", ".mts"]
+        }
+      },
+      stats: { warnings: false },
+      devtool: "inline-source-map"
+    }
+  });
+};