web-core/tests/hooks/useSorting.test.tsx

import { act } from 'react';
import { describe, expect, it } from 'vitest';
import { formatSortParam, useSorting } from '../../src/hooks/useSorting';
import { renderHook } from '../helpers/renderHook';

describe('useSorting', () => {
    it('starts from default sort and cycles asc/desc/default', () => {
        const { result } = renderHook(() => useSorting({ field: 'createdAt', direction: 'asc' }));

        expect(result.current.activeSort).toEqual({ field: 'createdAt', direction: 'asc' });
        expect(result.current.sortParam).toBe('createdAt');

        act(() => {
            result.current.toggleSort('name');
        });
        expect(result.current.activeSort).toEqual({ field: 'name', direction: 'asc' });
        expect(result.current.sortParam).toBe('name');

        act(() => {
            result.current.toggleSort('name');
        });
        expect(result.current.activeSort).toEqual({ field: 'name', direction: 'desc' });
        expect(result.current.sortParam).toBe('-name');

        act(() => {
            result.current.toggleSort('name');
        });
        expect(result.current.activeSort).toEqual({ field: 'createdAt', direction: 'asc' });
        expect(result.current.sortParam).toBe('createdAt');
    });

    it('cycles sort state without a baseline default', () => {
        const { result } = renderHook(() => useSorting(null));

        expect(result.current.activeSort).toBeNull();
        expect(result.current.sortParam).toBeUndefined();

        act(() => {
            result.current.toggleSort('updatedAt');
        });
        expect(result.current.sortParam).toBe('updatedAt');

        act(() => {
            result.current.toggleSort('updatedAt');
        });
        expect(result.current.sortParam).toBe('-updatedAt');

        act(() => {
            result.current.toggleSort('updatedAt');
        });
        expect(result.current.sortParam).toBeUndefined();
    });

    it('supports manual setSort and resetSort', () => {
        const { result } = renderHook(() => useSorting({ field: 'createdAt', direction: 'desc' }));

        expect(result.current.sortParam).toBe('-createdAt');

        act(() => {
            result.current.setSort({ field: 'title', direction: 'asc' });
        });
        expect(result.current.sortParam).toBe('title');

        act(() => {
            result.current.resetSort();
        });
        expect(result.current.sortParam).toBe('-createdAt');
    });

    it('toggles baseline field directly between baseline and opposite direction', () => {
        const { result } = renderHook(() => useSorting({ field: 'createdAt', direction: 'desc' }));

        expect(result.current.sortParam).toBe('-createdAt');

        act(() => {
            result.current.toggleSort('createdAt');
        });
        expect(result.current.sortParam).toBe('createdAt');

        act(() => {
            result.current.toggleSort('createdAt');
        });
        expect(result.current.sortParam).toBe('-createdAt');

        act(() => {
            result.current.toggleSort('createdAt');
        });
        expect(result.current.sortParam).toBe('createdAt');
    });

    it('formats sort params safely', () => {
        expect(formatSortParam(null)).toBeUndefined();
        expect(formatSortParam(undefined)).toBeUndefined();
        expect(formatSortParam({ field: 'updatedAt', direction: 'desc' })).toBe('-updatedAt');
        expect(formatSortParam({ field: 'updatedAt', direction: 'asc' })).toBe('updatedAt');
    });
});