lonc/tests/features/stock/stock-list-page-grouped.test.js

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();
const listCategoriesMock = 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),
}));

vi.mock('../../../src/api/categories.js', () => ({
  listCategories: (...args) => listCategoriesMock(...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();
    listCategoriesMock.mockReset();
    listCategoriesMock.mockResolvedValue([]);

    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: [] });
    listCategoriesMock.mockResolvedValue([]);

    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).toHaveBeenNthCalledWith(1, store, { expanded: false });
    expect(listGroupedStockEntriesMock).toHaveBeenNthCalledWith(2, store, { expanded: true });
    expect(listStockEntriesMock).toHaveBeenCalledTimes(1);
    expect(listStockEntriesMock).toHaveBeenCalledWith(store);
    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);
  });
});