create-wakii-stack 0.0.0-stage → 0.1.1

package/stack-template/app/ui-kit/src/ui/transition/transition.test.tsx

@@ -0,0 +1,285 @@
+// Transition tests — họ 11 loại: enter/exit class, unmount-on-end
+// (animationEnd/transitionEnd từ chính wrapper), giữ DOM khi unmountOnExit=false,
+// ignore end-event bắn từ con, Collapse 0fr↔1fr (+orientation horizontal),
+// Slide/Grow/Flip/Rotate/Blur/Bounce/ScaleSoft exit = reverse enter,
+// Stagger delay nối tiếp, Crossfade swap opacity. Depth contract: easing
+// mặc định var(--ease-smooth).
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it } from 'vitest';
+import { useState, type ComponentType } from 'react';
+import {
+  Blur,
+  Bounce,
+  Collapse,
+  Crossfade,
+  Fade,
+  Flip,
+  Grow,
+  Rotate,
+  ScaleSoft,
+  Slide,
+  Stagger,
+  Zoom,
+} from './index.js';
+
+afterEach(cleanup);
+
+/** Harness — bấm nút flip `in` (điều khiển như consumer thật). */
+function Harness({
+  Comp,
+  unmountOnExit,
+}: {
+  Comp: typeof Fade | typeof Zoom | typeof Collapse;
+  unmountOnExit?: boolean;
+}) {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <button type="button" onClick={() => setShow((s) => !s)}>
+        toggle
+      </button>
+      <Comp in={show} unmountOnExit={unmountOnExit}>
+        <div>panel</div>
+      </Comp>
+    </>
+  );
+}
+
+describe('Fade', () => {
+  it('in=false ban đầu → không render (unmountOnExit mặc định)', () => {
+    render(<Fade in={false}><div>panel</div></Fade>);
+    expect(screen.queryByText('panel')).toBeNull();
+  });
+
+  it('in=true → render + class enter bp-fade-in', async () => {
+    const user = userEvent.setup();
+    render(<Harness Comp={Fade} />);
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    const box = screen.getByText('panel').parentElement!;
+    expect(box.className).toContain('bp-fade-in');
+    expect(box.className).not.toContain('bp-fade-out');
+  });
+
+  it('in→false → class exit bp-fade-out; animationEnd trên wrapper → unmount', async () => {
+    const user = userEvent.setup();
+    render(<Harness Comp={Fade} />);
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    const box = screen.getByText('panel').parentElement!;
+    expect(box.className).toContain('bp-fade-out');
+    fireEvent.animationEnd(box);
+    expect(screen.queryByText('panel')).toBeNull();
+  });
+
+  it('animationEnd bắn từ CON (bubble) → không unmount', async () => {
+    const user = userEvent.setup();
+    render(<Harness Comp={Fade} />);
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    fireEvent.animationEnd(screen.getByText('panel'));
+    expect(screen.getByText('panel')).toBeInTheDocument();
+  });
+
+  it('unmountOnExit=false → in=false vẫn trong DOM, giữ opacity-0', async () => {
+    const user = userEvent.setup();
+    render(<Harness Comp={Fade} unmountOnExit={false} />);
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    const box = screen.getByText('panel').parentElement!;
+    expect(box).toHaveClass('opacity-0');
+  });
+});
+
+describe('Zoom', () => {
+  it('in=true → class enter bp-zoom-in; exit → bp-zoom-out', async () => {
+    const user = userEvent.setup();
+    render(<Harness Comp={Zoom} />);
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    expect(screen.getByText('panel').parentElement!.className).toContain('bp-zoom-in');
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    expect(screen.getByText('panel').parentElement!.className).toContain('bp-zoom-out');
+    fireEvent.animationEnd(screen.getByText('panel').parentElement!);
+    expect(screen.queryByText('panel')).toBeNull();
+  });
+});
+
+describe('Collapse', () => {
+  it('in=true → gridTemplateRows 1fr; in=false → 0fr + ease-smooth (depth contract); có tầng overflow clip', async () => {
+    const user = userEvent.setup();
+    render(<Harness Comp={Collapse} />);
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    const box = screen.getByText('panel').parentElement!.parentElement!;
+    expect(box.style.gridTemplateRows).toBe('1fr');
+    const clip = screen.getByText('panel').parentElement!;
+    expect(clip).toHaveClass('min-h-0', 'overflow-hidden');
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    expect(box.style.gridTemplateRows).toBe('0fr');
+    expect(box.style.transitionTimingFunction).toBe('var(--ease-smooth)');
+  });
+
+  it('exit → transitionEnd → unmount; unmountOnExit=false → giữ DOM', async () => {
+    const user = userEvent.setup();
+    const once = render(<Harness Comp={Collapse} />);
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    fireEvent.transitionEnd(screen.getByText('panel').parentElement!.parentElement!);
+    expect(screen.queryByText('panel')).toBeNull();
+    once.unmount();
+
+    render(<Harness Comp={Collapse} unmountOnExit={false} />);
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    await user.click(screen.getByRole('button', { name: 'toggle' }));
+    expect(screen.getByText('panel')).toBeInTheDocument();
+  });
+
+  it('duration override → transitionDuration ms trên wrapper', async () => {
+    render(<Collapse in duration={450}><div>panel</div></Collapse>);
+    const box = screen.getByText('panel').parentElement!.parentElement!;
+    expect(box.style.transitionDuration).toBe('450ms');
+  });
+});
+
+describe('Fade — duration override', () => {
+  it('duration → animationDuration ms', () => {
+    act(() => {
+      render(<Fade in duration={300}><div>panel</div></Fade>);
+    });
+    expect(screen.getByText('panel').parentElement!.style.animationDuration).toBe('300ms');
+  });
+});
+
+/** Toggle-harness generic cho loại mới (prop riêng truyền qua rest). */
+function Toggle({ Comp, props = {} }: { Comp: ComponentType<Record<string, unknown>>; props?: Record<string, unknown> }) {
+  const [show, setShow] = useState(true);
+  return (
+    <>
+      <button type="button" onClick={() => setShow((s) => !s)}>flip</button>
+      <Comp in={show} {...props}><div>panel</div></Comp>
+    </>
+  );
+}
+
+/** 10 loại mới cùng pattern enter/exit (exit = reverse enter) — 2 test/loại. */
+const asGeneric = (C: unknown): ComponentType<Record<string, unknown>> => C as ComponentType<Record<string, unknown>>;
+const CASES: [string, ComponentType<Record<string, unknown>>, Record<string, unknown>, string][] = [
+  ['Slide up', asGeneric(Slide), { direction: 'up' }, 'bp-slide-up-in'],
+  ['Slide down', asGeneric(Slide), { direction: 'down' }, 'bp-slide-in-down'],
+  ['Slide left', asGeneric(Slide), { direction: 'left' }, 'bp-slide-in-left'],
+  ['Slide right', asGeneric(Slide), { direction: 'right' }, 'bp-slide-in-right'],
+  ['Grow', asGeneric(Grow), {}, 'bp-grow-in'],
+  ['Flip', asGeneric(Flip), {}, 'bp-flip'],
+  ['Rotate', asGeneric(Rotate), {}, 'bp-rotate-in'],
+  ['Blur', asGeneric(Blur), {}, 'bp-blur-in'],
+  ['Bounce', asGeneric(Bounce), {}, 'bp-bounce-in'],
+  ['ScaleSoft', asGeneric(ScaleSoft), {}, 'bp-soft-in'],
+];
+
+CASES.forEach(([name, Comp, props, kf]) => {
+  describe(name, () => {
+    it('enter → class keyframe đúng + easing mặc định ease-smooth', () => {
+      render(<Toggle Comp={Comp} props={props} />);
+      const box = screen.getByText('panel').parentElement!;
+      expect(box.className).toContain(kf);
+      expect(box.className).toContain('var(--ease-smooth)');
+    });
+
+    it('exit → animationDirection reverse; animationEnd wrapper → unmount; con bubble bỏ qua', () => {
+      render(<Toggle Comp={Comp} props={props} />);
+      const box = screen.getByText('panel').parentElement!;
+      fireEvent.click(screen.getByRole('button', { name: 'flip' }));
+      expect(box.style.animationDirection).toBe('reverse');
+      fireEvent.animationEnd(screen.getByText('panel')); // bubble từ con — phải bỏ qua
+      expect(screen.getByText('panel')).toBeInTheDocument();
+      fireEvent.animationEnd(box);
+      expect(screen.queryByText('panel')).toBeNull();
+    });
+  });
+});
+
+describe('Slide — prop riêng', () => {
+  it('origin của Grow → transformOrigin trên wrapper; delay → animationDelay + fill both', () => {
+    render(<Grow in origin="top right" delay={120}><div>panel</div></Grow>);
+    const box = screen.getByText('panel').parentElement!;
+    expect(box.style.transformOrigin).toBe('top right');
+    expect(box.style.animationDelay).toBe('120ms');
+    expect(box.style.animationFillMode).toBe('both');
+  });
+});
+
+describe('Collapse — orientation horizontal (depth contract)', () => {
+  it('horizontal → gridTemplateColumns 0fr↔1fr + class transition-columns + clip min-w-0', () => {
+    const { rerender } = render(<Collapse in orientation="horizontal"><div>panel</div></Collapse>);
+    const box = screen.getByText('panel').parentElement!.parentElement!;
+    expect(box.style.gridTemplateColumns).toBe('1fr');
+    expect(box.className).toContain('transition-[grid-template-columns]');
+    const clip = screen.getByText('panel').parentElement!;
+    expect(clip).toHaveClass('min-w-0', 'overflow-hidden');
+    rerender(<Collapse in={false} orientation="horizontal" unmountOnExit={false}><div>panel</div></Collapse>);
+    expect(box.style.gridTemplateColumns).toBe('0fr');
+  });
+});
+
+describe('Stagger', () => {
+  it('children delay nối tiếp staggerMs (30 mặc định) + animation slide-up-in fill both', () => {
+    render(<Stagger in><div>một</div><div>hai</div><div>ba</div></Stagger>);
+    const rows = [screen.getByText('một').parentElement!, screen.getByText('hai').parentElement!, screen.getByText('ba').parentElement!];
+    // jsdom không tách longhand từ shorthand — assert trên chuỗi animation (regex biên)
+    expect(rows[0].style.animation).toMatch(/\s0ms both$/);
+    expect(rows[1].style.animation).toMatch(/\s30ms both$/);
+    expect(rows[2].style.animation).toMatch(/\s60ms both$/);
+    expect(rows[0].style.animation).toContain('bp-slide-up-in');
+  });
+
+  it('staggerMs override; exit → container fade-out; animationEnd container → unmount', async () => {
+    function StaggerHarness() {
+      const [show, setShow] = useState(true);
+      return (
+        <>
+          <button type="button" onClick={() => setShow(false)}>flip</button>
+          <Stagger in={show} staggerMs={80}><div>một</div><div>hai</div></Stagger>
+        </>
+      );
+    }
+    const user = userEvent.setup();
+    render(<StaggerHarness />);
+    expect(screen.getByText('hai').parentElement!.style.animation).toMatch(/\s80ms both$/);
+    await user.click(screen.getByRole('button', { name: 'flip' }));
+    const container = screen.getByText('một').parentElement!.parentElement!;
+    expect(container.className).toContain('bp-fade-out');
+    fireEvent.animationEnd(container);
+    expect(screen.queryByText('một')).toBeNull();
+  });
+
+  it('easing prop → timing function trong inline animation của mỗi row', () => {
+    render(<Stagger in easing="var(--ease-enter)"><div>một</div></Stagger>);
+    expect(screen.getByText('một').parentElement!.style.animation).toContain('var(--ease-enter)');
+  });
+});
+
+describe('Crossfade', () => {
+  it('active=0 → mục 0 hiện, mục 1 opacity-0 + pointer-events-none + aria-hidden', () => {
+    render(<Crossfade active={0}><div>mode-a</div><div>mode-b</div></Crossfade>);
+    const a = screen.getByText('mode-a').parentElement!;
+    const b = screen.getByText('mode-b').parentElement!;
+    expect(a).toHaveClass('opacity-100');
+    expect(b).toHaveClass('opacity-0', 'pointer-events-none');
+    expect(b).toHaveAttribute('aria-hidden', 'true');
+    expect(a).not.toHaveAttribute('aria-hidden');
+  });
+
+  it('active=1 → swap; cả 2 vẫn mounted (grid chồng cell, không machine)', () => {
+    const { rerender } = render(<Crossfade active={0}><div>mode-a</div><div>mode-b</div></Crossfade>);
+    rerender(<Crossfade active={1}><div>mode-a</div><div>mode-b</div></Crossfade>);
+    expect(screen.getByText('mode-a').parentElement!).toHaveClass('opacity-0');
+    expect(screen.getByText('mode-b').parentElement!).toHaveClass('opacity-100');
+    expect(screen.getByText('mode-a')).toBeInTheDocument();
+  });
+
+  it('duration/easing → inline transition style', () => {
+    render(<Crossfade active={0} duration={280} easing="var(--ease-enter)"><div>mode-a</div><div>mode-b</div></Crossfade>);
+    const a = screen.getByText('mode-a').parentElement!;
+    expect(a.style.transitionDuration).toBe('280ms');
+    expect(a.style.transitionTimingFunction).toBe('var(--ease-enter)');
+  });
+});

