| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- // @vitest-environment jsdom
- import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
- import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
- import type { ComponentProps } from 'react'
- import { DEFAULT_DIFF_MAX_LINES, DiffBlock as LocalizedDiffBlock, type DiffHunk } from '../src/index.ts'
- import { diffBlockLabels } from './labels.client.ts'
- function DiffBlock(props: Omit<ComponentProps<typeof LocalizedDiffBlock>, 'labels'>) {
- return <LocalizedDiffBlock {...props} labels={diffBlockLabels} />
- }
- afterEach(cleanup)
- beforeEach(() => {
- vi.useRealTimers()
- })
- function bodyRows(container: HTMLElement): string[] {
- return [...container.querySelectorAll('[class*="_line_"]')].map(row => row.textContent ?? '')
- }
- function changeRows(container: HTMLElement): string[] {
- return [...container.querySelectorAll('[class*="_del_"], [class*="_add_"]')].map(row => row.textContent ?? '')
- }
- function added(count: number): string {
- return Array.from({ length: count }, (_v, i) => `line ${i + 1}`).join('\n')
- }
- describe('DiffBlock structure', () => {
- it('renders a create as a path header and an added block (no removed side)', () => {
- const diffs: DiffHunk[] = [{ path: 'notes/new.txt', oldText: null, newText: 'hello\nworld' }]
- const { container } = render(<DiffBlock diffs={diffs} />)
- expect(screen.getByText('notes/new.txt')).toBeTruthy()
- // No removed rows: both change lines are added.
- expect(changeRows(container)).toEqual(['hello', 'world'])
- expect(container.querySelectorAll('[class*="_del_"]').length).toBe(0)
- expect(container.querySelectorAll('[class*="_add_"]').length).toBe(2)
- })
- it('renders an edit as a removed block above an added block', () => {
- const diffs: DiffHunk[] = [{ path: 'a.ts', oldText: 'old', newText: 'new' }]
- const { container } = render(<DiffBlock diffs={diffs} />)
- expect(container.querySelectorAll('[class*="_del_"]').length).toBe(1)
- expect(container.querySelectorAll('[class*="_add_"]').length).toBe(1)
- expect(changeRows(container)).toEqual(['old', 'new'])
- })
- it('opens a same-file second hunk with a gap instead of repeating the path', () => {
- const diffs: DiffHunk[] = [
- { path: 'a.ts', oldText: 'x', newText: 'y' },
- { path: 'a.ts', oldText: 'p', newText: 'q' },
- ]
- const { container } = render(<DiffBlock diffs={diffs} />)
- // One path header, one gap row.
- expect(container.querySelectorAll('[class*="_path_"]').length).toBe(1)
- expect(container.querySelectorAll('[class*="_gap_"]').length).toBe(1)
- })
- it('opens a new file with its own path header', () => {
- const diffs: DiffHunk[] = [
- { path: 'a.ts', oldText: 'x', newText: 'y' },
- { path: 'b.ts', oldText: 'p', newText: 'q' },
- ]
- const { container } = render(<DiffBlock diffs={diffs} />)
- expect(container.querySelectorAll('[class*="_path_"]').length).toBe(2)
- expect(container.querySelectorAll('[class*="_gap_"]').length).toBe(0)
- })
- it('renders nothing for empty diffs', () => {
- const { container } = render(<DiffBlock diffs={[]} />)
- expect(container.firstChild).toBeNull()
- })
- it('treats a trailing newline as a terminator, not an extra blank line', () => {
- // A create whose newText ends in a newline is one added line, not two, and
- // the footer counts one — the phantom `+ ` empty line the naive split drew.
- const { container } = render(<DiffBlock diffs={[{ path: 'n.txt', oldText: null, newText: 'hello\n' }]} />)
- expect(changeRows(container)).toEqual(['hello'])
- expect(screen.getByText('└ +1 -0 · 1 file')).toBeTruthy()
- })
- it('renders a full deletion as removed-only with no phantom added line', () => {
- // newText '' is zero added lines: an empty string must contribute nothing.
- const { container } = render(<DiffBlock diffs={[{ path: 'gone.ts', oldText: 'a\nb', newText: '' }]} />)
- expect(container.querySelectorAll('[class*="_add_"]').length).toBe(0)
- expect(screen.getByText('└ +0 -2 · 1 file')).toBeTruthy()
- })
- it('keeps a genuine interior blank line', () => {
- const { container } = render(<DiffBlock diffs={[{ path: 'a.ts', oldText: null, newText: 'x\n\ny' }]} />)
- expect(container.querySelectorAll('[class*="_add_"]').length).toBe(3)
- })
- })
- describe('DiffBlock footer', () => {
- it('counts added and removed lines and one file', () => {
- const diffs: DiffHunk[] = [{ path: 'a.ts', oldText: 'a\nb', newText: 'c' }]
- render(<DiffBlock diffs={diffs} />)
- expect(screen.getByText('└ +1 -2 · 1 file')).toBeTruthy()
- })
- it('pluralizes the distinct-file count', () => {
- const diffs: DiffHunk[] = [
- { path: 'a.ts', oldText: null, newText: 'x' },
- { path: 'b.ts', oldText: null, newText: 'y' },
- ]
- render(<DiffBlock diffs={diffs} />)
- expect(screen.getByText('└ +2 -0 · 2 files')).toBeTruthy()
- })
- })
- describe('DiffBlock height cap', () => {
- it('shows head and tail with an expand control past the cap, then all lines expanded', () => {
- // One added line over the default cap forces the collapse.
- const diffs: DiffHunk[] = [{ path: 'a.ts', oldText: null, newText: added(DEFAULT_DIFF_MAX_LINES) }]
- // The path header counts as a row, so a body of maxLines added lines plus
- // the header is one over the cap.
- const { container } = render(<DiffBlock diffs={diffs} />)
- const toggle = screen.getByRole('button', { name: /展开其余/ })
- expect(toggle.getAttribute('aria-expanded')).toBe('false')
- // Collapsed shows fewer rows than the full body.
- const collapsedCount = bodyRows(container).length
- expect(collapsedCount).toBeLessThan(DEFAULT_DIFF_MAX_LINES + 1)
- fireEvent.click(toggle)
- expect(screen.getByRole('button', { name: '收起差异' }).getAttribute('aria-expanded')).toBe('true')
- expect(bodyRows(container).length).toBeGreaterThan(collapsedCount)
- })
- it('shows no expand control at or under the cap', () => {
- const diffs: DiffHunk[] = [{ path: 'a.ts', oldText: null, newText: added(4) }]
- render(<DiffBlock diffs={diffs} maxLines={16} />)
- expect(screen.queryByRole('button', { name: /展开其余|收起差异/ })).toBeNull()
- })
- })
- describe('DiffBlock copy', () => {
- it('copies the prefixed diff text and flips the label on success', async () => {
- vi.useFakeTimers()
- const writeText = vi.fn().mockResolvedValue(undefined)
- Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } })
- const diffs: DiffHunk[] = [
- { path: 'a.ts', oldText: 'old', newText: 'new' },
- { path: 'a.ts', oldText: 'p', newText: 'q' },
- ]
- render(<DiffBlock diffs={diffs} />)
- const copy = screen.getByRole('button', { name: '复制' })
- await act(async () => { fireEvent.click(copy) })
- // Path header, del/add prefixes, and the same-file gap all reach the clipboard.
- expect(writeText).toHaveBeenCalledWith('a.ts\n- old\n+ new\n⋯\n- p\n+ q')
- expect(screen.getByRole('button', { name: '复制成功' })).toBeTruthy()
- await act(async () => { await vi.advanceTimersByTimeAsync(1000) })
- expect(screen.getByRole('button', { name: '复制' })).toBeTruthy()
- })
- it('keeps the label on a refused clipboard write', async () => {
- Object.defineProperty(navigator, 'clipboard', {
- configurable: true,
- value: { writeText: vi.fn().mockRejectedValue(new Error('denied')) },
- })
- render(<DiffBlock diffs={[{ path: 'a.ts', oldText: null, newText: 'x' }]} />)
- const copy = screen.getByRole('button', { name: '复制' })
- await act(async () => { fireEvent.click(copy) })
- expect(screen.getByRole('button', { name: '复制' })).toBeTruthy()
- })
- it('ignores a second click while the copied label is showing', async () => {
- vi.useFakeTimers()
- const writeText = vi.fn().mockResolvedValue(undefined)
- Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } })
- render(<DiffBlock diffs={[{ path: 'a.ts', oldText: null, newText: 'x' }]} />)
- const copy = screen.getByRole('button', { name: '复制' })
- await act(async () => { fireEvent.click(copy) })
- await act(async () => { fireEvent.click(screen.getByRole('button', { name: '复制成功' })) })
- expect(writeText).toHaveBeenCalledTimes(1)
- })
- })
|