@linhey/rhine-design 0.11.0 → 0.11.2

package/tests/SettingsDialog.test.tsx

@@ -1,10 +1,11 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { expect, it } from 'vitest';
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { afterEach, expect, it, vi } from 'vitest';
 import { SettingsDialogGallery } from '../preview/SettingsDialogGallery';
-import { Button, Dialog, Tooltip } from '../components';
+import { ThemeProvider } from '../components/theme';
+import { Button, Dialog, Drawer, Tooltip } from '../components';
 
 it('keeps host state and URL while changing settings sections and explicitly saving', async () => {
-  render(<SettingsDialogGallery />);
+  render(<ThemeProvider><SettingsDialogGallery /></ThemeProvider>);
   const url = location.href;
   fireEvent.change(screen.getByRole('textbox', {name:'宿主查询'}), {target:{value:'已有查询'}});
   fireEvent.click(screen.getByRole('button', {name:'打开设置'}));
@@ -13,7 +14,7 @@ it('keeps host state and URL while changing settings sections and explicitly sav
   fireEvent.click(screen.getByRole('link', {name:'账号'}));
   expect(screen.getByRole('textbox', {name:'工作区名称'})).toHaveValue('修改后的名称');
   expect(location.href).toBe(url);
-  fireEvent.click(screen.getByRole('button', {name:'保存设置'}));
+  fireEvent.click(screen.getByRole('button', {name:'保存当前工作区设置'}));
   await screen.findByText('已保存演示草稿');
   expect(screen.getByRole('dialog', {name:'设置'})).toBeVisible();
   fireEvent.click(screen.getByRole('button', {name:'关闭对话框'}));
@@ -22,12 +23,12 @@ it('keeps host state and URL while changing settings sections and explicitly sav
   fireEvent.click(screen.getByRole('button', {name:'打开设置'}));
   expect(screen.getByRole('textbox', {name:'工作区名称'})).toHaveValue('修改后的名称');
   fireEvent.change(screen.getByRole('textbox', {name:'工作区名称'}), {target:{value:'丢弃'}});
-  fireEvent.click(screen.getByRole('button', {name:'取消草稿'}));
+  fireEvent.click(screen.getByRole('button', {name:'撤销全部未保存的修改'}));
   expect(screen.getByRole('textbox', {name:'工作区名称'})).toHaveValue('修改后的名称');
 });
 
 it('closes only the focused nested dialog on an immediate Escape', async () => {
-  render(<SettingsDialogGallery />);
+  render(<ThemeProvider><SettingsDialogGallery /></ThemeProvider>);
   fireEvent.click(screen.getByRole('button', {name:'打开设置'}));
   fireEvent.click(screen.getByRole('link', {name:'用户管理与权限'}));
   fireEvent.click(screen.getByRole('button', {name:'编辑成员 12'}));
@@ -52,10 +53,10 @@ it('lets the topmost tooltip consume Escape before closing its dialog', async ()
 });
 
 it.each([false, true])('reconciles pending saves on reopen without overwriting newer edits (edited=%s)', async edited => {
-  render(<SettingsDialogGallery />);
+  render(<ThemeProvider><SettingsDialogGallery /></ThemeProvider>);
   fireEvent.click(screen.getByRole('button', {name:'打开设置'}));
   fireEvent.change(screen.getByRole('textbox', {name:'工作区名称'}), {target:{value:'保存中的名称'}});
-  fireEvent.click(screen.getByRole('button', {name:'保存设置'}));
+  fireEvent.click(screen.getByRole('button', {name:'保存当前工作区设置'}));
   fireEvent.click(screen.getByRole('button', {name:'关闭对话框'}));
   await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
   fireEvent.click(screen.getByRole('button', {name:'打开设置'}));
@@ -64,3 +65,95 @@ it.each([false, true])('reconciles pending saves on reopen without overwriting n
   expect(screen.getByText('已保存名称：保存中的名称')).toBeVisible();
   expect(screen.getByRole('textbox', {name:'工作区名称'})).toHaveValue(edited ? '重新打开后编辑' : '保存中的名称');
 });
+
+
+it.each([undefined, null, false, ''])('omits absent description without a dangling relationship (%s)', description => {
+  render(<Dialog trigger={<Button>Open</Button>} title="Settings" description={description} height={640} footer={<Button>Save</Button>} navigation={<a href="#a">Account</a>}><p>Form</p></Dialog>);
+  fireEvent.click(screen.getByText('Open'));
+  const dialog = screen.getByRole('dialog');
+  expect(dialog).not.toHaveAttribute('aria-describedby');
+  expect(dialog.querySelector('.rhine-dialog__main > p')).toBeNull();
+  expect(screen.getByRole('region', {name:'Settings内容'})).toHaveTextContent('Form');
+  expect(screen.getByText('Save').closest('.rhine-dialog__scroll')).toBeNull();
+});
+
+it('keeps optional descriptions associated and ordinary Dialog/Drawer natural', () => {
+  const {rerender} = render(<Dialog trigger={<Button>Open</Button>} title="Short" description="Decision context"><p>Form</p></Dialog>);
+  fireEvent.click(screen.getByText('Open'));
+  let dialog = screen.getByRole('dialog');
+  expect(document.getElementById(dialog.getAttribute('aria-describedby')!)).toHaveTextContent('Decision context');
+  expect(dialog).not.toHaveClass('rhine-dialog--bounded');
+  rerender(<Drawer trigger={<Button>Open</Button>} title="Drawer"><p>Form</p></Drawer>);
+  fireEvent.click(screen.getByText('Open'));
+  dialog = screen.getByRole('dialog');
+  expect(dialog).not.toHaveClass('rhine-dialog--bounded');
+  expect(dialog).not.toHaveAttribute('aria-describedby');
+});
+
+
+afterEach(() => { vi.useRealTimers(); vi.restoreAllMocks(); vi.unstubAllGlobals(); document.documentElement.style.zoom = ''; });
+it.each(['error', 'conflict'])('retains the host draft after %s and reconciles only explicit success', outcome => {
+  vi.useFakeTimers();
+  render(<ThemeProvider><SettingsDialogGallery /></ThemeProvider>);
+  fireEvent.change(screen.getByLabelText('保存结果'), {target:{value:outcome}});
+  fireEvent.click(screen.getByText('打开设置'));
+  const dialog = screen.getByRole('dialog');
+  const draft = within(dialog).getByLabelText('工作区名称');
+  fireEvent.change(draft, {target:{value:'未提交草稿'}});
+  const save = within(dialog).getByRole('button', {name:'保存当前工作区设置'});
+  fireEvent.click(save); fireEvent.click(save);
+  expect(save).toHaveAttribute('aria-busy', 'true');
+  expect(save).toHaveAttribute('aria-disabled', 'true');
+  act(() => vi.advanceTimersByTime(500));
+  expect(draft).toHaveValue('未提交草稿');
+  expect(screen.getByText('已保存名称：研究工作区')).toBeInTheDocument();
+  expect(within(dialog).getByRole('alert')).toHaveTextContent(outcome === 'error' ? '保存失败' : '内容已更新');
+});
+
+it('cleans pending host requests and ignores an obsolete async section', () => {
+  vi.useFakeTimers();
+  const clear = vi.spyOn(globalThis, 'clearTimeout'), timer = vi.spyOn(globalThis, 'setTimeout');
+  const {unmount} = render(<ThemeProvider><SettingsDialogGallery /></ThemeProvider>);
+  fireEvent.click(screen.getByText('打开设置'));
+  fireEvent.click(screen.getByRole('link', {name:'异步栏目'}));
+  expect(screen.getByText('正在读取栏目')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('link', {name:'账号'}));
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.queryByText('异步栏目已就绪')).not.toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', {name:'保存当前工作区设置'}));
+  const hostTimers = timer.mock.calls.flatMap((call, i) => call[1] === 500 ? [timer.mock.results[i].value] : []);
+  unmount();
+  expect(hostTimers).toHaveLength(2);
+  for (const id of hostTimers) expect(clear).toHaveBeenCalledWith(id);
+});
+
+
+it('gives only the actual bounded body a named keyboard entry', () => {
+  const props = {trigger:<Button>Open</Button>, title:'Read', height:400, open:true, onOpenChange:() => {}};
+  const {rerender} = render(<Dialog {...props}><p>Long text</p></Dialog>);
+  expect(screen.getByRole('region', {name:'Read内容'})).toHaveClass('rhine-dialog__body');
+  expect(screen.getByRole('region')).toHaveAttribute('tabindex', '0');
+  rerender(<Dialog {...props} navigation={<a href="#a">Account</a>}><p>Long text</p></Dialog>);
+  expect(screen.getAllByRole('region')).toHaveLength(1);
+  expect(screen.getByRole('region')).toHaveClass('rhine-dialog__settings-content');
+  expect(screen.getByRole('dialog').querySelector('.rhine-dialog__body')).not.toHaveAttribute('tabindex');
+});
+
+it.each([undefined, 'auto'] as const)('caps an auto-height footer (%s) against the zoomed viewport and cleans observation', async initialHeight => {
+  vi.stubGlobal('innerHeight', 800);
+  const remove = vi.spyOn(window, 'removeEventListener');
+  const fixture = (height?: number | 'auto') => <Dialog trigger={<Button>Open</Button>} title="Auto" open onOpenChange={() => {}} height={height} footer={<Button>Action</Button>}><p>Text</p></Dialog>;
+  const {rerender,unmount} = render(fixture(initialHeight));
+  const dialog = screen.getByRole('dialog');
+  const limit = () => parseFloat(dialog.style.getPropertyValue('--rhine-dialog-footer-limit'));
+  expect(limit()).toBeCloseTo(307.2);
+  document.documentElement.style.zoom = '2';
+  fireEvent(window, new Event('resize'));
+  expect(limit()).toBeCloseTo(147.2);
+  vi.stubGlobal('innerHeight', 600); fireEvent(window, new Event('resize'));
+  expect(limit()).toBeCloseTo(107.2);
+  rerender(fixture(400));
+  expect(dialog.style.getPropertyValue('--rhine-dialog-footer-limit')).toBe('');
+  expect(remove).toHaveBeenCalledWith('resize', expect.any(Function));
+  unmount();
+});

package/tests/SingleSearch.test.tsx

@@ -0,0 +1,42 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { TextField } from '../components';
+import { SingleSearchGallery } from '../preview/SingleSearchGallery';
+
+afterEach(() => vi.useRealTimers());
+describe('single search contract', () => {
+  it('hides only the label visually, retains native props and rejects an empty name', () => {
+    const { rerender } = render(<TextField label="搜索" labelVisibility="hidden" aria-label=" " type="search" name="q" required />);
+    const input = screen.getByRole('searchbox', { name: '搜索' });
+    expect(input).toBeRequired(); expect(input).toHaveAttribute('name', 'q');
+    expect(screen.getByText('搜索')).toHaveClass('rhine-sr-only');
+    expect(input).not.toHaveAttribute('labelVisibility');
+    rerender(<TextField label="搜索" hint="提示" error="失败" disabled />);
+    expect(screen.getByLabelText('搜索')).toHaveAccessibleDescription('提示 失败');
+    expect(screen.getByText('搜索')).not.toHaveClass('rhine-sr-only');
+    expect(() => render(<TextField label=" " labelVisibility="hidden" />)).toThrow('non-empty label');
+  });
+  it('debounces committed composition and clears without moving focus or accepting stale results', () => {
+    vi.useFakeTimers(); render(<SingleSearchGallery />);
+    const input = screen.getByRole('searchbox'); input.focus();
+    fireEvent.compositionStart(input); fireEvent.change(input, { target: { value: '中文' } });
+    act(() => vi.advanceTimersByTime(1000)); expect(screen.getByRole('status')).toBeEmptyDOMElement();
+    fireEvent.keyDown(input, { key: 'Escape', isComposing: true }); expect(input).toHaveValue('中文');
+    fireEvent.compositionEnd(input); act(() => vi.advanceTimersByTime(250)); expect(screen.getByRole('status')).toHaveTextContent('正在搜索');
+    fireEvent.keyDown(input, { key: 'Escape' }); act(() => vi.advanceTimersByTime(1000));
+    expect(input).toHaveValue(''); expect(input).toHaveFocus(); expect(screen.getByRole('status')).toBeEmptyDOMElement();
+    fireEvent.change(input, { target: { value: '旧查询' } }); act(() => vi.advanceTimersByTime(250));
+    fireEvent.change(input, { target: { value: '新查询' } }); act(() => vi.advanceTimersByTime(750));
+    expect(screen.getByRole('status')).toHaveTextContent('新查询'); expect(screen.getByRole('status')).not.toHaveTextContent('旧查询');
+  });
+  it('announces errors and cancels pending work on disabling or unmount', () => {
+    vi.useFakeTimers(); const { unmount } = render(<SingleSearchGallery />);
+    fireEvent.change(screen.getByLabelText('搜索场景'), { target: { value: 'error' } });
+    fireEvent.change(screen.getByRole('searchbox'), { target: { value: '合成' } }); act(() => vi.advanceTimersByTime(750));
+    expect(screen.getByRole('searchbox')).toHaveAccessibleDescription('搜索失败，请修改查询后重试。');
+    expect(screen.getByRole('searchbox')).toHaveAttribute('aria-invalid', 'true');
+    fireEvent.change(screen.getByLabelText('搜索场景'), { target: { value: 'disabled' } });
+    expect(screen.getByRole('searchbox')).toBeDisabled(); expect(screen.getByRole('status')).toBeEmptyDOMElement();
+    unmount(); expect(vi.getTimerCount()).toBe(0);
+  });
+});

package/tests/SkillInstallation.test.tsx

@@ -0,0 +1,77 @@
+import { cpSync, existsSync, mkdtempSync, readFileSync, readdirSync, realpathSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, isAbsolute, join, relative, resolve } from 'node:path';
+import { afterEach, describe, expect, it } from 'vitest';
+
+const source = resolve(process.env.RHINE_SKILL_SOURCE ?? 'skills/rhine-design');
+const sandboxes: string[] = [];
+
+afterEach(() => {
+  for (const sandbox of sandboxes.splice(0)) rmSync(sandbox, { recursive: true, force: true });
+});
+
+function install(fromPackage: boolean) {
+  const sandbox = mkdtempSync(join(tmpdir(), 'rhine-skill-'));
+  sandboxes.push(sandbox);
+  const target = join(sandbox, fromPackage ? '.agents/skills/rhine-design' : 'skills/rhine-design');
+  if (fromPackage) {
+    const packaged = join(sandbox, 'node_modules/@linhey/rhine-design/skills/rhine-design');
+    cpSync(source, packaged, { recursive: true });
+    // Same source and destination layout as the README's cp -R command.
+    cpSync(packaged, target, { recursive: true });
+  } else {
+    // Only the skill directory is available: no adjacent repository docs.
+    cpSync(source, target, { recursive: true });
+  }
+  return target;
+}
+
+function checkLinks(root: string) {
+  let localLinks = 0;
+  for (const file of readdirSync(root, { recursive: true, encoding: 'utf8' }).filter(file => file.endsWith('.md'))) {
+    const document = join(root, file);
+    const markdown = readFileSync(document, 'utf8');
+    // The skill uses inline Markdown links; code-formatted package paths are not links.
+    for (const [, href] of markdown.matchAll(/\[[^\]]*\]\(([^\s)]+)\)/g)) {
+      if (/^https?:\/\//.test(href)) {
+        const url = new URL(href);
+        if (url.hostname === 'github.com' && /^\/linhay\/rhine-design\/(blob|tree)\//.test(url.pathname)) {
+          const revision = url.pathname.split('/')[4];
+          if (!/^(?:[a-f0-9]{40}|v?\d+\.\d+\.\d+)$/.test(revision)) throw new Error(`Floating source link: ${href}`);
+        }
+        continue;
+      }
+      const [path, fragment] = href.split('#');
+      const target = path ? resolve(dirname(document), decodeURIComponent(path)) : document;
+      const within = relative(root, target);
+      if (isAbsolute(within) || within === '..' || within.startsWith('../')) throw new Error(`Link escapes skill: ${href}`);
+      if (!existsSync(target)) throw new Error(`Missing link target: ${href}`);
+      const realWithin = relative(realpathSync(root), realpathSync(target));
+      if (isAbsolute(realWithin) || realWithin === '..' || realWithin.startsWith('../')) throw new Error(`Link escapes skill: ${href}`);
+      if (fragment) {
+        const headings = [...readFileSync(target, 'utf8').matchAll(/^#{1,6}\s+(.+)$/gm)]
+          .map(([, heading]) => heading.toLowerCase().replace(/[^\p{L}\p{N}_\-\s]/gu, '').replace(/\s/g, '-'));
+        if (!headings.includes(decodeURIComponent(fragment))) throw new Error(`Missing heading: ${href}`);
+      }
+      localLinks++;
+    }
+  }
+  return localLinks;
+}
+
+describe('portable skill installation', () => {
+  it.each([true, false])('keeps links reachable outside the repository (package copy: %s)', fromPackage => {
+    expect(checkLinks(install(fromPackage))).toBeGreaterThan(0);
+  });
+
+  it.each([
+    ['../../../docs/THEMING.md', 'Link escapes skill'],
+    ['missing.md', 'Missing link target'],
+    ['../SKILL.md#missing-heading', 'Missing heading'],
+    ['https://github.com/linhay/rhine-design/blob/main/docs/THEMING.md', 'Floating source link'],
+  ])('rejects an invalid installed reference: %s', (href, error) => {
+    const root = install(false);
+    writeFileSync(join(root, 'references/regression.md'), `[contract](${href})\n`);
+    expect(() => checkLinks(root)).toThrow(error);
+  });
+});

package/tests/TrayUsage.test.tsx

@@ -0,0 +1,70 @@
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Button, Popover } from '../components';
+import { ThemeProvider } from '../components/theme';
+import { TrayUsageGallery } from '../preview/TrayUsageGallery';
+
+afterEach(() => vi.useRealTimers());
+function demo() { return render(<ThemeProvider><TrayUsageGallery /></ThemeProvider>); }
+const account = () => screen.getByRole('combobox', { name: 'Agent A 当前账号' });
+const panel = () => screen.getByRole('dialog', { name: '账号与用量概览' });
+
+describe('headerless Popover and synthetic usage host', () => {
+  it('preserves the accessible name and default header compatibility', () => {
+    const { rerender } = render(<ThemeProvider><Popover title="详情名称" trigger={<Button>详情</Button>} open>内容</Popover></ThemeProvider>);
+    expect(screen.getByRole('button', { name: '关闭详情' })).toBeVisible();
+    rerender(<ThemeProvider><Popover title="详情名称" showHeader={false} trigger={<Button>详情</Button>} open>内容</Popover></ThemeProvider>);
+    expect(screen.getByRole('dialog', { name: '详情名称' })).toBeVisible();
+    expect(screen.queryByRole('button', { name: '关闭详情' })).toBeNull();
+    expect(screen.queryByText('详情名称')).toBeNull();
+  });
+  it('keeps committed account and unrelated data while pending, locks duplicates, and retries a failure', () => {
+    demo(); vi.useFakeTimers();
+    fireEvent.click(screen.getByLabelText('首次切换失败'));
+    const other = screen.getByTestId('other-agent').textContent, summary = screen.getByTestId('usage-summary').textContent;
+    fireEvent.change(account(), { target: { value: 'b' } });
+    fireEvent.change(account(), { target: { value: 'b' } });
+    expect(account()).toBeDisabled(); expect(account()).toHaveValue('a');
+    expect(screen.getByTestId('current-account')).toHaveTextContent('研究账号 A');
+    expect(screen.getByTestId('request-count')).toHaveTextContent('1');
+    act(() => vi.advanceTimersByTime(1200));
+    expect(account()).toHaveValue('a'); expect(account()).not.toBeDisabled();
+    expect(within(panel()).getByRole('alert')).toHaveTextContent('切换失败');
+    fireEvent.click(screen.getByRole('button', { name: '重试切换' }));
+    act(() => vi.advanceTimersByTime(1200));
+    expect(account()).toHaveValue('b');
+    expect(screen.getByTestId('request-count')).toHaveTextContent('2');
+    expect(screen.getByTestId('other-agent').textContent).toBe(other);
+    expect(screen.getByTestId('usage-summary').textContent).toBe(summary);
+  });
+  it('blocks unavailable directories and cancels a late result on logout/reset', () => {
+    demo(); vi.useFakeTimers();
+    for (const state of ['loading', 'stale', 'connecting', 'unmatched']) {
+      fireEvent.change(screen.getByLabelText('用量场景'), { target: { value: state } });
+      expect(account()).toBeDisabled();
+      fireEvent.change(account(), { target: { value: 'b' } });
+      expect(screen.getByTestId('request-count')).toHaveTextContent('0');
+    }
+    fireEvent.change(screen.getByLabelText('用量场景'), { target: { value: 'normal' } });
+    fireEvent.change(account(), { target: { value: 'b' } });
+    fireEvent.change(screen.getByLabelText('用量场景'), { target: { value: 'signed-out' } });
+    act(() => vi.advanceTimersByTime(1200));
+    expect(within(panel()).queryByText(/研究账号|协作账号|1.28|128/)).toBeNull();
+    expect(screen.queryByTestId('usage-summary')).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: '重置托盘示例' }));
+    expect(account()).toHaveValue('a');
+    fireEvent.change(account(), { target: { value: 'b' } });
+    fireEvent.click(screen.getByRole('button', { name: '重置托盘示例' }));
+    act(() => vi.advanceTimersByTime(1200));
+    expect(account()).toHaveValue('a'); expect(screen.getByTestId('request-count')).toHaveTextContent('0');
+  });
+  it('keeps unknown quota distinct from zero and stale cache explicitly marked', () => {
+    demo();
+    fireEvent.change(screen.getByLabelText('用量场景'), { target: { value: 'unknown' } });
+    expect(within(panel()).getByText('未知')).toBeVisible();
+    expect(within(panel()).queryByRole('progressbar')).toBeNull();
+    fireEvent.change(screen.getByLabelText('用量场景'), { target: { value: 'stale' } });
+    expect(within(panel()).getByText('上次数据 · 目录已过期')).toBeVisible();
+    expect(screen.getByTestId('usage-summary')).toHaveTextContent('上次更新');
+  });
+});