mirror of https://github.com/langgenius/dify.git
114 lines
4.1 KiB
TypeScript
114 lines
4.1 KiB
TypeScript
import { render, screen } from '@testing-library/react'
|
|
import { describe, expect, it } from 'vitest'
|
|
import Field from './field'
|
|
|
|
describe('Field', () => {
|
|
describe('Rendering', () => {
|
|
it('should render without crashing', () => {
|
|
render(<Field label="Test Label">Content</Field>)
|
|
expect(screen.getByText('Test Label')).toBeInTheDocument()
|
|
expect(screen.getByText('Content')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render label with correct styling', () => {
|
|
render(<Field label="My Label">Content</Field>)
|
|
const labelElement = screen.getByText('My Label')
|
|
expect(labelElement).toHaveClass('system-xs-medium', 'w-[128px]', 'shrink-0', 'truncate', 'py-1', 'text-text-tertiary')
|
|
})
|
|
|
|
it('should render children in correct container', () => {
|
|
const { container } = render(<Field label="Label">Child Content</Field>)
|
|
// The children are wrapped in a div with w-[244px] class
|
|
const contentWrapper = container.querySelector('.w-\\[244px\\]')
|
|
expect(contentWrapper).toBeInTheDocument()
|
|
expect(contentWrapper).toHaveClass('shrink-0')
|
|
})
|
|
})
|
|
|
|
describe('Props', () => {
|
|
it('should render with string children', () => {
|
|
render(<Field label="Label">Simple Text</Field>)
|
|
expect(screen.getByText('Simple Text')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render with complex children', () => {
|
|
render(
|
|
<Field label="Label">
|
|
<div data-testid="complex-child">
|
|
<span>Nested Content</span>
|
|
</div>
|
|
</Field>,
|
|
)
|
|
expect(screen.getByTestId('complex-child')).toBeInTheDocument()
|
|
expect(screen.getByText('Nested Content')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render with multiple children', () => {
|
|
render(
|
|
<Field label="Label">
|
|
<span>First</span>
|
|
<span>Second</span>
|
|
</Field>,
|
|
)
|
|
expect(screen.getByText('First')).toBeInTheDocument()
|
|
expect(screen.getByText('Second')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render different labels correctly', () => {
|
|
const { rerender } = render(<Field label="First Label">Content</Field>)
|
|
expect(screen.getByText('First Label')).toBeInTheDocument()
|
|
|
|
rerender(<Field label="Second Label">Content</Field>)
|
|
expect(screen.getByText('Second Label')).toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
describe('Layout', () => {
|
|
it('should have flex layout with space between elements', () => {
|
|
const { container } = render(<Field label="Label">Content</Field>)
|
|
const wrapper = container.firstChild
|
|
expect(wrapper).toHaveClass('flex', 'items-start', 'space-x-2')
|
|
})
|
|
|
|
it('should render label and content side by side', () => {
|
|
const { container } = render(<Field label="Label">Content</Field>)
|
|
const wrapper = container.firstChild as HTMLElement
|
|
expect(wrapper?.children).toHaveLength(2)
|
|
})
|
|
})
|
|
|
|
describe('Edge Cases', () => {
|
|
it('should render with empty label', () => {
|
|
render(<Field label="">Content</Field>)
|
|
expect(screen.getByText('Content')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render with long label (truncation)', () => {
|
|
const longLabel = 'This is a very long label that should be truncated'
|
|
render(<Field label={longLabel}>Content</Field>)
|
|
const labelElement = screen.getByText(longLabel)
|
|
expect(labelElement).toHaveClass('truncate')
|
|
})
|
|
|
|
it('should render with empty children', () => {
|
|
const { container } = render(<Field label="Label"><span></span></Field>)
|
|
expect(container.firstChild).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render with null children', () => {
|
|
const { container } = render(<Field label="Label">{null}</Field>)
|
|
expect(container.firstChild).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render with number as children', () => {
|
|
render(<Field label="Label">{42}</Field>)
|
|
expect(screen.getByText('42')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should handle special characters in label', () => {
|
|
render(<Field label={'Label & "chars"'}>Content</Field>)
|
|
expect(screen.getByText('Label & "chars"')).toBeInTheDocument()
|
|
})
|
|
})
|
|
})
|