Fix performance and responsive layout tests

Performance Tests:
- Enable Chrome memory API with --enable-precise-memory-info flag
- Add defensive checks for memory metrics availability
- Gracefully handle browsers without Memory API support

Responsive Layout Tests:
- Fix mobile menu test to handle persistent sidebar layout
- Move login outside viewport loop to prevent re-authentication timeouts
- Test now correctly verifies functionality across Mobile, Tablet, and Desktop viewports

Results: All 20 tests now passing (8 performance + 12 responsive)

Author: workcontrolgit

playwright.config.ts

@@ -84,6 +84,9 @@ export default defineConfig({
       use: {
         ...devices['Desktop Chrome'],
         viewport: { width: 1366, height: 768 }, // Standard laptop resolution
+        launchOptions: {
+          args: ['--enable-precise-memory-info'], // Enable performance.memory API for memory tests
+        },
       },
       dependencies: ['setup'],
     },

tests/performance/large-datasets.spec.ts

@@ -208,17 +208,27 @@ test.describe('Large Datasets Performance', () => {
     // Get memory metrics
     const metrics = await page.evaluate(() => {
       if ('memory' in performance) {
-        return (performance as any).memory;
+        const mem = (performance as any).memory;
+        return {
+          usedJSHeapSize: mem?.usedJSHeapSize,
+          totalJSHeapSize: mem?.totalJSHeapSize,
+          jsHeapSizeLimit: mem?.jsHeapSizeLimit,
+        };
       }
       return null;
     });
 
-    if (metrics) {
+    if (metrics && typeof metrics.usedJSHeapSize === 'number') {
       console.log(`JS Heap Size: ${(metrics.usedJSHeapSize / 1048576).toFixed(2)} MB`);
-      console.log(`Total Heap Size: ${(metrics.totalJSHeapSize / 1048576).toFixed(2)} MB`);
+      console.log(`Total Heap Size: ${(metrics.totalJSHeapSize! / 1048576).toFixed(2)} MB`);
+      console.log(`Heap Size Limit: ${(metrics.jsHeapSizeLimit! / 1048576).toFixed(2)} MB`);
 
       // Memory usage should be reasonable (< 100MB for typical SPA)
       expect(metrics.usedJSHeapSize).toBeLessThan(100 * 1048576);
+    } else {
+      console.log('Memory API not available or not enabled. Skipping memory assertion.');
+      console.log('To enable: Run Chromium with --enable-precise-memory-info flag');
+      // Test passes but doesn't assert - memory API is optional
     }
   });
 });

tests/responsive/mobile-layout.spec.ts

@@ -50,19 +50,31 @@ test.describe('Mobile/Responsive Layout', () => {
     await page.goto('/dashboard');
     await page.waitForLoadState('networkidle');
 
-    // Look for mobile menu toggle
-    const menuButton = page.locator('button[aria-label*="menu"], button mat-icon').filter({ hasText: /menu/i });
-
-    if (await menuButton.isVisible({ timeout: 3000 })) {
-      await menuButton.first().click();
-      await page.waitForTimeout(500);
+    // Check if mobile menu/sidenav is visible (either already open or after toggling)
+    const menu = page.locator('mat-sidenav, .sidenav, nav, aside').first();
+    const menuVisible = await menu.isVisible({ timeout: 3000 }).catch(() => false);
+
+    if (!menuVisible) {
+      // Menu not visible, look for toggle button
+      const menuButton = page.locator('button[aria-label*="menu"], button mat-icon').filter({ hasText: /menu/i });
+
+      if (await menuButton.isVisible({ timeout: 2000 })) {
+        await menuButton.first().click();
+        await page.waitForTimeout(500);
+
+        // Verify menu opened
+        await expect(menu).toBeVisible({ timeout: 2000 });
+      }
+    } else {
+      // Menu is already visible (persistent on mobile)
+      console.log('Mobile menu is already visible (persistent layout)');
+    }
 
-      // Menu should open
-      const menu = page.locator('mat-sidenav, .mobile-menu, nav');
-      const isMenuVisible = await menu.isVisible({ timeout: 2000 }).catch(() => false);
+    // Verify menu navigation items are visible
+    const navItems = page.locator('mat-nav-list a, nav a, .nav-item');
+    const navCount = await navItems.count();
 
-      expect(isMenuVisible).toBe(true);
-    }
+    expect(navCount).toBeGreaterThan(0);
   });
 
   test('should handle table scrolling on mobile', async ({ page }) => {
@@ -234,14 +246,17 @@ test.describe('Mobile/Responsive Layout', () => {
       { width: 1920, height: 1080, name: 'Desktop' },
     ];
 
+    // Login once before testing all viewports
+    await loginAsRole(page, 'manager');
+    await page.goto('/employees');
+    await page.waitForLoadState('networkidle');
+
     for (const viewport of viewports) {
+      // Change viewport size
       await page.setViewportSize({ width: viewport.width, height: viewport.height });
+      await page.waitForTimeout(500); // Wait for layout to adjust
 
-      await loginAsRole(page, 'manager');
-      await page.goto('/employees');
-      await page.waitForLoadState('networkidle');
-
-      // Core functionality should work
+      // Core functionality should work at this viewport size
       const employeeTable = page.locator('table, mat-table');
       const hasTable = await employeeTable.isVisible({ timeout: 5000 }).catch(() => false);