@linhey/rhine-design 0.3.0 → 0.5.0

package/tests/FormParity.test.tsx

@@ -0,0 +1,185 @@
+import { useState } from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Combobox, DateField, DateRangePicker, NumberField, RemoteMultiSelect, TreeSelect } from '../components';
+
+describe('date field parity', () => {
+  it('reports controlled invalid dates and changed bounds without rewriting the value', () => {
+    const change = vi.fn(), validation = vi.fn();
+    const props = { label: '日期', value: '2026-10-24', onValueChange: change, onValidationChange: validation, name: 'date', hint: '仅日期，无时区' };
+    const { rerender } = render(<DateField {...props} min="2026-10-01" max="2026-10-31" />);
+    expect(validation).toHaveBeenLastCalledWith(null);
+    rerender(<DateField {...props} max="2026-10-23" />);
+    expect(screen.getByLabelText('日期')).toHaveAttribute('aria-invalid', 'true');
+    expect(validation).toHaveBeenLastCalledWith('日期不能晚于 2026-10-23。');
+    expect(screen.getByLabelText('日期')).toHaveValue('2026-10-24'); expect(change).not.toHaveBeenCalled();
+    rerender(<DateField {...props} value="2026-02-30" />);
+    expect(validation).toHaveBeenLastCalledWith('请输入有效日期。');
+  });
+
+  it('does not repeat validation notifications when only the callback identity changes', () => {
+    const validation = vi.fn(); const props = { label: '日期', value: '2026-10-24', onValueChange: () => {}, max: '2026-10-23' };
+    const { rerender } = render(<DateField {...props} onValidationChange={error => validation(error)} />);
+    rerender(<DateField {...props} onValidationChange={error => validation(error)} />);
+    expect(validation).toHaveBeenCalledOnce();
+  });
+
+  it('blocks invalid range presets and protects readonly fields and actions', () => {
+    const change = vi.fn();
+    const props = { label: '期间', value: { start: '2026-10-01', end: '2026-10-24' }, onValueChange: change, startLabel: '起始', endLabel: '截至', startName: 'from', endName: 'to', presets: [
+      { label: '反向', value: { start: '2026-10-24', end: '2026-10-01' } },
+      { label: '无效日期', value: { start: '2026-02-30', end: '2026-10-01' } },
+      { label: '正常', value: { start: '2026-10-01', end: '2026-10-24' } },
+    ] };
+    const { rerender } = render(<DateRangePicker {...props} />);
+    expect(screen.getByRole('button', { name: '反向' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: '无效日期' })).toBeDisabled();
+    expect(screen.getByLabelText('起始')).toHaveAttribute('name', 'from');
+    rerender(<DateRangePicker {...props} readOnly required />);
+    expect(screen.getByLabelText('截至')).toHaveAttribute('readonly');
+    expect(screen.getByLabelText('起始')).toBeRequired();
+    fireEvent.change(screen.getByLabelText('起始'), { target: { value: '2026-10-03' } });
+    fireEvent.click(screen.getByRole('button', { name: '正常' }));
+    fireEvent.click(screen.getByRole('button', { name: '清空日期' })); expect(change).not.toHaveBeenCalled();
+    rerender(<DateRangePicker {...props} clearable={false} />);
+    expect(screen.queryByRole('button', { name: '清空日期' })).not.toBeInTheDocument();
+  });
+});
+
+describe('number field parity', () => {
+  it('does not report unchanged numeric or empty values when committing the draft', () => {
+    const change = vi.fn(); const props = { label: '数量', value: 4, onValueChange: change };
+    const { rerender } = render(<NumberField {...props} />); const input = screen.getByRole('spinbutton');
+    fireEvent.focus(input); fireEvent.blur(input); fireEvent.keyDown(input, { key: 'Enter' });
+    fireEvent.change(input, { target: { value: '4.00' } }); fireEvent.blur(input);
+    expect(input).toHaveValue('4'); expect(change).not.toHaveBeenCalled();
+    rerender(<NumberField {...props} value={null} />);
+    fireEvent.blur(input); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(change).not.toHaveBeenCalled();
+  });
+
+  it('reports each changed controlled value once across Enter and subsequent blur', () => {
+    const change = vi.fn();
+    function Demo() {
+      const [value, setValue] = useState<number | null>(4);
+      return <NumberField label="数量" value={value} precision={1} onValueChange={next => { change(next); setValue(next); }} />;
+    }
+    render(<Demo />); const input = screen.getByRole('spinbutton');
+    fireEvent.change(input, { target: { value: '4.24' } }); fireEvent.keyDown(input, { key: 'Enter' }); fireEvent.blur(input);
+    expect(input).toHaveValue('4.2'); expect(change.mock.calls).toEqual([[4.2]]);
+    fireEvent.change(input, { target: { value: '' } }); fireEvent.blur(input); fireEvent.blur(input);
+    expect(change.mock.calls).toEqual([[4.2], [null]]);
+  });
+
+  it('preserves parsed precision on ordinary commits unless precision was explicitly supplied', () => {
+    const change = vi.fn(); const props = { label: '小数', value: 1e-13, onValueChange: change };
+    const { rerender } = render(<NumberField {...props} />); const input = screen.getByRole('spinbutton');
+    fireEvent.blur(input); expect(input).toHaveValue('1e-13'); expect(change).not.toHaveBeenCalled();
+    fireEvent.change(input, { target: { value: '1.23456789012345' } }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(change).toHaveBeenLastCalledWith(1.23456789012345);
+    rerender(<NumberField {...props} value={0.1} step={0.2} />);
+    fireEvent.keyDown(input, { key: 'ArrowUp' }); expect(change).toHaveBeenLastCalledWith(0.3);
+  });
+
+  it('keeps readonly values selectable without accepting keyboard, pointer or blur changes', () => {
+    const change = vi.fn(); render(<NumberField label="数量" value={4} onValueChange={change} readOnly name="quantity" hint="审核中" />);
+    const input = screen.getByRole('spinbutton'); expect(input).not.toBeDisabled(); expect(input).toHaveAttribute('readonly');
+    fireEvent.change(input, { target: { value: '5' } }); fireEvent.keyDown(input, { key: 'ArrowUp' }); fireEvent.keyDown(input, { key: 'Enter' }); fireEvent.blur(input);
+    expect(screen.getByRole('button', { name: '增加数量' })).toBeDisabled(); expect(change).not.toHaveBeenCalled();
+  });
+
+  it('cancels an uncommitted draft with Escape and reports changed bounds without clamping', () => {
+    const change = vi.fn(); const props = { label: '数量', value: 4, onValueChange: change };
+    const { rerender } = render(<NumberField {...props} />); const input = screen.getByRole('spinbutton');
+    fireEvent.change(input, { target: { value: '-' } }); fireEvent.keyDown(input, { key: 'Escape' });
+    expect(input).toHaveValue('4'); expect(change).not.toHaveBeenCalled();
+    rerender(<NumberField {...props} max={3} controls={false} />);
+    expect(input).toHaveValue('4'); expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(screen.queryByRole('button', { name: '增加数量' })).not.toBeInTheDocument(); expect(change).not.toHaveBeenCalled();
+  });
+
+  it('allows an empty negative range to be stepped into the range', () => {
+    const change = vi.fn(); render(<NumberField label="偏移" value={null} onValueChange={change} min={-10} max={-1} />);
+    const increase = screen.getByRole('button', { name: '增加偏移' }); expect(increase).toBeEnabled();
+    fireEvent.click(increase); expect(change).toHaveBeenLastCalledWith(-1);
+  });
+});
+
+describe('remote multi-select parity', () => {
+  it('keeps the list open for consecutive selection and exposes the selected list semantics', () => {
+    const query = vi.fn();
+    function Demo() {
+      const [value, setValue] = useState([{ value: 'old', label: '旧结果' }]);
+      return <RemoteMultiSelect label="成员" query="服务端搜索词" onQueryChange={query} value={value} onValueChange={setValue} options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} name="member" />;
+    }
+    const { container } = render(<Demo />); const input = screen.getByRole('combobox'); fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByRole('listbox')).toHaveAttribute('aria-multiselectable', 'true');
+    expect(screen.getByRole('option', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'true');
+    fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(screen.getByRole('button', { name: '移除Beta' })).toBeVisible();
+    expect(container.querySelectorAll('input[type="hidden"][name="member"]')).toHaveLength(3);
+    expect(query).not.toHaveBeenCalled();
+  });
+
+  it('removes the last removable tag with Backspace while respecting IME and locked values', () => {
+    const change = vi.fn(); render(<RemoteMultiSelect label="成员" query="" onQueryChange={() => {}} value={[{ value: 'a', label: 'Alpha' }, { value: 'locked', label: '固定', disabled: true }]} onValueChange={change} options={[]} />);
+    const input = screen.getByRole('combobox'); fireEvent.focus(input); fireEvent.compositionStart(input);
+    fireEvent.keyDown(input, { key: 'Backspace' }); expect(change).not.toHaveBeenCalled();
+    fireEvent.compositionEnd(input); fireEvent.keyDown(input, { key: 'Backspace' });
+    expect(change).toHaveBeenLastCalledWith([{ value: 'locked', label: '固定', disabled: true }]);
+  });
+
+  it('restores input focus after removing a tag and supports opt-in query reset', () => {
+    const change = vi.fn(), query = vi.fn(); render(<RemoteMultiSelect label="成员" query="a" onQueryChange={query} value={[{ value: 'old', label: '旧结果' }]} onValueChange={change} options={[{ value: 'a', label: 'Alpha' }]} clearQueryOnSelect closeOnSelect />);
+    const remove = screen.getByRole('button', { name: '移除旧结果' }); act(() => remove.focus()); fireEvent.click(remove);
+    expect(screen.getByRole('combobox')).toHaveFocus();
+    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'ArrowDown' }); fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' });
+    expect(query).toHaveBeenLastCalledWith(''); expect(screen.getByRole('combobox')).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('keeps the existing single Combobox close-on-selection behavior and readonly selections', () => {
+    const change = vi.fn(); const props = { label: '单选', query: '', onQueryChange: vi.fn(), value: null, onValueChange: change, options: [{ value: 'a', label: 'Alpha' }] };
+    const { rerender } = render(<Combobox {...props} />); const input = screen.getByRole('combobox');
+    fireEvent.focus(input); fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(input).toHaveAttribute('aria-expanded', 'false'); expect(change).toHaveBeenCalledOnce();
+    rerender(<Combobox {...props} readOnly />); fireEvent.focus(input); fireEvent.keyDown(input, { key: 'ArrowDown' }); fireEvent.keyDown(input, { key: 'Enter' });
+    expect(input).toHaveAttribute('aria-expanded', 'false'); expect(change).toHaveBeenCalledOnce();
+  });
+});
+
+describe('tree keyboard parity', () => {
+  const nodes = [{ id: 'root', label: 'Group', children: [{ id: 'alpha', label: 'Alpha' }, { id: 'beta', label: 'Beta', disabled: true }] }, { id: 'other', label: 'Other', selectable: false, children: [{ id: 'gamma', label: 'Gamma' }] }];
+  it('starts at a selected item and supports typeahead and sibling expansion without selecting', () => {
+    const change = vi.fn(), expand = vi.fn(); render(<TreeSelect label="目录" nodes={nodes} value={['alpha']} onValueChange={change} expandedKeys={['root']} onExpandedChange={expand} />);
+    const alpha = screen.getByRole('treeitem', { name: 'Alpha' }); expect(alpha).toHaveAttribute('tabindex', '0'); act(() => alpha.focus());
+    fireEvent.keyDown(alpha, { key: 'b' }); expect(screen.getByRole('treeitem', { name: 'Beta' })).toHaveFocus();
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: 'Beta' }), { key: 'Home' });
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: 'Group' }), { key: '*' });
+    expect(expand).toHaveBeenLastCalledWith(['root', 'other']); expect(change).not.toHaveBeenCalled();
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: 'Other' }), { key: 'Enter' }); expect(change).not.toHaveBeenCalled();
+  });
+
+  it('selects only visible eligible nodes and preserves offscreen and disabled selections', () => {
+    const change = vi.fn(); render(<TreeSelect label="目录" nodes={nodes} value={['offscreen', 'beta']} onValueChange={change} expandedKeys={['root']} onExpandedChange={() => {}} multiple />);
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: 'Group' }), { key: 'a', ctrlKey: true });
+    expect(change).toHaveBeenLastCalledWith(['offscreen', 'beta', 'root', 'alpha']);
+  });
+
+  it('contains unmatched typeahead inside the focused treeitem instead of bubbling to its parents', () => {
+    const outerKey = vi.fn();
+    render(<div onKeyDown={outerKey}><TreeSelect label="目录" nodes={nodes} value={[]} onValueChange={() => {}} expandedKeys={['root']} onExpandedChange={() => {}} /></div>);
+    const alpha = screen.getByRole('treeitem', { name: 'Alpha' }); act(() => alpha.focus());
+    fireEvent.keyDown(alpha, { key: 'z' }); expect(outerKey).not.toHaveBeenCalled(); expect(alpha).toHaveFocus();
+  });
+
+  it('returns focus to the ancestor when the host collapses a focused child and protects readonly selection', () => {
+    const change = vi.fn(), expand = vi.fn(); const props = { label: '目录', nodes, value: ['alpha'], onValueChange: change, onExpandedChange: expand, readOnly: true };
+    const { rerender } = render(<TreeSelect {...props} expandedKeys={['root']} />); act(() => screen.getByRole('treeitem', { name: 'Alpha' }).focus());
+    fireEvent.keyDown(screen.getByRole('treeitem', { name: 'Alpha' }), { key: ' ' }); expect(change).not.toHaveBeenCalled();
+    rerender(<TreeSelect {...props} expandedKeys={[]} />);
+    const group = screen.getByRole('treeitem', { name: 'Group' }); expect(group).toHaveFocus();
+    fireEvent.keyDown(group, { key: 'ArrowRight' }); expect(expand).toHaveBeenLastCalledWith(['root']);
+  });
+});

