136 lines
4.6 KiB
TypeScript
136 lines
4.6 KiB
TypeScript
import { TemplateGrid, calculateCardWidth } from './TemplateGrid'
|
|
|
|
describe('TemplateGrid Component', () => {
|
|
describe('Component Export', () => {
|
|
it('should be defined', () => {
|
|
expect(TemplateGrid).toBeDefined()
|
|
})
|
|
|
|
it('should be a function component (wrapped with memo)', () => {
|
|
// memo() returns an object with a type property that is the original function
|
|
expect(typeof TemplateGrid).toBe('object')
|
|
expect(TemplateGrid).toHaveProperty('$$typeof')
|
|
})
|
|
})
|
|
|
|
describe('Props Interface', () => {
|
|
it('should accept templates array prop', () => {
|
|
const templates = [
|
|
{ id: '1', title: 'Template 1' },
|
|
{ id: '2', title: 'Template 2' },
|
|
]
|
|
expect(Array.isArray(templates)).toBe(true)
|
|
})
|
|
|
|
it('should accept onTemplatePress callback', () => {
|
|
const onTemplatePress = jest.fn()
|
|
expect(typeof onTemplatePress).toBe('function')
|
|
})
|
|
|
|
it('should accept optional numColumns prop', () => {
|
|
const numColumns = 3
|
|
expect(numColumns).toBe(3)
|
|
})
|
|
|
|
it('should accept optional horizontalPadding prop', () => {
|
|
const horizontalPadding = 16
|
|
expect(horizontalPadding).toBe(16)
|
|
})
|
|
|
|
it('should accept optional cardGap prop', () => {
|
|
const cardGap = 5
|
|
expect(cardGap).toBe(5)
|
|
})
|
|
})
|
|
|
|
describe('Default Values', () => {
|
|
it('should have default numColumns value of 3', () => {
|
|
const defaultNumColumns = 3
|
|
expect(defaultNumColumns).toBe(3)
|
|
})
|
|
|
|
it('should have default horizontalPadding value of 16', () => {
|
|
const defaultHorizontalPadding = 16
|
|
expect(defaultHorizontalPadding).toBe(16)
|
|
})
|
|
|
|
it('should have default cardGap value of 5', () => {
|
|
const defaultCardGap = 5
|
|
expect(defaultCardGap).toBe(5)
|
|
})
|
|
})
|
|
|
|
describe('Empty Data Handling', () => {
|
|
it('should return null when templates array is empty', () => {
|
|
const templates: { id: string; title: string }[] = []
|
|
// Component should return null for empty array
|
|
expect(templates.length).toBe(0)
|
|
})
|
|
|
|
it('should return null when templates is undefined', () => {
|
|
const templates = undefined
|
|
expect(templates).toBeUndefined()
|
|
})
|
|
})
|
|
|
|
describe('calculateCardWidth Helper', () => {
|
|
it('should be defined', () => {
|
|
expect(calculateCardWidth).toBeDefined()
|
|
})
|
|
|
|
it('should calculate card width correctly with default values', () => {
|
|
// gridWidth = 375, horizontalPadding = 16, cardGap = 5, numColumns = 3
|
|
// cardWidth = (375 - 16 * 2 - 5 * (3 - 1)) / 3 = (375 - 32 - 10) / 3 = 333 / 3 = 111
|
|
const result = calculateCardWidth(375, 16, 5, 3)
|
|
expect(result).toBe(111)
|
|
})
|
|
|
|
it('should calculate card width correctly with custom values', () => {
|
|
// gridWidth = 400, horizontalPadding = 20, cardGap = 10, numColumns = 2
|
|
// cardWidth = (400 - 20 * 2 - 10 * (2 - 1)) / 2 = (400 - 40 - 10) / 2 = 350 / 2 = 175
|
|
const result = calculateCardWidth(400, 20, 10, 2)
|
|
expect(result).toBe(175)
|
|
})
|
|
|
|
it('should handle single column layout', () => {
|
|
// gridWidth = 300, horizontalPadding = 10, cardGap = 5, numColumns = 1
|
|
// cardWidth = (300 - 10 * 2 - 5 * (1 - 1)) / 1 = (300 - 20 - 0) / 1 = 280
|
|
const result = calculateCardWidth(300, 10, 5, 1)
|
|
expect(result).toBe(280)
|
|
})
|
|
|
|
it('should return 0 when gridWidth is 0', () => {
|
|
const result = calculateCardWidth(0, 16, 5, 3)
|
|
expect(result).toBeLessThanOrEqual(0)
|
|
})
|
|
})
|
|
|
|
describe('Template Interface', () => {
|
|
it('should support required id and title fields', () => {
|
|
const template = { id: '1', title: 'Test Template' }
|
|
expect(template.id).toBe('1')
|
|
expect(template.title).toBe('Test Template')
|
|
})
|
|
|
|
it('should support optional previewUrl field', () => {
|
|
const template = { id: '1', title: 'Test', previewUrl: 'https://example.com/preview.jpg' }
|
|
expect(template.previewUrl).toBe('https://example.com/preview.jpg')
|
|
})
|
|
|
|
it('should support optional webpPreviewUrl field', () => {
|
|
const template = { id: '1', title: 'Test', webpPreviewUrl: 'https://example.com/preview.webp' }
|
|
expect(template.webpPreviewUrl).toBe('https://example.com/preview.webp')
|
|
})
|
|
|
|
it('should support optional coverImageUrl field', () => {
|
|
const template = { id: '1', title: 'Test', coverImageUrl: 'https://example.com/cover.jpg' }
|
|
expect(template.coverImageUrl).toBe('https://example.com/cover.jpg')
|
|
})
|
|
|
|
it('should support optional aspectRatio field', () => {
|
|
const template = { id: '1', title: 'Test', aspectRatio: '16:9' }
|
|
expect(template.aspectRatio).toBe('16:9')
|
|
})
|
|
})
|
|
})
|