Feature: better toast notifications management (#8980)

src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.spec.ts

@@ -0,0 +1,112 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import {
+  ComponentFixture,
+  TestBed,
+  discardPeriodicTasks,
+  fakeAsync,
+  flush,
+} from '@angular/core/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { Subject } from 'rxjs'
+import { Toast, ToastService } from 'src/app/services/toast.service'
+import { ToastsDropdownComponent } from './toasts-dropdown.component'
+
+const toasts = [
+  {
+    id: 'abc-123',
+    content: 'foo bar',
+    delay: 5000,
+  },
+  {
+    id: 'def-123',
+    content: 'Error 1 content',
+    delay: 5000,
+    error: 'Error 1 string',
+  },
+  {
+    id: 'ghi-123',
+    content: 'Error 2 content',
+    delay: 5000,
+    error: {
+      url: 'https://example.com',
+      status: 500,
+      statusText: 'Internal Server Error',
+      message: 'Internal server error 500 message',
+      error: { detail: 'Error 2 message details' },
+    },
+  },
+]
+
+describe('ToastsDropdownComponent', () => {
+  let component: ToastsDropdownComponent
+  let fixture: ComponentFixture<ToastsDropdownComponent>
+  let toastService: ToastService
+  let toastsSubject: Subject<Toast[]> = new Subject()
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        ToastsDropdownComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ToastsDropdownComponent)
+    toastService = TestBed.inject(ToastService)
+    jest.spyOn(toastService, 'getToasts').mockReturnValue(toastsSubject)
+
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should call getToasts and return toasts', fakeAsync(() => {
+    const spy = jest.spyOn(toastService, 'getToasts')
+
+    component.ngOnInit()
+    toastsSubject.next(toasts)
+    fixture.detectChanges()
+
+    expect(spy).toHaveBeenCalled()
+    expect(component.toasts).toContainEqual({
+      id: 'abc-123',
+      content: 'foo bar',
+      delay: 5000,
+    })
+
+    component.ngOnDestroy()
+    flush()
+    discardPeriodicTasks()
+  }))
+
+  it('should show a toast', fakeAsync(() => {
+    component.ngOnInit()
+    toastsSubject.next(toasts)
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.textContent).toContain('foo bar')
+
+    component.ngOnDestroy()
+    flush()
+    discardPeriodicTasks()
+  }))
+
+  it('should toggle suppressPopupToasts', fakeAsync((finish) => {
+    component.ngOnInit()
+    fixture.detectChanges()
+    toastsSubject.next(toasts)
+
+    const spy = jest.spyOn(toastService, 'suppressPopupToasts', 'set')
+    component.onOpenChange(true)
+    expect(spy).toHaveBeenCalledWith(true)
+
+    component.ngOnDestroy()
+    flush()
+    discardPeriodicTasks()
+  }))
+})