package/tests/GalleryShell.test.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { GalleryShell } from '../preview/GalleryShell';
+import { themes } from '@linhey/rhine-design/theme';
+
+function Demo() {
+  const [motion, setMotion] = useState('system');
+  return <GalleryShell motion={motion} onMotionChange={setMotion}>{section => <h1>{section}</h1>}</GalleryShell>;
+}
+function navigate(hash: string) {
+  act(() => {
+    window.history.replaceState(null, '', hash);
+    window.dispatchEvent(new HashChangeEvent('hashchange'));
+  });
+}
+afterEach(() => {
+  vi.restoreAllMocks();
+  window.history.replaceState(null, '', '/');
+  window.localStorage.clear();
+});
+
+describe('gallery theme integration', () => {
+  it('uses public metadata, prioritizes URL theme and persists choices without losing the chapter', () => {
+    window.localStorage.setItem('rhine-preview-theme', 'rhine');
+    window.history.replaceState(null, '', '/?theme=arknights&other=keep#forms');
+    render(<Demo />);
+    const picker = screen.getByRole('combobox', { name: '界面主题' });
+    expect(picker).toHaveValue('arknights');
+    expect(screen.getAllByRole('option').map(option => option.textContent)).toEqual(themes.map(item => item.label));
+    const main = screen.getByRole('main');
+    main.scrollTop = 120;
+    fireEvent.change(picker, { target: { value: 'neo-brutalism' } });
+    expect(main.closest('.rhine-theme')).toHaveAttribute('data-rhine-theme', 'neo-brutalism');
+    expect(main.scrollTop).toBe(120);
+    expect(screen.getByRole('heading')).toHaveTextContent('forms');
+    expect(window.localStorage.getItem('rhine-preview-theme')).toBe('neo-brutalism');
+    expect(window.location.search).toBe('?other=keep');
+    expect(window.location.hash).toBe('#forms');
+  });
+
+  it('restores a stored theme when the URL is invalid and falls back for unknown stored values', () => {
+    window.localStorage.setItem('rhine-preview-theme', 'neo-brutalism');
+    window.history.replaceState(null, '', '/?theme=unknown');
+    const { unmount } = render(<Demo />);
+    expect(screen.getByRole('combobox', { name: '界面主题' })).toHaveValue('neo-brutalism');
+    unmount();
+    window.localStorage.setItem('rhine-preview-theme', 'unknown');
+    render(<Demo />);
+    expect(screen.getByRole('combobox', { name: '界面主题' })).toHaveValue('rhine');
+  });
+
+  it('still switches when browser storage is unavailable', () => {
+    vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => { throw new Error('Storage disabled'); });
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => { throw new Error('Storage disabled'); });
+    render(<Demo />);
+    const picker = screen.getByRole('combobox', { name: '界面主题' });
+    fireEvent.change(picker, { target: { value: 'arknights' } });
+    expect(picker).toHaveValue('arknights');
+    expect(screen.getByRole('main').closest('.rhine-theme')).toHaveAttribute('data-rhine-theme', 'arknights');
+  });
+});
+
+describe('gallery chapter navigation', () => {
+  it('opens deep links and follows history changes with one chapter and a current link', () => {
+    window.history.replaceState(null, '', '#typography');
+    render(<Demo />);
+    expect(screen.getByRole('heading')).toHaveTextContent('typography');
+    expect(screen.getByRole('link', {name:'字体与文字'})).toHaveAttribute('aria-current', 'page');
+    navigate('#motion');
+    expect(screen.getAllByRole('heading')).toHaveLength(1);
+    expect(screen.getByRole('heading')).toHaveTextContent('motion');
+    expect(screen.getByRole('main')).toHaveFocus();
+    navigate('#typography');
+    expect(screen.getByRole('heading')).toHaveTextContent('typography');
+    navigate('#unknown');
+    expect(screen.getByRole('heading')).toHaveTextContent('top');
+  });
+  it('keeps motion preferences while closing navigation on chapter changes', () => {
+    render(<Demo />);
+    fireEvent.click(screen.getByRole('radio', {name:'减少动态'}));
+    fireEvent.click(screen.getByRole('button', {name:'目录'}));
+    expect(screen.getByRole('button', {name:'目录'})).toHaveAttribute('aria-expanded','true');
+    navigate('#startup');
+    expect(screen.getByRole('button', {name:'目录'})).toHaveAttribute('aria-expanded','false');
+    expect(screen.getByRole('main').closest('.rhine-theme')).toHaveAttribute('data-rhine-motion','reduced');
+  });
+  it('closes the compact directory with Escape and returns focus to its trigger', () => {
+    render(<Demo />);
+    const trigger = screen.getByRole('button', {name:'目录'});
+    fireEvent.click(trigger);
+    const link = screen.getByRole('link', {name:'字体与文字'});
+    link.focus();
+    fireEvent.keyDown(link, {key:'Escape'});
+    expect(trigger).toHaveAttribute('aria-expanded','false');
+    expect(trigger).toHaveFocus();
+  });
+});

