onboardme-sdk 0.0.1

package/src/__tests__/week3-day4.test.ts

@@ -0,0 +1,213 @@
+/**
+ * Week 3 Day 4 — completionEvent Auto-Check
+ *
+ * Tests watchCompletionEvents() in isolation and through renderChecklist():
+ *
+ * watchCompletionEvents (unit):
+ *   ✓ Returns an unsubscribe function
+ *   ✓ track(matchingEvent) → onItemComplete called with the correct itemId
+ *   ✓ track(nonMatchingEvent) → onItemComplete NOT called
+ *   ✓ Item with no completionEvent is not watched
+ *   ✓ After unsubscribe, track no longer triggers onItemComplete
+ *   ✓ After unsubscribe, OnboardMe.track is restored to original
+ *
+ * Integration via renderChecklist:
+ *   ✓ OnboardMe.track(matchingEvent) auto-checks the item visually
+ *   ✓ Auto-check updates the progress label
+ *   ✓ Auto-check calls markStepComplete (isStepComplete returns true)
+ *   ✓ Second track call for the same event is idempotent
+ *   ✓ Re-rendering cleans up the previous watcher (no double-fire)
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { watchCompletionEvents } from '../storage/event-listener.js';
+import { renderChecklist } from '../components/checklist.js';
+import { getShadowRoot } from '../components/shadow-host.js';
+import { isStepComplete, clearProgress } from '../storage/progress-tracker.js';
+import OnboardMe, { _resetIndex } from '../index.js';
+import type { FlowConfig, FlowStep, ChecklistItem } from '@onboardme/types';
+import type { Progress } from '../storage/progress-tracker.js';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const PID = 'day4-product';
+const FID = 'day4-flow';
+
+function makeItem(overrides: Partial<ChecklistItem> = {}): ChecklistItem {
+  return { id: 'item-1', label: 'Do the thing', order: 1, ...overrides };
+}
+
+function makeFlow(items: ChecklistItem[]): FlowConfig {
+  const step: FlowStep = {
+    id: 'cl-step',
+    type: 'checklist',
+    order: 1,
+    title: 'Getting started',
+    body: '',
+    items,
+    trigger: { type: 'page_load' },
+    completionGoal: 'done',
+  } as unknown as FlowStep;
+  return { id: FID, name: 'Onboarding', steps: [step], completionGoal: 'done', priority: 1 };
+}
+
+const EMPTY: Progress = { completedSteps: [], lastUpdated: 0 };
+
+// ---------------------------------------------------------------------------
+// Setup / teardown
+// ---------------------------------------------------------------------------
+
+// Keep a reference to the original track so we can always restore it
+const originalTrack = OnboardMe.track;
+
+let shadowRoot: ShadowRoot;
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+  localStorage.clear();
+  _resetIndex();
+  OnboardMe.track = originalTrack; // guarantee clean state before each test
+  shadowRoot = getShadowRoot();
+});
+
+afterEach(() => {
+  OnboardMe.track = originalTrack; // restore in case a test left a patch in place
+});
+
+// ---------------------------------------------------------------------------
+// watchCompletionEvents — unit tests
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 4 — watchCompletionEvents (unit)', () => {
+  it('returns a function (the unsubscribe function)', () => {
+    const unsub = watchCompletionEvents(makeFlow([makeItem()]), () => {});
+    expect(typeof unsub).toBe('function');
+    unsub();
+  });
+
+  it('track with a matching completionEvent calls onItemComplete with the correct itemId', () => {
+    const items = [makeItem({ id: 'step-a', completionEvent: 'created_project' })];
+    const onComplete = vi.fn();
+    const unsub = watchCompletionEvents(makeFlow(items), onComplete);
+
+    OnboardMe.track('created_project');
+    expect(onComplete).toHaveBeenCalledOnce();
+    expect(onComplete).toHaveBeenCalledWith('step-a');
+    unsub();
+  });
+
+  it('track with a non-matching event does NOT call onItemComplete', () => {
+    const items = [makeItem({ id: 'step-a', completionEvent: 'created_project' })];
+    const onComplete = vi.fn();
+    const unsub = watchCompletionEvents(makeFlow(items), onComplete);
+
+    OnboardMe.track('some_other_event');
+    expect(onComplete).not.toHaveBeenCalled();
+    unsub();
+  });
+
+  it('item with no completionEvent is not watched', () => {
+    const items = [makeItem({ id: 'step-a' })]; // no completionEvent
+    const onComplete = vi.fn();
+    const unsub = watchCompletionEvents(makeFlow(items), onComplete);
+
+    OnboardMe.track('created_project');
+    expect(onComplete).not.toHaveBeenCalled();
+    unsub();
+  });
+
+  it('after unsubscribe, track no longer triggers onItemComplete', () => {
+    const items = [makeItem({ id: 'step-a', completionEvent: 'created_project' })];
+    const onComplete = vi.fn();
+    const unsub = watchCompletionEvents(makeFlow(items), onComplete);
+    unsub();
+
+    OnboardMe.track('created_project');
+    expect(onComplete).not.toHaveBeenCalled();
+  });
+
+  it('after unsubscribe, OnboardMe.track is restored to the original', () => {
+    const before = OnboardMe.track;
+    const unsub = watchCompletionEvents(makeFlow([makeItem()]), () => {});
+    // While patched, track should be a different function reference
+    expect(OnboardMe.track).not.toBe(before);
+    unsub();
+    expect(OnboardMe.track).toBe(before);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Integration via renderChecklist
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 4 — integration via renderChecklist', () => {
+  it('OnboardMe.track with matching event auto-checks the item visually', () => {
+    const items = [makeItem({ id: 'step-a', completionEvent: 'project_created', order: 1 })];
+    renderChecklist(makeFlow(items), EMPTY, shadowRoot, false, PID, FID);
+
+    OnboardMe.track('project_created');
+
+    const li = shadowRoot.querySelector('[data-item-id="step-a"]');
+    expect(li?.classList.contains('om-checklist__item--done')).toBe(true);
+  });
+
+  it('auto-check updates the progress label', () => {
+    const items = [
+      makeItem({ id: 'a', completionEvent: 'ev_a', order: 1 }),
+      makeItem({ id: 'b', order: 2 }),
+    ];
+    renderChecklist(makeFlow(items), EMPTY, shadowRoot, false, PID, FID);
+
+    OnboardMe.track('ev_a');
+
+    const label = shadowRoot.querySelector('[data-onboardme="progress-label"]');
+    expect(label?.textContent).toBe('1 of 2 complete');
+  });
+
+  it('auto-check calls markStepComplete — isStepComplete returns true', () => {
+    clearProgress(PID, FID);
+    const items = [makeItem({ id: 'step-x', completionEvent: 'did_thing', order: 1 })];
+    renderChecklist(makeFlow(items), EMPTY, shadowRoot, false, PID, FID);
+
+    OnboardMe.track('did_thing');
+
+    expect(isStepComplete(PID, FID, 'step-x')).toBe(true);
+  });
+
+  it('firing the same event twice is idempotent — no duplicate in completedSteps', () => {
+    const items = [makeItem({ id: 'step-y', completionEvent: 'did_thing', order: 1 })];
+    renderChecklist(makeFlow(items), EMPTY, shadowRoot, false, PID, FID);
+
+    OnboardMe.track('did_thing');
+    OnboardMe.track('did_thing');
+
+    const label = shadowRoot.querySelector('[data-onboardme="progress-label"]');
+    expect(label?.textContent).toBe('1 of 1 complete');
+  });
+
+  it('re-rendering cleans up the previous watcher — event fires only once', () => {
+    const onComplete = vi.fn();
+    const items = [makeItem({ id: 'step-z', completionEvent: 'my_event', order: 1 })];
+    const flow = makeFlow(items);
+
+    // Render once with a spy wired in via a wrapper
+    // We'll verify by checking that the item is only marked done once (no double-fire)
+    renderChecklist(flow, EMPTY, shadowRoot, false, PID, FID);
+    // Re-render — previous watcher should be unsubscribed
+    renderChecklist(flow, EMPTY, shadowRoot, false, PID, FID);
+
+    OnboardMe.track('my_event');
+
+    // If the old watcher were still alive, the item could be double-processed.
+    // Verify by checking the DOM — item should be done exactly once (not duplicated/glitched).
+    const li = shadowRoot.querySelector('[data-item-id="step-z"]');
+    expect(li?.classList.contains('om-checklist__item--done')).toBe(true);
+    // And only one panel exists (dedup guard still holds)
+    expect(shadowRoot.querySelectorAll('[data-onboardme="checklist"]')).toHaveLength(1);
+
+    // Suppress unused var warning
+    void onComplete;
+  });
+});

package/src/__tests__/week3-day5.test.ts

@@ -0,0 +1,350 @@
+/**
+ * Week 3 Day 5 — Full integration tests + Week 3 verification checklist
+ *
+ * Exercises every item on the Week 3 checklist end-to-end:
+ *   ✓ Checklist renders — items in order sequence, correct initial checked state
+ *   ✓ Manual check — item checks, progress bar updates immediately
+ *   ✓ Page reload — checked items still checked, progress bar correct
+ *   ✓ required: false item — optional badge shown, does not block "all done" state
+ *   ✓ Auto-check via track() — matching item checks without click
+ *   ✓ Collapse — panel collapses to pill; pill shows count; click expands
+ *   ✓ >7 items — debug warn in console; items still render
+ *   ✓ pnpm test — all unit tests pass (this file is the final gate)
+ *   ✓ Full lifecycle: render → manual check → auto-check → all required done
+ *
+ * These tests wire together everything built in Days 1–4.
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { renderChecklist } from '../components/checklist.js';
+import { getShadowRoot } from '../components/shadow-host.js';
+import {
+  loadProgress,
+  markStepComplete,
+  clearProgress,
+  isStepComplete,
+} from '../storage/progress-tracker.js';
+import OnboardMe, { _resetIndex } from '../index.js';
+import type { FlowConfig, FlowStep, ChecklistItem } from '@onboardme/types';
+import type { Progress } from '../storage/progress-tracker.js';
+
+// ---------------------------------------------------------------------------
+// Shared test fixtures
+// ---------------------------------------------------------------------------
+
+const PID = 'w3-checklist';
+const FID = 'w3-flow';
+
+/**
+ * The reference flow used across all verification tests.
+ *
+ * Items (by order):
+ *   1. "Create your profile"  — required,  completionEvent: 'profile_created'
+ *   2. "Invite a teammate"    — required,  completionEvent: 'teammate_invited'
+ *   3. "Create first project" — required,  no completionEvent (manual only)
+ *   4. "Explore the docs"     — optional,  no completionEvent
+ */
+const REF_ITEMS: ChecklistItem[] = [
+  { id: 'profile',  label: 'Create your profile',  order: 1, required: true,  completionEvent: 'profile_created'   },
+  { id: 'teammate', label: 'Invite a teammate',     order: 2, required: true,  completionEvent: 'teammate_invited'  },
+  { id: 'project',  label: 'Create first project',  order: 3, required: true                                        },
+  { id: 'docs',     label: 'Explore the docs',      order: 4, required: false                                       },
+];
+
+function makeFlow(items: ChecklistItem[] = REF_ITEMS): FlowConfig {
+  const step: FlowStep = {
+    id: 'cl-step',
+    type: 'checklist',
+    order: 1,
+    title: 'Getting started',
+    body: '',
+    items,
+    trigger: { type: 'page_load' },
+    completionGoal: 'onboarding_complete',
+  } as unknown as FlowStep;
+  return {
+    id: FID,
+    name: 'Onboarding checklist',
+    steps: [step],
+    completionGoal: 'onboarding_complete',
+    priority: 1,
+  };
+}
+
+const EMPTY: Progress = { completedSteps: [], lastUpdated: 0 };
+
+function click(el: Element | null): void {
+  el?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+}
+
+// ---------------------------------------------------------------------------
+// Setup / teardown
+// ---------------------------------------------------------------------------
+
+const originalTrack = OnboardMe.track;
+let shadowRoot: ShadowRoot;
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+  localStorage.clear();
+  _resetIndex();
+  OnboardMe.track = originalTrack;
+  shadowRoot = getShadowRoot();
+  clearProgress(PID, FID);
+});
+
+afterEach(() => {
+  OnboardMe.track = originalTrack;
+});
+
+// ---------------------------------------------------------------------------
+// Verification checklist item 1 — Checklist renders
+// ---------------------------------------------------------------------------
+
+describe('W3 checklist: Checklist renders', () => {
+  it('items appear in order field sequence regardless of array order', () => {
+    // Pass items shuffled — should still render 1→2→3→4
+    const shuffled = [REF_ITEMS[2], REF_ITEMS[0], REF_ITEMS[3], REF_ITEMS[1]];
+    renderChecklist(makeFlow(shuffled), EMPTY, shadowRoot, false, PID, FID);
+
+    const rendered = shadowRoot.querySelectorAll('[data-item-id]');
+    expect(rendered[0]?.getAttribute('data-item-id')).toBe('profile');
+    expect(rendered[1]?.getAttribute('data-item-id')).toBe('teammate');
+    expect(rendered[2]?.getAttribute('data-item-id')).toBe('project');
+    expect(rendered[3]?.getAttribute('data-item-id')).toBe('docs');
+  });
+
+  it('already-completed items are shown as done on first render', () => {
+    const progress: Progress = { completedSteps: ['profile', 'teammate'], lastUpdated: Date.now() };
+    renderChecklist(makeFlow(), progress, shadowRoot, false, PID, FID);
+
+    expect(shadowRoot.querySelector('[data-item-id="profile"]')?.classList.contains('om-checklist__item--done')).toBe(true);
+    expect(shadowRoot.querySelector('[data-item-id="teammate"]')?.classList.contains('om-checklist__item--done')).toBe(true);
+    expect(shadowRoot.querySelector('[data-item-id="project"]')?.classList.contains('om-checklist__item--done')).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Verification checklist item 2 — Manual check
+// ---------------------------------------------------------------------------
+
+describe('W3 checklist: Manual check', () => {
+  it('clicking an item marks it done and updates the progress bar immediately', () => {
+    renderChecklist(makeFlow(), EMPTY, shadowRoot, false, PID, FID);
+
+    click(shadowRoot.querySelector('[data-item-id="project"]'));
+
+    const li = shadowRoot.querySelector('[data-item-id="project"]');
+    expect(li?.classList.contains('om-checklist__item--done')).toBe(true);
+
+    // 1 of 3 required done → 33%
+    const fill = shadowRoot.querySelector<HTMLElement>('.om-checklist__progress-bar-fill');
+    expect(fill?.style.width).toBe('33%');
+  });
+
+  it('clicking an item updates the progress label immediately', () => {
+    renderChecklist(makeFlow(), EMPTY, shadowRoot, false, PID, FID);
+    click(shadowRoot.querySelector('[data-item-id="project"]'));
+
+    const label = shadowRoot.querySelector('[data-onboardme="progress-label"]');
+    expect(label?.textContent).toBe('1 of 4 complete');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Verification checklist item 3 — Page reload
+// ---------------------------------------------------------------------------
+
+describe('W3 checklist: Page reload', () => {
+  it('checked items are still checked after re-render with saved progress', () => {
+    // Mark two items complete via the storage layer (as a click would do)
+    markStepComplete(PID, FID, 'profile');
+    markStepComplete(PID, FID, 'project');
+
+    // Simulate reload: read from storage, re-render
+    const saved = loadProgress(PID, FID);
+    renderChecklist(makeFlow(), saved, shadowRoot, false, PID, FID);
+
+    expect(shadowRoot.querySelector('[data-item-id="profile"]')?.classList.contains('om-checklist__item--done')).toBe(true);
+    expect(shadowRoot.querySelector('[data-item-id="project"]')?.classList.contains('om-checklist__item--done')).toBe(true);
+    expect(shadowRoot.querySelector('[data-item-id="teammate"]')?.classList.contains('om-checklist__item--done')).toBe(false);
+  });
+
+  it('progress bar is correct after reload reflecting saved state', () => {
+    markStepComplete(PID, FID, 'profile');
+    markStepComplete(PID, FID, 'teammate');
+
+    const saved = loadProgress(PID, FID);
+    renderChecklist(makeFlow(), saved, shadowRoot, false, PID, FID);
+
+    // 2 of 3 required → 67%
+    const fill = shadowRoot.querySelector<HTMLElement>('.om-checklist__progress-bar-fill');
+    expect(fill?.style.width).toBe('67%');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Verification checklist item 4 — required: false item
+// ---------------------------------------------------------------------------
+
+describe('W3 checklist: required: false item', () => {
+  it('optional item shows the "Optional" badge', () => {
+    renderChecklist(makeFlow(), EMPTY, shadowRoot, false, PID, FID);
+    const badge = shadowRoot.querySelector('[data-item-id="docs"] .om-badge');
+    expect(badge?.textContent).toBe('Optional');
+  });
+
+  it('completing all required items fills bar to 100% even if optional item is unchecked', () => {
+    const progress: Progress = {
+      completedSteps: ['profile', 'teammate', 'project'], // docs (optional) not done
+      lastUpdated: Date.now(),
+    };
+    renderChecklist(makeFlow(), progress, shadowRoot, false, PID, FID);
+
+    const fill = shadowRoot.querySelector<HTMLElement>('.om-checklist__progress-bar-fill');
+    expect(fill?.style.width).toBe('100%');
+  });
+
+  it('optional item does not block the required bar — clicking it leaves fill unchanged', () => {
+    renderChecklist(makeFlow(), EMPTY, shadowRoot, false, PID, FID);
+    click(shadowRoot.querySelector('[data-item-id="docs"]'));
+
+    // Required bar should still be 0% (no required item done)
+    const fill = shadowRoot.querySelector<HTMLElement>('.om-checklist__progress-bar-fill');
+    expect(fill?.style.width).toBe('0%');
+
+    // But label counts all items — 1 of 4 complete
+    const label = shadowRoot.querySelector('[data-onboardme="progress-label"]');
+    expect(label?.textContent).toBe('1 of 4 complete');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Verification checklist item 5 — Auto-check via track()
+// ---------------------------------------------------------------------------
+
+describe('W3 checklist: Auto-check via track()', () => {
+  it('calling OnboardMe.track(completionEvent) checks the matching item without a click', () => {
+    renderChecklist(makeFlow(), EMPTY, shadowRoot, false, PID, FID);
+
+    OnboardMe.track('profile_created');
+
+    const li = shadowRoot.querySelector('[data-item-id="profile"]');
+    expect(li?.classList.contains('om-checklist__item--done')).toBe(true);
+  });
+
+  it('auto-check persists to localStorage', () => {
+    renderChecklist(makeFlow(), EMPTY, shadowRoot, false, PID, FID);
+    OnboardMe.track('teammate_invited');
+    expect(isStepComplete(PID, FID, 'teammate')).toBe(true);
+  });
+
+  it('auto-check updates the progress label and bar', () => {
+    renderChecklist(makeFlow(), EMPTY, shadowRoot, false, PID, FID);
+    OnboardMe.track('profile_created');
+
+    const label = shadowRoot.querySelector('[data-onboardme="progress-label"]');
+    const fill = shadowRoot.querySelector<HTMLElement>('.om-checklist__progress-bar-fill');
+    expect(label?.textContent).toBe('1 of 4 complete');
+    expect(fill?.style.width).toBe('33%');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Verification checklist item 6 — Collapse
+// ---------------------------------------------------------------------------
+
+describe('W3 checklist: Collapse', () => {
+  it('collapse button shrinks panel to pill and pill shows completion count', () => {
+    const progress: Progress = { completedSteps: ['profile'], lastUpdated: Date.now() };
+    renderChecklist(makeFlow(), progress, shadowRoot, false, PID, FID);
+
+    click(shadowRoot.querySelector('[data-onboardme="checklist-collapse"]'));
+
+    const panel = shadowRoot.querySelector('[data-onboardme="checklist"]');
+    expect(panel?.classList.contains('om-checklist--collapsed')).toBe(true);
+
+    const count = shadowRoot.querySelector('[data-onboardme="collapsed-count"]');
+    expect(count?.textContent).toBe('1 / 4');
+  });
+
+  it('clicking the collapsed pill expands the panel', () => {
+    renderChecklist(makeFlow(), EMPTY, shadowRoot, false, PID, FID);
+    const panel = shadowRoot.querySelector('[data-onboardme="checklist"]');
+
+    click(shadowRoot.querySelector('[data-onboardme="checklist-collapse"]'));
+    expect(panel?.classList.contains('om-checklist--collapsed')).toBe(true);
+
+    click(panel);
+    expect(panel?.classList.contains('om-checklist--collapsed')).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Verification checklist item 7 — >7 items
+// ---------------------------------------------------------------------------
+
+describe('W3 checklist: >7 items', () => {
+  it('logs a console.warn when more than 7 items exist (debug mode)', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const bigItems = Array.from({ length: 8 }, (_, i) => ({
+      id: `item-${i}`,
+      label: `Item ${i}`,
+      order: i + 1,
+    }));
+    renderChecklist(makeFlow(bigItems), EMPTY, shadowRoot, true, PID, FID);
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('more than 7 items'));
+    warnSpy.mockRestore();
+  });
+
+  it('all items still render even when >7 are present', () => {
+    const bigItems = Array.from({ length: 8 }, (_, i) => ({
+      id: `item-${i}`,
+      label: `Item ${i}`,
+      order: i + 1,
+    }));
+    renderChecklist(makeFlow(bigItems), EMPTY, shadowRoot, true, PID, FID);
+    expect(shadowRoot.querySelectorAll('.om-checklist__item')).toHaveLength(8);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Full lifecycle test
+// ---------------------------------------------------------------------------
+
+describe('W3 checklist: Full Week 3 lifecycle', () => {
+  it('render → manual check → auto-check → all required done → bar at 100%', () => {
+    // 1. Render with no prior progress
+    renderChecklist(makeFlow(), EMPTY, shadowRoot, false, PID, FID);
+    expect(shadowRoot.querySelector('[data-onboardme="progress-label"]')?.textContent)
+      .toBe('0 of 4 complete');
+
+    // 2. Manual check: click "Create first project" (required, no completionEvent)
+    click(shadowRoot.querySelector('[data-item-id="project"]'));
+    expect(shadowRoot.querySelector('[data-item-id="project"]')?.classList.contains('om-checklist__item--done')).toBe(true);
+
+    // 3. Auto-check "Create your profile" via track
+    OnboardMe.track('profile_created');
+    expect(shadowRoot.querySelector('[data-item-id="profile"]')?.classList.contains('om-checklist__item--done')).toBe(true);
+
+    // 4. Auto-check "Invite a teammate" via track
+    OnboardMe.track('teammate_invited');
+    expect(shadowRoot.querySelector('[data-item-id="teammate"]')?.classList.contains('om-checklist__item--done')).toBe(true);
+
+    // 5. All 3 required items done → progress bar at 100%
+    const fill = shadowRoot.querySelector<HTMLElement>('.om-checklist__progress-bar-fill');
+    expect(fill?.style.width).toBe('100%');
+
+    // 6. Label shows 3 of 4 complete (optional "docs" not checked)
+    expect(shadowRoot.querySelector('[data-onboardme="progress-label"]')?.textContent)
+      .toBe('3 of 4 complete');
+
+    // 7. Simulate reload — all three required steps persisted in localStorage
+    expect(isStepComplete(PID, FID, 'profile')).toBe(true);
+    expect(isStepComplete(PID, FID, 'teammate')).toBe(true);
+    expect(isStepComplete(PID, FID, 'project')).toBe(true);
+
+    const saved = loadProgress(PID, FID);
+    expect(saved.completedSteps).toHaveLength(3);
+  });
+});