416cd7059b
- Add global search in top bar for navigating to dashboard pages - Add cancellation policy settings (window hours, late fee, deposit refund) - Display booking policies on customer confirmation page - Filter API tokens by sandbox/live mode - Widen settings layout and full-width site builder - Add help documentation search with OpenAI integration - Add blocked time ranges API for calendar visualization - Update business hours settings with holiday management 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import React from 'react';
|
|
import { Steps } from '../Steps';
|
|
|
|
describe('Steps', () => {
|
|
it('renders all step names', () => {
|
|
render(React.createElement(Steps, { currentStep: 1 }));
|
|
|
|
// Each step name appears twice: sr-only and visible label
|
|
expect(screen.getAllByText('Service').length).toBeGreaterThan(0);
|
|
expect(screen.getAllByText('Date & Time').length).toBeGreaterThan(0);
|
|
expect(screen.getAllByText('Account').length).toBeGreaterThan(0);
|
|
expect(screen.getAllByText('Payment').length).toBeGreaterThan(0);
|
|
expect(screen.getAllByText('Done').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('marks completed steps with check icon', () => {
|
|
render(React.createElement(Steps, { currentStep: 3 }));
|
|
|
|
// Step 1 and 2 are completed, should have check icons
|
|
const checkIcons = document.querySelectorAll('.lucide-check');
|
|
expect(checkIcons.length).toBe(2);
|
|
});
|
|
|
|
it('highlights current step', () => {
|
|
render(React.createElement(Steps, { currentStep: 2 }));
|
|
|
|
const currentStepIndicator = document.querySelector('[aria-current="step"]');
|
|
expect(currentStepIndicator).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders progress navigation', () => {
|
|
render(React.createElement(Steps, { currentStep: 1 }));
|
|
|
|
expect(screen.getByRole('list')).toBeInTheDocument();
|
|
expect(screen.getAllByRole('listitem')).toHaveLength(5);
|
|
});
|
|
|
|
it('shows future steps as incomplete', () => {
|
|
render(React.createElement(Steps, { currentStep: 2 }));
|
|
|
|
// Steps 3, 4, 5 should not have check icons
|
|
const listItems = screen.getAllByRole('listitem');
|
|
expect(listItems.length).toBe(5);
|
|
});
|
|
|
|
it('handles first step correctly', () => {
|
|
render(React.createElement(Steps, { currentStep: 1 }));
|
|
|
|
// No completed steps
|
|
const checkIcons = document.querySelectorAll('.lucide-check');
|
|
expect(checkIcons.length).toBe(0);
|
|
|
|
// Current step indicator
|
|
const currentStepIndicator = document.querySelector('[aria-current="step"]');
|
|
expect(currentStepIndicator).toBeInTheDocument();
|
|
});
|
|
|
|
it('handles last step correctly', () => {
|
|
render(React.createElement(Steps, { currentStep: 5 }));
|
|
|
|
// All previous steps completed
|
|
const checkIcons = document.querySelectorAll('.lucide-check');
|
|
expect(checkIcons.length).toBe(4);
|
|
|
|
// Current step indicator for Done
|
|
const currentStepIndicator = document.querySelector('[aria-current="step"]');
|
|
expect(currentStepIndicator).toBeInTheDocument();
|
|
});
|
|
});
|