package/tests/Monitoring.test.tsx

@@ -0,0 +1,38 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { StackedBar, StatusTimeline, TrendChart } from '../components';
+import { ThemeProvider } from '../components/theme';
+
+it('exposes the same structured evidence for focus and pointer, preserving zero and unknown', async () => {
+  render(<ThemeProvider><StatusTimeline compact label="历史" startLabel="开始" endLabel="结束" segments={[{ id: 'a', label: '时段A', status: 'unknown', detail: { start: '10:00 UTC+8', end: '10:10 UTC+8', reason: '采集不全', counts: [{ id: 'zero', label: '失败', value: 0 }, { id: 'missing', label: '输出', value: null }], methodology: '最终结果' } }]} /></ThemeProvider>);
+  const slider = screen.getByRole('slider'); fireEvent.focus(slider);
+  expect(await screen.findByRole('dialog', { name: '历史时段详情' })).toHaveTextContent('10:00 UTC+8');
+  expect(screen.getByText('0')).toBeVisible(); expect(screen.getByText('未知')).toBeVisible(); expect(screen.getByText('统计口径：最终结果')).toBeVisible();
+  fireEvent.keyDown(slider, { key: 'Escape' }); await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  fireEvent.pointerDown(slider, { pointerType: 'touch' }); expect(await screen.findByRole('dialog')).toHaveTextContent('采集不全');
+  fireEvent.click(screen.getByRole('button', { name: '关闭时段详情' })); await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+});
+
+it('breaks line paths at missing points and supplies exact text data instead of interpolated zero', () => {
+  const { container } = render(<TrendChart kind="line" label="资源" unit="%" rangeLabel="今天" description="原始采样" points={[{ id: 'a', label: '10:00', value: 3 }, { id: 'b', label: '10:10', value: null }, { id: 'c', label: '10:20', value: 0 }, { id: 'd', label: '10:30', value: 5 }]} />);
+  expect(container.querySelector('.rhine-chart__line')?.getAttribute('d')?.match(/M/g)).toHaveLength(2);
+  expect(container.querySelectorAll('.rhine-chart__point')).toHaveLength(3);
+  fireEvent.click(screen.getByText('查看资源数据表'));
+  expect(screen.getByText('未知')).toBeVisible(); expect(screen.getByRole('cell', { name: '0' })).toBeVisible();
+  expect(screen.getByRole('img')).toHaveAccessibleName(/1 个未知值/);
+});
+
+it('does not calculate shares with unknown or negative counts', () => {
+  const props = { label: '分布', unit: '次', rangeLabel: '今天', description: '按宿主分类' };
+  const { rerender } = render(<StackedBar {...props} parts={[{ id: 'a', label: '完成', value: 10 }, { id: 'b', label: '失败', value: null }]} />);
+  expect(screen.getByRole('status')).toHaveTextContent('总量未知'); expect(screen.queryByRole('img')).not.toBeInTheDocument(); expect(screen.getByRole('list')).not.toHaveTextContent('%');
+  rerender(<StackedBar {...props} parts={[{ id: 'a', label: '完成', value: 0 }, { id: 'b', label: '失败', value: -1 }]} />);
+  expect(screen.getByRole('status')).toHaveTextContent('负数'); expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  rerender(<StackedBar {...props} parts={[{ id: 'a', label: '完成', value: 3 }, { id: 'b', label: '失败', value: 1 }]} />);
+  expect(screen.getByRole('list')).toHaveTextContent('75.0%'); expect(screen.getByRole('list')).toHaveTextContent('25.0%');
+});
+
+it('retains chart data on error and marks stale data explicitly', () => {
+  render(<TrendChart label="请求" unit="次" rangeLabel="今天" description="说明" points={[{ id: 'a', label: '10:00', value: 2 }]} stale="20 分钟前" error="读取失败" />);
+  expect(screen.getByRole('alert')).toHaveTextContent('读取失败'); expect(screen.getByRole('status')).toHaveTextContent('20 分钟前'); expect(screen.getByRole('img')).toBeInTheDocument();
+});

