mirror of
https://github.com/langgenius/dify.git
synced 2026-02-20 01:44:42 +08:00
84 lines
2.9 KiB
TypeScript
84 lines
2.9 KiB
TypeScript
import { render, screen } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import { describe, expect, it, vi } from 'vitest'
|
|
import {
|
|
SkeletonContainer,
|
|
SkeletonPoint,
|
|
SkeletonRectangle,
|
|
SkeletonRow,
|
|
} from './index'
|
|
|
|
describe('Skeleton Components', () => {
|
|
describe('Individual Components', () => {
|
|
it('should forward attributes and render children in SkeletonContainer', () => {
|
|
render(
|
|
<SkeletonContainer data-testid="container" className="custom-container">
|
|
<span>Content</span>
|
|
</SkeletonContainer>,
|
|
)
|
|
const element = screen.getByTestId('container')
|
|
expect(element).toHaveClass('flex', 'flex-col', 'custom-container')
|
|
expect(screen.getByText('Content')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should forward attributes and render children in SkeletonRow', () => {
|
|
render(
|
|
<SkeletonRow data-testid="row" className="custom-row">
|
|
<span>Row Content</span>
|
|
</SkeletonRow>,
|
|
)
|
|
const element = screen.getByTestId('row')
|
|
expect(element).toHaveClass('flex', 'items-center', 'custom-row')
|
|
expect(screen.getByText('Row Content')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should apply base skeleton styles to SkeletonRectangle', () => {
|
|
render(<SkeletonRectangle data-testid="rect" className="w-10" />)
|
|
const element = screen.getByTestId('rect')
|
|
expect(element).toHaveClass('h-2', 'bg-text-quaternary', 'opacity-20', 'w-10')
|
|
})
|
|
|
|
it('should render the separator character correctly in SkeletonPoint', () => {
|
|
render(<SkeletonPoint data-testid="point" />)
|
|
const element = screen.getByTestId('point')
|
|
expect(element).toHaveTextContent('·')
|
|
expect(element).toHaveClass('text-text-quaternary')
|
|
})
|
|
})
|
|
|
|
describe('Composition & Layout', () => {
|
|
it('should render a full skeleton structure accurately', () => {
|
|
const { container } = render(
|
|
<SkeletonContainer className="main-wrapper">
|
|
<SkeletonRow>
|
|
<SkeletonRectangle className="rect-1" />
|
|
<SkeletonPoint />
|
|
<SkeletonRectangle className="rect-2" />
|
|
</SkeletonRow>
|
|
</SkeletonContainer>,
|
|
)
|
|
|
|
const wrapper = container.firstChild as HTMLElement
|
|
expect(wrapper).toHaveClass('main-wrapper')
|
|
|
|
expect(container.querySelector('.rect-1')).toBeInTheDocument()
|
|
expect(container.querySelector('.rect-2')).toBeInTheDocument()
|
|
|
|
const row = container.querySelector('.flex.items-center')
|
|
expect(row).toContainElement(container.querySelector('.rect-1') as HTMLElement)
|
|
expect(row).toHaveTextContent('·')
|
|
})
|
|
})
|
|
|
|
it('should handle rest props like event listeners', async () => {
|
|
const onClick = vi.fn()
|
|
const user = userEvent.setup()
|
|
render(<SkeletonRectangle onClick={onClick} data-testid="clickable" />)
|
|
|
|
const element = screen.getByTestId('clickable')
|
|
|
|
await user.click(element)
|
|
expect(onClick).toHaveBeenCalledTimes(1)
|
|
})
|
|
})
|