51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/svelte';
|
|
import StepList from './StepList.svelte';
|
|
|
|
const mockSteps = [
|
|
{ stepNumber: 1, instruction: 'Wasser zum Kochen bringen' },
|
|
{ stepNumber: 2, instruction: 'Spaghetti al dente kochen' },
|
|
{ stepNumber: 3, instruction: 'Sauce bereiten' }
|
|
];
|
|
|
|
describe('StepList', () => {
|
|
it('renders the section heading', () => {
|
|
render(StepList, { props: { steps: mockSteps } });
|
|
expect(screen.getByText(/zubereitung/i)).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders each step instruction', () => {
|
|
render(StepList, { props: { steps: mockSteps } });
|
|
expect(screen.getByText('Wasser zum Kochen bringen')).toBeInTheDocument();
|
|
expect(screen.getByText('Spaghetti al dente kochen')).toBeInTheDocument();
|
|
expect(screen.getByText('Sauce bereiten')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders step numbers', () => {
|
|
render(StepList, { props: { steps: mockSteps } });
|
|
expect(screen.getByText('1')).toBeInTheDocument();
|
|
expect(screen.getByText('2')).toBeInTheDocument();
|
|
expect(screen.getByText('3')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders numbered circles with step numbers', () => {
|
|
render(StepList, { props: { steps: mockSteps } });
|
|
const circles = document.querySelectorAll('[data-testid="step-circle"]');
|
|
expect(circles).toHaveLength(3);
|
|
});
|
|
|
|
it('renders steps in stepNumber order', () => {
|
|
const shuffled = [mockSteps[2], mockSteps[0], mockSteps[1]];
|
|
render(StepList, { props: { steps: shuffled } });
|
|
const circles = document.querySelectorAll('[data-testid="step-circle"]');
|
|
expect(circles[0].textContent).toBe('1');
|
|
expect(circles[1].textContent).toBe('2');
|
|
expect(circles[2].textContent).toBe('3');
|
|
});
|
|
|
|
it('renders empty state when no steps', () => {
|
|
render(StepList, { props: { steps: [] } });
|
|
expect(screen.getByText(/zubereitung/i)).toBeInTheDocument();
|
|
});
|
|
});
|