mirror of https://github.com/langgenius/dify.git
63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
import { render, screen } from '@testing-library/react'
|
|
import ProgressBar from './index'
|
|
|
|
describe('ProgressBar', () => {
|
|
describe('Normal Mode (determinate)', () => {
|
|
it('renders with provided percent and color', () => {
|
|
render(<ProgressBar percent={42} color="bg-test-color" />)
|
|
|
|
const bar = screen.getByTestId('billing-progress-bar')
|
|
expect(bar).toHaveClass('bg-test-color')
|
|
expect(bar.getAttribute('style')).toContain('width: 42%')
|
|
})
|
|
|
|
it('caps width at 100% when percent exceeds max', () => {
|
|
render(<ProgressBar percent={150} color="bg-test-color" />)
|
|
|
|
const bar = screen.getByTestId('billing-progress-bar')
|
|
expect(bar.getAttribute('style')).toContain('width: 100%')
|
|
})
|
|
|
|
it('uses the default color when no color prop is provided', () => {
|
|
render(<ProgressBar percent={20} color={undefined as unknown as string} />)
|
|
|
|
const bar = screen.getByTestId('billing-progress-bar')
|
|
expect(bar).toHaveClass('bg-components-progress-bar-progress-solid')
|
|
expect(bar.getAttribute('style')).toContain('width: 20%')
|
|
})
|
|
})
|
|
|
|
describe('Indeterminate Mode', () => {
|
|
it('should render indeterminate progress bar when indeterminate is true', () => {
|
|
render(<ProgressBar percent={0} color="bg-test-color" indeterminate />)
|
|
|
|
const bar = screen.getByTestId('billing-progress-bar-indeterminate')
|
|
expect(bar).toBeInTheDocument()
|
|
expect(bar).toHaveClass('bg-progress-bar-indeterminate-stripe')
|
|
})
|
|
|
|
it('should not render normal progress bar when indeterminate is true', () => {
|
|
render(<ProgressBar percent={50} color="bg-test-color" indeterminate />)
|
|
|
|
expect(screen.queryByTestId('billing-progress-bar')).not.toBeInTheDocument()
|
|
expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
|
|
})
|
|
|
|
it('should render with default width (w-[30px]) when indeterminateFull is false', () => {
|
|
render(<ProgressBar percent={0} color="bg-test-color" indeterminate indeterminateFull={false} />)
|
|
|
|
const bar = screen.getByTestId('billing-progress-bar-indeterminate')
|
|
expect(bar).toHaveClass('w-[30px]')
|
|
expect(bar).not.toHaveClass('w-full')
|
|
})
|
|
|
|
it('should render with full width (w-full) when indeterminateFull is true', () => {
|
|
render(<ProgressBar percent={0} color="bg-test-color" indeterminate indeterminateFull />)
|
|
|
|
const bar = screen.getByTestId('billing-progress-bar-indeterminate')
|
|
expect(bar).toHaveClass('w-full')
|
|
expect(bar).not.toHaveClass('w-[30px]')
|
|
})
|
|
})
|
|
})
|