mirror of
https://github.com/langgenius/dify.git
synced 2026-05-06 02:18:08 +08:00
test: add comprehensive unit and integration tests for dataset module (#32187)
Co-authored-by: CodingOnStar <hanxujiang@dify.com> Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Coding On Star
GitHub
@ -1,8 +1,8 @@
|
||||
import type { StepperProps } from './index'
|
||||
import type { Step, StepperStepProps } from './step'
|
||||
import type { StepperProps } from '../index'
|
||||
import type { Step, StepperStepProps } from '../step'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { Stepper } from './index'
|
||||
import { StepperStep } from './step'
|
||||
import { Stepper } from '../index'
|
||||
import { StepperStep } from '../step'
|
||||
|
||||
// Test data factory for creating steps
|
||||
const createStep = (overrides: Partial<Step> = {}): Step => ({
|
||||
@ -34,44 +34,33 @@ const renderStepperStep = (props: Partial<StepperStepProps> = {}) => {
|
||||
return render(<StepperStep {...defaultProps} />)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Stepper Component Tests
|
||||
// ============================================================================
|
||||
describe('Stepper', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Rendering Tests - Verify component renders properly with various inputs
|
||||
// --------------------------------------------------------------------------
|
||||
describe('Rendering', () => {
|
||||
it('should render without crashing', () => {
|
||||
// Arrange & Act
|
||||
renderStepper()
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Step 1')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render all step names', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(3, 'Custom Step')
|
||||
|
||||
// Act
|
||||
renderStepper({ steps })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Custom Step 1')).toBeInTheDocument()
|
||||
expect(screen.getByText('Custom Step 2')).toBeInTheDocument()
|
||||
expect(screen.getByText('Custom Step 3')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render dividers between steps', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(3)
|
||||
|
||||
// Act
|
||||
const { container } = renderStepper({ steps })
|
||||
|
||||
// Assert - Should have 2 dividers for 3 steps
|
||||
@ -80,10 +69,8 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should not render divider after last step', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(2)
|
||||
|
||||
// Act
|
||||
const { container } = renderStepper({ steps })
|
||||
|
||||
// Assert - Should have 1 divider for 2 steps
|
||||
@ -92,28 +79,21 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should render with flex container layout', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepper()
|
||||
|
||||
// Assert
|
||||
const wrapper = container.firstChild as HTMLElement
|
||||
expect(wrapper).toHaveClass('flex', 'items-center', 'gap-3')
|
||||
})
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Props Testing - Test all prop variations and combinations
|
||||
// --------------------------------------------------------------------------
|
||||
describe('Props', () => {
|
||||
describe('steps prop', () => {
|
||||
it('should render correct number of steps', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(5)
|
||||
|
||||
// Act
|
||||
renderStepper({ steps })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Step 1')).toBeInTheDocument()
|
||||
expect(screen.getByText('Step 2')).toBeInTheDocument()
|
||||
expect(screen.getByText('Step 3')).toBeInTheDocument()
|
||||
@ -122,13 +102,10 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should handle single step correctly', () => {
|
||||
// Arrange
|
||||
const steps = [createStep({ name: 'Only Step' })]
|
||||
|
||||
// Act
|
||||
const { container } = renderStepper({ steps, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Only Step')).toBeInTheDocument()
|
||||
// No dividers for single step
|
||||
const dividers = container.querySelectorAll('.bg-divider-deep')
|
||||
@ -136,29 +113,23 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should handle steps with long names', () => {
|
||||
// Arrange
|
||||
const longName = 'This is a very long step name that might overflow'
|
||||
const steps = [createStep({ name: longName })]
|
||||
|
||||
// Act
|
||||
renderStepper({ steps, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText(longName)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should handle steps with special characters', () => {
|
||||
// Arrange
|
||||
const steps = [
|
||||
createStep({ name: 'Step & Configuration' }),
|
||||
createStep({ name: 'Step <Preview>' }),
|
||||
createStep({ name: 'Step "Complete"' }),
|
||||
]
|
||||
|
||||
// Act
|
||||
renderStepper({ steps, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Step & Configuration')).toBeInTheDocument()
|
||||
expect(screen.getByText('Step <Preview>')).toBeInTheDocument()
|
||||
expect(screen.getByText('Step "Complete"')).toBeInTheDocument()
|
||||
@ -167,7 +138,6 @@ describe('Stepper', () => {
|
||||
|
||||
describe('activeIndex prop', () => {
|
||||
it('should highlight first step when activeIndex is 0', () => {
|
||||
// Arrange & Act
|
||||
renderStepper({ activeIndex: 0 })
|
||||
|
||||
// Assert - First step should show "STEP 1" label
|
||||
@ -175,7 +145,6 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should highlight second step when activeIndex is 1', () => {
|
||||
// Arrange & Act
|
||||
renderStepper({ activeIndex: 1 })
|
||||
|
||||
// Assert - Second step should show "STEP 2" label
|
||||
@ -183,10 +152,8 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should highlight last step when activeIndex equals steps length - 1', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(3)
|
||||
|
||||
// Act
|
||||
renderStepper({ steps, activeIndex: 2 })
|
||||
|
||||
// Assert - Third step should show "STEP 3" label
|
||||
@ -194,10 +161,8 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should show completed steps with number only (no STEP prefix)', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(3)
|
||||
|
||||
// Act
|
||||
renderStepper({ steps, activeIndex: 2 })
|
||||
|
||||
// Assert - Completed steps show just the number
|
||||
@ -207,10 +172,8 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should show disabled steps with number only (no STEP prefix)', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(3)
|
||||
|
||||
// Act
|
||||
renderStepper({ steps, activeIndex: 0 })
|
||||
|
||||
// Assert - Disabled steps show just the number
|
||||
@ -221,12 +184,9 @@ describe('Stepper', () => {
|
||||
})
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Edge Cases - Test boundary conditions and unexpected inputs
|
||||
// --------------------------------------------------------------------------
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle empty steps array', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepper({ steps: [] })
|
||||
|
||||
// Assert - Container should render but be empty
|
||||
@ -235,7 +195,6 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should handle activeIndex greater than steps length', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(2)
|
||||
|
||||
// Act - activeIndex 5 is beyond array bounds
|
||||
@ -247,7 +206,6 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should handle negative activeIndex', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(2)
|
||||
|
||||
// Act - negative activeIndex
|
||||
@ -259,13 +217,10 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should handle large number of steps', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(10)
|
||||
|
||||
// Act
|
||||
const { container } = renderStepper({ steps, activeIndex: 5 })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('STEP 6')).toBeInTheDocument()
|
||||
// Should have 9 dividers for 10 steps
|
||||
const dividers = container.querySelectorAll('.bg-divider-deep')
|
||||
@ -273,10 +228,8 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should handle steps with empty name', () => {
|
||||
// Arrange
|
||||
const steps = [createStep({ name: '' })]
|
||||
|
||||
// Act
|
||||
const { container } = renderStepper({ steps, activeIndex: 0 })
|
||||
|
||||
// Assert - Should still render the step structure
|
||||
@ -285,18 +238,13 @@ describe('Stepper', () => {
|
||||
})
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Integration - Test step state combinations
|
||||
// --------------------------------------------------------------------------
|
||||
describe('Step States', () => {
|
||||
it('should render mixed states: completed, active, disabled', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(5)
|
||||
|
||||
// Act
|
||||
renderStepper({ steps, activeIndex: 2 })
|
||||
|
||||
// Assert
|
||||
// Steps 1-2 are completed (show number only)
|
||||
expect(screen.getByText('1')).toBeInTheDocument()
|
||||
expect(screen.getByText('2')).toBeInTheDocument()
|
||||
@ -308,7 +256,6 @@ describe('Stepper', () => {
|
||||
})
|
||||
|
||||
it('should transition through all states correctly', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(3)
|
||||
|
||||
// Act & Assert - Step 1 active
|
||||
@ -329,80 +276,59 @@ describe('Stepper', () => {
|
||||
})
|
||||
})
|
||||
|
||||
// ============================================================================
|
||||
// StepperStep Component Tests
|
||||
// ============================================================================
|
||||
describe('StepperStep', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Rendering Tests
|
||||
// --------------------------------------------------------------------------
|
||||
describe('Rendering', () => {
|
||||
it('should render without crashing', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep()
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Test Step')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render step name', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ name: 'Configure Dataset' })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Configure Dataset')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should render with flex container layout', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep()
|
||||
|
||||
// Assert
|
||||
const wrapper = container.firstChild as HTMLElement
|
||||
expect(wrapper).toHaveClass('flex', 'items-center', 'gap-2')
|
||||
})
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Active State Tests
|
||||
// --------------------------------------------------------------------------
|
||||
describe('Active State', () => {
|
||||
it('should show STEP prefix when active', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ index: 0, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('STEP 1')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should apply active styles to label container', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep({ index: 0, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
const labelContainer = container.querySelector('.bg-state-accent-solid')
|
||||
expect(labelContainer).toBeInTheDocument()
|
||||
expect(labelContainer).toHaveClass('px-2')
|
||||
})
|
||||
|
||||
it('should apply active text color to label', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep({ index: 0, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
const label = container.querySelector('.text-text-primary-on-surface')
|
||||
expect(label).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should apply accent text color to name when active', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep({ index: 0, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
const nameElement = container.querySelector('.text-text-accent')
|
||||
expect(nameElement).toBeInTheDocument()
|
||||
expect(nameElement).toHaveClass('system-xs-semibold-uppercase')
|
||||
@ -421,105 +347,79 @@ describe('StepperStep', () => {
|
||||
})
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Completed State Tests (index < activeIndex)
|
||||
// --------------------------------------------------------------------------
|
||||
describe('Completed State', () => {
|
||||
it('should show number only when completed (not active)', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ index: 0, activeIndex: 1 })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('1')).toBeInTheDocument()
|
||||
expect(screen.queryByText('STEP 1')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should apply completed styles to label container', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep({ index: 0, activeIndex: 1 })
|
||||
|
||||
// Assert
|
||||
const labelContainer = container.querySelector('.border-text-quaternary')
|
||||
expect(labelContainer).toBeInTheDocument()
|
||||
expect(labelContainer).toHaveClass('w-5')
|
||||
})
|
||||
|
||||
it('should apply tertiary text color to label when completed', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep({ index: 0, activeIndex: 1 })
|
||||
|
||||
// Assert
|
||||
const label = container.querySelector('.text-text-tertiary')
|
||||
expect(label).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should apply tertiary text color to name when completed', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep({ index: 0, activeIndex: 2 })
|
||||
|
||||
// Assert
|
||||
const nameElements = container.querySelectorAll('.text-text-tertiary')
|
||||
expect(nameElements.length).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Disabled State Tests (index > activeIndex)
|
||||
// --------------------------------------------------------------------------
|
||||
describe('Disabled State', () => {
|
||||
it('should show number only when disabled', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ index: 2, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('3')).toBeInTheDocument()
|
||||
expect(screen.queryByText('STEP 3')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should apply disabled styles to label container', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep({ index: 2, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
const labelContainer = container.querySelector('.border-divider-deep')
|
||||
expect(labelContainer).toBeInTheDocument()
|
||||
expect(labelContainer).toHaveClass('w-5')
|
||||
})
|
||||
|
||||
it('should apply quaternary text color to label when disabled', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep({ index: 2, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
const label = container.querySelector('.text-text-quaternary')
|
||||
expect(label).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should apply quaternary text color to name when disabled', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep({ index: 2, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
const nameElements = container.querySelectorAll('.text-text-quaternary')
|
||||
expect(nameElements.length).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Props Testing
|
||||
// --------------------------------------------------------------------------
|
||||
describe('Props', () => {
|
||||
describe('name prop', () => {
|
||||
it('should render provided name', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ name: 'Custom Name' })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Custom Name')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should handle empty name', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep({ name: '' })
|
||||
|
||||
// Assert - Label should still render
|
||||
@ -528,36 +428,28 @@ describe('StepperStep', () => {
|
||||
})
|
||||
|
||||
it('should handle name with whitespace', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ name: ' Padded Name ' })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Padded Name')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('index prop', () => {
|
||||
it('should display correct 1-based number for index 0', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ index: 0, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('STEP 1')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should display correct 1-based number for index 9', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ index: 9, activeIndex: 9 })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('STEP 10')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should handle large index values', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ index: 99, activeIndex: 99 })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('STEP 100')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@ -581,20 +473,14 @@ describe('StepperStep', () => {
|
||||
})
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Edge Cases
|
||||
// --------------------------------------------------------------------------
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle zero index correctly', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ index: 0, activeIndex: 0 })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('STEP 1')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should handle negative activeIndex', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ index: 0, activeIndex: -1 })
|
||||
|
||||
// Assert - Step should be disabled (index > activeIndex)
|
||||
@ -602,7 +488,6 @@ describe('StepperStep', () => {
|
||||
})
|
||||
|
||||
it('should handle equal boundary (index equals activeIndex)', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ index: 5, activeIndex: 5 })
|
||||
|
||||
// Assert - Should be active
|
||||
@ -610,7 +495,6 @@ describe('StepperStep', () => {
|
||||
})
|
||||
|
||||
it('should handle name with HTML-like content safely', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ name: '<script>alert("xss")</script>' })
|
||||
|
||||
// Assert - Should render as text, not execute
|
||||
@ -618,73 +502,57 @@ describe('StepperStep', () => {
|
||||
})
|
||||
|
||||
it('should handle name with unicode characters', () => {
|
||||
// Arrange & Act
|
||||
renderStepperStep({ name: 'Step 数据 🚀' })
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('Step 数据 🚀')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
// --------------------------------------------------------------------------
|
||||
// Style Classes Verification
|
||||
// --------------------------------------------------------------------------
|
||||
describe('Style Classes', () => {
|
||||
it('should apply correct typography classes to label', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep()
|
||||
|
||||
// Assert
|
||||
const label = container.querySelector('.system-2xs-semibold-uppercase')
|
||||
expect(label).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should apply correct typography classes to name', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep()
|
||||
|
||||
// Assert
|
||||
const name = container.querySelector('.system-xs-medium-uppercase')
|
||||
expect(name).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should have rounded pill shape for label container', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep()
|
||||
|
||||
// Assert
|
||||
const labelContainer = container.querySelector('.rounded-3xl')
|
||||
expect(labelContainer).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should apply h-5 height to label container', () => {
|
||||
// Arrange & Act
|
||||
const { container } = renderStepperStep()
|
||||
|
||||
// Assert
|
||||
const labelContainer = container.querySelector('.h-5')
|
||||
expect(labelContainer).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// ============================================================================
|
||||
// Integration Tests - Stepper and StepperStep working together
|
||||
// ============================================================================
|
||||
describe('Stepper Integration', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('should pass correct props to each StepperStep', () => {
|
||||
// Arrange
|
||||
const steps = [
|
||||
createStep({ name: 'First' }),
|
||||
createStep({ name: 'Second' }),
|
||||
createStep({ name: 'Third' }),
|
||||
]
|
||||
|
||||
// Act
|
||||
renderStepper({ steps, activeIndex: 1 })
|
||||
|
||||
// Assert - Each step receives correct index and displays correctly
|
||||
@ -697,10 +565,8 @@ describe('Stepper Integration', () => {
|
||||
})
|
||||
|
||||
it('should maintain correct visual hierarchy across steps', () => {
|
||||
// Arrange
|
||||
const steps = createSteps(4)
|
||||
|
||||
// Act
|
||||
const { container } = renderStepper({ steps, activeIndex: 2 })
|
||||
|
||||
// Assert - Check visual hierarchy
|
||||
@ -718,10 +584,8 @@ describe('Stepper Integration', () => {
|
||||
})
|
||||
|
||||
it('should render correctly with dynamic step updates', () => {
|
||||
// Arrange
|
||||
const initialSteps = createSteps(2)
|
||||
|
||||
// Act
|
||||
const { rerender } = render(<Stepper steps={initialSteps} activeIndex={0} />)
|
||||
expect(screen.getByText('Step 1')).toBeInTheDocument()
|
||||
expect(screen.getByText('Step 2')).toBeInTheDocument()
|
||||
@ -730,7 +594,6 @@ describe('Stepper Integration', () => {
|
||||
const updatedSteps = createSteps(4)
|
||||
rerender(<Stepper steps={updatedSteps} activeIndex={2} />)
|
||||
|
||||
// Assert
|
||||
expect(screen.getByText('STEP 3')).toBeInTheDocument()
|
||||
expect(screen.getByText('Step 4')).toBeInTheDocument()
|
||||
})
|
||||
@ -0,0 +1,32 @@
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { StepperStep } from '../step'
|
||||
|
||||
describe('StepperStep', () => {
|
||||
it('should render step name', () => {
|
||||
render(<StepperStep name="Configure" index={0} activeIndex={0} />)
|
||||
expect(screen.getByText('Configure')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should show "STEP N" label for active step', () => {
|
||||
render(<StepperStep name="Configure" index={1} activeIndex={1} />)
|
||||
expect(screen.getByText('STEP 2')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should show just number for non-active step', () => {
|
||||
render(<StepperStep name="Configure" index={1} activeIndex={0} />)
|
||||
expect(screen.getByText('2')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should apply accent style for active step', () => {
|
||||
render(<StepperStep name="Step A" index={0} activeIndex={0} />)
|
||||
const nameEl = screen.getByText('Step A')
|
||||
expect(nameEl.className).toContain('text-text-accent')
|
||||
})
|
||||
|
||||
it('should apply disabled style for future step', () => {
|
||||
render(<StepperStep name="Step C" index={2} activeIndex={0} />)
|
||||
const nameEl = screen.getByText('Step C')
|
||||
expect(nameEl.className).toContain('text-text-quaternary')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user