Update karma.conf.js

Co-authored-by: Akshat Rustagi <akshatr@lambdatest.com>

.github/workflows/browserstack.yml

@@ -18,7 +18,7 @@ jobs:
   browserstack:
     runs-on: ubuntu-latest
     if: github.repository == 'twbs/bootstrap'
-    timeout-minutes: 30
+    timeout-minutes: 15
 
     steps:
       - name: Clone repository

.github/workflows/lambdatest.yml

@@ -0,0 +1,47 @@
+name: LambdaTest
+
+on:
+  push:
+    branches:
+      - "**"
+      - "!dependabot/**"
+  workflow_dispatch:
+
+env:
+  FORCE_COLOR: 2
+  NODE: 20
+
+permissions:
+  contents: read
+
+jobs:
+  lambdatest:
+    runs-on: ubuntu-latest
+    if: github.repository == 'twbs/bootstrap'
+    timeout-minutes: 15
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: npm
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Run dist
+        run: npm run dist
+
+      - name: Run LambdaTest tests
+        run: npm run js-test-lt-cloud
+        env:
+          LT_USERNAME: "${{ secrets.LT_USERNAME }}"
+          LT_ACCESS_KEY: "${{ secrets.LT_ACCESS_KEY }}"
+          LT_TUNNEL_NAME: "tunnel-${{ github.sha }}"
+          GITHUB_SHA: "${{ github.sha }}"

.gitignore

@@ -41,3 +41,4 @@ Thumbs.db
 /dist-sass/
 /js/coverage/
 /node_modules/
+/.lambdatest/

js/tests/browsers.js

@@ -3,75 +3,149 @@
 'use strict'
 
 const browsers = {
-  safariMac: {
-    base: 'BrowserStack',
-    os: 'OS X',
-    os_version: 'Catalina',
-    browser: 'Safari',
-    browser_version: 'latest'
+  browserStack: {
+    safariMac: {
+      base: 'BrowserStack',
+      os: 'OS X',
+      os_version: 'Catalina',
+      browser: 'Safari',
+      browser_version: 'latest'
+    },
+    chromeMac: {
+      base: 'BrowserStack',
+      os: 'OS X',
+      os_version: 'Catalina',
+      browser: 'Chrome',
+      browser_version: 'latest'
+    },
+    firefoxMac: {
+      base: 'BrowserStack',
+      os: 'OS X',
+      os_version: 'Catalina',
+      browser: 'Firefox',
+      browser_version: 'latest'
+    },
+    chromeWin10: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '10',
+      browser: 'Chrome',
+      browser_version: '60'
+    },
+    firefoxWin10: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '10',
+      browser: 'Firefox',
+      browser_version: '60'
+    },
+    chromeWin10Latest: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '10',
+      browser: 'Chrome',
+      browser_version: 'latest'
+    },
+    firefoxWin10Latest: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '10',
+      browser: 'Firefox',
+      browser_version: 'latest'
+    },
+    iphone7: {
+      base: 'BrowserStack',
+      os: 'ios',
+      os_version: '12.0',
+      device: 'iPhone 7',
+      real_mobile: true
+    },
+    iphone12: {
+      base: 'BrowserStack',
+      os: 'ios',
+      os_version: '14.0',
+      device: 'iPhone 12',
+      real_mobile: true
+    },
+    pixel3: {
+      base: 'BrowserStack',
+      os: 'android',
+      os_version: '9.0',
+      device: 'Google Pixel 3',
+      real_mobile: true
+    }
   },
