44 lines
1.9 KiB
TypeScript
44 lines
1.9 KiB
TypeScript
import { describe, it, expect, vi } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import Modal from './Modal';
|
|
|
|
/**
|
|
* فرمهای بلند (ثبت نوبت) کلِ کارت را اسکرول میکردند، پس عنوان و دکمهٔ اصلی از دید
|
|
* خارج میشد. حالا هدر و فوتر بیرون از ناحیهٔ اسکرولاند و فقط بدنه اسکرول میشود.
|
|
*/
|
|
describe('Modal', () => {
|
|
const renderModal = (size?: 'sm' | 'md' | 'lg' | 'xl') =>
|
|
render(
|
|
<Modal open title="ثبت نوبت" size={size} onClose={vi.fn()} footer={<button>ثبت</button>}>
|
|
<p>محتوای بلند</p>
|
|
</Modal>,
|
|
);
|
|
|
|
it('هدر و فوتر بیرون از ناحیهٔ اسکرول میمانند', () => {
|
|
renderModal();
|
|
|
|
const body = document.querySelector('.modal-body');
|
|
expect(body).not.toBeNull();
|
|
expect(body!.textContent).toBe('محتوای بلند');
|
|
// نه عنوان و نه دکمه نباید داخل بدنه باشند، وگرنه با محتوا اسکرول میشوند.
|
|
expect(body!.querySelector('.modal-head')).toBeNull();
|
|
expect(body!.querySelector('.modal-foot')).toBeNull();
|
|
expect(screen.getByRole('button', { name: 'ثبت' }).closest('.modal-foot')).not.toBeNull();
|
|
});
|
|
|
|
it('عرض از size میآید', () => {
|
|
const { unmount } = renderModal('sm');
|
|
expect((document.querySelector('.modal') as HTMLElement).style.maxWidth).toBe('420px');
|
|
unmount();
|
|
|
|
renderModal('lg');
|
|
expect((document.querySelector('.modal') as HTMLElement).style.maxWidth).toBe('720px');
|
|
});
|
|
|
|
it('بسته، هیچ چیزی رندر نمیکند', () => {
|
|
render(<Modal open={false} title="ثبت نوبت" onClose={vi.fn()}><p>محتوا</p></Modal>);
|
|
|
|
expect(document.querySelector('.modal')).toBeNull();
|
|
});
|
|
});
|