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:
imeepos 2026-01-21 11:31:25 +08:00
parent 47ebbc53db
commit 9084075482
2 changed files with 65 additions and 0 deletions

View 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()
})
})
})

21
components/ErrorState.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react'
import { View, TouchableOpacity, ViewProps } from 'react-native'
import Text from './ui/Text'
interface ErrorStateProps extends ViewProps {
message?: string
onRetry?: () => void
}
export default function ErrorState({ message = 'An error occurred', onRetry, testID, ...props }: ErrorStateProps) {
return (
<View testID={testID} className="flex-1 items-center justify-center px-4" {...props}>
<Text className="text-center text-gray-600 dark:text-gray-400">{message}</Text>
{onRetry && (
<TouchableOpacity onPress={onRetry} className="mt-4 px-6 py-2 bg-blue-500 rounded-lg">
<Text className="text-white">Retry</Text>
</TouchableOpacity>
)}
</View>
)
}