package/tests/MonitoringParity.test.tsx

@@ -0,0 +1,125 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { expect, it, vi } from 'vitest';
+import { StackedBar, StatusTimeline, TrendChart, type TimelineSegment } from '../components';
+
+const context = { label: '请求', unit: '次', rangeLabel: '今天', description: '原始采样' };
+const points = [{ id: 'a', label: '10:00', value: 1200 }, { id: 'b', label: '10:10', value: null }, { id: 'c', label: '10:20', value: 0 }];
+const segments: TimelineSegment[] = [{ id: 'a', label: 'A', status: 'healthy', detail: { start: '10:00', end: '10:10' } }, { id: 'b', label: 'B', status: 'unknown', detail: { start: '10:10', end: '10:20' } }];
+
+it('inspects exact chart buckets with keyboard, including unknown and zero', () => {
+  const changed = vi.fn();
+  render(<TrendChart {...context} points={points} onActivePointChange={changed} />);
+  const chart = screen.getByRole('img');
+  fireEvent.focus(chart);
+  expect(chart).toHaveAccessibleDescription('10:00：1200 次');
+  fireEvent.keyDown(chart, { key: 'ArrowRight' });
+  expect(screen.getByText('10:10：未知')).toBeVisible();
+  fireEvent.keyDown(chart, { key: 'End' });
+  expect(chart).toHaveAccessibleDescription('10:20：0 次');
+  fireEvent.keyDown(chart, { key: 'Home' });
+  expect(changed.mock.calls.map(call => call[0])).toEqual(['a', 'b', 'c', 'a']);
+});
+
+it('keeps controlled chart inspection and preserves raw data when formatting labels', () => {
+  const changed = vi.fn(), props = { ...context, points, activePointId: 'a', onActivePointChange: changed, valueFormatter: (value: number | null) => value === null ? '缺失' : value.toLocaleString('en-US') };
+  const { rerender } = render(<TrendChart {...props} />);
+  fireEvent.keyDown(screen.getByRole('img'), { key: 'ArrowRight' });
+  expect(changed).toHaveBeenCalledWith('b');
+  expect(screen.getByText('10:00：1,200 次')).toBeVisible();
+  rerender(<TrendChart {...props} activePointId="b" />);
+  expect(screen.getByText('10:10：缺失')).toBeVisible();
+  fireEvent.click(screen.getByText('查看请求数据表'));
+  expect(screen.getByRole('cell', { name: '1200' })).toBeVisible();
+});
+
+it('preserves active identity through chart reorder and handles removal', () => {
+  const { rerender } = render(<TrendChart {...context} points={points} defaultActivePointId="b" />);
+  rerender(<TrendChart {...context} points={[points[2], points[1], points[0]]} defaultActivePointId="b" />);
+  expect(screen.getByText('10:10：未知')).toBeVisible();
+  rerender(<TrendChart {...context} points={[points[0]]} defaultActivePointId="b" />);
+  expect(screen.queryByText('10:10：未知')).not.toBeInTheDocument();
+  fireEvent.keyDown(screen.getByRole('img'), { key: 'Home' });
+  expect(screen.getByRole('img')).toHaveAccessibleDescription('10:00：1200 次');
+});
+
+it('only offers chart inspection while at least one finite sample can be plotted', () => {
+  const { container, rerender } = render(<TrendChart {...context} points={[]} />);
+  expect(screen.getByText('暂无采样')).toBeVisible();
+  expect(container.querySelector('.rhine-chart__inspection')).not.toBeInTheDocument();
+  rerender(<TrendChart {...context} points={[points[1]]} activePointId="b" />);
+  expect(screen.getByText('所有采样值均未知')).toBeVisible();
+  expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  expect(container.querySelector('.rhine-chart__inspection')).not.toBeInTheDocument();
+  fireEvent.click(screen.getByText('查看请求数据表'));
+  expect(screen.getByRole('cell', { name: '10:10' })).toBeVisible();
+  expect(screen.getByRole('cell', { name: '未知' })).toBeVisible();
+  rerender(<TrendChart {...context} points={points} activePointId="b" />);
+  expect(screen.getByRole('img')).toHaveAccessibleDescription('10:10：未知');
+  rerender(<TrendChart {...context} points={[{ ...points[0], value: Infinity }, points[1]]} activePointId="b" />);
+  expect(container.querySelector('.rhine-chart__inspection')).not.toBeInTheDocument();
+});
+
+it('keeps finite chart coordinates at large finite magnitudes and zero shares invisible', () => {
+  const { container, rerender } = render(<TrendChart {...context} kind="line" points={[{ id: 'a', label: 'A', value: -Number.MAX_VALUE }, { id: 'b', label: 'B', value: Number.MAX_VALUE }]} />);
+  expect(container.querySelector('.rhine-chart__line')?.getAttribute('d')).not.toMatch(/NaN|Infinity/);
+  rerender(<StackedBar {...context} parts={[{ id: 'zero', label: '无', value: 0 }, { id: 'one', label: '有', value: 1 }]} />);
+  expect(container.querySelectorAll('.rhine-chart__stack > span')).toHaveLength(1);
+  expect(screen.getByRole('list')).toHaveTextContent('无：0 次（0.0%）');
+});
+
+it('preserves timeline identity across insertion and reorder', () => {
+  const { rerender } = render(<StatusTimeline label="历史" startLabel="开始" endLabel="结束" segments={segments} defaultActiveId="a" />);
+  expect(screen.getByRole('slider')).toHaveAttribute('aria-valuetext', 'A · 有输出·未见异常');
+  rerender(<StatusTimeline label="历史" startLabel="开始" endLabel="结束" segments={[segments[1], segments[0]]} defaultActiveId="a" />);
+  expect(screen.getByRole('slider')).toHaveValue('1');
+  expect(screen.getByRole('slider')).toHaveAttribute('aria-valuetext', 'A · 有输出·未见异常');
+});
+
+it('allocates the entire percentage bar even when positive counts sum to less than one', () => {
+  const { container } = render(<StackedBar {...context} parts={[{ id: 'a', label: 'A', value: 0.1 }, { id: 'b', label: 'B', value: 0.2 }]} />);
+  const weights = [...container.querySelectorAll<HTMLElement>('.rhine-chart__stack > span')].map(part => Number(part.style.flexGrow));
+  expect(weights.reduce((sum, weight) => sum + weight, 0)).toBeCloseTo(1);
+  expect(weights[1] / weights[0]).toBeCloseTo(2);
+  expect(screen.getByRole('list')).toHaveTextContent('33.3%');
+  expect(screen.getByRole('list')).toHaveTextContent('66.7%');
+});
+
+it('reports timeline controlled selection and open intent without overriding host state', async () => {
+  const selected = vi.fn(), opened = vi.fn();
+  const props = { label: '历史', startLabel: '开始', endLabel: '结束', segments, activeId: 'a', onActiveChange: selected, onOpenChange: opened };
+  const { rerender } = render(<StatusTimeline {...props} open={false} />);
+  fireEvent.focus(screen.getByRole('slider'));
+  expect(opened).toHaveBeenCalledWith(true); expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  fireEvent.change(screen.getByRole('slider'), { target: { value: '1' } });
+  expect(selected).toHaveBeenCalledWith('b'); expect(screen.getByRole('slider')).toHaveValue('0');
+  rerender(<StatusTimeline {...props} open />);
+  expect(await screen.findByRole('dialog')).toHaveTextContent('A · 有输出');
+  fireEvent.keyDown(screen.getByRole('slider'), { key: 'Escape' });
+  expect(opened).toHaveBeenLastCalledWith(false); expect(screen.getByRole('dialog')).toBeInTheDocument();
+});
+
+it('lets keyboard users enter and dismiss timeline details without reopening on focus return', async () => {
+  render(<StatusTimeline label="历史" startLabel="开始" endLabel="结束" segments={segments} />);
+  const slider = screen.getByRole('slider');
+  expect(slider).not.toHaveAttribute('aria-expanded');
+  expect(slider).toHaveAttribute('aria-haspopup', 'dialog');
+  act(() => slider.focus()); const detail = await screen.findByRole('dialog');
+  expect(slider).not.toHaveAttribute('aria-expanded');
+  expect(slider).toHaveAttribute('aria-controls', detail.id);
+  expect(slider).toHaveAttribute('aria-details', detail.id);
+  fireEvent.keyDown(slider, { key: 'Enter' });
+  expect(screen.getByRole('button', { name: '关闭时段详情' })).toHaveFocus();
+  fireEvent.click(screen.getByRole('button', { name: '关闭时段详情' }));
+  await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  await waitFor(() => expect(slider).toHaveFocus());
+  fireEvent.keyDown(slider, { key: 'Enter' });
+  await waitFor(() => expect(screen.getByRole('button', { name: '关闭时段详情' })).toHaveFocus());
+});
+
+it('disables timeline interaction even with defaultOpen', () => {
+  const opened = vi.fn();
+  render(<StatusTimeline label="历史" startLabel="开始" endLabel="结束" segments={segments} disabled defaultOpen onOpenChange={opened} />);
+  expect(screen.getByRole('slider')).toBeDisabled();
+  fireEvent.pointerMove(screen.getByRole('slider'), { pointerType: 'mouse' });
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); expect(opened).not.toHaveBeenCalled();
+});

