import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; const listStockEntriesMock = vi.fn(); const listGroupedStockEntriesMock = vi.fn(); const listKitchenChangesMock = vi.fn(); const getStockEntryMock = vi.fn(); const updateStockItemMock = vi.fn(); const useStockItemMock = vi.fn(); const fetchLocationsMock = vi.fn(); vi.mock('../../../src/api/stock.js', () => ({ listStockEntries: (...args) => listStockEntriesMock(...args), listGroupedStockEntries: (...args) => listGroupedStockEntriesMock(...args), listKitchenChanges: (...args) => listKitchenChangesMock(...args), getStockEntry: (...args) => getStockEntryMock(...args), updateStockItem: (...args) => updateStockItemMock(...args), useStockItem: (...args) => useStockItemMock(...args), })); vi.mock('../../../src/api/locations.js', () => ({ fetchLocations: (...args) => fetchLocationsMock(...args), })); const { stockListPageData } = await import('../../../src/features/stock/stock-list-page.js'); function createGroupedSummary() { return [ { id: 10, uuid_b64: 'group-10', name: 'Rice', description: 'Basmati', stock_type: 'measured', level: 'good', quantity: 1, uom_symbol: 'kg', location_initial_uuid_b64: 'loc-root', date: '2026-04-10', expire_date: '2026-04-25', first_expire_date: '2026-04-25', first_production_date: '2026-04-10', items_count: 1, items: [{ id: 100 }], }, ]; } function createGroupedExpanded() { return [ { ...createGroupedSummary()[0], items: [ { id: 100, uuid_b64: 'item-100', name: 'Rice', description: 'Open bag', stock_type: 'measured', level: 'good', quantity: 1, uom_symbol: 'kg', location_initial_uuid_b64: 'loc-root', date: '2026-04-10', expire_date: '2026-04-25', expire_in: 13, }, ], }, ]; } function createWindowMock() { const intervals = new Map(); let nextId = 1; const storage = new Map(); return { location: { hash: '#/stock' }, scrollY: 1, setInterval: vi.fn((fn) => { const id = nextId; nextId += 1; intervals.set(id, fn); return id; }), clearInterval: vi.fn((id) => { intervals.delete(id); }), addEventListener: vi.fn(), removeEventListener: vi.fn(), matchMedia: vi.fn(() => ({ matches: false })), scrollTo: vi.fn(), localStorage: { getItem: vi.fn((key) => storage.get(key) ?? null), setItem: vi.fn((key, value) => { storage.set(key, value); }), removeItem: vi.fn((key) => { storage.delete(key); }), }, __intervals: intervals, }; } describe('stock list grouped-first behavior', () => { beforeEach(() => { listStockEntriesMock.mockReset(); listGroupedStockEntriesMock.mockReset(); listKitchenChangesMock.mockReset(); getStockEntryMock.mockReset(); updateStockItemMock.mockReset(); useStockItemMock.mockReset(); fetchLocationsMock.mockReset(); globalThis.window = createWindowMock(); globalThis.requestAnimationFrame = (callback) => callback(); globalThis.HTMLDetailsElement = class MockDetailsElement {}; }); afterEach(() => { vi.restoreAllMocks(); delete globalThis.window; delete globalThis.requestAnimationFrame; delete globalThis.HTMLDetailsElement; delete globalThis.structuredClone; }); it('defaults to grouped mode and loads grouped summary before lazy item list', async () => { listGroupedStockEntriesMock .mockResolvedValueOnce(createGroupedSummary()) .mockResolvedValueOnce(createGroupedExpanded()); listStockEntriesMock.mockResolvedValueOnce([]); listKitchenChangesMock.mockResolvedValue({ since: null, nextCursor: null, changes: [] }); fetchLocationsMock.mockResolvedValue({ flat: [], tree: [] }); const store = { isConnected: true, addAlert: vi.fn() }; const data = stockListPageData(store); data.$nextTick = vi.fn(async () => {}); await data.init(); expect(data.viewMode).toBe('grouped'); expect(listGroupedStockEntriesMock).toHaveBeenNthCalledWith(1, store, { expanded: false }); expect(listStockEntriesMock).not.toHaveBeenCalled(); await Promise.resolve(); expect(listGroupedStockEntriesMock).toHaveBeenNthCalledWith(2, store, { expanded: true }); await data.switchView('items'); expect(listStockEntriesMock).toHaveBeenCalledTimes(1); await data.switchView('grouped'); await data.switchView('items'); expect(listStockEntriesMock).toHaveBeenCalledTimes(1); }); it('hydrates grouped children in background and merges into existing groups', async () => { listGroupedStockEntriesMock .mockResolvedValueOnce(createGroupedSummary()) .mockResolvedValueOnce(createGroupedExpanded()); const data = stockListPageData({ isConnected: true, addAlert: vi.fn() }); await data.loadGroupedEntries({ expanded: false, resetVisible: true }); expect(data.groupDisplayItems(data.groupedEntries[0])).toEqual([]); expect(data.hasGroupedChildStubs(data.groupedEntries[0])).toBe(true); await data.hydrateGroupedEntriesInBackground(); expect(data.groupedHydrated).toBe(true); expect(data.groupDisplayItems(data.groupedEntries[0])).toHaveLength(1); expect(data.hasGroupedChildStubs(data.groupedEntries[0])).toBe(false); }); it('preserves hydrated child details when summary refresh returns id stubs', async () => { const data = stockListPageData({ isConnected: true, addAlert: vi.fn() }); data.applyGroupedSummary(createGroupedSummary()); data.applyGroupedHydration(createGroupedExpanded()); expect(data.groupDisplayItems(data.groupedEntries[0])).toHaveLength(1); data.applyGroupedSummary(createGroupedSummary()); expect(data.groupDisplayItems(data.groupedEntries[0])).toHaveLength(1); }); it('memoizes filtered results and invalidates when filters change', () => { const data = stockListPageData({ isConnected: true, addAlert: vi.fn() }); data.entries = [ data.indexEntry({ id: 1, uuid_b64: 'item-1', name: 'Milk', description: 'Fresh', location_initial_uuid_b64: null, stock_type: 'binary', level: 'good', }), ]; data.entriesVersion = 1; const first = data.filteredEntries; const second = data.filteredEntries; expect(second).toBe(first); data.filters.search = 'milk'; const third = data.filteredEntries; expect(third).not.toBe(first); expect(third).toHaveLength(1); }); it('keeps grouped data visible while background summary refresh is in progress', async () => { let resolveRefresh; const refreshPromise = new Promise((resolve) => { resolveRefresh = resolve; }); listGroupedStockEntriesMock.mockImplementationOnce(() => refreshPromise); const data = stockListPageData({ isConnected: true, addAlert: vi.fn() }); data.groupedLoaded = true; data.groupedEntries = createGroupedSummary().map((group) => data.indexGroup(group)); const pending = data.loadGroupedEntries({ expanded: false, background: true }); expect(data.state.isRefreshing).toBe(true); expect(data.groupedEntries).toHaveLength(1); resolveRefresh(createGroupedSummary()); await pending; expect(data.state.isRefreshing).toBe(false); expect(data.groupedEntries).toHaveLength(1); }); it('poll refreshes view only when new changes exist', async () => { listKitchenChangesMock .mockResolvedValueOnce({ since: 'a', nextCursor: 'b', changes: [] }) .mockResolvedValueOnce({ since: 'b', nextCursor: 'c', changes: [{ type: 'stock', action: 'use', timestamp: '2026-04-12T08:00:00Z' }], }); const data = stockListPageData({ isConnected: true, addAlert: vi.fn() }); const refreshSpy = vi.fn(async () => {}); data.refreshCurrentView = refreshSpy; await data.pollKitchenChanges(); expect(refreshSpy).not.toHaveBeenCalled(); await data.pollKitchenChanges(); expect(refreshSpy).toHaveBeenCalledTimes(1); expect(refreshSpy).toHaveBeenCalledWith({ background: true }); }); it('tracks grouped card open state from details toggle events', () => { const data = stockListPageData({ isConnected: true, addAlert: vi.fn() }); class MockDetails extends HTMLDetailsElement { constructor() { super(); this.open = true; this.dataset = { groupId: '10' }; } querySelector() { return { scrollIntoView: vi.fn(), }; } } const details = new MockDetails(); data.handleGroupedToggle({ target: details }); expect(data.isGroupedCardOpen(10)).toBe(true); details.open = false; data.handleGroupedToggle({ target: details }); expect(data.isGroupedCardOpen(10)).toBe(false); }); it('restores from runtime cache on back navigation and refreshes only focused item', async () => { listKitchenChangesMock.mockResolvedValue({ since: null, nextCursor: null, changes: [] }); getStockEntryMock.mockResolvedValueOnce({ id: 100, uuid_b64: 'item-100', name: 'Rice', description: 'Open bag', stock_type: 'measured', level: 'good', quantity: 2, uom_symbol: 'kg', location_initial_uuid_b64: 'loc-root', date: '2026-04-12', expire_date: '2026-04-20', expire_in: 8, }); const store = { isConnected: true, addAlert: vi.fn(), activeKitchen: { id: 1 }, }; const firstVisit = stockListPageData(store); firstVisit.entries = [ firstVisit.indexEntry({ id: 100, uuid_b64: 'item-100', name: 'Rice', description: 'Open bag', stock_type: 'measured', level: 'good', quantity: 1, uom_symbol: 'kg', location_initial_uuid_b64: 'loc-root', date: '2026-04-10', expire_date: '2026-04-25', expire_in: 13, }), ]; firstVisit.entriesVersion = 1; firstVisit.itemsLoaded = true; firstVisit.groupedEntries = createGroupedExpanded().map((group) => firstVisit.indexGroup(group)); firstVisit.groupedVersion = 1; firstVisit.groupedLoaded = true; firstVisit.groupedHydrated = true; firstVisit.locations = [ { id: 1, uuid_b64: 'loc-root', name: 'Pantry', pathLabel: 'Pantry', depth: 0, type: 'storage', lineage_uuid_b64: ['loc-root'], }, ]; firstVisit.locationsVersion = 1; firstVisit.locationMap = { 'loc-root': 'Pantry' }; firstVisit.locationDescendants = { 'loc-root': ['loc-root'] }; firstVisit.locationLineage = { 'loc-root': ['loc-root'] }; firstVisit.viewMode = 'grouped'; firstVisit.filters.search = 'rice'; firstVisit.rememberStockListContext('item-100'); const returnVisit = stockListPageData(store); returnVisit.$nextTick = vi.fn(async () => {}); await returnVisit.init(); await Promise.resolve(); await Promise.resolve(); expect(listGroupedStockEntriesMock).not.toHaveBeenCalled(); expect(listStockEntriesMock).not.toHaveBeenCalled(); expect(fetchLocationsMock).not.toHaveBeenCalled(); expect(getStockEntryMock).toHaveBeenCalledWith(store, 'item-100'); expect(returnVisit.entries[0].quantity).toBe(2); expect(returnVisit.groupedEntries[0].items[0].quantity).toBe(2); expect(returnVisit.groupedEntries[0].quantity).toBe(2); expect(returnVisit.groupedEntries[0].first_expire_date).toBe('2026-04-20'); expect(returnVisit.groupedEntries[0].date).toBe('2026-04-12'); }); it('tracks item-level refresh state while focused item refresh is in progress', async () => { let resolveEntry; getStockEntryMock.mockImplementationOnce( () => new Promise((resolve) => { resolveEntry = resolve; }), ); const data = stockListPageData({ isConnected: true, addAlert: vi.fn() }); data.entries = [ data.indexEntry({ id: 100, uuid_b64: 'item-100', name: 'Rice', description: 'Open bag', stock_type: 'measured', level: 'good', quantity: 1, uom_symbol: 'kg', location_initial_uuid_b64: 'loc-root', date: '2026-04-10', expire_date: '2026-04-25', }), ]; data.entriesVersion = 1; data.itemsLoaded = true; const pending = data.refreshFocusedItemInBackground('item-100'); expect(data.isItemRefreshing('item-100')).toBe(true); resolveEntry({ ...data.entries[0], quantity: 3, }); await pending; expect(data.isItemRefreshing('item-100')).toBe(false); expect(data.entries[0].quantity).toBe(3); }); it('falls back when structuredClone throws during runtime cache snapshot', async () => { globalThis.structuredClone = vi.fn(() => { throw new Error('The object can not be cloned.'); }); listGroupedStockEntriesMock .mockResolvedValueOnce(createGroupedSummary()) .mockResolvedValueOnce(createGroupedExpanded()); listKitchenChangesMock.mockResolvedValue({ since: null, nextCursor: null, changes: [] }); fetchLocationsMock.mockResolvedValue({ flat: [], tree: [] }); const store = { isConnected: true, addAlert: vi.fn() }; const data = stockListPageData(store); data.$nextTick = vi.fn(async () => {}); await data.init(); await Promise.resolve(); expect(data.state.error).toBe(''); expect(data.groupedEntries.length).toBeGreaterThan(0); }); });