frontend/test/grow-collapse.test.ts

Rama master · réplica de lectura del repositorio original.

import { afterEach, expect, it, vi } from 'vitest';
import { growCollapse, setCollapseOpen, setCollapseRegionOpen } from '../src/ui-kit';

afterEach(() => { vi.useRealTimers(); document.body.replaceChildren(); });

it('从起始高度长到内容高度，跑完交回 auto 并装回展开态', () => {
  vi.useFakeTimers();
  const body = document.createElement('div'); body.className = 'ui-fcollapse ui-fcollapse-settled'; document.body.append(body);
  Object.defineProperty(body, 'scrollHeight', { configurable: true, value: 480 });
  growCollapse(body, 120);
  expect(body.classList.contains('ui-fcollapse-settled')).toBe(false);
  expect(body.style.height).toBe('480px');
  body.dispatchEvent(Object.assign(new Event('transitionend'), { propertyName: 'opacity' }));
  expect(body.style.height).toBe('480px');
  vi.advanceTimersByTime(260);
  expect(body.style.height).toBe('auto');
  expect(body.classList.contains('ui-fcollapse-settled')).toBe(true);
});

it('过渡途中又被收起时不收尾', () => {
  vi.useFakeTimers();
  const body = document.createElement('div'); body.className = 'ui-fcollapse'; document.body.append(body);
  let open = true;
  growCollapse(body, 0, () => open);
  open = false; body.style.height = '0px';
  vi.advanceTimersByTime(260);
  expect(body.style.height).toBe('0px');
  expect(body.classList.contains('ui-fcollapse-settled')).toBe(false);
});

const collapse = () => {
  const details = document.createElement('details');
  const body = document.createElement('div');
  details.append(document.createElement('summary'), body); document.body.append(details);
  return { details, body };
};

it('收起时高度先收到 0，过渡跑完才合上 details', () => {
  vi.useFakeTimers();
  const { details, body } = collapse();
  setCollapseOpen(details, body, true);
  expect(details.open).toBe(true);
  expect(body.classList.contains('ui-fcollapse')).toBe(true);
  vi.advanceTimersByTime(260);
  setCollapseOpen(details, body, false);
  expect(body.style.height).toBe('0px');
  expect(body.inert).toBe(true);
  expect(details.open).toBe(true);
  vi.advanceTimersByTime(260);
  expect(details.open).toBe(false);
  expect(body.style.height).toBe('');
});

it('收到一半又点开时，收起那次的收尾不再合上 details', () => {
  vi.useFakeTimers();
  const { details, body } = collapse();
  setCollapseOpen(details, body, true);
  vi.advanceTimersByTime(260);
  setCollapseOpen(details, body, false);
  setCollapseOpen(details, body, true);
  vi.advanceTimersByTime(260);
  expect(details.open).toBe(true);
  expect(body.inert).toBe(false);
  expect(body.style.height).toBe('auto');
});

it('外置触发器保留正文，收起即退出焦点顺序，反向展开取消隐藏', () => {
  vi.useFakeTimers();
  const body = document.createElement('div'); document.body.append(body);
  Object.defineProperty(body, 'scrollHeight', { configurable: true, value: 180 });
  setCollapseRegionOpen(body, false);
  expect(body.hidden).toBe(false);
  expect(body.inert).toBe(true);
  setCollapseRegionOpen(body, true);
  vi.advanceTimersByTime(260);
  expect(body.hidden).toBe(false);
  expect(body.inert).toBe(false);
  expect(body.style.height).toBe('auto');
  setCollapseRegionOpen(body, false);
  vi.advanceTimersByTime(260);
  expect(body.hidden).toBe(true);
});