package/tests/Patterns.test.tsx

@@ -0,0 +1,75 @@
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Breadcrumbs, Drawer, ErrorSummary, Fieldset, SideNav, Steps, TextField } from '../components';
+import { PatternGallery } from '../preview/PatternGallery';
+
+describe('navigation and form workflow contracts', () => {
+  it('keeps split dialog selection and preview in one accessible modal', async () => {
+    render(<PatternGallery section="patterns"/>);
+    fireEvent.change(screen.getByRole('combobox',{name:'我正在设计什么场景'}),{target:{value:'monitor'}});
+    fireEvent.click(screen.getByRole('button',{name:'左右分栏预览'}));
+    const dialog=await screen.findByRole('dialog',{name:'选择范围'});
+    expect(dialog).toHaveClass('rhine-dialog--split');
+    fireEvent.change(within(dialog).getByRole('combobox',{name:'范围'}),{target:{value:'backup'}});
+    expect(within(dialog).getByRole('heading',{name:'备用资源 · 健康记录'})).toBeVisible();
+    expect(within(dialog).getByRole('slider')).toHaveAttribute('aria-valuetext','时段 96 · 未知 / 无数据');
+    fireEvent.keyDown(document.activeElement!,{key:'Escape'});
+    await waitFor(()=>expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  });
+  it('preserves real navigation links and identifies the current location', () => {
+    const navigate = vi.fn();
+    render(<><SideNav groups={[{label:'工作区',items:[{id:'a',label:'概览',href:'/overview',icon:'chart'},{id:'b',label:'记录',href:'/records'}]}]} currentId="b" onNavigate={(item,event)=>{event.preventDefault();navigate(item.id);}}/><Breadcrumbs items={[{label:'首页',href:'/'},{label:'记录'}]}/></>);
+    expect(screen.getByRole('link',{name:'记录'})).toHaveAttribute('href','/records');
+    expect(screen.getByRole('link',{name:'记录'})).toHaveAttribute('aria-current','page');
+    fireEvent.click(screen.getByRole('link',{name:'概览'})); expect(navigate).toHaveBeenCalledWith('a');
+    expect(within(screen.getByRole('navigation',{name:'当前位置'})).getByText('记录')).toHaveAttribute('aria-current','page');
+  });
+  it('only permits returning to completed steps and exposes current/error/completed states', () => {
+    const change=vi.fn(), items=[{id:'a',label:'输入'},{id:'b',label:'核对'},{id:'c',label:'完成'}];
+    const {rerender}=render(<Steps items={items} current={1} onStepChange={change} error="信息不完整"/>);
+    expect(screen.getAllByRole('button')).toHaveLength(1);
+    fireEvent.click(screen.getByRole('button',{name:'返回输入'}));expect(change).toHaveBeenCalledWith(0);
+    expect(screen.getByText('核对').closest('li')).toHaveAttribute('aria-current','step');
+    expect(screen.getByText(/需要修正/)).toHaveTextContent('信息不完整');
+    rerender(<Steps items={items} current={3}/>);
+    expect(screen.getAllByText('已完成')).toHaveLength(3);
+    expect(document.querySelector('[aria-current=step]')).toBeNull();
+  });
+  it('groups fields semantically and supports native disabled fieldsets', () => {
+    render(<Fieldset legend="连接" hint="只读任务暂不可编辑" disabled><TextField label="地址"/></Fieldset>);
+    expect(screen.getByRole('group',{name:'连接'})).toHaveAccessibleDescription('只读任务暂不可编辑');
+    expect(screen.getByRole('textbox',{name:'地址'})).toBeDisabled();
+  });
+  it('focuses an error summary only for submissions and links back without changing routes', () => {
+    const errors=[{fieldId:'workspace',message:'请输入名称'}];
+    const {rerender}=render(<><ErrorSummary errors={errors} focusKey={1}/><TextField id="workspace" label="名称"/></>);
+    expect(screen.getByRole('region',{name:'请修正以下问题'})).toHaveFocus();
+    const before=window.location.hash;fireEvent.click(screen.getByRole('link',{name:'请输入名称'}));
+    expect(screen.getByRole('textbox')).toHaveFocus();expect(window.location.hash).toBe(before);
+    rerender(<><ErrorSummary errors={[...errors]} focusKey={1}/><TextField id="workspace" label="名称"/></>);
+    expect(screen.getByRole('textbox')).toHaveFocus();
+    rerender(<><ErrorSummary errors={errors} focusKey={2}/><TextField id="workspace" label="名称"/></>);
+    expect(screen.getByRole('region')).toHaveFocus();
+  });
+  it('opens a themed drawer and restores the trigger focus on Escape', async () => {
+    render(<div className="rhine-theme" data-rhine-motion="reduced"><Drawer trigger={<button>查看详情</button>} title="详情" description="记录信息"><TextField label="备注"/></Drawer></div>);
+    const trigger=screen.getByRole('button',{name:'查看详情'}); trigger.focus();fireEvent.click(trigger);
+    const dialog=await screen.findByRole('dialog'); expect(dialog).toHaveClass('rhine-drawer');
+    expect(dialog.closest('.rhine-theme')).toHaveAttribute('data-rhine-motion','reduced');
+    expect(dialog).toContainElement(document.activeElement as HTMLElement);
+    fireEvent.keyDown(document.activeElement!,{key:'Escape'});
+    await waitFor(()=>expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    await waitFor(()=>expect(trigger).toHaveFocus());
+  });
+  it('retains form input on failure and clears the summary only after valid resubmission', () => {
+    render(<PatternGallery section="form-workflow"/>);
+    fireEvent.change(screen.getByRole('textbox',{name:'工作区名称'}),{target:{value:'研究'}});
+    fireEvent.click(screen.getByRole('button',{name:'验证配置'}));
+    expect(screen.getByRole('textbox',{name:'工作区名称'})).toHaveValue('研究');
+    expect(screen.getByRole('region')).toHaveFocus();
+    fireEvent.change(screen.getByRole('textbox',{name:'服务地址'}),{target:{value:'https://example.com'}});
+    fireEvent.click(screen.getByRole('button',{name:'验证配置'}));
+    expect(screen.queryByRole('region')).not.toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('没有保存到服务端');
+  });
+});