relicario/extension/src/vault/__tests__/collection-facet.test.ts

import { beforeEach, describe, expect, it, vi } from 'vitest';

// renderCollectionFacet reads getState().orgCollections (shared/state). vault-sidebar
// pulls in vault-context/vault-status/glyphs transitively; none have import-time
// side effects, so importing it under happy-dom is safe.
vi.mock('../../shared/state', () => ({
  getState: vi.fn(() => ({ orgContext: 'personal', orgCollections: [] })),
  setState: vi.fn(),
  sendMessage: vi.fn(),
  navigate: vi.fn(),
  escapeHtml: (s: string) => s,
  popOutToTab: vi.fn(),
  isInTab: () => false,
  openVaultTab: vi.fn(),
}));

import { renderCollectionFacet } from '../vault-sidebar';
import { getState, setState } from '../../shared/state';

const mockGetState = getState as ReturnType<typeof vi.fn>;
const mockSetState = setState as ReturnType<typeof vi.fn>;

describe('vault collection facet (org context)', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    document.body.innerHTML = '<div id="facet"></div>';
  });

  // Task 4 — a collection nav parallel to the type-category nav, populated from
  // org_list_collections, shown only in org context.
  it('renders a collection facet from org_list_collections', () => {
    mockGetState.mockReturnValue({
      orgContext: 'org-1',
      orgCollections: [{ slug: 'prod-infra', display_name: 'Production Infra' }],
    });
    const el = document.getElementById('facet')!;

    renderCollectionFacet(el);

    expect(el.textContent).toContain('Production Infra');
  });

  it('clicking a collection row calls setState with the collection filter', () => {
    mockGetState.mockReturnValue({
      orgContext: 'org-1',
      orgCollections: [{ slug: 'prod-infra', display_name: 'Production Infra' }],
      collectionFilter: undefined,
    });
    const el = document.getElementById('facet')!;
    renderCollectionFacet(el);

    const btn = el.querySelector<HTMLButtonElement>('[data-slug="prod-infra"]')!;
    expect(btn).not.toBeNull();
    btn.click();

    expect(mockSetState).toHaveBeenCalledWith({ collectionFilter: 'prod-infra' });
  });

  it('renders nothing in personal context', () => {
    mockGetState.mockReturnValue({
      orgContext: 'personal',
      orgCollections: [],
    });
    const el = document.getElementById('facet')!;
    renderCollectionFacet(el);

    expect(el.innerHTML).toBe('');
  });
});