276 lines
7.8 KiB
TypeScript
276 lines
7.8 KiB
TypeScript
import { parseAspectRatio, getImageUri, TemplateCard } from './TemplateCard'
|
|
|
|
describe('TemplateCard Utilities', () => {
|
|
describe('parseAspectRatio', () => {
|
|
it('should parse "128:128" to 1', () => {
|
|
expect(parseAspectRatio('128:128')).toBe(1)
|
|
})
|
|
|
|
it('should parse "16:9" to approximately 1.777', () => {
|
|
const result = parseAspectRatio('16:9')
|
|
expect(result).toBeCloseTo(16 / 9, 5)
|
|
})
|
|
|
|
it('should parse "9:16" to approximately 0.5625', () => {
|
|
const result = parseAspectRatio('9:16')
|
|
expect(result).toBeCloseTo(9 / 16, 5)
|
|
})
|
|
|
|
it('should parse "1.5" to 1.5', () => {
|
|
expect(parseAspectRatio('1.5')).toBe(1.5)
|
|
})
|
|
|
|
it('should parse "2" to 2', () => {
|
|
expect(parseAspectRatio('2')).toBe(2)
|
|
})
|
|
|
|
it('should return undefined for undefined input', () => {
|
|
expect(parseAspectRatio(undefined)).toBeUndefined()
|
|
})
|
|
|
|
it('should return undefined for empty string', () => {
|
|
expect(parseAspectRatio('')).toBeUndefined()
|
|
})
|
|
})
|
|
|
|
describe('getImageUri', () => {
|
|
it('should prioritize webpPreviewUrl over previewUrl', () => {
|
|
const result = getImageUri(
|
|
'https://example.com/preview.webp',
|
|
'https://example.com/preview.jpg',
|
|
'https://example.com/cover.jpg'
|
|
)
|
|
expect(result).toBe('https://example.com/preview.webp')
|
|
})
|
|
|
|
it('should use previewUrl when webpPreviewUrl is not provided', () => {
|
|
const result = getImageUri(
|
|
undefined,
|
|
'https://example.com/preview.jpg',
|
|
'https://example.com/cover.jpg'
|
|
)
|
|
expect(result).toBe('https://example.com/preview.jpg')
|
|
})
|
|
|
|
it('should use coverImageUrl as fallback', () => {
|
|
const result = getImageUri(
|
|
undefined,
|
|
undefined,
|
|
'https://example.com/cover.jpg'
|
|
)
|
|
expect(result).toBe('https://example.com/cover.jpg')
|
|
})
|
|
|
|
it('should return undefined when no URLs are provided', () => {
|
|
const result = getImageUri(undefined, undefined, undefined)
|
|
expect(result).toBeUndefined()
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('TemplateCard Component', () => {
|
|
describe('Memo Optimization', () => {
|
|
it('should be wrapped with React.memo', () => {
|
|
// TemplateCard should be a memoized component
|
|
expect(TemplateCard).toBeDefined()
|
|
// React.memo wraps the component, so we check if it's a valid element type
|
|
expect(typeof TemplateCard).toBe('object')
|
|
})
|
|
})
|
|
|
|
describe('Multi-language support', () => {
|
|
it('should display Chinese title when language is zh-CN', () => {
|
|
const title = '测试模板'
|
|
const titleEn = 'Test Template'
|
|
const language: string = 'zh-CN'
|
|
|
|
// 根据语言选择显示的标题
|
|
const displayTitle = language === 'en-US' ? titleEn : title
|
|
|
|
expect(displayTitle).toBe('测试模板')
|
|
})
|
|
|
|
it('should display English title when language is en-US', () => {
|
|
const title = '测试模板'
|
|
const titleEn = 'Test Template'
|
|
const language = 'en-US'
|
|
|
|
// 根据语言选择显示的标题
|
|
const displayTitle = language === 'en-US' ? titleEn : title
|
|
|
|
expect(displayTitle).toBe('Test Template')
|
|
})
|
|
|
|
it('should fallback to Chinese title when titleEn is missing', () => {
|
|
const title = '测试模板'
|
|
const titleEn = undefined
|
|
const language = 'en-US'
|
|
|
|
// 当 titleEn 不存在时，回退到中文标题
|
|
const displayTitle = language === 'en-US' && titleEn ? titleEn : title
|
|
|
|
expect(displayTitle).toBe('测试模板')
|
|
})
|
|
|
|
it('should fallback to Chinese title when titleEn is empty string', () => {
|
|
const title = '测试模板'
|
|
const titleEn = ''
|
|
const language = 'en-US'
|
|
|
|
// 当 titleEn 为空字符串时，回退到中文标题
|
|
const displayTitle = language === 'en-US' && titleEn ? titleEn : title
|
|
|
|
expect(displayTitle).toBe('测试模板')
|
|
})
|
|
})
|
|
|
|
describe('Liked and Favorited Props', () => {
|
|
it('should accept liked prop without error', () => {
|
|
const props = {
|
|
id: '123',
|
|
title: 'Test Template',
|
|
cardWidth: 200,
|
|
onPress: jest.fn(),
|
|
liked: true,
|
|
}
|
|
|
|
// 测试 props 类型是否正确
|
|
expect(props.liked).toBeDefined()
|
|
expect(typeof props.liked).toBe('boolean')
|
|
})
|
|
|
|
it('should accept favorited prop without error', () => {
|
|
const props = {
|
|
id: '123',
|
|
title: 'Test Template',
|
|
cardWidth: 200,
|
|
onPress: jest.fn(),
|
|
favorited: true,
|
|
}
|
|
|
|
// 测试 props 类型是否正确
|
|
expect(props.favorited).toBeDefined()
|
|
expect(typeof props.favorited).toBe('boolean')
|
|
})
|
|
|
|
it('should accept both liked and favorited props', () => {
|
|
const props = {
|
|
id: '123',
|
|
title: 'Test Template',
|
|
cardWidth: 200,
|
|
onPress: jest.fn(),
|
|
liked: true,
|
|
favorited: false,
|
|
}
|
|
|
|
// 测试两个 props 可以同时存在
|
|
expect(props.liked).toBeDefined()
|
|
expect(props.favorited).toBeDefined()
|
|
})
|
|
|
|
it('should handle undefined liked prop', () => {
|
|
const props = {
|
|
id: '123',
|
|
title: 'Test Template',
|
|
cardWidth: 200,
|
|
onPress: jest.fn(),
|
|
liked: undefined,
|
|
}
|
|
|
|
// 测试 liked prop 可以是 undefined
|
|
expect(props.liked).toBeUndefined()
|
|
})
|
|
|
|
it('should handle undefined favorited prop', () => {
|
|
const props = {
|
|
id: '123',
|
|
title: 'Test Template',
|
|
cardWidth: 200,
|
|
onPress: jest.fn(),
|
|
favorited: undefined,
|
|
}
|
|
|
|
// 测试 favorited prop 可以是 undefined
|
|
expect(props.favorited).toBeUndefined()
|
|
})
|
|
})
|
|
|
|
describe('Icon Display Logic', () => {
|
|
it('should show heart icon when liked is true', () => {
|
|
const liked = true
|
|
const iconName = liked ? 'heart' : 'heart-outline'
|
|
|
|
expect(iconName).toBe('heart')
|
|
})
|
|
|
|
it('should show heart-outline icon when liked is false', () => {
|
|
const liked = false
|
|
const iconName = liked ? 'heart' : 'heart-outline'
|
|
|
|
expect(iconName).toBe('heart-outline')
|
|
})
|
|
|
|
it('should show heart-outline icon when liked is undefined', () => {
|
|
const liked = undefined
|
|
const iconName = liked ? 'heart' : 'heart-outline'
|
|
|
|
expect(iconName).toBe('heart-outline')
|
|
})
|
|
|
|
it('should show red color when liked is true', () => {
|
|
const liked = true
|
|
const iconColor = liked ? '#FF3B30' : 'rgba(142, 142, 147, 0.7)'
|
|
|
|
expect(iconColor).toBe('#FF3B30')
|
|
})
|
|
|
|
it('should show gray color when liked is false', () => {
|
|
const liked = false
|
|
const iconColor = liked ? '#FF3B30' : 'rgba(142, 142, 147, 0.7)'
|
|
|
|
expect(iconColor).toBe('rgba(142, 142, 147, 0.7)')
|
|
})
|
|
|
|
it('should show star icon when favorited is true', () => {
|
|
const favorited = true
|
|
const iconName = favorited ? 'star' : 'star-outline'
|
|
|
|
expect(iconName).toBe('star')
|
|
})
|
|
|
|
it('should show star-outline icon when favorited is false', () => {
|
|
const favorited = false
|
|
const iconName = favorited ? 'star' : 'star-outline'
|
|
|
|
expect(iconName).toBe('star-outline')
|
|
})
|
|
|
|
it('should show star-outline icon when favorited is undefined', () => {
|
|
const favorited = undefined
|
|
const iconName = favorited ? 'star' : 'star-outline'
|
|
|
|
expect(iconName).toBe('star-outline')
|
|
})
|
|
|
|
it('should show gold color when favorited is true', () => {
|
|
const favorited = true
|
|
const iconColor = favorited ? '#FFD700' : 'rgba(142, 142, 147, 0.7)'
|
|
|
|
expect(iconColor).toBe('#FFD700')
|
|
})
|
|
|
|
it('should show gray color when favorited is false', () => {
|
|
const favorited = false
|
|
const iconColor = favorited ? '#FFD700' : 'rgba(142, 142, 147, 0.7)'
|
|
|
|
expect(iconColor).toBe('rgba(142, 142, 147, 0.7)')
|
|
})
|
|
|
|
it('should have icon size of 16', () => {
|
|
const iconSize = 16
|
|
|
|
expect(iconSize).toBe(16)
|
|
})
|
|
})
|
|
})
|