@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/shared/tests/e2e/usage-mobile.test.ts

@@ -0,0 +1,531 @@
+/**
+ * Usage Dashboard - Mobile Responsive Tests
+ *
+ * Tests mobile-specific behaviour of the Usage Dashboard:
+ * - Card view data transformation
+ * - Mobile layout data structure
+ * - Touch-friendly element properties
+ * - Responsive breakpoint logic
+ *
+ * Note: These tests verify data and logic for mobile views.
+ * Visual/CSS testing would require Playwright with browser context.
+ *
+ * @module tests/e2e/usage-mobile
+ * @created 2026-01-05
+ * @task task-17.24 - Mobile responsive tests
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  type UnifiedResource,
+  type ResourceType,
+  type ResourceStatus,
+  RESOURCE_TYPE_ICONS,
+  RESOURCE_TYPE_LABELS,
+  STATUS_COLOURS,
+  formatCurrency,
+  formatDeltaPct,
+  getDeltaClass,
+} from '../../dashboard/src/components/usage/types';
+import { filterResources, sortResources } from '../../dashboard/src/components/usage/transformers';
+
+// Test data for mobile view scenarios
+const createMobileTestResources = (): UnifiedResource[] => [
+  {
+    id: 'worker-brand-copilot-api',
+    name: 'brand-copilot-api',
+    type: 'worker',
+    project: 'brand-copilot',
+    usage: { value: 100000, unit: 'requests', formatted: '100K' },
+    costCurrent: 5.0,
+    costPrior: 4.0,
+    costDelta: 1.0,
+    costDeltaPct: 25,
+    status: 'healthy',
+  },
+  {
+    id: 'd1-brand-copilot-db',
+    name: 'brand-copilot-db',
+    type: 'd1',
+    project: 'brand-copilot',
+    usage: { value: 500000, unit: 'rows read', formatted: '500K' },
+    costCurrent: 2.5,
+    costPrior: 2.0,
+    costDelta: 0.5,
+    costDeltaPct: 25,
+    status: 'warning',
+  },
+  {
+    id: 'kv-platform-cache',
+    name: 'platform-cache',
+    type: 'kv',
+    project: 'platform',
+    usage: { value: 50000, unit: 'operations', formatted: '50K' },
+    costCurrent: 1.0,
+    costPrior: 0,
+    costDelta: 1.0,
+    costDeltaPct: 'NEW' as const,
+    status: 'healthy',
+  },
+  {
+    id: 'r2-ai-logs',
+    name: 'brand-copilot-ai-logs',
+    type: 'r2',
+    project: 'brand-copilot',
+    // Uses decimal GB (1 GB = 1,000,000,000 bytes) to match Cloudflare billing
+    usage: { value: 1000000000, unit: 'bytes', formatted: '1.00 GB' },
+    costCurrent: 3.0,
+    costPrior: 3.5,
+    costDelta: -0.5,
+    costDeltaPct: -14.3,
+    status: 'healthy',
+  },
+  {
+    id: 'worker-critical-service',
+    name: 'critical-service',
+    type: 'worker',
+    project: 'platform',
+    usage: { value: 25000, unit: 'requests', formatted: '25K' },
+    costCurrent: 8.5,
+    costPrior: 5.0,
+    costDelta: 3.5,
+    costDeltaPct: 70,
+    status: 'critical',
+  },
+];
+
+describe('Mobile Responsive Tests', () => {
+  describe('Resource Type Icons and Labels', () => {
+    it('provides icons for all resource types', () => {
+      const resourceTypes: ResourceType[] = [
+        'worker',
+        'd1',
+        'kv',
+        'r2',
+        'vectorize',
+        'pages',
+        'queues',
+        'workflows',
+        'do',
+        'ai-gateway',
+      ];
+
+      resourceTypes.forEach((type) => {
+        expect(RESOURCE_TYPE_ICONS[type]).toBeDefined();
+        expect(typeof RESOURCE_TYPE_ICONS[type]).toBe('string');
+        expect(RESOURCE_TYPE_ICONS[type].length).toBeGreaterThan(0);
+      });
+    });
+
+    it('provides labels for all resource types', () => {
+      const resourceTypes: ResourceType[] = [
+        'worker',
+        'd1',
+        'kv',
+        'r2',
+        'vectorize',
+        'pages',
+        'queues',
+        'workflows',
+        'do',
+        'ai-gateway',
+      ];
+
+      resourceTypes.forEach((type) => {
+        expect(RESOURCE_TYPE_LABELS[type]).toBeDefined();
+        expect(typeof RESOURCE_TYPE_LABELS[type]).toBe('string');
+        expect(RESOURCE_TYPE_LABELS[type].length).toBeGreaterThan(0);
+      });
+    });
+
+    it('labels are human-readable (not raw type names)', () => {
+      expect(RESOURCE_TYPE_LABELS['d1']).toBe('D1');
+      expect(RESOURCE_TYPE_LABELS['kv']).toBe('KV');
+      expect(RESOURCE_TYPE_LABELS['r2']).toBe('R2');
+      expect(RESOURCE_TYPE_LABELS['do']).toBe('Durable Objects');
+      expect(RESOURCE_TYPE_LABELS['ai-gateway']).toBe('AI Gateway');
+    });
+  });
+
+  describe('Status Colours', () => {
+    it('provides colours for all status levels', () => {
+      const statuses: ResourceStatus[] = ['healthy', 'warning', 'high', 'critical'];
+
+      statuses.forEach((status) => {
+        expect(STATUS_COLOURS[status]).toBeDefined();
+        expect(STATUS_COLOURS[status]).toMatch(/^#[0-9A-Fa-f]{6}$/);
+      });
+    });
+
+    it('uses appropriate colour severity', () => {
+      // Healthy should be green-ish
+      expect(STATUS_COLOURS.healthy).toBe('#10B981');
+
+      // Warning should be yellow/amber
+      expect(STATUS_COLOURS.warning).toBe('#F59E0B');
+
+      // High should be orange
+      expect(STATUS_COLOURS.high).toBe('#F97316');
+
+      // Critical should be red
+      expect(STATUS_COLOURS.critical).toBe('#EF4444');
+    });
+  });
+
+  describe('Currency Formatting for Mobile', () => {
+    it('formats zero as $0.00', () => {
+      expect(formatCurrency(0)).toBe('$0.00');
+    });
+
+    it('formats small amounts with < symbol', () => {
+      expect(formatCurrency(0.005)).toBe('< $0.01');
+      expect(formatCurrency(0.001)).toBe('< $0.01');
+    });
+
+    it('formats normal amounts with 2 decimal places', () => {
+      expect(formatCurrency(5)).toBe('$5.00');
+      expect(formatCurrency(5.5)).toBe('$5.50');
+      expect(formatCurrency(5.556)).toBe('$5.56');
+    });
+
+    it('keeps amounts compact for mobile display', () => {
+      // All formatted values should be reasonably short
+      const testAmounts = [0, 0.001, 1.5, 10.99, 100.5, 999.99];
+      testAmounts.forEach((amount) => {
+        const formatted = formatCurrency(amount);
+        expect(formatted.length).toBeLessThan(15);
+      });
+    });
+  });
+
+  describe('Delta Percentage Formatting for Mobile', () => {
+    it('formats NEW as readable string', () => {
+      expect(formatDeltaPct('NEW')).toBe('NEW');
+    });
+
+    it('formats null as em dash', () => {
+      expect(formatDeltaPct(null)).toBe('—');
+    });
+
+    it('formats zero without sign', () => {
+      expect(formatDeltaPct(0)).toBe('0%');
+    });
+
+    it('formats positive with plus sign', () => {
+      expect(formatDeltaPct(25)).toBe('+25.0%');
+      expect(formatDeltaPct(100)).toBe('+100.0%');
+    });
+
+    it('formats negative with minus sign', () => {
+      expect(formatDeltaPct(-15)).toBe('-15.0%');
+      expect(formatDeltaPct(-50)).toBe('-50.0%');
+    });
+
+    it('outputs compact strings for mobile', () => {
+      const testValues = [0, 25, -25, 100, -100, 'NEW' as const, null];
+      testValues.forEach((value) => {
+        const formatted = formatDeltaPct(value);
+        expect(formatted.length).toBeLessThan(10);
+      });
+    });
+  });
+
+  describe('Delta Class for Visual Styling', () => {
+    it('returns delta-new for NEW resources', () => {
+      expect(getDeltaClass('NEW')).toBe('delta-new');
+    });
+
+    it('returns delta-neutral for zero or null', () => {
+      expect(getDeltaClass(0)).toBe('delta-neutral');
+      expect(getDeltaClass(null)).toBe('delta-neutral');
+    });
+
+    it('returns delta-up for positive changes', () => {
+      expect(getDeltaClass(25)).toBe('delta-up');
+      expect(getDeltaClass(100)).toBe('delta-up');
+      expect(getDeltaClass(0.1)).toBe('delta-up');
+    });
+
+    it('returns delta-down for negative changes', () => {
+      expect(getDeltaClass(-10)).toBe('delta-down');
+      expect(getDeltaClass(-50)).toBe('delta-down');
+      expect(getDeltaClass(-0.1)).toBe('delta-down');
+    });
+  });
+
+  describe('Mobile Card Data Structure', () => {
+    it('all resources have required mobile card fields', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        // Header row data
+        expect(resource.name).toBeDefined();
+        expect(typeof resource.name).toBe('string');
+        expect(resource.type).toBeDefined();
+        expect(resource.status).toBeDefined();
+
+        // Body metrics
+        expect(resource.project).toBeDefined();
+        expect(resource.usage).toBeDefined();
+        expect(resource.usage.formatted).toBeDefined();
+        expect(resource.usage.unit).toBeDefined();
+        expect(resource.costCurrent).toBeDefined();
+        expect(resource.costDeltaPct).toBeDefined();
+      });
+    });
+
+    it('resource names are not too long for mobile', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        // Names should be reasonable length (can be truncated with ellipsis)
+        // but very long names could cause layout issues
+        expect(resource.name.length).toBeLessThan(100);
+      });
+    });
+
+    it('formatted usage values are compact', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        // Formatted values should be human-readable and compact
+        expect(resource.usage.formatted.length).toBeLessThan(20);
+      });
+    });
+  });
+
+  describe('Mobile Sorting Behaviour', () => {
+    it('sorts by cost for easy comparison', () => {
+      const resources = createMobileTestResources();
+      const sorted = sortResources(resources, 'costCurrent', 'desc');
+
+      // Highest cost first
+      expect(sorted[0].costCurrent).toBe(8.5);
+      expect(sorted[sorted.length - 1].costCurrent).toBe(1.0);
+    });
+
+    it('sorts by status severity for quick triage', () => {
+      const resources = createMobileTestResources();
+      const sorted = sortResources(resources, 'status', 'desc');
+
+      // Critical first
+      expect(sorted[0].status).toBe('critical');
+    });
+
+    it('sorts by name alphabetically', () => {
+      const resources = createMobileTestResources();
+      const sorted = sortResources(resources, 'name', 'asc');
+
+      // Alphabetical order
+      for (let i = 0; i < sorted.length - 1; i++) {
+        expect(sorted[i].name.localeCompare(sorted[i + 1].name)).toBeLessThanOrEqual(0);
+      }
+    });
+
+    it('handles NEW in delta percentage sorting', () => {
+      const resources = createMobileTestResources();
+      const sorted = sortResources(resources, 'costDeltaPct', 'desc');
+
+      // NEW should appear first in descending order
+      expect(sorted[0].costDeltaPct).toBe('NEW');
+    });
+  });
+
+  describe('Mobile Filtering Behaviour', () => {
+    it('filters by project for focused view', () => {
+      const resources = createMobileTestResources();
+      const filtered = filterResources(resources, { project: 'brand-copilot' });
+
+      expect(filtered.length).toBe(3);
+      expect(filtered.every((r) => r.project === 'brand-copilot')).toBe(true);
+    });
+
+    it('filters by service type', () => {
+      const resources = createMobileTestResources();
+      const filtered = filterResources(resources, { serviceTypes: ['worker'] });
+
+      expect(filtered.length).toBe(2);
+      expect(filtered.every((r) => r.type === 'worker')).toBe(true);
+    });
+
+    it('filters by non-zero cost for mobile billing focus', () => {
+      const resources = createMobileTestResources();
+      const filtered = filterResources(resources, { nonZeroCost: true });
+
+      expect(filtered.length).toBe(5); // All have costs > 0
+      expect(filtered.every((r) => r.costCurrent > 0)).toBe(true);
+    });
+
+    it('filters by only changed resources', () => {
+      const resources = createMobileTestResources();
+      const filtered = filterResources(resources, { onlyChanged: true });
+
+      // Resources with > 5% change or NEW
+      filtered.forEach((r) => {
+        if (typeof r.costDeltaPct === 'number') {
+          expect(Math.abs(r.costDeltaPct)).toBeGreaterThan(5);
+        } else {
+          expect(r.costDeltaPct).toBe('NEW');
+        }
+      });
+    });
+
+    it('supports search query for quick find', () => {
+      const resources = createMobileTestResources();
+      const filtered = filterResources(resources, { searchQuery: 'brand' });
+
+      expect(filtered.length).toBe(3);
+      expect(filtered.every((r) => r.name.toLowerCase().includes('brand'))).toBe(true);
+    });
+  });
+
+  describe('Mobile Touch Target Requirements', () => {
+    // Note: These are data validation tests. CSS would need browser testing.
+    // The component uses tabindex=0 on rows, making them focusable/clickable.
+
+    it('resources have unique IDs for click handling', () => {
+      const resources = createMobileTestResources();
+      const ids = resources.map((r) => r.id);
+      const uniqueIds = new Set(ids);
+
+      expect(uniqueIds.size).toBe(ids.length);
+    });
+
+    it('resources have type for icon display', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        expect(RESOURCE_TYPE_ICONS[resource.type]).toBeDefined();
+      });
+    });
+
+    it('resources have status for colour indicator', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        expect(STATUS_COLOURS[resource.status]).toBeDefined();
+      });
+    });
+  });
+
+  describe('Mobile Breakpoint Data Compatibility', () => {
+    // Verify data works for both table and card views
+
+    it('all fields used in table are available for cards', () => {
+      const resources = createMobileTestResources();
+      const tableFields = [
+        'name',
+        'type',
+        'project',
+        'usage',
+        'costCurrent',
+        'costDeltaPct',
+        'status',
+      ];
+
+      resources.forEach((resource) => {
+        tableFields.forEach((field) => {
+          expect(resource).toHaveProperty(field);
+        });
+      });
+    });
+
+    it('usage has all subfields for mobile display', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        expect(resource.usage).toHaveProperty('value');
+        expect(resource.usage).toHaveProperty('unit');
+        expect(resource.usage).toHaveProperty('formatted');
+      });
+    });
+  });
+
+  describe('Edge Cases for Mobile Display', () => {
+    it('handles empty resource list', () => {
+      const filtered = filterResources([], {});
+      expect(filtered).toHaveLength(0);
+
+      const sorted = sortResources([], 'costCurrent', 'desc');
+      expect(sorted).toHaveLength(0);
+    });
+
+    it('handles single resource', () => {
+      const resources = createMobileTestResources().slice(0, 1);
+
+      const sorted = sortResources(resources, 'costCurrent', 'desc');
+      expect(sorted).toHaveLength(1);
+    });
+
+    it('handles resource with null delta percentage', () => {
+      const resource: UnifiedResource = {
+        id: 'test',
+        name: 'test-resource',
+        type: 'worker',
+        project: 'test',
+        usage: { value: 100, unit: 'requests', formatted: '100' },
+        costCurrent: 1.0,
+        costPrior: 0,
+        costDelta: 1.0,
+        costDeltaPct: null,
+        status: 'healthy',
+      };
+
+      expect(formatDeltaPct(resource.costDeltaPct)).toBe('—');
+      expect(getDeltaClass(resource.costDeltaPct)).toBe('delta-neutral');
+    });
+
+    it('handles very long resource names', () => {
+      const longName = 'this-is-a-very-long-resource-name-that-might-overflow-on-mobile-devices';
+      const formatted = longName; // Component truncates with CSS text-overflow: ellipsis
+
+      expect(formatted.length).toBeGreaterThan(50); // Just verify long names are allowed
+    });
+
+    it('handles large cost values', () => {
+      const largeCost = 9999.99;
+      const formatted = formatCurrency(largeCost);
+
+      expect(formatted).toBe('$9999.99');
+      expect(formatted.length).toBeLessThan(15);
+    });
+
+    it('handles extreme percentage changes', () => {
+      expect(formatDeltaPct(500)).toBe('+500.0%');
+      expect(formatDeltaPct(-99)).toBe('-99.0%');
+      expect(formatDeltaPct(1000)).toBe('+1000.0%');
+    });
+  });
+
+  describe('Accessibility Data for Mobile', () => {
+    it('status values are screenreader-friendly', () => {
+      const statuses: ResourceStatus[] = ['healthy', 'warning', 'high', 'critical'];
+
+      statuses.forEach((status) => {
+        // Status values should be words, not codes
+        expect(status.length).toBeGreaterThan(2);
+        expect(/^[a-z]+$/i.test(status)).toBe(true);
+      });
+    });
+
+    it('type labels are screenreader-friendly', () => {
+      Object.values(RESOURCE_TYPE_LABELS).forEach((label) => {
+        // Labels should be readable words/phrases
+        expect(label.length).toBeGreaterThan(0);
+        expect(/^[A-Za-z0-9\s]+$/.test(label)).toBe(true);
+      });
+    });
+
+    it('formatted values include context', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        // Formatted values should be numeric-looking for numbers
+        expect(resource.usage.formatted).toBeDefined();
+
+        // Units provide context
+        expect(resource.usage.unit.length).toBeGreaterThan(0);
+      });
+    });
+  });
+});

package/templates/shared/tests/helpers/mock-storage.ts

@@ -0,0 +1,166 @@
+type StatementRecord = { sql: string; params: unknown[] };
+
+type QueuedResult = {
+  type: 'first';
+  value: Record<string, unknown> | null;
+};
+
+type QueuedRunResult = {
+  type: 'run';
+  value: { success: boolean; results?: unknown[] };
+};
+
+type QueuedAllResult = {
+  type: 'all';
+  value: { results: unknown[] };
+};
+
+class MockPreparedStatement {
+  private boundParams: unknown[] = [];
+
+  constructor(
+    private readonly db: MockD1Database,
+    private readonly sql: string
+  ) {}
+
+  bind(...params: unknown[]): MockPreparedStatement {
+    this.boundParams = params;
+    return this;
+  }
+
+  async run(): Promise<{ success: boolean; results?: unknown[] }> {
+    this.db.statements.push({ sql: this.sql, params: this.boundParams });
+    const queued = this.db.dequeueResult('run');
+    return queued?.value ?? { success: true, results: [] };
+  }
+
+  async first<T = Record<string, unknown>>(): Promise<T | null> {
+    this.db.statements.push({ sql: this.sql, params: this.boundParams });
+    const queued = this.db.dequeueResult('first');
+    return (queued?.value as T | null) ?? null;
+  }
+
+  async all<T = Record<string, unknown>>(): Promise<{ results: T[] }> {
+    this.db.statements.push({ sql: this.sql, params: this.boundParams });
+    const queued = this.db.dequeueResult('all');
+    return (queued?.value as { results: T[] }) ?? { results: [] as T[] };
+  }
+}
+
+export class MockD1Database {
+  statements: StatementRecord[] = [];
+  private queuedResults: Array<QueuedResult | QueuedRunResult | QueuedAllResult> = [];
+
+  prepare(query: string): MockPreparedStatement {
+    return new MockPreparedStatement(this, query);
+  }
+
+  // These methods are required for the SDK's isD1Database type guard.
+  // Without them, the SDK wraps all methods in async circuit-breaker wrappers,
+  // which breaks the mock's synchronous dequeueResult/queueFirstResult methods.
+  async batch(_statements: unknown[]): Promise<unknown[]> {
+    return [];
+  }
+
+  // D1Database.exec method stub
+  async execBatch(_query: string): Promise<unknown> {
+    return { count: 0 };
+  }
+
+  // Alias for the SDK type guard check (expects 'exec' property)
+  get exec(): (_query: string) => Promise<unknown> {
+    return this.execBatch.bind(this);
+  }
+
+  queueFirstResult(value: Record<string, unknown> | null): void {
+    this.queuedResults.push({ type: 'first', value });
+  }
+
+  queueRunResult(value: { success: boolean; results?: unknown[] }): void {
+    this.queuedResults.push({ type: 'run', value });
+  }
+
+  queueAllResult(value: { results: unknown[] }): void {
+    this.queuedResults.push({ type: 'all', value });
+  }
+
+  dequeueResult(type: 'first'): QueuedResult | undefined;
+  dequeueResult(type: 'run'): QueuedRunResult | undefined;
+  dequeueResult(type: 'all'): QueuedAllResult | undefined;
+  dequeueResult(
+    type: 'first' | 'run' | 'all'
+  ): QueuedResult | QueuedRunResult | QueuedAllResult | undefined {
+    const index = this.queuedResults.findIndex((item) => item.type === type);
+    if (index === -1) {
+      return undefined;
+    }
+
+    return this.queuedResults.splice(index, 1)[0];
+  }
+}
+
+export class MockKVNamespace {
+  store = new Map<string, string>();
+
+  async get(_key: string): Promise<string | null> {
+    return null;
+  }
+
+  async put(key: string, value: string, _options?: unknown): Promise<void> {
+    this.store.set(key, value);
+  }
+
+  async delete(key: string): Promise<void> {
+    this.store.delete(key);
+  }
+
+  async list(): Promise<{ keys: string[]; list_complete: boolean }> {
+    return { keys: [], list_complete: true };
+  }
+}
+
+export class MockR2Bucket {
+  objects = new Map<string, string>();
+
+  async put(key: string, value: string): Promise<void> {
+    this.objects.set(key, value);
+  }
+
+  async delete(key: string | string[]): Promise<void> {
+    if (Array.isArray(key)) {
+      key.forEach((k) => this.objects.delete(k));
+    } else {
+      this.objects.delete(key);
+    }
+  }
+}
+
+export class MockQueue {
+  messages: unknown[] = [];
+
+  async send(message: unknown): Promise<void> {
+    this.messages.push(message);
+  }
+
+  async sendBatch(messages: unknown[]): Promise<void> {
+    this.messages.push(...messages);
+  }
+}
+
+export type GitHubMonitorEnv = {
+  PLATFORM_DB: MockD1Database;
+  PLATFORM_CACHE: MockKVNamespace;
+  PLATFORM_ARCHIVES: MockR2Bucket;
+  PLATFORM_TELEMETRY: MockQueue;
+  GITHUB_WEBHOOK_SECRET: string;
+};
+
+export function createGitHubMonitorEnv(secret = 'test-secret'): GitHubMonitorEnv {
+  return {
+    PLATFORM_DB: new MockD1Database(),
+    PLATFORM_CACHE: new MockKVNamespace(),
+    PLATFORM_ARCHIVES: new MockR2Bucket(),
+    PLATFORM_TELEMETRY: new MockQueue(),
+    GITHUB_WEBHOOK_SECRET: secret,
+  };
+}