From b3f371e0a384caeb3b88bda78260eb1b422c36f2 Mon Sep 17 00:00:00 2001 From: Felipe Cardoso Date: Tue, 6 Jan 2026 17:07:21 +0100 Subject: [PATCH] test(agents): add tests for AgentTypeForm enhancements Added unit tests to cover new AgentTypeForm features: - Category & Display fields (category select, sort order, icon, color) - Typical Tasks management (add, remove, and prevent duplicates) - Collaboration Hints management (add, remove, lowercase, and prevent duplicates) This ensures thorough validation of recent form updates. --- .../components/agents/AgentTypeForm.test.tsx | 209 ++++++++++++++++++ 1 file changed, 209 insertions(+) diff --git a/frontend/tests/components/agents/AgentTypeForm.test.tsx b/frontend/tests/components/agents/AgentTypeForm.test.tsx index 3f8f34b..cab7240 100644 --- a/frontend/tests/components/agents/AgentTypeForm.test.tsx +++ b/frontend/tests/components/agents/AgentTypeForm.test.tsx @@ -575,4 +575,213 @@ describe('AgentTypeForm', () => { expect(screen.getByText('Edit Agent Type')).toBeInTheDocument(); }); }); + + describe('Category & Display Fields', () => { + it('renders category and display section', () => { + render(); + expect(screen.getByText('Category & Display')).toBeInTheDocument(); + }); + + it('shows category select', () => { + render(); + expect(screen.getByLabelText(/category/i)).toBeInTheDocument(); + }); + + it('shows sort order input', () => { + render(); + expect(screen.getByLabelText(/sort order/i)).toBeInTheDocument(); + }); + + it('shows icon input', () => { + render(); + expect(screen.getByLabelText(/icon/i)).toBeInTheDocument(); + }); + + it('shows color input', () => { + render(); + expect(screen.getByLabelText(/color/i)).toBeInTheDocument(); + }); + + it('pre-fills category fields in edit mode', () => { + render(); + + const iconInput = screen.getByLabelText(/icon/i) as HTMLInputElement; + expect(iconInput.value).toBe('git-branch'); + + const sortOrderInput = screen.getByLabelText(/sort order/i) as HTMLInputElement; + expect(sortOrderInput.value).toBe('40'); + }); + }); + + describe('Typical Tasks Management', () => { + it('shows typical tasks section', () => { + render(); + expect(screen.getByText('Typical Tasks')).toBeInTheDocument(); + }); + + it('adds typical task when add button is clicked', async () => { + const user = userEvent.setup(); + render(); + + const taskInput = screen.getByPlaceholderText(/e.g., design system architecture/i); + await user.type(taskInput, 'Write documentation'); + // Click the second "Add" button (for typical tasks) + const addButtons = screen.getAllByRole('button', { name: /^add$/i }); + await user.click(addButtons[1]); + + expect(screen.getByText('Write documentation')).toBeInTheDocument(); + }); + + it('adds typical task on enter key', async () => { + const user = userEvent.setup(); + render(); + + const taskInput = screen.getByPlaceholderText(/e.g., design system architecture/i); + await user.type(taskInput, 'Write documentation{Enter}'); + + expect(screen.getByText('Write documentation')).toBeInTheDocument(); + }); + + it('removes typical task when X button is clicked', async () => { + const user = userEvent.setup(); + render(); + + // Should have existing typical task + expect(screen.getByText('Design system architecture')).toBeInTheDocument(); + + // Click remove button + const removeButton = screen.getByRole('button', { + name: /remove design system architecture/i, + }); + await user.click(removeButton); + + expect(screen.queryByText('Design system architecture')).not.toBeInTheDocument(); + }); + + it('does not add duplicate typical tasks', async () => { + const user = userEvent.setup(); + render(); + + // Agent type already has 'Design system architecture' + const taskInput = screen.getByPlaceholderText(/e.g., design system architecture/i); + await user.type(taskInput, 'Design system architecture'); + const addButtons = screen.getAllByRole('button', { name: /^add$/i }); + await user.click(addButtons[1]); + + // Should still only have one badge + const badges = screen.getAllByText('Design system architecture'); + expect(badges).toHaveLength(1); + }); + + it('does not add empty typical task', async () => { + const user = userEvent.setup(); + render(); + + // Click the second "Add" button (for typical tasks) without typing + const addButtons = screen.getAllByRole('button', { name: /^add$/i }); + await user.click(addButtons[1]); + + // No badges should be added (check that there's no remove button for typical tasks) + expect( + screen.queryByRole('button', { name: /remove write documentation/i }) + ).not.toBeInTheDocument(); + }); + }); + + describe('Collaboration Hints Management', () => { + it('shows collaboration hints section', () => { + render(); + expect(screen.getByText('Collaboration Hints')).toBeInTheDocument(); + }); + + it('adds collaboration hint when add button is clicked', async () => { + const user = userEvent.setup(); + render(); + + const hintInput = screen.getByPlaceholderText(/e.g., backend-engineer/i); + await user.type(hintInput, 'devops-engineer'); + // Click the third "Add" button (for collaboration hints) + const addButtons = screen.getAllByRole('button', { name: /^add$/i }); + await user.click(addButtons[2]); + + expect(screen.getByText('devops-engineer')).toBeInTheDocument(); + }); + + it('adds collaboration hint on enter key', async () => { + const user = userEvent.setup(); + render(); + + const hintInput = screen.getByPlaceholderText(/e.g., backend-engineer/i); + await user.type(hintInput, 'devops-engineer{Enter}'); + + expect(screen.getByText('devops-engineer')).toBeInTheDocument(); + }); + + it('removes collaboration hint when X button is clicked', async () => { + const user = userEvent.setup(); + render(); + + // Should have existing collaboration hint + expect(screen.getByText('backend-engineer')).toBeInTheDocument(); + + // Click remove button + const removeButton = screen.getByRole('button', { name: /remove backend-engineer/i }); + await user.click(removeButton); + + expect(screen.queryByText('backend-engineer')).not.toBeInTheDocument(); + }); + + it('converts collaboration hints to lowercase', async () => { + const user = userEvent.setup(); + render(); + + const hintInput = screen.getByPlaceholderText(/e.g., backend-engineer/i); + await user.type(hintInput, 'DevOps-Engineer'); + const addButtons = screen.getAllByRole('button', { name: /^add$/i }); + await user.click(addButtons[2]); + + expect(screen.getByText('devops-engineer')).toBeInTheDocument(); + }); + + it('does not add duplicate collaboration hints', async () => { + const user = userEvent.setup(); + render(); + + // Agent type already has 'backend-engineer' + const hintInput = screen.getByPlaceholderText(/e.g., backend-engineer/i); + await user.type(hintInput, 'backend-engineer'); + const addButtons = screen.getAllByRole('button', { name: /^add$/i }); + await user.click(addButtons[2]); + + // Should still only have one badge + const badges = screen.getAllByText('backend-engineer'); + expect(badges).toHaveLength(1); + }); + + it('does not add empty collaboration hint', async () => { + const user = userEvent.setup(); + render(); + + // Click the third "Add" button (for collaboration hints) without typing + const addButtons = screen.getAllByRole('button', { name: /^add$/i }); + await user.click(addButtons[2]); + + // No badges should be added + expect( + screen.queryByRole('button', { name: /remove devops-engineer/i }) + ).not.toBeInTheDocument(); + }); + + it('clears input after adding collaboration hint', async () => { + const user = userEvent.setup(); + render(); + + const hintInput = screen.getByPlaceholderText(/e.g., backend-engineer/i) as HTMLInputElement; + await user.type(hintInput, 'devops-engineer'); + const addButtons = screen.getAllByRole('button', { name: /^add$/i }); + await user.click(addButtons[2]); + + expect(hintInput.value).toBe(''); + }); + }); });