initial commit

web/tests/network-monitoring.spec.ts

@@ -0,0 +1,73 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('Network Request Monitoring', () => {
+  test('tracks API calls to detect infinite loops', async ({ page }) => {
+    const apiCalls: { url: string; timestamp: number; count: number }[] = []
+    const urlCounts = new Map<string, number>()
+
+    page.on('request', request => {
+      const url = request.url()
+      if (url.includes('/api/v1/')) {
+        const count = (urlCounts.get(url) || 0) + 1
+        urlCounts.set(url, count)
+        apiCalls.push({ url, timestamp: Date.now(), count })
+      }
+    })
+
+    await page.goto('http://localhost:3000')
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('text=Technical Skills')
+
+    // Wait for any potential delayed calls
+    await page.waitForTimeout(5000)
+
+    // Check for duplicate calls to the same endpoint
+    const duplicateCalls = Array.from(urlCounts.entries())
+      .filter(([_, count]) => count > 1)
+      .map(([url, count]) => ({ url, count }))
+
+    console.log('API Call counts:', Object.fromEntries(urlCounts))
+    console.log('Duplicate calls:', duplicateCalls)
+
+    // Allow 1 call per endpoint, but flag if any endpoint is called more than twice
+    const excessiveCalls = duplicateCalls.filter(d => d.count > 2)
+    expect(excessiveCalls.length).toBe(0)
+  })
+
+  test('monitors fetch calls for repeated patterns', async ({ page }) => {
+    await page.goto('http://localhost:3000')
+    await page.waitForLoadState('networkidle')
+
+    // Inject monitoring script
+    await page.addInitScript(() => {
+      const originalFetch = window.fetch
+      const callLog: { url: string; count: number }[] = []
+
+      window.fetch = async function(...args) {
+        const url = args[0]?.toString() || ''
+        if (url.includes('/api/v1/')) {
+          const existing = callLog.find(c => c.url === url)
+          if (existing) {
+            existing.count++
+          } else {
+            callLog.push({ url, count: 1 })
+          }
+        }
+        return originalFetch.apply(this, args)
+      }
+
+      ;(window as any).__getApiCallLog = () => callLog
+    })
+
+    await page.waitForSelector('text=Technical Skills')
+    await page.waitForTimeout(3000)
+
+    const callLog = await page.evaluate(() => (window as any).__getApiCallLog())
+
+    console.log('Fetch call log:', callLog)
+
+    // Check for excessive calls
+    const excessive = callLog.filter((c: { count: number }) => c.count > 2)
+    expect(excessive.length).toBe(0)
+  })
+})