chore: add browser tests to ci (#1627)

Author: robertsLando

.airtap.yml

@@ -0,0 +1,8 @@
+providers:
+  - airtap-playwright
+ui: mocha-bdd
+browsers:
+  - name: chromium
+    supports:
+      headless: true
+

.airtaprc.yml

@@ -42,5 +42,12 @@ jobs:
       env:
         CI: true
         DEBUG: "mqttjs"
+    
+    - name: Test Browser
+      timeout-minutes: 2
+      run: |
+        npm run browser-build
+        npm run unit-test:browser
+  
 
 

.github/workflows/mqttjs-test.yml

@@ -17,5 +17,6 @@ test/typescript/*.js
 test/typescript/*.map
 # VS Code stuff
 **/typings/**
-
+.vscode/
 .npmrc
+

.gitignore

@@ -4,7 +4,7 @@ const MqttClient = require('../client')
 const Store = require('../store')
 const DefaultMessageIdProvider = require('../default-message-id-provider')
 const UniqueMessageIdProvider = require('../unique-message-id-provider')
-const IS_BROWSER = require('../is-browser').IS_BROWSER
+const { IS_BROWSER } = require('../is-browser')
 const url = require('url')
 const xtend = require('xtend')
 const debug = require('debug')('mqttjs')

lib/connect/index.js

@@ -5,7 +5,7 @@ const WS = require('ws')
 const debug = require('debug')('mqttjs:ws')
 const duplexify = require('duplexify')
 const Transform = require('readable-stream').Transform
-const IS_BROWSER = require('../is-browser').IS_BROWSER
+const { IS_BROWSER } = require('../is-browser')
 
 const WSS_OPTIONS = [
   'rejectUnauthorized',
@@ -100,9 +100,9 @@ function createWebSocket (client, url, opts) {
 
 function createBrowserWebSocket (client, opts) {
   const websocketSubProtocol =
-  (opts.protocolId === 'MQIsdp') && (opts.protocolVersion === 3)
-    ? 'mqttv3.1'
-    : 'mqtt'
+    (opts.protocolId === 'MQIsdp') && (opts.protocolVersion === 3)
+      ? 'mqttv3.1'
+      : 'mqtt'
 
   const url = buildUrl(opts, client)
   /* global WebSocket */

lib/connect/ws.js

@@ -113,6 +113,7 @@
     "@types/ws": "^7.4.7",
     "aedes": "^0.46.2",
     "airtap": "^4.0.4",
+    "airtap-playwright": "^1.0.1",
     "browserify": "^17.0.0",
     "chai": "^4.2.0",
     "chokidar": "^3.5.3",

package-lock.json

@@ -1,7 +1,7 @@
 'use strict'
 
 const test = require('tape')
-const mqtt = require('../../lib/connect')
+const mqtt = require('../../dist/mqtt.min')
 const _URL = require('url')
 // eslint-disable-next-line
 const parsed = _URL.parse(document.URL)
@@ -22,7 +22,7 @@ client.on('reconnect', function () {
 })
 
 test('MQTT.js browser test', function (t) {
-  t.plan(4)
+  t.plan(6)
   client.on('connect', function () {
     client.on('message', function (topic, msg) {
       t.equal(topic, 'hello', 'should match topic')
@@ -31,9 +31,21 @@ test('MQTT.js browser test', function (t) {
         t.pass('client should close')
       })
     })
-    client.subscribe('hello', function () {
-    }).publish('hello', 'Hello World!')
+
+    client.subscribe('hello', function (err) {
+      t.error(err, 'no error on subscribe')
+      if (!err) {
+        client.publish('hello', 'Hello World!', function (err) {
+          t.error(err, 'no error on publish')
+        })
+      }
+    })
   })
+
+  client.on('error', function (err) {
+    t.fail(err, 'no error')
+  })
+
   client.once('close', function () {
     t.pass('should emit close')
   })