onboardme-sdk 0.0.1

package/src/__tests__/week5-day2.test.ts

@@ -0,0 +1,222 @@
+/**
+ * Week 5 Day 2 — context-collector.ts
+ *
+ * Tests for:
+ *   - src/auto-generate/context-collector.ts (collectContext)
+ *
+ * Verifies: title, h1-h3 headings, nav links, buttons, deduplication,
+ * trimming, empty filtering, max caps, [role="button"] support.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { collectContext } from '../auto-generate/context-collector.js';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function setBody(html: string) {
+  document.body.innerHTML = html;
+}
+
+beforeEach(() => {
+  document.title = '';
+  document.body.innerHTML = '';
+});
+
+// ---------------------------------------------------------------------------
+// title
+// ---------------------------------------------------------------------------
+
+describe('Week 5 Day 2 — collectContext: title', () => {
+  it('returns document.title', () => {
+    document.title = 'Acme App — Dashboard';
+    const ctx = collectContext();
+    expect(ctx.title).toBe('Acme App — Dashboard');
+  });
+
+  it('returns empty string when document.title is empty', () => {
+    document.title = '';
+    const ctx = collectContext();
+    expect(ctx.title).toBe('');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// headings
+// ---------------------------------------------------------------------------
+
+describe('Week 5 Day 2 — collectContext: headings', () => {
+  it('collects h1 text', () => {
+    setBody('<h1>Welcome to Acme</h1>');
+    expect(collectContext().headings).toContain('Welcome to Acme');
+  });
+
+  it('collects h2 text', () => {
+    setBody('<h2>Getting Started</h2>');
+    expect(collectContext().headings).toContain('Getting Started');
+  });
+
+  it('collects h3 text', () => {
+    setBody('<h3>Step one</h3>');
+    expect(collectContext().headings).toContain('Step one');
+  });
+
+  it('does NOT collect h4 or deeper', () => {
+    setBody('<h4>Not included</h4><h5>Also not</h5>');
+    expect(collectContext().headings).toHaveLength(0);
+  });
+
+  it('collects multiple headings in DOM order', () => {
+    setBody('<h1>Alpha</h1><h2>Beta</h2><h3>Gamma</h3>');
+    const { headings } = collectContext();
+    expect(headings).toEqual(['Alpha', 'Beta', 'Gamma']);
+  });
+
+  it('trims whitespace from heading text', () => {
+    setBody('<h1>  Padded heading  </h1>');
+    expect(collectContext().headings[0]).toBe('Padded heading');
+  });
+
+  it('skips headings with only whitespace', () => {
+    setBody('<h1>   </h1><h2>Real heading</h2>');
+    const { headings } = collectContext();
+    expect(headings).toEqual(['Real heading']);
+  });
+
+  it('deduplicates identical heading text', () => {
+    setBody('<h1>Duplicate</h1><h2>Duplicate</h2>');
+    const { headings } = collectContext();
+    expect(headings).toEqual(['Duplicate']);
+  });
+
+  it('caps at 10 headings', () => {
+    const html = Array.from({ length: 15 }, (_, i) => `<h2>Heading ${i}</h2>`).join('');
+    setBody(html);
+    expect(collectContext().headings).toHaveLength(10);
+  });
+
+  it('returns empty array when no headings exist', () => {
+    setBody('<p>No headings here</p>');
+    expect(collectContext().headings).toEqual([]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// navLinks
+// ---------------------------------------------------------------------------
+
+describe('Week 5 Day 2 — collectContext: navLinks', () => {
+  it('collects anchor text inside a nav element', () => {
+    setBody('<nav><a href="/home">Home</a><a href="/settings">Settings</a></nav>');
+    expect(collectContext().navLinks).toEqual(['Home', 'Settings']);
+  });
+
+  it('does NOT collect anchors outside of nav', () => {
+    setBody('<a href="/signup">Sign up</a>');
+    expect(collectContext().navLinks).toEqual([]);
+  });
+
+  it('trims whitespace from nav link text', () => {
+    setBody('<nav><a href="/">  Dashboard  </a></nav>');
+    expect(collectContext().navLinks[0]).toBe('Dashboard');
+  });
+
+  it('skips nav links with only whitespace text', () => {
+    setBody('<nav><a href="/"> </a><a href="/help">Help</a></nav>');
+    expect(collectContext().navLinks).toEqual(['Help']);
+  });
+
+  it('deduplicates nav link text', () => {
+    setBody('<nav><a href="/a">Link</a><a href="/b">Link</a></nav>');
+    expect(collectContext().navLinks).toEqual(['Link']);
+  });
+
+  it('caps at 10 nav links', () => {
+    const links = Array.from({ length: 15 }, (_, i) => `<a href="/${i}">Link ${i}</a>`).join('');
+    setBody(`<nav>${links}</nav>`);
+    expect(collectContext().navLinks).toHaveLength(10);
+  });
+
+  it('returns empty array when no nav exists', () => {
+    setBody('<p>No nav</p>');
+    expect(collectContext().navLinks).toEqual([]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// buttons
+// ---------------------------------------------------------------------------
+
+describe('Week 5 Day 2 — collectContext: buttons', () => {
+  it('collects button element text', () => {
+    setBody('<button>Create project</button>');
+    expect(collectContext().buttons).toContain('Create project');
+  });
+
+  it('collects [role="button"] text', () => {
+    setBody('<div role="button">Invite team</div>');
+    expect(collectContext().buttons).toContain('Invite team');
+  });
+
+  it('trims whitespace from button text', () => {
+    setBody('<button>  Upgrade  </button>');
+    expect(collectContext().buttons[0]).toBe('Upgrade');
+  });
+
+  it('skips buttons with only whitespace text', () => {
+    setBody('<button>   </button><button>Save</button>');
+    expect(collectContext().buttons).toEqual(['Save']);
+  });
+
+  it('deduplicates button text', () => {
+    setBody('<button>Delete</button><button>Delete</button>');
+    expect(collectContext().buttons).toEqual(['Delete']);
+  });
+
+  it('caps at 15 buttons', () => {
+    const html = Array.from({ length: 20 }, (_, i) => `<button>Btn ${i}</button>`).join('');
+    setBody(html);
+    expect(collectContext().buttons).toHaveLength(15);
+  });
+
+  it('returns empty array when no buttons exist', () => {
+    setBody('<p>No buttons</p>');
+    expect(collectContext().buttons).toEqual([]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Return shape
+// ---------------------------------------------------------------------------
+
+describe('Week 5 Day 2 — collectContext: return shape', () => {
+  it('always returns an object with all four ProductContext fields', () => {
+    const ctx = collectContext();
+    expect(ctx).toHaveProperty('title');
+    expect(ctx).toHaveProperty('headings');
+    expect(ctx).toHaveProperty('navLinks');
+    expect(ctx).toHaveProperty('buttons');
+  });
+
+  it('returns a complete snapshot from a realistic page fragment', () => {
+    document.title = 'Acme — Projects';
+    setBody(`
+      <h1>Your Projects</h1>
+      <h2>Recent Activity</h2>
+      <nav>
+        <a href="/dashboard">Dashboard</a>
+        <a href="/projects">Projects</a>
+        <a href="/settings">Settings</a>
+      </nav>
+      <button>New Project</button>
+      <button>Invite Member</button>
+      <div role="button">Upgrade Plan</div>
+    `);
+    const ctx = collectContext();
+    expect(ctx.title).toBe('Acme — Projects');
+    expect(ctx.headings).toEqual(['Your Projects', 'Recent Activity']);
+    expect(ctx.navLinks).toEqual(['Dashboard', 'Projects', 'Settings']);
+    expect(ctx.buttons).toEqual(['New Project', 'Invite Member', 'Upgrade Plan']);
+  });
+});

package/src/__tests__/week5-day3.test.ts

@@ -0,0 +1,297 @@
+/**
+ * Week 5 Day 3 — flow-generator-client.ts
+ *
+ * Tests for:
+ *   - src/auto-generate/flow-generator-client.ts
+ *     fetchGeneratedFlows: cache hit, cache miss, expiry, server errors,
+ *                          network errors, cache save, body shape
+ *     mergeFlows: append, dedup by id, empty cases
+ *     loadCache / saveCache / cacheKey: storage helpers
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+  fetchGeneratedFlows,
+  mergeFlows,
+  loadCache,
+  saveCache,
+  cacheKey,
+  DEFAULT_CACHE_TTL_MS,
+} from '../auto-generate/flow-generator-client.js';
+import type { FlowConfig, ProductContext } from '@onboardme/types';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const ENDPOINT = 'http://localhost:3002/generate';
+const PRODUCT_ID = 'test-product';
+
+const mockContext: ProductContext = {
+  title: 'Acme App',
+  headings: ['Welcome'],
+  navLinks: ['Home'],
+  buttons: ['Get Started'],
+};
+
+const generatedFlow: FlowConfig = {
+  id: 'gen-flow-1',
+  name: 'AI Welcome Flow',
+  trigger: { type: 'auto' },
+  steps: [
+    {
+      id: 'step-1',
+      type: 'modal',
+      order: 1,
+      title: 'Welcome!',
+      body: 'Let us show you around.',
+      cta: 'Next',
+    },
+  ],
+};
+
+const manualFlow: FlowConfig = {
+  id: 'manual-flow-1',
+  name: 'Manual Flow',
+  trigger: { type: 'auto' },
+  steps: [],
+};
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeServerResponse(flows: FlowConfig[]) {
+  return vi.fn().mockResolvedValue({
+    ok: true,
+    json: () => Promise.resolve({ flows }),
+  });
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  vi.spyOn(console, 'warn').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  localStorage.clear();
+});
+
+// ---------------------------------------------------------------------------
+// cacheKey
+// ---------------------------------------------------------------------------
+
+describe('Week 5 Day 3 — cacheKey', () => {
+  it('returns the correct localStorage key', () => {
+    expect(cacheKey('my-product')).toBe('onboardme_autogen_my-product');
+  });
+
+  it('includes productId verbatim', () => {
+    expect(cacheKey('prod-123')).toBe('onboardme_autogen_prod-123');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// saveCache / loadCache
+// ---------------------------------------------------------------------------
+
+describe('Week 5 Day 3 — saveCache + loadCache', () => {
+  it('saveCache writes flows to localStorage', () => {
+    saveCache(PRODUCT_ID, [generatedFlow]);
+    expect(localStorage.getItem(cacheKey(PRODUCT_ID))).not.toBeNull();
+  });
+
+  it('loadCache returns saved flows within TTL', () => {
+    saveCache(PRODUCT_ID, [generatedFlow]);
+    const result = loadCache(PRODUCT_ID, DEFAULT_CACHE_TTL_MS);
+    expect(result).toHaveLength(1);
+    expect(result![0].id).toBe('gen-flow-1');
+  });
+
+  it('loadCache returns null when no cache exists', () => {
+    expect(loadCache(PRODUCT_ID, DEFAULT_CACHE_TTL_MS)).toBeNull();
+  });
+
+  it('loadCache returns null when cache is expired', () => {
+    const expired = JSON.stringify({
+      flows: [generatedFlow],
+      cachedAt: Date.now() - DEFAULT_CACHE_TTL_MS - 1,
+    });
+    localStorage.setItem(cacheKey(PRODUCT_ID), expired);
+    expect(loadCache(PRODUCT_ID, DEFAULT_CACHE_TTL_MS)).toBeNull();
+  });
+
+  it('loadCache returns null on corrupt JSON', () => {
+    localStorage.setItem(cacheKey(PRODUCT_ID), 'not-json{{{');
+    expect(loadCache(PRODUCT_ID, DEFAULT_CACHE_TTL_MS)).toBeNull();
+  });
+
+  it('loadCache respects custom TTL', () => {
+    const shortTtl = 1_000; // 1 second
+    const expired = JSON.stringify({
+      flows: [generatedFlow],
+      cachedAt: Date.now() - 2_000, // 2s ago
+    });
+    localStorage.setItem(cacheKey(PRODUCT_ID), expired);
+    expect(loadCache(PRODUCT_ID, shortTtl)).toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// fetchGeneratedFlows — cache hit
+// ---------------------------------------------------------------------------
+
+describe('Week 5 Day 3 — fetchGeneratedFlows: cache hit', () => {
+  it('returns cached flows without calling fetch', async () => {
+    saveCache(PRODUCT_ID, [generatedFlow]);
+    const fetchMock = vi.fn();
+    vi.stubGlobal('fetch', fetchMock);
+
+    const result = await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(result[0].id).toBe('gen-flow-1');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// fetchGeneratedFlows — cache miss (network fetch)
+// ---------------------------------------------------------------------------
+
+describe('Week 5 Day 3 — fetchGeneratedFlows: cache miss', () => {
+  it('POSTs to the endpoint when no cache exists', async () => {
+    const fetchMock = makeServerResponse([generatedFlow]);
+    vi.stubGlobal('fetch', fetchMock);
+
+    await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    expect(fetchMock).toHaveBeenCalledWith(
+      ENDPOINT,
+      expect.objectContaining({ method: 'POST' }),
+    );
+  });
+
+  it('sends productId and context in the request body', async () => {
+    const fetchMock = makeServerResponse([generatedFlow]);
+    vi.stubGlobal('fetch', fetchMock);
+
+    await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    const body = JSON.parse(fetchMock.mock.calls[0][1].body);
+    expect(body.productId).toBe(PRODUCT_ID);
+    expect(body.context.title).toBe('Acme App');
+  });
+
+  it('returns the flows from the server response', async () => {
+    vi.stubGlobal('fetch', makeServerResponse([generatedFlow]));
+    const result = await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe('gen-flow-1');
+  });
+
+  it('saves fetched flows to localStorage cache', async () => {
+    vi.stubGlobal('fetch', makeServerResponse([generatedFlow]));
+    await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    expect(localStorage.getItem(cacheKey(PRODUCT_ID))).not.toBeNull();
+  });
+
+  it('a subsequent call hits the cache (no second fetch)', async () => {
+    const fetchMock = makeServerResponse([generatedFlow]);
+    vi.stubGlobal('fetch', fetchMock);
+
+    await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// fetchGeneratedFlows — error handling
+// ---------------------------------------------------------------------------
+
+describe('Week 5 Day 3 — fetchGeneratedFlows: error handling', () => {
+  it('returns [] on non-2xx server response', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: false, status: 500 }));
+    const result = await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    expect(result).toEqual([]);
+  });
+
+  it('returns [] on network error', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('Network failure')));
+    const result = await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    expect(result).toEqual([]);
+  });
+
+  it('never throws on any error', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('crash')));
+    await expect(
+      fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext),
+    ).resolves.toBeDefined();
+  });
+
+  it('returns [] when server returns missing flows key', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({ something: 'else' }),
+    }));
+    const result = await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    expect(result).toEqual([]);
+  });
+
+  it('returns [] when server returns non-array flows', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({ flows: 'not-an-array' }),
+    }));
+    const result = await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    expect(result).toEqual([]);
+  });
+
+  it('does NOT cache on server error', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: false, status: 503 }));
+    await fetchGeneratedFlows(ENDPOINT, PRODUCT_ID, mockContext);
+    expect(localStorage.getItem(cacheKey(PRODUCT_ID))).toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// mergeFlows
+// ---------------------------------------------------------------------------
+
+describe('Week 5 Day 3 — mergeFlows', () => {
+  it('appends generated flows after manual flows', () => {
+    const result = mergeFlows([manualFlow], [generatedFlow]);
+    expect(result[0].id).toBe('manual-flow-1');
+    expect(result[1].id).toBe('gen-flow-1');
+  });
+
+  it('skips generated flows whose id already exists in manual', () => {
+    const duplicate: FlowConfig = { ...generatedFlow, id: 'manual-flow-1' };
+    const result = mergeFlows([manualFlow], [duplicate]);
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe('manual-flow-1');
+  });
+
+  it('returns manual unchanged when generated is empty', () => {
+    const result = mergeFlows([manualFlow], []);
+    expect(result).toEqual([manualFlow]);
+  });
+
+  it('returns generated when manual is empty', () => {
+    const result = mergeFlows([], [generatedFlow]);
+    expect(result).toEqual([generatedFlow]);
+  });
+
+  it('returns [] when both are empty', () => {
+    expect(mergeFlows([], [])).toEqual([]);
+  });
+
+  it('preserves order: all manual first, then novel generated', () => {
+    const manual1: FlowConfig = { ...manualFlow, id: 'm1' };
+    const manual2: FlowConfig = { ...manualFlow, id: 'm2' };
+    const gen1: FlowConfig = { ...generatedFlow, id: 'g1' };
+    const gen2: FlowConfig = { ...generatedFlow, id: 'g2' };
+
+    const result = mergeFlows([manual1, manual2], [gen1, gen2]);
+    expect(result.map((f) => f.id)).toEqual(['m1', 'm2', 'g1', 'g2']);
+  });
+});