From 8695b9b878f3de253f6b6c80222a5a4eeb9415c3 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 18 Mar 2026 23:01:03 +0100
Subject: [PATCH] test: add InlineEdit test file

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../primitives/InlineEdit/InlineEdit.test.tsx | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 src/design-system/primitives/InlineEdit/InlineEdit.test.tsx

diff --git a/src/design-system/primitives/InlineEdit/InlineEdit.test.tsx b/src/design-system/primitives/InlineEdit/InlineEdit.test.tsx
new file mode 100644
index 0000000..0ba7bf9
--- /dev/null
+++ b/src/design-system/primitives/InlineEdit/InlineEdit.test.tsx
@@ -0,0 +1,76 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { InlineEdit } from './InlineEdit'
+
+describe('InlineEdit', () => {
+  it('renders value in display mode', () => {
+    render(<InlineEdit value="Alice" onSave={vi.fn()} />)
+    expect(screen.getByText('Alice')).toBeInTheDocument()
+  })
+
+  it('shows placeholder when value is empty', () => {
+    render(<InlineEdit value="" onSave={vi.fn()} placeholder="Enter name" />)
+    expect(screen.getByText('Enter name')).toBeInTheDocument()
+  })
+
+  it('enters edit mode on click', async () => {
+    const user = userEvent.setup()
+    render(<InlineEdit value="Alice" onSave={vi.fn()} />)
+    await user.click(screen.getByText('Alice'))
+    expect(screen.getByRole('textbox')).toHaveValue('Alice')
+  })
+
+  it('saves on Enter', async () => {
+    const onSave = vi.fn()
+    const user = userEvent.setup()
+    render(<InlineEdit value="Alice" onSave={onSave} />)
+    await user.click(screen.getByText('Alice'))
+    await user.clear(screen.getByRole('textbox'))
+    await user.type(screen.getByRole('textbox'), 'Bob')
+    await user.keyboard('{Enter}')
+    expect(onSave).toHaveBeenCalledWith('Bob')
+  })
+
+  it('cancels on Escape', async () => {
+    const onSave = vi.fn()
+    const user = userEvent.setup()
+    render(<InlineEdit value="Alice" onSave={onSave} />)
+    await user.click(screen.getByText('Alice'))
+    await user.clear(screen.getByRole('textbox'))
+    await user.type(screen.getByRole('textbox'), 'Bob')
+    await user.keyboard('{Escape}')
+    expect(onSave).not.toHaveBeenCalled()
+    expect(screen.getByText('Alice')).toBeInTheDocument()
+  })
+
+  it('cancels on blur', async () => {
+    const onSave = vi.fn()
+    const user = userEvent.setup()
+    render(<InlineEdit value="Alice" onSave={onSave} />)
+    await user.click(screen.getByText('Alice'))
+    await user.clear(screen.getByRole('textbox'))
+    await user.type(screen.getByRole('textbox'), 'Bob')
+    await user.tab()
+    expect(onSave).not.toHaveBeenCalled()
+  })
+
+  it('does not enter edit mode when disabled', async () => {
+    const user = userEvent.setup()
+    render(<InlineEdit value="Alice" onSave={vi.fn()} disabled />)
+    await user.click(screen.getByText('Alice'))
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+  })
+
+  it('shows edit icon button', () => {
+    render(<InlineEdit value="Alice" onSave={vi.fn()} />)
+    expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument()
+  })
+
+  it('enters edit mode when edit button is clicked', async () => {
+    const user = userEvent.setup()
+    render(<InlineEdit value="Alice" onSave={vi.fn()} />)
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
+    expect(screen.getByRole('textbox')).toHaveValue('Alice')
+  })
+})