99 lines
2.8 KiB
TypeScript
99 lines
2.8 KiB
TypeScript
|
import { describe, it, expect, beforeEach } from 'vitest';
|
||
|
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||
|
|
import { Toast } from '@app/shared/ui/toast/toast';
|
||
|
|
import { Notification } from '@app/core/services/notification';
|
||
|
|
|
||
|
|
describe('Toast', () => {
|
||
|
|
let component: Toast;
|
||
|
|
let fixture: ComponentFixture<Toast>;
|
||
|
|
let notification: Notification;
|
||
|
|
|
||
|
|
beforeEach(async () => {
|
||
|
|
await TestBed.configureTestingModule({
|
||
|
|
imports: [Toast],
|
||
|
|
}).compileComponents();
|
||
|
|
|
||
|
|
fixture = TestBed.createComponent(Toast);
|
||
|
|
component = fixture.componentInstance;
|
||
|
|
notification = TestBed.inject(Notification);
|
||
|
|
fixture.detectChanges();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should create', () => {
|
||
|
|
expect(component).toBeTruthy();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should not render when no notifications', () => {
|
||
|
|
const toasts = fixture.nativeElement.querySelectorAll('.toast');
|
||
|
|
|
||
|
|
expect(toasts.length).toBe(0);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should render error notification', () => {
|
||
|
|
notification.error('Test error');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const toast = fixture.nativeElement.querySelector('.toast');
|
||
|
|
|
||
|
|
expect(toast).toBeTruthy();
|
||
|
|
expect(toast.classList.contains('toast--error')).toBe(true);
|
||
|
|
expect(toast.textContent).toContain('Test error');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should render success notification', () => {
|
||
|
|
notification.success('Test success');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const toast = fixture.nativeElement.querySelector('.toast');
|
||
|
|
|
||
|
|
expect(toast.classList.contains('toast--success')).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should render warning notification', () => {
|
||
|
|
notification.warning('Test warning');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const toast = fixture.nativeElement.querySelector('.toast');
|
||
|
|
|
||
|
|
expect(toast.classList.contains('toast--warning')).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should render info notification', () => {
|
||
|
|
notification.info('Test info');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const toast = fixture.nativeElement.querySelector('.toast');
|
||
|
|
|
||
|
|
expect(toast.classList.contains('toast--info')).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should dismiss notification on close click', () => {
|
||
|
|
notification.error('To dismiss');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const closeBtn = fixture.nativeElement.querySelector('.toast__close');
|
||
|
|
closeBtn.click();
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const toasts = fixture.nativeElement.querySelectorAll('.toast');
|
||
|
|
|
||
|
|
expect(toasts.length).toBe(0);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should render multiple notifications', () => {
|
||
|
|
notification.success('First');
|
||
|
|
notification.error('Second');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const toasts = fixture.nativeElement.querySelectorAll('.toast');
|
||
|
|
|
||
|
|
expect(toasts.length).toBe(2);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should have aria-live attribute', () => {
|
||
|
|
const container = fixture.nativeElement.querySelector('.toast-container');
|
||
|
|
|
||
|
|
expect(container.getAttribute('aria-live')).toBe('polite');
|
||
|
|
});
|
||
|
|
});
|