From 15486c584ac5d6ca0789c18c662b334042ab8381 Mon Sep 17 00:00:00 2001 From: LordMathis Date: Tue, 1 Jul 2025 20:40:04 +0200 Subject: [PATCH] Simplify AccordionControl tests --- .../settings/AccordionControl.test.tsx | 304 ++---------------- 1 file changed, 32 insertions(+), 272 deletions(-) diff --git a/app/src/components/settings/AccordionControl.test.tsx b/app/src/components/settings/AccordionControl.test.tsx index 75c8f74..f6eb75a 100644 --- a/app/src/components/settings/AccordionControl.test.tsx +++ b/app/src/components/settings/AccordionControl.test.tsx @@ -1,10 +1,5 @@ import { describe, it, expect, vi } from 'vitest'; -import { - render as rtlRender, - screen, - fireEvent, - waitFor, -} from '@testing-library/react'; +import { render as rtlRender, screen, fireEvent } from '@testing-library/react'; import React from 'react'; import { MantineProvider, Accordion } from '@mantine/core'; import AccordionControl from './AccordionControl'; @@ -23,26 +18,15 @@ const render = (ui: React.ReactElement) => { const AccordionWrapper: React.FC<{ children: React.ReactNode; defaultValue?: string[]; - multiple?: boolean; -}> = ({ children, defaultValue = ['test'], multiple = true }) => ( - +}> = ({ children, defaultValue = ['test'] }) => ( + {children} ); describe('AccordionControl', () => { - describe('Component Rendering', () => { - it('renders children correctly', () => { - render( - - Test Content - - ); - - expect(screen.getByText('Test Content')).toBeInTheDocument(); - }); - - it('renders as a Title with order 4', () => { + describe('Normal Operation', () => { + it('renders children as Title with order 4', () => { render( Settings Title @@ -50,11 +34,10 @@ describe('AccordionControl', () => { ); const title = screen.getByRole('heading', { level: 4 }); - expect(title).toBeInTheDocument(); expect(title).toHaveTextContent('Settings Title'); }); - it('renders with complex children structure', () => { + it('renders complex children correctly', () => { render( @@ -65,9 +48,24 @@ describe('AccordionControl', () => { expect(screen.getByTestId('complex-child')).toBeInTheDocument(); expect(screen.getByText('Complex')).toBeInTheDocument(); - expect(screen.getByText('Content')).toBeInTheDocument(); }); + it('functions as accordion control', () => { + render( + + Toggle Section + Hidden Content + + ); + + const control = screen.getByRole('button'); + fireEvent.click(control); + + expect(screen.getByText('Hidden Content')).toBeInTheDocument(); + }); + }); + + describe('Edge Cases', () => { it('handles empty children gracefully', () => { render( @@ -77,241 +75,9 @@ describe('AccordionControl', () => { const title = screen.getByRole('heading', { level: 4 }); expect(title).toBeInTheDocument(); - expect(title).toBeEmptyDOMElement(); }); - it('renders multiple text nodes correctly', () => { - render( - - First Text Second Text - - ); - - const title = screen.getByRole('heading', { level: 4 }); - expect(title).toHaveTextContent('First Text Second Text'); - }); - - it('preserves React component structure in children', () => { - render( - - -
Nested Content
- - - ); - - expect(screen.getByTestId('nested-div')).toBeInTheDocument(); - expect(screen.getByText('Nested Content')).toBeInTheDocument(); - }); - - it('renders with mixed string and element children', () => { - render( - - - Text before bold text and after - - - ); - - const title = screen.getByRole('heading', { level: 4 }); - expect(title).toHaveTextContent('Text before bold text and after'); - expect(title.querySelector('strong')).toHaveTextContent('bold text'); - }); - }); - - describe('Content Variations', () => { - it.each([ - ['Simple text', 'Simple text'], - ['Text with numbers 123', 'Text with numbers 123'], - ['Special chars !@#$%', 'Special chars !@#$%'], - ['Unicode characters 测试', 'Unicode characters 测试'], - ['Very long text '.repeat(10), 'Very long text '.repeat(10)], - ])('renders various content types: %s', (content, expected) => { - render( - - {content} - - ); - - const title = screen.getByRole('heading', { level: 4 }); - expect(title).toHaveTextContent(expected.trim()); - }); - - it('renders with nested React elements', () => { - render( - - -
- Nested - Elements -
- - - ); - - expect(screen.getByText('Nested')).toBeInTheDocument(); - expect(screen.getByText('Elements')).toBeInTheDocument(); - }); - }); - - describe('Accordion Integration', () => { - it('functions as accordion control within accordion context', () => { - render( - - Collapsible Section - Panel Content - - ); - - const control = screen.getByRole('button'); - expect(control).toBeInTheDocument(); - expect(control).toHaveTextContent('Collapsible Section'); - }); - - it('supports accordion expansion and collapse', async () => { - render( - - Toggle Section - Hidden Content - - ); - - const control = screen.getByRole('button'); - - // Click to expand - fireEvent.click(control); - - // Wait for content to become visible - await waitFor(() => { - expect(screen.getByText('Hidden Content')).toBeInTheDocument(); - }); - - // Click to collapse - fireEvent.click(control); - - // For collapse, let's just verify the control is clickable rather than testing visibility - // since Mantine's accordion behavior can vary - expect(control).toBeInTheDocument(); - }); - - it('works with multiple accordion items', () => { - render( - - - First Section - First Content - - - Second Section - Second Content - - - ); - - expect(screen.getByText('First Section')).toBeInTheDocument(); - expect(screen.getByText('Second Section')).toBeInTheDocument(); - }); - }); - - describe('Accessibility', () => { - it('provides proper semantic structure', () => { - render( - - Accessible Title - - ); - - const title = screen.getByRole('heading', { level: 4 }); - expect(title).toHaveTextContent('Accessible Title'); - - // Should be within a button (accordion control) - const button = screen.getByRole('button'); - expect(button).toContainElement(title); - }); - - it('supports keyboard navigation', () => { - render( - - Keyboard Test - Panel Content - - ); - - const control = screen.getByRole('button'); - - // Should be focusable - control.focus(); - expect(control).toHaveFocus(); - - // Should respond to Enter key - fireEvent.keyDown(control, { key: 'Enter' }); - expect(screen.getByText('Panel Content')).toBeInTheDocument(); - }); - - it('has proper ARIA attributes', () => { - render( - - ARIA Test - Panel Content - - ); - - const control = screen.getByRole('button'); - - // Accordion controls should have proper ARIA attributes - expect(control).toHaveAttribute('aria-expanded'); - expect(control).toHaveAttribute('aria-controls'); - }); - }); - - describe('Error Handling', () => { - it('handles null children gracefully', () => { - render( - - {null} - - ); - - const title = screen.getByRole('heading', { level: 4 }); - expect(title).toBeInTheDocument(); - }); - - it('handles undefined children gracefully', () => { - render( - - {undefined} - - ); - - const title = screen.getByRole('heading', { level: 4 }); - expect(title).toBeInTheDocument(); - }); - - it('handles boolean children gracefully', () => { - render( - - {true} - - ); - - const title = screen.getByRole('heading', { level: 4 }); - expect(title).toBeInTheDocument(); - }); - - it('handles array of children gracefully', () => { - render( - - {['First', 'Second', 'Third']} - - ); - - const title = screen.getByRole('heading', { level: 4 }); - expect(title).toHaveTextContent('FirstSecondThird'); - }); - }); - - describe('Component Props and Behavior', () => { - it('passes through all children props correctly', () => { + it('passes through children props correctly', () => { const mockClickHandler = vi.fn(); render( @@ -328,27 +94,21 @@ describe('AccordionControl', () => { fireEvent.click(innerButton); expect(mockClickHandler).toHaveBeenCalled(); }); + }); - it('maintains component identity across re-renders', () => { - const { rerender } = render( + describe('Accessibility', () => { + it('provides proper semantic structure', () => { + render( - Initial Content + Accessible Title ); - const initialTitle = screen.getByRole('heading', { level: 4 }); - expect(initialTitle).toHaveTextContent('Initial Content'); + const title = screen.getByRole('heading', { level: 4 }); + const button = screen.getByRole('button'); - rerender( - - - Updated Content - - - ); - - const updatedTitle = screen.getByRole('heading', { level: 4 }); - expect(updatedTitle).toHaveTextContent('Updated Content'); + expect(title).toHaveTextContent('Accessible Title'); + expect(button).toContainElement(title); }); }); });