test improvements

Author: ramsrib

.github/workflows/ci.yml

@@ -7,9 +7,8 @@ on:
     branches: [main]
 
 jobs:
-  test:
+  lint:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v4
 
@@ -25,23 +24,128 @@ jobs:
       - name: Run linting
         run: npm run lint
 
+  type-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
       - name: Run type checking
         run: npm run type-check
 
+  format-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
       - name: Check formatting
         run: npm run format:check
 
+  build-library:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
       - name: Build library
         run: npm run build
 
+      - name: Upload library build
+        uses: actions/upload-artifact@v4
+        with:
+          name: library-build
+          path: dist/
+          retention-days: 1
+
+  build-widget:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
       - name: Build widget
         run: npm run build:widget
 
+      - name: Upload widget build
+        uses: actions/upload-artifact@v4
+        with:
+          name: widget-build
+          path: |
+            dist/widget.*
+            dist/style.css
+          retention-days: 1
+
+  test-widget:
+    runs-on: ubuntu-latest
+    needs: build-widget
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Download widget build
+        uses: actions/download-artifact@v4
+        with:
+          name: widget-build
+          path: dist/
+
+      - name: Verify downloaded files
+        run: |
+          echo "Contents of dist directory:"
+          ls -la dist/
+          echo "Checking for required files..."
+          test -f dist/widget.umd.js || (echo "widget.umd.js not found!" && exit 1)
+          test -f dist/style.css || (echo "style.css not found!" && exit 1)
+          echo "Contents of root directory:"
+          ls -la
+          echo "Checking test-widget-embed.html exists:"
+          test -f test-widget-embed.html && echo "test-widget-embed.html found" || echo "test-widget-embed.html NOT found"
+
       - name: Install Playwright
         run: npx playwright install chromium
 
       - name: Run widget tests
-        run: npm run test:ci
+        run: npm run test:ci:only
 
       - name: Upload test results
         if: always()

.github/workflows/publish.yml

@@ -55,21 +55,7 @@ jobs:
       - name: Build widget
         run: npm run build:widget
 
-      - name: Install Playwright
-        run: npx playwright install chromium
-
-      - name: Run widget tests
-        run: npm run test:ci
-
       - name: Publish to npm
         run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Upload test results
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30

package.json

@@ -40,8 +40,9 @@
     "test": "npm run test:widget",
     "test:widget": "npm run build:widget && playwright test",
     "test:widget:ui": "npm run build:widget && playwright test --ui",
-    "test:serve": "serve -s . -p 3000",
-    "test:ci": "npm run build:widget && playwright test --reporter=list"
+    "test:serve": "serve -l 4200 .",
+    "test:ci": "npm run build:widget && playwright test --reporter=list",
+    "test:ci:only": "playwright test --reporter=list"
   },
   "author": {
     "name": "Vapi AI",

playwright.config.ts

@@ -10,9 +10,9 @@ export default defineConfig({
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-  reporter: 'html',
+  reporter: process.env.CI ? 'list' : 'html',
   use: {
-    baseURL: 'http://localhost:3000',
+    baseURL: 'http://localhost:4200',
     trace: 'on-first-retry',
   },
   projects: [
@@ -22,8 +22,11 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'npm run test:serve',
-    port: 3000,
+    command: 'npx serve -l 4200 .',
+    port: 4200,
+    timeout: 60 * 1000, // 1 minute timeout
     reuseExistingServer: !process.env.CI,
+    stdout: process.env.CI ? 'pipe' : 'ignore',
+    stderr: 'pipe',
   },
 });

src/widget/index.ts

@@ -171,6 +171,7 @@ function initializeWidgets() {
   });
 }
 
+// Initialize widgets when DOM is ready
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initializeWidgets);
 } else {
@@ -183,6 +184,9 @@ declare global {
   }
 }
 
-window.WidgetLoader = WidgetLoader;
+// Ensure WidgetLoader is exposed globally for UMD builds
+if (typeof window !== 'undefined') {
+  (window as any).WidgetLoader = WidgetLoader;
+}
 
 export default WidgetLoader;

tests/widget-embed.spec.ts

@@ -10,8 +10,7 @@ test.describe('VapiWidget Embed Tests', () => {
   test('should load widget from script tag with data attributes', async ({
     page,
   }) => {
-    // Navigate to the test page
-    await page.goto('/test-widget-embed.html');
+    await page.goto('/test-widget-embed');
 
     // Wait for the widget script to load
     await page.waitForFunction(
@@ -30,7 +29,7 @@ test.describe('VapiWidget Embed Tests', () => {
         return element && (element.shadowRoot || element.children.length > 0);
       },
       '#vapi-widget-1',
-      { timeout: 5000 }
+      { timeout: 3000 }
     );
 
     // Verify the widget has created some content (React root or shadow DOM)
@@ -50,7 +49,7 @@ test.describe('VapiWidget Embed Tests', () => {
   test('should load widget from script tag with data-props JSON', async ({
     page,
   }) => {
-    await page.goto('/test-widget-embed.html');
+    await page.goto('/test-widget-embed');
 
     // Wait for the widget script to load
     await page.waitForFunction(
@@ -69,7 +68,7 @@ test.describe('VapiWidget Embed Tests', () => {
         return element && (element.shadowRoot || element.children.length > 0);
       },
       '#vapi-widget-2',
-      { timeout: 5000 }
+      { timeout: 3000 }
     );
 
     // Verify the widget has been initialized
@@ -86,9 +85,15 @@ test.describe('VapiWidget Embed Tests', () => {
   });
 
   test('should expose WidgetLoader globally', async ({ page }) => {
-    await page.goto('/test-widget-embed.html');
+    await page.goto('/test-widget-embed');
+
+    // Wait for WidgetLoader to be available
+    await page.waitForFunction(
+      () => typeof (window as any).WidgetLoader === 'function',
+      { timeout: 5000 }
+    );
 
-    // Check if WidgetLoader is available globally
+    // Verify WidgetLoader is a function
     const hasWidgetLoader = await page.evaluate(() => {
       return typeof (window as any).WidgetLoader === 'function';
     });