-  chromeMac: {
-    base: 'BrowserStack',
-    os: 'OS X',
-    os_version: 'Catalina',
-    browser: 'Chrome',
-    browser_version: 'latest'
-  },
-  firefoxMac: {
-    base: 'BrowserStack',
-    os: 'OS X',
-    os_version: 'Catalina',
-    browser: 'Firefox',
-    browser_version: 'latest'
-  },
-  chromeWin10: {
-    base: 'BrowserStack',
-    os: 'Windows',
-    os_version: '10',
-    browser: 'Chrome',
-    browser_version: '60'
-  },
-  firefoxWin10: {
-    base: 'BrowserStack',
-    os: 'Windows',
-    os_version: '10',
-    browser: 'Firefox',
-    browser_version: '60'
-  },
-  chromeWin10Latest: {
-    base: 'BrowserStack',
-    os: 'Windows',
-    os_version: '10',
-    browser: 'Chrome',
-    browser_version: 'latest'
-  },
-  firefoxWin10Latest: {
-    base: 'BrowserStack',
-    os: 'Windows',
-    os_version: '10',
-    browser: 'Firefox',
-    browser_version: 'latest'
-  },
-  iphone7: {
-    base: 'BrowserStack',
-    os: 'ios',
-    os_version: '12.0',
-    device: 'iPhone 7',
-    real_mobile: true
-  },
-  iphone12: {
-    base: 'BrowserStack',
-    os: 'ios',
-    os_version: '14.0',
-    device: 'iPhone 12',
-    real_mobile: true
-  },
-  pixel2: {
-    base: 'BrowserStack',
-    os: 'android',
-    os_version: '8.0',
-    device: 'Google Pixel 2',
-    real_mobile: true
+  lambdaTest: {
+    safariMac: {
+      browserName: 'Safari',
+      browserVersion: 'latest',
+      'LT:Options': {
+        platformName: 'MacOS Monterey'
+      }
+    },
+    chromeMac: {
+      browserName: 'Chrome',
+      browserVersion: 'latest',
+      'LT:Options': {
+        platformName: 'MacOS Monterey'
+      }
+    },
+    firefoxMac: {
+      browserName: 'Firefox',
+      browserVersion: 'latest',
+      'LT:Options': {
+        platformName: 'MacOS Monterey'
+      }
+    },
+    chromeWin10: {
+      browserName: 'Chrome',
+      browserVersion: '60',
+      'LT:Options': {
+        platformName: 'Windows 10'
+      }
+    },
+    firefoxWin10: {
+      browserName: 'Firefox',
+      browserVersion: '60',
+      'LT:Options': {
+        platformName: 'Windows 10'
+      }
+    },
+    chromeWin10Latest: {
+      browserName: 'Chrome',
+      browserVersion: 'latest',
+      'LT:Options': {
+        platformName: 'Windows 10'
+      }
+    },
+    firefoxWin10Latest: {
+      browserName: 'Firefox',
+      browserVersion: 'latest',
+      'LT:Options': {
+        platformName: 'Windows 10'
+      }
+    },
+    ios15: {
+      platformName: 'ios',
+      platformVersion: '15',
+      browserName: 'Safari',
+      deviceName: 'iPhone.*',
+      isRealMobile: true
+    },
+    ios16: {
+      platformName: 'ios',
+      platformVersion: '16',
+      browserName: 'Safari',
+      deviceName: 'iPhone.*',
+      isRealMobile: true
+    },
+    android12: {
+      platformName: 'android',
+      platformVersion: '12',
+      browserName: 'Chrome',
+      deviceName: 'Pixel.*',
+      isRealMobile: true
+    }
   }
 }
 

js/tests/karma.conf.js

@@ -9,9 +9,21 @@ const replace = require('@rollup/plugin-replace')
 const { browsers } = require('./browsers.js')
 
 const ENV = process.env
-const BROWSERSTACK = Boolean(ENV.BROWSERSTACK)
 const DEBUG = Boolean(ENV.DEBUG)
 const JQUERY_TEST = Boolean(ENV.JQUERY)
