@avi770/testteam 1.2.0

package/agents/__tests__/12-ux-inspector.test.ts

@@ -0,0 +1,443 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { ValidatedConfig } from '../../core/config';
+import type { Phase } from '../../core/types';
+
+// ---------------------------------------------------------------------------
+// Stub config
+// ---------------------------------------------------------------------------
+
+const stubConfig = {
+  schemaVersion: 1,
+  name: 'test',
+  auth: {
+    loginUrl: 'http://localhost/login',
+    credentials: { admin: { email: 'admin@test.com', password: 'secret' } },
+  },
+  modules: [
+    { id: 'dashboard', route: '/dashboard', sidebarIcon: true },
+    { id: 'clients', route: '/clients', sidebarIcon: true },
+  ],
+  environments: {
+    beta: { baseUrl: 'http://localhost:3000', seed: false },
+  },
+  portals: [],
+  breakpoints: [],
+  integrations: [],
+  workers: [],
+  workflows: [],
+  accuracy: { enabled: true, decimalPrecision: 2, currencySymbol: '$', timezone: 'UTC' },
+  tenancy: { enabled: false, isolationField: 'firmId', testFirms: [] },
+  costBudget: { maxPerRun: 100, maxPerAgent: 10, alertThreshold: 0.8, onExceeded: 'abort' as const },
+  agentClassification: { blocking: [], advisory: [] },
+  thresholds: {
+    unitCoverage: { lines: 80, functions: 80, branches: 80, statements: 80 },
+    lighthouse: { accessibility: 90, performance: 90, bestPractices: 90, seo: 90 },
+    apiResponseTime: 2000,
+    bundleSizeLimit: 500000,
+    maxConsoleErrors: 0,
+  },
+  disabledAgents: [],
+  disabledAgentSet: new Set<number>(),
+} satisfies ValidatedConfig;
+
+// ---------------------------------------------------------------------------
+// Mock node:fs/promises (used in preFlight via stat/readdir)
+// ---------------------------------------------------------------------------
+
+const statMock = vi.fn();
+const readdirMock = vi.fn();
+
+vi.mock('node:fs/promises', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('node:fs/promises')>();
+  return {
+    ...actual,
+    stat: (...args: unknown[]) => statMock(...args),
+    readdir: (...args: unknown[]) => readdirMock(...args),
+  };
+});
+
+// ---------------------------------------------------------------------------
+// Mock navigation helpers
+// ---------------------------------------------------------------------------
+
+const loginMock = vi.fn().mockResolvedValue(undefined);
+const navigateToSectionMock = vi.fn().mockResolvedValue(undefined);
+
+vi.mock('../../helpers/navigation', () => ({
+  login: (...args: unknown[]) => loginMock(...args),
+  navigateToSection: (...args: unknown[]) => navigateToSectionMock(...args),
+  waitForSectionLoad: vi.fn().mockResolvedValue(undefined),
+}));
+
+// ---------------------------------------------------------------------------
+// Mock screenshot helper
+// ---------------------------------------------------------------------------
+
+const captureScreenshotMock = vi.fn().mockResolvedValue('/tmp/test-run/screenshot.png');
+
+vi.mock('../../helpers/screenshot', () => ({
+  captureScreenshot: (...args: unknown[]) => captureScreenshotMock(...args),
+}));
+
+// ---------------------------------------------------------------------------
+// Mock Playwright page
+// ---------------------------------------------------------------------------
+
+type RouteHandler = (route: { fulfill: (opts: Record<string, unknown>) => Promise<void> }) => void | Promise<void>;
+
+interface MockPage {
+  close: ReturnType<typeof vi.fn>;
+  goto: ReturnType<typeof vi.fn>;
+  reload: ReturnType<typeof vi.fn>;
+  isVisible: ReturnType<typeof vi.fn>;
+  evaluate: ReturnType<typeof vi.fn>;
+  route: ReturnType<typeof vi.fn>;
+  unroute: ReturnType<typeof vi.fn>;
+  waitForTimeout: ReturnType<typeof vi.fn>;
+  locator: ReturnType<typeof vi.fn>;
+  _routeHandlers: Map<string, RouteHandler>;
+}
+
+function makeMockPage(overrides: Partial<MockPage> = {}): MockPage {
+  const routeHandlers = new Map<string, RouteHandler>();
+
+  const page: MockPage = {
+    close: vi.fn().mockResolvedValue(undefined),
+    goto: vi.fn().mockResolvedValue(undefined),
+    reload: vi.fn().mockResolvedValue(undefined),
+    isVisible: vi.fn().mockResolvedValue(false),
+    evaluate: vi.fn().mockResolvedValue(false),
+    route: vi.fn().mockImplementation(async (pattern: string, handler: RouteHandler) => {
+      routeHandlers.set(pattern, handler);
+    }),
+    unroute: vi.fn().mockResolvedValue(undefined),
+    waitForTimeout: vi.fn().mockResolvedValue(undefined),
+    locator: vi.fn().mockReturnValue({
+      first: () => ({ isVisible: vi.fn().mockResolvedValue(false) }),
+    }),
+    _routeHandlers: routeHandlers,
+    ...overrides,
+  };
+
+  return page;
+}
+
+let currentMockPage: MockPage;
+let mockBrowser: { newPage: ReturnType<typeof vi.fn>; close: ReturnType<typeof vi.fn> };
+
+vi.mock('playwright', () => ({
+  chromium: {
+    launch: vi.fn().mockImplementation(async () => mockBrowser),
+  },
+}));
+
+// ---------------------------------------------------------------------------
+// Dynamic import AFTER mocks
+// ---------------------------------------------------------------------------
+
+const { UxInspectorAgent } = await import('../12-ux-inspector');
+
+function createAgent(phase: Phase = 'beta'): InstanceType<typeof UxInspectorAgent> {
+  return new UxInspectorAgent(stubConfig, phase, '/tmp/test-run');
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('UxInspectorAgent', () => {
+  beforeEach(() => {
+    statMock.mockReset().mockResolvedValue({});
+    readdirMock.mockReset().mockResolvedValue(['smoke-dashboard.png', 'smoke-clients.png']);
+    loginMock.mockReset().mockResolvedValue(undefined);
+    navigateToSectionMock.mockReset().mockResolvedValue(undefined);
+    captureScreenshotMock.mockReset().mockResolvedValue('/tmp/test-run/screenshot.png');
+
+    currentMockPage = makeMockPage();
+    mockBrowser = {
+      newPage: vi.fn().mockResolvedValue(currentMockPage),
+      close: vi.fn().mockResolvedValue(undefined),
+    };
+  });
+
+  it('has agentId 12 and agentName "UX Inspector"', () => {
+    const agent = createAgent();
+    expect(agent.agentId).toBe(12);
+    expect(agent.agentName).toBe('UX Inspector');
+  });
+
+  // -------------------------------------------------------------------------
+  // preFlight()
+  // -------------------------------------------------------------------------
+
+  describe('preFlight()', () => {
+    it('throws when run directory does not exist', async () => {
+      statMock.mockRejectedValue(new Error('ENOENT'));
+
+      const agent = createAgent();
+      const result = await agent.run();
+
+      expect(result.status).toBe('failed');
+      expect(result.findings[0].description).toContain('Run directory does not exist');
+    });
+
+    it('does not throw on missing screenshots (advisory agent)', async () => {
+      statMock.mockResolvedValue({});
+      readdirMock.mockResolvedValue([]);
+
+      const agent = createAgent();
+      const result = await agent.run();
+
+      // Advisory agent — missing screenshots no longer causes preFlight failure.
+      // execute() still runs (and may produce findings from other checks), but
+      // the preFlight itself should not be the source of a "No screenshots" error.
+      const preflightScreenshotError = result.findings.find(
+        (f) => f.description.includes('No screenshots found'),
+      );
+      expect(preflightScreenshotError).toBeUndefined();
+    });
+
+    it('passes when run directory has PNG files', async () => {
+      const agent = createAgent();
+      const result = await agent.run();
+
+      expect(result.findings.some((f) => f.description.includes('No screenshots found'))).toBe(false);
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // execute() — general
+  // -------------------------------------------------------------------------
+
+  describe('execute()', () => {
+    it('calls login() once before iterating modules', async () => {
+      const agent = createAgent();
+      await agent.run();
+
+      expect(loginMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('navigates to each configured module', async () => {
+      const agent = createAgent();
+      await agent.run();
+
+      expect(navigateToSectionMock).toHaveBeenCalledTimes(stubConfig.modules.length * 2);
+    });
+
+    it('returns passed status when no UX issues found', async () => {
+      // evaluate returns true (data rows present) — no empty-state finding
+      currentMockPage.evaluate = vi.fn().mockResolvedValue(true);
+      // isVisible: error boundary IS found when API errors occur (so no finding),
+      // and no loading indicators stuck
+      currentMockPage.isVisible = vi.fn().mockImplementation((selector: string) => {
+        // Error boundary selectors — signal that the app handles errors correctly
+        if (selector === '[data-testid="error-boundary"]' ||
+            selector === '[data-testid="error-fallback"]' ||
+            selector === '.error-boundary' ||
+            selector === '[role="alert"]') {
+          return Promise.resolve(true);
+        }
+        // Loading spinner selectors — not stuck
+        return Promise.resolve(false);
+      });
+
+      const agent = createAgent();
+      const result = await agent.run();
+
+      expect(result.status).toBe('passed');
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // ErrorBoundary check
+  // -------------------------------------------------------------------------
+
+  describe('API error → ErrorBoundary check', () => {
+    it('creates a finding when ErrorBoundary is NOT rendered on API error', async () => {
+      // page.isVisible always returns false — no error boundary selector matches
+      currentMockPage.isVisible = vi.fn().mockResolvedValue(false);
+
+      const agent = createAgent();
+      const result = await agent.run();
+
+      const ebFinding = result.findings.find((f) => f.id.includes('error-boundary'));
+      expect(ebFinding).toBeDefined();
+      expect(ebFinding!.severity).toBe('high');
+      expect(ebFinding!.type).toBe('code-bug-logic');
+    });
+
+    it('does NOT create a finding when ErrorBoundary IS rendered', async () => {
+      // Return true for role="alert" (one of the error boundary selectors)
+      currentMockPage.isVisible = vi.fn().mockImplementation((selector: string) => {
+        if (selector === '[role="alert"]') return Promise.resolve(true);
+        return Promise.resolve(false);
+      });
+
+      const agent = createAgent();
+      const result = await agent.run();
+
+      const ebFindings = result.findings.filter((f) => f.id.includes('error-boundary'));
+      expect(ebFindings).toHaveLength(0);
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Empty state check
+  // -------------------------------------------------------------------------
+
+  describe('empty state detection', () => {
+    it('creates a finding when data is empty and no empty-state element shown', async () => {
+      // evaluate returns false (no data rows), isVisible returns false (no empty state)
+      currentMockPage.evaluate = vi.fn().mockResolvedValueOnce(false); // no data rows
+      currentMockPage.isVisible = vi.fn().mockResolvedValue(false);
+
+      const agent = createAgent();
+      const result = await agent.run();
+
+      const emptyFinding = result.findings.find((f) => f.id.includes('empty-state'));
+      expect(emptyFinding).toBeDefined();
+      expect(emptyFinding!.severity).toBe('low');
+    });
+
+    it('does NOT create a finding when empty state element is visible', async () => {
+      // evaluate returns false (no data), but empty-state selector is visible
+      currentMockPage.evaluate = vi.fn().mockResolvedValueOnce(false);
+      currentMockPage.isVisible = vi.fn().mockImplementation((selector: string) => {
+        if (selector === '[data-testid="empty-state"]') return Promise.resolve(true);
+        return Promise.resolve(false);
+      });
+
+      const agent = createAgent();
+      const result = await agent.run();
+
+      const emptyFindings = result.findings.filter((f) => f.id.includes('empty-state'));
+      expect(emptyFindings).toHaveLength(0);
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Navigation failure
+  // -------------------------------------------------------------------------
+
+  describe('navigation failure', () => {
+    it('creates an infra-issue finding when module navigation throws', async () => {
+      navigateToSectionMock.mockRejectedValueOnce(new Error('Timeout navigating to dashboard'));
+
+      const agent = createAgent();
+      const result = await agent.run();
+
+      const navFinding = result.findings.find((f) => f.id.includes('nav-dashboard'));
+      expect(navFinding).toBeDefined();
+      expect(navFinding!.type).toBe('infra-issue');
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Loading state stuck
+  // -------------------------------------------------------------------------
+
+  describe('loading state detection', () => {
+    it('creates a medium finding when a loading spinner is still visible', async () => {
+      currentMockPage.isVisible = vi.fn().mockImplementation(async (selector: string) => {
+        if (selector === '[data-testid="loading-spinner"]') return true;
+        return false;
+      });
+
+      const agent = createAgent();
+      const result = await agent.run();
+
+      const loadingFinding = result.findings.find(f => f.id.includes('loading-stuck'));
+      expect(loadingFinding).toBeDefined();
+      expect(loadingFinding!.severity).toBe('medium');
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Form validation check
+  // -------------------------------------------------------------------------
+
+  describe('form validation check', () => {
+    it('creates a finding when form submit does not show inline validation', async () => {
+      currentMockPage.isVisible = vi.fn().mockImplementation(async (selector: string) => {
+        if (selector === 'form') return true;
+        return false;
+      });
+      currentMockPage.evaluate = vi.fn().mockImplementation(async () => {
+        // hasRequiredField returns true, hasDataRows returns true
+        return true;
+      });
+      currentMockPage.locator = vi.fn().mockReturnValue({
+        first: () => ({
+          isVisible: vi.fn().mockResolvedValue(true),
+          click: vi.fn().mockResolvedValue(undefined),
+        }),
+      });
+
+      const agent = createAgent();
+      const result = await agent.run();
+
+      const formFinding = result.findings.find(f => f.id.includes('form-validation'));
+      expect(formFinding).toBeDefined();
+      expect(formFinding!.severity).toBe('medium');
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Truncated text check
+  // -------------------------------------------------------------------------
+
+  describe('truncated text detection', () => {
+    it('creates a low finding when truncated elements are detected', async () => {
+      currentMockPage.evaluate = vi.fn().mockImplementation(async () => {
+        return 3; // 3 truncated elements
+      });
+      currentMockPage.isVisible = vi.fn().mockResolvedValue(false);
+
+      const agent = createAgent();
+      const result = await agent.run();
+
+      const truncFinding = result.findings.find(f => f.id.includes('truncated-text'));
+      expect(truncFinding).toBeDefined();
+      expect(truncFinding!.severity).toBe('low');
+      expect(truncFinding!.description).toContain('3');
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // No environment configured
+  // -------------------------------------------------------------------------
+
+  describe('no environment', () => {
+    it('creates a critical finding when no environment is configured', async () => {
+      const noEnvConfig: ValidatedConfig = {
+        ...stubConfig,
+        environments: {},
+      };
+      const agent = new UxInspectorAgent(noEnvConfig, 'beta', '/tmp/test-run');
+      const result = await agent.run();
+
+      const finding = result.findings.find(f => f.id === '12-no-env');
+      expect(finding).toBeDefined();
+      expect(finding!.severity).toBe('critical');
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // No credentials
+  // -------------------------------------------------------------------------
+
+  describe('no credentials', () => {
+    it('creates a critical finding when no credentials are configured', async () => {
+      const noCredConfig: ValidatedConfig = {
+        ...stubConfig,
+        auth: { loginUrl: 'http://localhost/login', credentials: {} },
+      };
+      const agent = new UxInspectorAgent(noCredConfig, 'beta', '/tmp/test-run');
+      const result = await agent.run();
+
+      const finding = result.findings.find(f => f.id === '12-no-credentials');
+      expect(finding).toBeDefined();
+      expect(finding!.severity).toBe('critical');
+    });
+  });
+});