package/stack-template/app/ui-kit/src/ui/tree/index.tsx

@@ -0,0 +1,68 @@
+// Tree — lite recursive expand/collapse (hướng A, 0 deps).
+// GIỚI HẠN: không virtual scroll, không drag-drop, không multi-select (backlog).
+import { useState } from 'react';
+import { Icon } from '../icons';
+
+export interface TreeNodeData {
+  /** Khả định duy nhất của node (React key + toggle state). */
+  key: string;
+  /** Nhãn hiển thị. */
+  label: string;
+  /** Có children → node expand/collapse được. */
+  children?: TreeNodeData[];
+}
+
+export interface TreeProps {
+  /** Dữ liệu cây (đệ quy). */
+  data: TreeNodeData[];
+  /** Node mở sẵn lúc mount. */
+  defaultExpandedKeys?: string[];
+  /** Đường nối cấp con — border-l trên ul group (antd showLine). */
+  showLine?: boolean;
+  /** Callback click node (cả node lá lẫn node cha). */
+  onNodeClick?: (key: string) => void;
+  className?: string;
+}
+
+function TreeNode({ node, depth, expanded, onToggle, onClick, showLine }: {
+  node: TreeNodeData; depth: number;
+  expanded: Set<string>; onToggle: (k: string) => void;
+  onClick?: (k: string) => void; showLine?: boolean;
+}) {
+  const hasChildren = node.children && node.children.length > 0;
+  const isOpen = expanded.has(node.key);
+  return (
+    <li>
+      <button type="button" role="treeitem" aria-expanded={hasChildren ? isOpen : undefined}
+        onClick={() => { if (hasChildren) onToggle(node.key); onClick?.(node.key); }}
+        className={`flex w-full cursor-pointer items-center gap-1 rounded-lg border-none bg-transparent px-2 py-1 text-left text-body text-ink hover:bg-s3 active:opacity-80 focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:outline-none ${depth > 0 ? 'pl-6' : ''}`}>
+        {hasChildren && <span aria-hidden="true" className={`text-ink3 transition-transform ${isOpen ? 'rotate-90' : ''}`}><Icon name="chevron-right" size={12} /></span>}
+        {node.label}
+      </button>
+      {hasChildren && isOpen && (
+        <ul role="group" className={`m-0 list-none p-0 ${showLine ? 'ml-3 border-l border-line pl-1' : ''}`}>
+          {node.children!.map((child) => (
+            <TreeNode key={child.key} node={child} depth={depth + 1} expanded={expanded} onToggle={onToggle} onClick={onClick} showLine={showLine} />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+export function Tree({ data, defaultExpandedKeys = [], showLine = false, onNodeClick, className }: TreeProps) {
+  const [expanded, setExpanded] = useState<Set<string>>(new Set(defaultExpandedKeys));
+  return (
+    <ul role="tree" className={`m-0 list-none p-0${className ? ` ${className}` : ''}`}>
+      {data.map((node) => (
+        <TreeNode key={node.key} node={node} depth={0} expanded={expanded}
+          onToggle={(k) => setExpanded((p) => {
+            const n = new Set(p);
+            if (n.has(k)) n.delete(k); else n.add(k);
+            return n;
+          })}
+          onClick={onNodeClick} showLine={showLine} />
+      ))}
+    </ul>
+  );
+}

package/stack-template/app/ui-kit/src/ui/tree/tree.stories.tsx

@@ -0,0 +1,139 @@
+// Tree stories — Default / ThreeLevels / ManyBranches / DarkTheme / ShowLine
+// + FileExplorer (project tree, selected-node status bar).
+// Tree manages expanded state internally (uncontrolled — no controlled prop).
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tree } from './index';
+/** Expand/collapse hierarchy — chevron rotate, pre-expanded keys. */
+const meta = { title: 'Data Display/Tree', component: Tree, tags: ['autodocs'] } satisfies Meta<typeof Tree>;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+export const Default: S = {
+  name: 'Default — chevron rotates 90° when open',
+  args: { data: [
+    { key: '1', label: 'Folder', children: [{ key: '1-1', label: 'File.ts' }] },
+    { key: '2', label: 'README.md' },
+  ], defaultExpandedKeys: ['1'] },
+};
+
+export const ThreeLevels: S = {
+  name: '3 levels — src/app/ui-kit, level 1 pre-expanded',
+  args: { data: [
+    { key: 'src', label: 'src', children: [
+      { key: 'app', label: 'app', children: [
+        { key: 'ui', label: 'ui-kit', children: [{ key: 'ui-i', label: 'index.tsx' }] },
+        { key: 'sh', label: 'shell', children: [{ key: 'sh-i', label: 'main.tsx' }] },
+      ] },
+      { key: 'pkg', label: 'package.json' },
+    ] },
+  ], defaultExpandedKeys: ['src'] },
+};
+
+export const ManyBranches: S = {
+  name: 'Many branches — 3 folders × 3 files',
+  args: { data: [
+    { key: 'fe', label: 'frontend', children: [
+      { key: 'fe-1', label: 'main.tsx' }, { key: 'fe-2', label: 'app.tsx' }, { key: 'fe-3', label: 'router.tsx' },
+    ] },
+    { key: 'be', label: 'backend', children: [
+      { key: 'be-1', label: 'server.ts' }, { key: 'be-2', label: 'db.ts' }, { key: 'be-3', label: 'routes.ts' },
+    ] },
+    { key: 'ops', label: 'ops', children: [
+      { key: 'ops-1', label: 'compose.yml' }, { key: 'ops-2', label: 'nginx.conf' }, { key: 'ops-3', label: 'ci.yaml' },
+    ] },
+  ], defaultExpandedKeys: ['fe', 'be'] },
+};
+
+export const DarkTheme: S = {
+  args: { data: [] },
+  name: 'Dark theme — hover bg-s3 follows tokens',
+  render: () => (
+    <div data-bp-theme="dark" className="w-64 rounded-xl bg-s2 p-4">
+      <Tree data={[
+        { key: '1', label: 'Folder', children: [
+          { key: '1-1', label: 'File.ts' },
+          { key: '1-2', label: 'README.md' },
+        ] },
+        { key: '2', label: 'LICENSE' },
+      ]} defaultExpandedKeys={['1']} />
+    </div>
+  ),
+};
+
+// ── Case-coverage audit 2026-10-18 (antd parity: showLine) ──
+
+export const ShowLine: S = {
+  name: 'Show line — connector borders on nested levels',
+  args: { data: [] },
+  render: () => (
+    <div className="w-64">
+      <Tree
+        showLine
+        defaultExpandedKeys={['src', 'src-ui']}
+        data={[
+          { key: 'src', label: 'src', children: [
+            { key: 'src-ui', label: 'ui', children: [
+              { key: 'src-ui-badge', label: 'badge' },
+              { key: 'src-ui-tree', label: 'tree' },
+            ] },
+            { key: 'src-hooks', label: 'hooks' },
+          ] },
+          { key: 'platform', label: 'platform' },
+        ]}
+      />
+    </div>
+  ),
+};
+
+// ── Real-world 2026-10-25 — file explorer: cây thư mục dự án 2 cấp thư mục,
+// đếm file trên label thư mục, selected node theo dõi qua onNodeClick + thanh
+// trạng thái dưới (pattern VS Code). API Tree hiện tại nhận label string +
+// callback click (chưa có slot icon/slot selected trong node) — icon file và
+// highlight node được thể hiện bằng chevron + showLine + status bar.
+
+const PROJECT_FILES = [
+  { key: 'src', label: 'src · 24 files', children: [
+    { key: 'src-components', label: 'components · 14 files', children: [
+      { key: 'src-components-button', label: 'Button.tsx' },
+      { key: 'src-components-table', label: 'Table.tsx' },
+      { key: 'src-components-modal', label: 'Modal.tsx' },
+    ] },
+    { key: 'src-hooks', label: 'hooks · 6 files', children: [
+      { key: 'src-hooks-auth', label: 'useAuth.ts' },
+      { key: 'src-hooks-theme', label: 'useTheme.ts' },
+    ] },
+    { key: 'src-index', label: 'index.tsx' },
+  ] },
+  { key: 'public', label: 'public · 2 files', children: [
+    { key: 'public-favicon', label: 'favicon.svg' },
+    { key: 'public-robots', label: 'robots.txt' },
+  ] },
+  { key: 'package', label: 'package.json' },
+  { key: 'vite-config', label: 'vite.config.ts' },
+];
+
+function ExplorerDemo() {
+  const [selected, setSelected] = useState('src/components/Button.tsx');
+  return (
+    <div className="w-72 rounded-xl border border-line bg-s2 p-3">
+      <Tree
+        showLine
+        data={PROJECT_FILES}
+        defaultExpandedKeys={['src', 'src-components']}
+        onNodeClick={setSelected}
+      />
+      {/* Status bar — selected path như VS Code (Tree không có slot selected
+       * trong node; selection hiển thị qua bar theo callback onNodeClick) */}
+      <div className="mt-2 border-t border-line2 pt-2 text-meta text-ink3">
+        Selected · <span className="font-mono text-ink2">{selected}</span>
+      </div>
+    </div>
+  );
+}
+
+export const FileExplorer: S = {
+  name: 'File explorer — project tree with file counts and selected-node bar',
+  args: { data: [] },
+  render: () => <ExplorerDemo />,
+};

package/stack-template/app/ui-kit/src/ui/tree/tree.test.tsx

@@ -0,0 +1,77 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Tree } from './index.js';
+afterEach(cleanup);
+
+const DATA = [
+  { key: '1', label: 'Node 1', children: [
+    { key: '1-1', label: 'Child 1-1' },
+  ]},
+  { key: '2', label: 'Node 2' },
+];
+
+describe('Tree', () => {
+  it('renders root nodes; children ẩn cho đến khi expand', () => {
+    render(<Tree data={DATA} />);
+    expect(screen.getByText('Node 1')).toBeInTheDocument();
+    expect(screen.queryByText('Child 1-1')).toBeNull();
+  });
+  it('expand → children hiện; onNodeClick', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Tree data={DATA} onNodeClick={onClick} />);
+    await user.click(screen.getByText('Node 1'));
+    expect(screen.getByText('Child 1-1')).toBeInTheDocument();
+    await user.click(screen.getByText('Child 1-1'));
+    expect(onClick).toHaveBeenCalledWith('1-1');
+  });
+
+  it('collapse lại → children ẩn; aria-expanded true ↔ false', async () => {
+    const user = userEvent.setup();
+    render(<Tree data={DATA} />);
+    const node1 = screen.getByRole('treeitem', { name: 'Node 1' });
+    expect(node1).toHaveAttribute('aria-expanded', 'false');
+    await user.click(node1);
+    expect(node1).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Child 1-1')).toBeInTheDocument();
+    await user.click(node1);
+    expect(node1).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText('Child 1-1')).toBeNull();
+  });
+
+  it('leaf node → KHÔNG aria-expanded; role=tree ở gốc', () => {
+    render(<Tree data={DATA} />);
+    expect(screen.getByRole('tree')).toBeInTheDocument();
+    expect(screen.getByRole('treeitem', { name: 'Node 2' })).not.toHaveAttribute('aria-expanded');
+  });
+
+  it('defaultExpandedKeys → children hiện sẵn lúc mount', () => {
+    render(<Tree data={DATA} defaultExpandedKeys={['1']} />);
+    expect(screen.getByText('Child 1-1')).toBeInTheDocument();
+    expect(screen.getByRole('treeitem', { name: 'Node 1' })).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('className passthrough lên ul gốc', () => {
+    const { container } = render(<Tree data={DATA} className="marker" />);
+    expect(container.querySelector('ul')).toHaveClass('marker');
+  });
+
+  // ── Case-coverage audit 2026-10-18 (antd parity: showLine) ──
+
+  it('showLine → ul group có border-l connector; mặc định không có', () => {
+    const { container, rerender } = render(<Tree data={DATA} defaultExpandedKeys={['1']} showLine />);
+    const group = container.querySelector('ul[role="group"]')!;
+    expect(group).toHaveClass('border-l', 'border-line', 'ml-3');
+
+    rerender(<Tree data={DATA} defaultExpandedKeys={['1']} />);
+    expect(container.querySelector('ul[role="group"]')!).not.toHaveClass('border-l');
+  });
+
+  it('showLine: root ul không border-l (line chỉ ở cấp con)', () => {
+    const { container } = render(<Tree data={DATA} defaultExpandedKeys={['1']} showLine />);
+    const root = container.querySelector('ul[role="tree"]')!;
+    expect(root).not.toHaveClass('border-l');
+    expect(root.querySelector('ul[role="group"]')!).toHaveClass('border-l');
+  });
+});