hamed
55ab2f5dfc
- Refactor color palette in `ui-design-spec.md` to utilize CSS variables exclusively, eliminating fixed hex values and Tailwind utility classes. - Complete dark mode implementation in `uiStore.ts`, ensuring proper theme application via `applyTheme()` and `applyBrand()`. - Create `admin-theme-dark-light-audit.md` to document the transition process, outlining issues with inline styles and fixed colors. - Introduce `theme-tokens.test.ts` to enforce rules against fixed hex colors and ensure compliance with the design system. - Update various components and styles to replace inline styles and fixed colors with CSS variables, ensuring consistent theming across light and dark modes. - Ensure all changes maintain visual integrity in both light and dark modes, with a focus on accessibility and contrast standards.
36 lines
1.9 KiB
TypeScript
36 lines
1.9 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import SessionStepper from './SessionStepper';
|
|
|
|
const STEPS = ['ایجاد سرویس', 'پرداخت', 'جزییات'];
|
|
|
|
describe('SessionStepper', () => {
|
|
it('برچسب همه گامها و یک کانکتور بهازای هر گام غیر از اولی', () => {
|
|
render(<SessionStepper steps={STEPS} activeStep={0} />);
|
|
STEPS.forEach((l) => expect(screen.getByText(l)).toBeInTheDocument());
|
|
expect(screen.getByTestId('step-connector-1')).toBeInTheDocument();
|
|
expect(screen.getByTestId('step-connector-2')).toBeInTheDocument();
|
|
expect(screen.queryByTestId('step-connector-0')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('کانکتور سمت گامِ قبلی (راست در RTL) کشیده میشود، نه بیرون از لبه چپ', () => {
|
|
render(<SessionStepper steps={STEPS} activeStep={0} />);
|
|
const c = screen.getByTestId('step-connector-2');
|
|
// RTL: امتداد به سمت راست (گام قبلی) → left مثبت از مرکز، right منفی
|
|
expect(c.style.left).toBe('calc(50% + 40px)');
|
|
expect(c.style.right).toBe('calc(-50% + 40px)');
|
|
});
|
|
|
|
it('کانکتور گامهای طیشده بنفش و بقیه خاکستری', () => {
|
|
render(<SessionStepper steps={STEPS} activeStep={1} />);
|
|
// رنگها از توکنهای تم میآیند تا در دارکمود هم درست باشند
|
|
expect(screen.getByTestId('step-connector-1').style.background).toContain('var(--primary)');
|
|
expect(screen.getByTestId('step-connector-2').style.background).toContain('var(--surface-2)');
|
|
});
|
|
|
|
it('استپر خالی: بدون کرش و بدون کانکتور', () => {
|
|
const { container } = render(<SessionStepper steps={[]} activeStep={0} />);
|
|
expect(container.querySelectorAll('[data-testid^="step-connector"]').length).toBe(0);
|
|
});
|
|
});
|