+const BROWSERSTACK = Boolean(ENV.BROWSERSTACK)
+const LAMBDATEST = Boolean(ENV.LAMBDATEST)
+
+const webDriverConfig = {
+  desktop: {
+    hostname: 'hub.lambdatest.com',
+    port: 80
+  },
+  mobile: {
+    hostname: 'mobile-hub.lambdatest.com',
+    port: 80
+  }
+}
 
 const frameworks = [
   'jasmine'
@@ -54,15 +66,23 @@ const config = {
   colors: true,
   autoWatch: false,
   singleRun: true,
-  concurrency: Number.POSITIVE_INFINITY,
+  captureTimeout: 180_000,
+  browserDisconnectTolerance: 3,
+  browserDisconnectTimeout: 180_000,
+  browserNoActivityTimeout: 400_000,
+  retryLimit: 2,
+  concurrency: 5,
   client: {
-    clearContext: false
+    clearContext: false,
+    jasmine: {
+      timeoutInterval: 120_000
+    }
   },
   files: [
     'node_modules/hammer-simulator/index.js',
     {
       pattern: 'js/tests/unit/**/!(jquery).spec.js',
-      watched: !BROWSERSTACK
+      watched: !BROWSERSTACK && !LAMBDATEST
     }
   ],
   preprocessors: {
@@ -98,18 +118,51 @@ const config = {
   }
 }
 
-if (BROWSERSTACK) {
+if (LAMBDATEST) {
+  config.hostname = 'localhost.lambdatest.com'
+  config.captureTimeout = 600_000
+
+  for (const key of Object.keys(browsers.lambdaTest)) {
+    browsers.lambdaTest[key].base = 'WebDriver'
+    browsers.lambdaTest[key].build = `bootstrap-${ENV.GITHUB_SHA ? `${ENV.GITHUB_SHA.slice(0, 7)}-` : ''}${new Date().toISOString()}`
+    browsers.lambdaTest[key].project = 'Bootstrap'
+
+    if (browsers.lambdaTest[key].isRealMobile) {
+      browsers.lambdaTest[key].config = webDriverConfig.mobile
+      browsers.lambdaTest[key].user = ENV.LT_USERNAME
+      browsers.lambdaTest[key].accessKey = ENV.LT_ACCESS_KEY
+      browsers.lambdaTest[key].tunnel = true
+      browsers.lambdaTest[key].console = true
+      browsers.lambdaTest[key].network = true
+      browsers.lambdaTest[key].tunnelName = ENV.LT_TUNNEL_NAME || 'jasmine'
+      browsers.lambdaTest[key].pseudoActivityInterval = 5000 // 5000 ms heartbeat
+    } else {
+      browsers.lambdaTest[key].config = webDriverConfig.desktop
+      browsers.lambdaTest[key]['LT:Options'].username = ENV.LT_USERNAME
+      browsers.lambdaTest[key]['LT:Options'].accessKey = ENV.LT_ACCESS_KEY
+      browsers.lambdaTest[key]['LT:Options'].tunnel = true
+      browsers.lambdaTest[key]['LT:Options'].console = true
+      browsers.lambdaTest[key]['LT:Options'].network = true
+      browsers.lambdaTest[key]['LT:Options'].tunnelName = ENV.LT_TUNNEL_NAME || 'jasmine'
+      browsers.lambdaTest[key]['LT:Options'].pseudoActivityInterval = 5000 // 5000 ms heartbeat
+    }
+  }
+
+  plugins.push('karma-webdriver-launcher', 'karma-jasmine-html-reporter')
+  config.customLaunchers = browsers.lambdaTest
+  config.browsers = Object.keys(browsers.lambdaTest)
+  reporters.push('kjhtml')
+} else if (BROWSERSTACK) {
   config.hostname = ip.address()
   config.browserStack = {
     username: ENV.BROWSER_STACK_USERNAME,
     accessKey: ENV.BROWSER_STACK_ACCESS_KEY,
     build: `bootstrap-${ENV.GITHUB_SHA ? `${ENV.GITHUB_SHA.slice(0, 7)}-` : ''}${new Date().toISOString()}`,
-    project: 'Bootstrap',
-    retryLimit: 2
+    project: 'Bootstrap'
   }
   plugins.push('karma-browserstack-launcher', 'karma-jasmine-html-reporter')
-  config.customLaunchers = browsers
-  config.browsers = Object.keys(browsers)
+  config.customLaunchers = browsers.browserStack
+  config.browsers = Object.keys(browsers.browserStack)
   reporters.push('BrowserStack', 'kjhtml')
 } else if (JQUERY_TEST) {
   frameworks.push('detectBrowsers')

js/tests/lt-local.js

@@ -0,0 +1,28 @@
+/* eslint-env node */
+/* eslint-disable no-console */
+
+'use strict'
+
+const process = require('node:process')
+const lambdaTunnel = require('@lambdatest/node-tunnel')
+
+if (process.env.LAMBDATEST !== 'true') {
+  console.log('Skipping lt-local script!')
+  return
+}
+
+const tunnelInstance = new lambdaTunnel() // eslint-disable-line new-cap
+const tunnelArguments = {
+  user: process.env.LT_USERNAME,
+  key: process.env.LT_ACCESS_KEY,
+  tunnelName: process.env.LT_TUNNEL_NAME || 'jasmine',
+  logFile: 'local.log'
+};
+
+// eslint-disable-next-line unicorn/prefer-top-level-await
+(async () => {
+  await tunnelInstance.start(tunnelArguments)
+  await new Promise(res => {
+    setTimeout(res, 5000)
+  })
+})()

package.json

@@ -72,6 +72,9 @@
     "js-test-integration-bundle": "rollup --config js/tests/integration/rollup.bundle.js",
     "js-test-integration-modularity": "rollup --config js/tests/integration/rollup.bundle-modularity.js",
     "js-test-cloud": "cross-env BROWSERSTACK=true npm run js-test-karma",
+    "js-test-lt-cloud": "cross-env LAMBDATEST=true npm-run-all --parallel --race js-test-lt-local js-test-karma",
+    "js-test-lt-local": "npm-run-all js-test-lt-tunnel sleep",
+    "js-test-lt-tunnel": "node js/tests/lt-local",
     "js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint",
     "docs": "npm-run-all docs-build docs-lint",
@@ -82,7 +85,7 @@
     "docs-serve": "hugo server --port 9001 --disableFastRender --noHTTPCache --renderToMemory --printPathWarnings --printUnusedTemplates",
     "docs-serve-only": "npx sirv-cli _site --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "update-deps": "ncu -u -x globby,jasmine,karma-browserstack-launcher,karma-rollup-preprocessor && echo Manually update site/assets/js/vendor",
+    "update-deps": "ncu -u -x globby,jasmine,karma-rollup-preprocessor && echo Manually update site/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.mjs",
     "release-version": "node build/change-version.mjs",
@@ -97,7 +100,8 @@
     "watch-css-docs": "nodemon --watch site/assets/scss/ --ext scss --exec \"npm run css-lint\"",
     "watch-css-test": "nodemon --watch scss/ --ext scss,js --exec \"npm run css-test\"",
     "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
-    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\""
+    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\"",
+    "sleep": "sleep 5"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.11.8"
@@ -106,6 +110,7 @@
     "@babel/cli": "^7.23.9",
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.24.0",
+    "@lambdatest/node-tunnel": "^4.0.7",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -129,7 +134,7 @@
     "jasmine": "^5.1.0",
     "jquery": "^3.7.1",
     "karma": "^6.4.3",
-    "karma-browserstack-launcher": "1.4.0",
+    "karma-browserstack-launcher": "^1.6.0",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-detect-browsers": "^2.3.3",
@@ -137,6 +142,7 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.7",
+    "karma-webdriver-launcher": "^1.0.8",
     "lockfile-lint": "^4.13.2",
     "nodemon": "^3.1.0",
     "npm-run-all2": "^6.1.2",