Spaces:
Sleeping
Sleeping
File size: 3,094 Bytes
cd99321 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import { render, screen, act } from '../../../tests/helpers/render';
import userEvent from '@testing-library/user-event';
import { ToastContainer } from './Toast';
describe('ToastContainer', () => {
beforeEach(() => {
vi.useFakeTimers();
});
afterEach(() => {
vi.useRealTimers();
});
function addToast(message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info', duration = 3000) {
act(() => {
window.__addToast!(message, type, duration);
});
}
it('FE-COMP-TOAST-001: renders empty container initially', () => {
const { container } = render(<ToastContainer />);
// No toast items — only the outer container div
expect(container.querySelectorAll('.nomad-toast').length).toBe(0);
});
it('FE-COMP-TOAST-002: success toast renders with message', () => {
render(<ToastContainer />);
addToast('File saved successfully', 'success');
expect(screen.getByText('File saved successfully')).toBeTruthy();
});
it('FE-COMP-TOAST-003: error toast renders with message', () => {
render(<ToastContainer />);
addToast('Something went wrong', 'error');
expect(screen.getByText('Something went wrong')).toBeTruthy();
});
it('FE-COMP-TOAST-004: warning toast renders with message', () => {
render(<ToastContainer />);
addToast('Low disk space', 'warning');
expect(screen.getByText('Low disk space')).toBeTruthy();
});
it('FE-COMP-TOAST-005: info toast renders with message', () => {
render(<ToastContainer />);
addToast('Update available', 'info');
expect(screen.getByText('Update available')).toBeTruthy();
});
it('FE-COMP-TOAST-006: toast auto-dismisses after duration', () => {
render(<ToastContainer />);
addToast('Temporary message', 'info', 2000);
expect(screen.getByText('Temporary message')).toBeTruthy();
// After duration + 400ms animation delay, toast is removed
act(() => {
vi.advanceTimersByTime(2000 + 400 + 10);
});
expect(screen.queryByText('Temporary message')).toBeNull();
});
it('FE-COMP-TOAST-007: clicking close button dismisses the toast', () => {
const { container } = render(<ToastContainer />);
act(() => {
window.__addToast!('Close me', 'success', 0); // duration 0 = no auto-dismiss
});
expect(screen.getByText('Close me')).toBeTruthy();
const closeBtn = container.querySelector('.nomad-toast button') as HTMLElement;
act(() => {
closeBtn.click();
});
// removeToast sets removing: true then schedules removal after 400ms
act(() => {
vi.advanceTimersByTime(401);
});
expect(screen.queryByText('Close me')).toBeNull();
});
it('FE-COMP-TOAST-008: multiple toasts display simultaneously', () => {
render(<ToastContainer />);
addToast('First toast', 'success', 0);
addToast('Second toast', 'error', 0);
addToast('Third toast', 'info', 0);
expect(screen.getByText('First toast')).toBeTruthy();
expect(screen.getByText('Second toast')).toBeTruthy();
expect(screen.getByText('Third toast')).toBeTruthy();
});
});
|