mvc-kit 2.12.0 → 2.12.1

package/src/Resource.ViewModel.test.ts

@@ -0,0 +1,503 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ViewModel } from './ViewModel';
+import { Resource } from './Resource';
+import { Collection } from './Collection';
+import { singleton, teardownAll } from './singleton';
+
+type Item = { id: number; name: string; status: 'active' | 'inactive' };
+
+const alice: Item = { id: 1, name: 'Alice', status: 'active' };
+const bob: Item = { id: 2, name: 'Bob', status: 'inactive' };
+const charlie: Item = { id: 3, name: 'Charlie', status: 'active' };
+
+beforeEach(() => {
+  teardownAll();
+  vi.restoreAllMocks();
+});
+
+// ── Helpers ──────────────────────────────────────────────────────
+
+class TestResource extends Resource<Item> {
+  async loadAll() {
+    const data = [alice, bob, charlie];
+    this.reset(data);
+  }
+
+  async loadFiltered(status: Item['status']) {
+    const data = [alice, bob, charlie].filter(i => i.status === status);
+    this.reset(data);
+  }
+
+  async failingLoad() {
+    throw new Error('Network error');
+  }
+}
+
+interface TestState {
+  search: string;
+  statusFilter: 'all' | Item['status'];
+}
+
+class TestViewModel extends ViewModel<TestState> {
+  resource = singleton(TestResource);
+
+  // Prescribed pattern: each getter accesses the subscribable directly
+  get items(): Item[] {
+    return this.resource.items as Item[];
+  }
+
+  get filtered(): Item[] {
+    const { search, statusFilter } = this.state;
+    let result = this.resource.items as Item[];
+
+    if (search) {
+      const q = search.toLowerCase();
+      result = result.filter(i => i.name.toLowerCase().includes(q));
+    }
+    if (statusFilter !== 'all') {
+      result = result.filter(i => i.status === statusFilter);
+    }
+    return result;
+  }
+
+  get total(): number {
+    return this.resource.length;
+  }
+
+  get activeCount(): number {
+    return (this.resource.items as Item[]).filter(i => i.status === 'active').length;
+  }
+
+  protected onInit() {
+    if (this.resource.length === 0) this.resource.loadAll();
+  }
+
+  setSearch(search: string) { this.set({ search }); }
+  setStatusFilter(statusFilter: TestState['statusFilter']) { this.set({ statusFilter }); }
+}
+
+// ── Tests ────────────────────────────────────────────────────────
+
+describe('Resource + ViewModel — getter auto-tracking', () => {
+  it('ViewModel getter reads Resource items and recomputes on mutation', () => {
+    const vm = new TestViewModel({ search: '', statusFilter: 'all' });
+    vm.init();
+
+    expect(vm.items).toEqual([alice, bob, charlie]);
+    expect(vm.total).toBe(3);
+
+    vm.resource.add({ id: 4, name: 'Dave', status: 'active' });
+    expect(vm.total).toBe(4);
+    expect(vm.items).toHaveLength(4);
+
+    vm.dispose();
+  });
+
+  it('ViewModel getter invalidates when Resource.reset() is called', () => {
+    const vm = new TestViewModel({ search: '', statusFilter: 'all' });
+    vm.init();
+
+    expect(vm.total).toBe(3);
+
+    vm.resource.reset([alice]);
+    expect(vm.total).toBe(1);
+    expect(vm.items).toEqual([alice]);
+
+    vm.dispose();
+  });
+
+  it('ViewModel getter invalidates on Resource.update()', () => {
+    const vm = new TestViewModel({ search: '', statusFilter: 'all' });
+    vm.init();
+
+    expect(vm.activeCount).toBe(2);
+
+    vm.resource.update(2, { status: 'active' });
+    expect(vm.activeCount).toBe(3);
+
+    vm.dispose();
+  });
+
+  it('ViewModel getter invalidates on Resource.remove()', () => {
+    const vm = new TestViewModel({ search: '', statusFilter: 'all' });
+    vm.init();
+
+    expect(vm.total).toBe(3);
+
+    vm.resource.remove(1);
+    expect(vm.total).toBe(2);
+
+    vm.dispose();
+  });
+
+  it('ViewModel getter combines state deps + Resource deps correctly', () => {
+    const vm = new TestViewModel({ search: '', statusFilter: 'all' });
+    vm.init();
+
+    expect(vm.filtered).toEqual([alice, bob, charlie]);
+
+    // Change state dep (search)
+    vm.setSearch('ali');
+    expect(vm.filtered).toEqual([alice]);
+
+    // Change Resource dep (add item matching search)
+    vm.resource.add({ id: 4, name: 'Alicia', status: 'active' });
+    expect(vm.filtered).toHaveLength(2);
+
+    // Change status filter
+    vm.setStatusFilter('inactive');
+    expect(vm.filtered).toEqual([]);
+
+    vm.dispose();
+  });
+});
+
+describe('Resource + ViewModel — getter memoization', () => {
+  it('getter is memoized when neither state nor Resource changes', () => {
+    let callCount = 0;
+
+    class CountingVM extends ViewModel<TestState> {
+      resource = singleton(TestResource);
+
+      get items(): Item[] {
+        callCount++;
+        return this.resource.items as Item[];
+      }
+
+      setSearch(search: string) { this.set({ search }); }
+    }
+
+    const vm = new CountingVM({ search: '', statusFilter: 'all' });
+    vm.init();
+
+    callCount = 0;
+    const first = vm.items;
+    const second = vm.items;
+    expect(first).toBe(second);
+    expect(callCount).toBe(1); // computed once, then cached
+
+    vm.dispose();
+  });
+
+  it('getter recomputes only when Resource changes, not on unrelated state changes', () => {
+    let callCount = 0;
+
+    class CountingVM extends ViewModel<{ search: string; unrelated: number }> {
+      resource = singleton(TestResource);
+
+      get items(): Item[] {
+        callCount++;
+        return this.resource.items as Item[];
+      }
+
+      setUnrelated(n: number) { this.set({ unrelated: n }); }
+    }
+
+    const vm = new CountingVM({ search: '', unrelated: 0 });
+    vm.init();
+
+    callCount = 0;
+    vm.items; // compute + cache
+    expect(callCount).toBe(1);
+
+    // Unrelated state change — items getter only depends on resource, not 'unrelated'
+    vm.setUnrelated(42);
+    vm.items;
+    expect(callCount).toBe(1); // tier 2 cache hit — deps didn't change
+
+    // Resource mutation — should recompute
+    vm.resource.add({ id: 4, name: 'Dave', status: 'active' });
+    vm.items;
+    expect(callCount).toBe(2);
+
+    vm.dispose();
+  });
+});
+
+describe('Resource + ViewModel — lifecycle integration', () => {
+  it('onInit smart-load pattern: loads Resource data on first init', async () => {
+    const vm = new TestViewModel({ search: '', statusFilter: 'all' });
+    await vm.init();
+
+    expect(vm.total).toBe(3);
+    expect(vm.items).toEqual([alice, bob, charlie]);
+
+    vm.dispose();
+  });
+
+  it('onInit smart-load pattern: skips load when Resource already has data', async () => {
+    // Pre-populate the resource
+    const resource = singleton(TestResource);
+    resource.reset([alice]);
+
+    const vm = new TestViewModel({ search: '', statusFilter: 'all' });
+
+    const loadSpy = vi.spyOn(resource, 'loadAll');
+    await vm.init();
+
+    expect(loadSpy).not.toHaveBeenCalled();
+    expect(vm.total).toBe(1);
+
+    vm.dispose();
+  });
+
+  it('ViewModel dispose does not dispose singleton Resource', async () => {
+    const vm = new TestViewModel({ search: '', statusFilter: 'all' });
+    await vm.init();
+
+    const resource = singleton(TestResource);
+    expect(resource.disposed).toBe(false);
+
+    vm.dispose();
+    expect(resource.disposed).toBe(false);
+    expect(resource.items).toEqual([alice, bob, charlie]);
+  });
+});
+
+describe('Resource + ViewModel — shared singleton', () => {
+  it('two ViewModels share the same Resource data', async () => {
+    class OtherVM extends ViewModel {
+      resource = singleton(TestResource);
+
+      get total(): number {
+        return this.resource.length;
+      }
+    }
+
+    const vm1 = new TestViewModel({ search: '', statusFilter: 'all' });
+    await vm1.init();
+
+    const vm2 = new OtherVM();
+    vm2.init();
+
+    // Both see the same data loaded by vm1's onInit
+    expect(vm1.total).toBe(3);
+    expect(vm2.total).toBe(3);
+
+    // Mutation through vm1's resource is visible to vm2
+    vm1.resource.add({ id: 4, name: 'Dave', status: 'active' });
+    expect(vm2.total).toBe(4);
+
+    vm1.dispose();
+    vm2.dispose();
+  });
+
+  it('Resource data persists across ViewModel lifecycle', async () => {
+    const vm1 = new TestViewModel({ search: '', statusFilter: 'all' });
+    await vm1.init();
+    expect(vm1.total).toBe(3);
+    vm1.dispose();
+
+    // New ViewModel sees existing Resource data
+    const vm2 = new TestViewModel({ search: '', statusFilter: 'all' });
+    await vm2.init();
+    expect(vm2.total).toBe(3); // smart-init skips load since data exists
+
+    vm2.dispose();
+  });
+});
+
+describe('Resource + ViewModel — subscribeTo for imperative side effects', () => {
+  it('subscribeTo fires when Resource mutates', async () => {
+    const sideEffects: string[] = [];
+
+    class ImperativeVM extends ViewModel {
+      resource = singleton(TestResource);
+
+      protected onInit() {
+        this.subscribeTo(this.resource, () => {
+          sideEffects.push('resource-changed');
+        });
+      }
+    }
+
+    const vm = new ImperativeVM();
+    vm.init();
+
+    sideEffects.length = 0;
+
+    const resource = singleton(TestResource);
+    resource.reset([alice, bob]);
+    expect(sideEffects).toEqual(['resource-changed']);
+
+    resource.add(charlie);
+    expect(sideEffects).toEqual(['resource-changed', 'resource-changed']);
+
+    vm.dispose();
+  });
+
+  it('subscribeTo cleanup runs on ViewModel dispose', () => {
+    const sideEffects: string[] = [];
+
+    class ImperativeVM extends ViewModel {
+      resource = singleton(TestResource);
+
+      protected onInit() {
+        this.subscribeTo(this.resource, () => {
+          sideEffects.push('changed');
+        });
+      }
+    }
+
+    const vm = new ImperativeVM();
+    vm.init();
+
+    const resource = singleton(TestResource);
+    resource.reset([alice]);
+    expect(sideEffects).toEqual(['changed']);
+
+    vm.dispose();
+    sideEffects.length = 0;
+
+    // After dispose, subscription should be cleaned up
+    resource.reset([bob]);
+    expect(sideEffects).toEqual([]);
+  });
+});
+
+describe('Resource + ViewModel — Resource async tracking from ViewModel', () => {
+  it('Resource.async is accessible from ViewModel for loading state', async () => {
+    const vm = new TestViewModel({ search: '', statusFilter: 'all' });
+    const resource = singleton(TestResource);
+    resource.init();
+
+    // Before loading
+    expect(resource.async.loadAll.loading).toBe(false);
+
+    const promise = resource.loadAll();
+    // During loading (already resolved since loadAll is sync internally, but the wrapper tracks it)
+    await promise;
+
+    expect(resource.async.loadAll.loading).toBe(false);
+    expect(resource.async.loadAll.error).toBeNull();
+
+    vm.dispose();
+  });
+
+  it('Resource.async tracks errors from failed methods', async () => {
+    const resource = singleton(TestResource);
+    resource.init();
+
+    try {
+      await resource.failingLoad();
+    } catch {
+      // expected
+    }
+
+    expect(resource.async.failingLoad.loading).toBe(false);
+    expect(resource.async.failingLoad.error).toBe('Network error');
+
+    resource.dispose();
+  });
+});
+
+describe('Resource + ViewModel — external Collection injection', () => {
+  it('ViewModel auto-tracks Resource with external Collection', () => {
+    const shared = new Collection<Item>([alice, bob]);
+
+    class InjectedResource extends Resource<Item> {}
+
+    class VMWithInjected extends ViewModel {
+      resource = new InjectedResource(shared);
+
+      get total(): number {
+        return this.resource.length;
+      }
+
+      get items(): Item[] {
+        return this.resource.items as Item[];
+      }
+    }
+
+    const vm = new VMWithInjected();
+    vm.init();
+
+    expect(vm.total).toBe(2);
+    expect(vm.items).toEqual([alice, bob]);
+
+    // Mutation through the external collection propagates to ViewModel
+    shared.add(charlie);
+    expect(vm.total).toBe(3);
+
+    // Mutation through the Resource also works (delegates to external)
+    vm.resource.remove(1);
+    expect(vm.total).toBe(2);
+    expect(shared.length).toBe(2); // external collection is mutated
+
+    vm.dispose();
+  });
+
+  it('ViewModel getter recomputes when external Collection changes', () => {
+    const shared = new Collection<Item>([]);
+
+    class InjectedResource extends Resource<Item> {}
+
+    class VMWithFilter extends ViewModel<{ statusFilter: 'all' | Item['status'] }> {
+      resource = new InjectedResource(shared);
+
+      get active(): Item[] {
+        return (this.resource.items as Item[]).filter(i => i.status === 'active');
+      }
+
+      setFilter(f: 'all' | Item['status']) { this.set({ statusFilter: f }); }
+    }
+
+    const vm = new VMWithFilter({ statusFilter: 'all' });
+    vm.init();
+
+    expect(vm.active).toEqual([]);
+
+    shared.reset([alice, bob, charlie]);
+    expect(vm.active).toEqual([alice, charlie]);
+
+    shared.update(2, { status: 'active' });
+    expect(vm.active).toHaveLength(3);
+
+    vm.dispose();
+  });
+
+  it('ViewModel dispose does not dispose external Collection', () => {
+    const shared = new Collection<Item>([alice]);
+
+    class InjectedResource extends Resource<Item> {}
+
+    class SimpleVM extends ViewModel {
+      resource = new InjectedResource(shared);
+
+      get total(): number { return this.resource.length; }
+    }
+
+    const vm = new SimpleVM();
+    vm.init();
+    expect(vm.total).toBe(1);
+
+    vm.dispose();
+
+    // External collection is still alive
+    expect(shared.disposed).toBe(false);
+    expect(shared.items).toEqual([alice]);
+
+    // Resource field is NOT disposed by ViewModel — only subscriptions are cleaned up
+    expect(vm.resource.disposed).toBe(false);
+  });
+});
+
+describe('Resource + ViewModel — subscribe notifications to React', () => {
+  it('ViewModel notifies listeners when Resource mutates (simulates React re-render)', async () => {
+    const vm = new TestViewModel({ search: '', statusFilter: 'all' });
+    await vm.init();
+
+    const states: number[] = [];
+    vm.subscribe(() => {
+      states.push(vm.total);
+    });
+
+    vm.resource.add({ id: 4, name: 'Dave', status: 'active' });
+    vm.resource.remove(1);
+
+    // Each Resource mutation should trigger a ViewModel notification
+    expect(states).toEqual([4, 3]);
+
+    vm.dispose();
+  });
+});