1 import { ComponentFixture, TestBed } from '@angular/core/testing';
2 import { BehaviorSubject } from 'rxjs';
4 import { OverviewAlertsCardComponent } from './overview-alerts-card.component';
5 import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service';
6 import { provideHttpClient } from '@angular/common/http';
7 import { provideRouter, RouterModule } from '@angular/router';
8 import { take } from 'rxjs/operators';
10 class MockPrometheusAlertService {
11 private totalSub = new BehaviorSubject<number>(0);
12 private criticalSub = new BehaviorSubject<number>(0);
13 private warningSub = new BehaviorSubject<number>(0);
15 totalAlerts$ = this.totalSub.asObservable();
16 criticalAlerts$ = this.criticalSub.asObservable();
17 warningAlerts$ = this.warningSub.asObservable();
19 getGroupedAlerts = jest.fn();
21 emitCounts(total: number, critical: number, warning: number) {
22 this.totalSub.next(total);
23 this.criticalSub.next(critical);
24 this.warningSub.next(warning);
28 describe('OverviewAlertsCardComponent', () => {
29 let component: OverviewAlertsCardComponent;
30 let fixture: ComponentFixture<OverviewAlertsCardComponent>;
31 let mockSvc: MockPrometheusAlertService;
33 beforeEach(async () => {
34 mockSvc = new MockPrometheusAlertService();
36 await TestBed.configureTestingModule({
37 imports: [OverviewAlertsCardComponent, RouterModule],
41 { provide: PrometheusAlertService, useValue: mockSvc }
43 }).compileComponents();
45 fixture = TestBed.createComponent(OverviewAlertsCardComponent);
46 component = fixture.componentInstance;
53 it('should create', () => {
54 expect(component).toBeTruthy();
57 it('ngOnInit should call getGroupedAlerts(true)', () => {
58 fixture.detectChanges();
59 expect(mockSvc.getGroupedAlerts).toHaveBeenCalledWith(true);
62 it('vm$ should map no alerts -> success icon, "No active alerts", no badges', async () => {
63 mockSvc.emitCounts(0, 0, 0);
64 fixture.detectChanges();
66 const vm = await component.vm$.pipe(take(1)).toPromise();
68 expect(vm.total).toBe(0);
69 expect(vm.icon).toBe('success');
70 expect(vm.statusText).toBe('No active alerts');
71 expect(vm.badges).toEqual([]);
74 it('vm$ should map critical alerts -> error icon and critical badge', async () => {
75 mockSvc.emitCounts(5, 2, 3);
76 fixture.detectChanges();
78 const vm = await component.vm$.pipe(take(1)).toPromise();
80 expect(vm.total).toBe(5);
81 expect(vm.icon).toBe('error');
82 expect(vm.statusText).toBe('Need attention');
84 expect(vm.badges).toEqual(
85 expect.arrayContaining([
86 expect.objectContaining({ key: 'critical', icon: 'error', count: 2 }),
87 expect.objectContaining({ key: 'warning', icon: 'warning', count: 3 })
92 it('vm$ should map warning-only -> warning icon and warning badge only', async () => {
93 mockSvc.emitCounts(3, 0, 3);
94 fixture.detectChanges();
96 const vm = await component.vm$.pipe(take(1)).toPromise();
98 expect(vm.total).toBe(3);
99 expect(vm.icon).toBe('warning');
100 expect(vm.statusText).toBe('Need attention');
102 expect(vm.badges).toEqual([{ key: 'warning', icon: 'warning', count: 3 }]);
105 it('template should render border class only on 2nd badge (when both exist)', async () => {
106 mockSvc.emitCounts(10, 1, 2);
107 fixture.detectChanges();
108 await fixture.whenStable();
109 fixture.detectChanges();
111 const badgeEls = Array.from(
112 fixture.nativeElement.querySelectorAll(
113 '.overview-alerts-card-badges .overview-alerts-card-badge'
117 expect(badgeEls.length).toBe(2);
118 expect(badgeEls[0].classList.contains('overview-alerts-card-badge-with-border')).toBe(false);
119 expect(badgeEls[1].classList.contains('overview-alerts-card-badge-with-border')).toBe(true);