goodgo-platform/apps/web/components/design-system/__tests__/density-provider.spec.tsx

import { act, render, renderHook, screen } from '@testing-library/react';
import * as React from 'react';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import {
  DENSITY_CELL_PADDING,
  DENSITY_DATA_FONT,
  DENSITY_ROW_HEIGHT,
  DensityProvider,
  useDensity,
} from '../density-provider';

// jsdom (opaque origin) does not provide a usable localStorage; install a tiny in-memory shim.
function installLocalStorage(): Storage {
  const store: Record<string, string> = {};
  const fake: Storage = {
    get length() {
      return Object.keys(store).length;
    },
    clear: () => {
      for (const k of Object.keys(store)) delete store[k];
    },
    getItem: (k) => (k in store ? store[k]! : null),
    key: (i) => Object.keys(store)[i] ?? null,
    removeItem: (k) => {
      delete store[k];
    },
    setItem: (k, v) => {
      store[k] = String(v);
    },
  };
  Object.defineProperty(window, 'localStorage', {
    configurable: true,
    value: fake,
  });
  return fake;
}

describe('DensityProvider', () => {
  let storage: Storage;

  beforeEach(() => {
    storage = installLocalStorage();
  });

  afterEach(() => {
    if (typeof storage.clear === 'function') {
      storage.clear();
    }
  });

  it('exposes default density "regular" via useDensity', () => {
    const { result } = renderHook(() => useDensity(), {
      wrapper: ({ children }) => <DensityProvider>{children}</DensityProvider>,
    });
    expect(result.current.density).toBe('regular');
  });

  it('honors the defaultDensity prop', () => {
    const { result } = renderHook(() => useDensity(), {
      wrapper: ({ children }) => (
        <DensityProvider defaultDensity="compact">{children}</DensityProvider>
      ),
    });
    expect(result.current.density).toBe('compact');
  });

  it('persists density changes to localStorage', () => {
    const { result } = renderHook(() => useDensity(), {
      wrapper: ({ children }) => <DensityProvider>{children}</DensityProvider>,
    });
    act(() => result.current.setDensity('roomy'));
    expect(result.current.density).toBe('roomy');
    expect(localStorage.getItem('goodgo.density')).toBe('roomy');
  });

  it('reads stored density on mount when valid', () => {
    localStorage.setItem('goodgo.density', 'compact');
    function Probe() {
      const { density } = useDensity();
      return <span data-testid="d">{density}</span>;
    }
    render(
      <DensityProvider>
        <Probe />
      </DensityProvider>,
    );
    expect(screen.getByTestId('d').textContent).toBe('compact');
  });

  it('exposes row-height, padding and font tables for all densities', () => {
    for (const mode of ['compact', 'regular', 'roomy'] as const) {
      expect(DENSITY_ROW_HEIGHT[mode]).toBeTruthy();
      expect(DENSITY_CELL_PADDING[mode]).toBeTruthy();
      expect(DENSITY_DATA_FONT[mode]).toBeTruthy();
    }
  });
});