fix: don't use worker timers in worker and add web worker tests (#1755)

robertsLando · web-flow · commit 38fb6ae16073 · 2023-12-05T11:38:31.000+01:00
diff --git a/src/lib/PingTimer.ts b/src/lib/PingTimer.ts
@@ -1,5 +1,5 @@
 import { clearTimeout as clearT, setTimeout as setT } from 'worker-timers'
-import isBrowser from './is-browser'
+import isBrowser, { isWebWorker } from './is-browser'
 
 export default class PingTimer {
 	private keepalive: number
diff --git a/src/lib/is-browser.ts b/src/lib/is-browser.ts
@@ -15,4 +15,6 @@ const isReactNativeEnv = () =>
 const isBrowser =
 	isStandardBrowserEnv() || isWebWorkerEnv() || isReactNativeEnv()
 
+export const isWebWorker = isWebWorkerEnv()
+
 export default isBrowser
diff --git a/test/browser/test.js b/test/browser/test.js
@@ -6,10 +6,23 @@ import mqtt from '../../'; // this will resolve to mqtt/dist/mqtt.esm.js
 const mqtt2 = window.mqtt
 
 // get browser name
-const browser = navigator.userAgent.toLowerCase().replace(/ /g, '_').replace(/\//g, '_')
+const userAgent = navigator.userAgent.toLowerCase().replace(/ /g, '_').replace(/\//g, '_')
+
+let browser = 'unknown'
+
+console.log('userAgent:', userAgent)
+
+if (userAgent.includes('chrome')) {
+	browser = 'chrome'
+} else if (userAgent.includes('firefox')) {
+	browser = 'firefox'
+} else if (userAgent.includes('safari')) {
+	browser = 'safari'
+}
 
 const browserTopic = `test/${browser}`
 
+console.log('browser:', browser)
 
 function run(proto, port, cb) {
 
@@ -71,5 +84,22 @@ it('should work with non-ESM version', () => {
 
 
 run('ws', window.wsPort, () => {
-	run('wss', window.wssPort)
+	run('wss', window.wssPort, () => {
+		describe('MQTT.js browser test with web worker', () => {
+			it('should work with web worker', async () => {
+				const worker = new Worker('test/browser/worker.js')
+				const ready = new Promise((resolve, reject) => {
+					worker.onmessage = (e) => {
+						if (e.data === 'worker ready') {
+							resolve()
+						} else {
+							reject(e.data)
+						}
+					}
+				})
+				await ready
+			})
+		})
+	})
 })
+
diff --git a/test/browser/worker.js b/test/browser/worker.js
@@ -0,0 +1,8 @@
+// test mqttjs in worker
+
+importScripts('/dist/mqtt.js');
+
+/** @type { import('../../src').MqttClient }*/
+const MQTT = mqtt;
+
+postMessage(typeof MQTT?.connect === 'function' ? 'worker ready' : 'worker error');
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
@@ -56,6 +56,8 @@ export default {
         `<html>
         <body>
             <script src="dist/mqtt.js"></script>
+            <!-- web worker code -->
+            <link rel="modulepreload" href="test/browser/worker.js">
             <script>
                 window.wsPort = ${wsPort};
                 window.wssPort = ${wssPort};
