portal/app/tests/Frontend/useDensity.spec.ts

import { describe, it, expect, beforeEach, vi } from 'vitest';
import { useDensity, DENSITY_KEY } from '../../resources/js/composables/useDensity';

describe('useDensity', () => {
    beforeEach(() => {
        localStorage.clear();
        vi.restoreAllMocks();
    });

    it('defaults to comfortable when localStorage is empty', () => {
        const { density } = useDensity();
        expect(density.value).toBe('comfortable');
    });

    it('reads existing localStorage value', () => {
        localStorage.setItem(DENSITY_KEY, 'compact');
        const { density } = useDensity();
        expect(density.value).toBe('compact');
    });

    it('toggle() flips between comfortable and compact', () => {
        const { density, toggle } = useDensity();
        expect(density.value).toBe('comfortable');
        toggle();
        expect(density.value).toBe('compact');
        toggle();
        expect(density.value).toBe('comfortable');
    });

    it('setDensity persists to localStorage', () => {
        const { setDensity } = useDensity();
        setDensity('compact');
        expect(localStorage.getItem(DENSITY_KEY)).toBe('compact');
    });

    it('coerces invalid localStorage value to comfortable', () => {
        localStorage.setItem(DENSITY_KEY, 'garbage');
        const { density } = useDensity();
        expect(density.value).toBe('comfortable');
    });

    it('rowHeight returns 44 for comfortable, 36 for compact', () => {
        const { density, rowHeight, setDensity } = useDensity();
        setDensity('comfortable');
        expect(rowHeight.value).toBe(44);
        setDensity('compact');
        expect(rowHeight.value).toBe(36);
        // sanity: density still reactive
        expect(density.value).toBe('compact');
    });
});