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

.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"
+    }
+  });
+};

package.json

@@ -55,7 +55,14 @@
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "typedoc": "^0.25.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-firefox-launcher": "^2.1.2",
+    "karma-mocha": "^2.0.1",
+    "karma-webkit-launcher": "^2.1.0",
+    "karma-webpack": "^5.0.0",
+    "playwright": "^1.38.1"
   },
   "lint-staged": {
     "*.{ts,js}": [

packages/core/karma.conf.cjs

@@ -1,45 +1,3 @@
-process.env.CHROME_BIN = require("puppeteer").executablePath();
+const config = require("../../karma.conf.cjs");
-const webpack = require("webpack");
 
-module.exports = function (config) {
+module.exports = config;
-  config.set({
-    frameworks: ["webpack", "mocha"],
-    files: ["src/lib/**/!(node).spec.ts"],
-    preprocessors: {
-      "src/lib/**/!(node).spec.ts": ["webpack"]
-    },
-    envPreprocessor: ["CI"],
-    reporters: ["progress"],
-    browsers: ["ChromeHeadless"],
-    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
-        }),
-        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"
-    }
-  });
-};

packages/core/package.json

@@ -99,14 +99,9 @@
     "fast-check": "^3.12.0",
     "ignore-loader": "^0.1.2",
     "isomorphic-fetch": "^3.0.0",
-    "karma": "^6.4.2",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-mocha": "^2.0.1",
-    "karma-webpack": "^5.0.0",
     "mocha": "^10.2.0",
     "npm-run-all": "^4.1.5",
     "process": "^0.11.10",
-    "puppeteer": "^21.1.1",
     "rollup": "^3.29.2"
   },
   "peerDependencies": {

packages/dns-discovery/karma.conf.cjs

@@ -1,57 +1,3 @@
-process.env.CHROME_BIN = require("puppeteer").executablePath();
+const config = require("../../karma.conf.cjs");
-const webpack = require("webpack");
 
-module.exports = function (config) {
+module.exports = config;
-  config.set({
-    frameworks: ["webpack", "mocha"],
-    files: ["src/**/!(node).spec.ts"],
-    preprocessors: {
-      "src/**/!(node).spec.ts": ["webpack"]
-    },
-    envPreprocessor: ["CI"],
-    reporters: ["progress"],
-    browsers: ["ChromeHeadless"],
-    singleRun: true,
-    client: {
-      mocha: {
-        timeout: 6000 // Default is 2s
-      }
-    },
-    webpack: {
-      mode: "development",
-      module: {
-        rules: [
-          {
-            test: /\.([cm]?ts|tsx)$/,
-            use: [
-              {
-                loader: "ts-loader",
-                options: {
-                  configFile: "tsconfig.karma.json"
-                }
-              }
-            ]
-          }
-        ]
-      },
-      plugins: [
-        new webpack.DefinePlugin({
-          "process.env.CI": process.env.CI || false
-        }),
-        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"
-    }
-  });
-};

packages/dns-discovery/package.json

@@ -70,10 +70,6 @@
     "@waku/interfaces": "0.0.18",
     "chai": "^4.3.7",
     "cspell": "^7.3.2",
-    "karma": "^6.4.2",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-mocha": "^2.0.1",
-    "karma-webpack": "^5.0.0",
     "mocha": "^10.2.0",
     "npm-run-all": "^4.1.5",
     "rollup": "^3.29.2"

packages/enr/karma.conf.cjs

@@ -1,45 +1,3 @@
-process.env.CHROME_BIN = require("puppeteer").executablePath();
+const config = require("../../karma.conf.cjs");
-const webpack = require("webpack");
 
-module.exports = function (config) {
+module.exports = config;
-  config.set({
-    frameworks: ["webpack", "mocha"],
-    files: ["src/**/*.ts"],
-    preprocessors: {
-      "src/**/*.ts": ["webpack"]
-    },
-    envPreprocessor: ["CI"],
-    reporters: ["progress"],
-    browsers: ["ChromeHeadless"],
-    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
-        }),
-        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"
-    }
-  });
-};

packages/enr/package.json

@@ -71,14 +71,9 @@
     "@waku/interfaces": "0.0.18",
     "chai": "^4.3.7",
     "cspell": "^7.3.2",
-    "karma": "^6.4.2",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-mocha": "^2.0.1",
-    "karma-webpack": "^5.0.0",
     "mocha": "^10.2.0",
     "npm-run-all": "^4.1.5",
     "process": "^0.11.10",
-    "puppeteer": "^21.1.1",
     "rollup": "^3.29.2",
     "uint8arrays": "^4.0.4"
   },

packages/message-encryption/karma.conf.cjs

@@ -1,45 +1,3 @@
-process.env.CHROME_BIN = require("puppeteer").executablePath();
+const config = require("../../karma.conf.cjs");
-const webpack = require("webpack");
 
-module.exports = function (config) {
+module.exports = config;
-  config.set({
-    frameworks: ["webpack", "mocha"],
-    files: ["src/**/*.ts"],
-    preprocessors: {
-      "src/**/*.ts": ["webpack"]
-    },
-    envPreprocessor: ["CI"],
-    reporters: ["progress"],
-    browsers: ["ChromeHeadless"],
-    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
-        }),
-        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"
-    }
-  });
-};

packages/message-encryption/package.json

@@ -89,14 +89,9 @@
     "chai": "^4.3.7",
     "cspell": "^7.3.2",
     "fast-check": "^3.12.0",
-    "karma": "^6.4.2",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-mocha": "^2.0.1",
-    "karma-webpack": "^5.0.0",
     "mocha": "^10.2.0",
     "npm-run-all": "^4.1.5",
     "process": "^0.11.10",
-    "puppeteer": "^21.1.1",
     "rollup": "^3.29.2"
   },
   "files": [

packages/message-hash/karma.conf.cjs

@@ -1,45 +1,3 @@
-process.env.CHROME_BIN = require("puppeteer").executablePath();
+const config = require("../../karma.conf.cjs");
-const webpack = require("webpack");
 
-module.exports = function (config) {
+module.exports = config;
-  config.set({
-    frameworks: ["webpack", "mocha"],
-    files: ["src/**/!(node).spec.ts"],
-    preprocessors: {
-      "src/**/!(node).spec.ts": ["webpack"]
-    },
-    envPreprocessor: ["CI"],
-    reporters: ["progress"],
-    browsers: ["ChromeHeadless"],
-    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
-        }),
-        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"
-    }
-  });
-};

packages/message-hash/package.json

@@ -67,14 +67,9 @@
     "fast-check": "^3.12.0",
     "ignore-loader": "^0.1.2",
     "isomorphic-fetch": "^3.0.0",
-    "karma": "^6.4.2",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-mocha": "^2.0.1",
-    "karma-webpack": "^5.0.0",
     "mocha": "^10.2.0",
     "npm-run-all": "^4.1.5",
     "process": "^0.11.10",
-    "puppeteer": "^21.1.1",
     "rollup": "^3.29.2"
   },
   "files": [