feat: add reusable ErrorState component with TDD
Add minimal ErrorState component for displaying error messages with optional retry functionality. Supports light/dark themes via TailwindCSS and follows project patterns. All 6 tests passing. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
44
components/ErrorState.test.tsx
Normal file
44
components/ErrorState.test.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import React from 'react'
|
||||
import { render, fireEvent } from '@testing-library/react-native'
|
||||
import ErrorState from './ErrorState'
|
||||
|
||||
describe('ErrorState Component', () => {
|
||||
describe('Basic Rendering', () => {
|
||||
it('should render error message', () => {
|
||||
const { getByText } = render(<ErrorState message="Something went wrong" />)
|
||||
expect(getByText('Something went wrong')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('should render with default message when not provided', () => {
|
||||
const { getByText } = render(<ErrorState />)
|
||||
expect(getByText('An error occurred')).toBeTruthy()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Retry Functionality', () => {
|
||||
it('should render retry button when onRetry is provided', () => {
|
||||
const onRetry = jest.fn()
|
||||
const { getByText } = render(<ErrorState message="Error" onRetry={onRetry} />)
|
||||
expect(getByText('Retry')).toBeTruthy()
|
||||
})
|
||||
|
||||
it('should not render retry button when onRetry is not provided', () => {
|
||||
const { queryByText } = render(<ErrorState message="Error" />)
|
||||
expect(queryByText('Retry')).toBeNull()
|
||||
})
|
||||
|
||||
it('should call onRetry when retry button is pressed', () => {
|
||||
const onRetry = jest.fn()
|
||||
const { getByText } = render(<ErrorState message="Error" onRetry={onRetry} />)
|
||||
fireEvent.press(getByText('Retry'))
|
||||
expect(onRetry).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Props', () => {
|
||||
it('should accept testID prop', () => {
|
||||
const { getByTestId } = render(<ErrorState testID="error-test" />)
|
||||
expect(getByTestId('error-test')).toBeTruthy()
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user