105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
import React from 'react'
|
|
import { render } from '@testing-library/react-native'
|
|
import { Text } from 'react-native'
|
|
|
|
import { MessageEmptyState } from './MessageEmptyState'
|
|
|
|
describe('MessageEmptyState Component', () => {
|
|
describe('Default Rendering', () => {
|
|
it('should render default message "暂无消息"', () => {
|
|
const { getByText } = render(<MessageEmptyState />)
|
|
expect(getByText('暂无消息')).toBeTruthy()
|
|
})
|
|
|
|
it('should render default icon', () => {
|
|
const { getByTestId } = render(<MessageEmptyState />)
|
|
expect(getByTestId('empty-state-icon')).toBeTruthy()
|
|
})
|
|
|
|
it('should render container with testID', () => {
|
|
const { getByTestId } = render(<MessageEmptyState />)
|
|
expect(getByTestId('message-empty-state')).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe('Custom Props', () => {
|
|
it('should render custom message when provided', () => {
|
|
const customMessage = '没有互动消息'
|
|
const { getByText, queryByText } = render(
|
|
<MessageEmptyState message={customMessage} />
|
|
)
|
|
expect(getByText(customMessage)).toBeTruthy()
|
|
expect(queryByText('暂无消息')).toBeNull()
|
|
})
|
|
|
|
it('should render custom icon when provided', () => {
|
|
const CustomIcon = <Text testID="custom-icon">🎨</Text>
|
|
const { getByTestId } = render(<MessageEmptyState icon={CustomIcon} />)
|
|
expect(getByTestId('custom-icon')).toBeTruthy()
|
|
})
|
|
|
|
it('should not render default icon when custom icon is provided', () => {
|
|
const CustomIcon = <Text testID="custom-icon">🎨</Text>
|
|
const { queryByTestId } = render(<MessageEmptyState icon={CustomIcon} />)
|
|
// Custom icon container should exist, but default icon should be replaced
|
|
expect(queryByTestId('custom-icon')).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe('Styling', () => {
|
|
it('should have centered content', () => {
|
|
const { getByTestId } = render(<MessageEmptyState />)
|
|
const container = getByTestId('message-empty-state')
|
|
|
|
// Check that container has centered alignment styles
|
|
expect(container.props.style).toEqual(
|
|
expect.objectContaining({
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
})
|
|
)
|
|
})
|
|
|
|
it('should have transparent background', () => {
|
|
const { getByTestId } = render(<MessageEmptyState />)
|
|
const container = getByTestId('message-empty-state')
|
|
|
|
expect(container.props.style).toEqual(
|
|
expect.objectContaining({
|
|
backgroundColor: 'transparent',
|
|
})
|
|
)
|
|
})
|
|
|
|
it('should have correct text color #8A8A8A', () => {
|
|
const { getByTestId } = render(<MessageEmptyState />)
|
|
const messageText = getByTestId('empty-state-message')
|
|
|
|
expect(messageText.props.style).toEqual(
|
|
expect.objectContaining({
|
|
color: '#8A8A8A',
|
|
})
|
|
)
|
|
})
|
|
|
|
it('should have flex: 1 to fill available space', () => {
|
|
const { getByTestId } = render(<MessageEmptyState />)
|
|
const container = getByTestId('message-empty-state')
|
|
|
|
expect(container.props.style).toEqual(
|
|
expect.objectContaining({
|
|
flex: 1,
|
|
})
|
|
)
|
|
})
|
|
})
|
|
|
|
describe('Accessibility', () => {
|
|
it('should have accessible message text', () => {
|
|
const { getByTestId } = render(<MessageEmptyState />)
|
|
const messageText = getByTestId('empty-state-message')
|
|
expect(messageText).toBeTruthy()
|
|
})
|
|
})
|
|
})
|