Feature: better toast notifications management (#8980)

src-ui/src/app/components/common/toasts/toasts.component.spec.ts

@@ -1,58 +1,33 @@
-import { Clipboard } from '@angular/cdk/clipboard'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
-import {
-  ComponentFixture,
-  TestBed,
-  discardPeriodicTasks,
-  fakeAsync,
-  flush,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { of } from 'rxjs'
-import { ToastService } from 'src/app/services/toast.service'
+import { Subject } from 'rxjs'
+import { Toast, ToastService } from 'src/app/services/toast.service'
 import { ToastsComponent } from './toasts.component'
 
-const toasts = [
-  {
-    content: 'foo bar',
-    delay: 5000,
+const toast = {
+  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' },
   },
-  {
-    content: 'Error 1 content',
-    delay: 5000,
-    error: 'Error 1 string',
-  },
-  {
-    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('ToastsComponent', () => {
   let component: ToastsComponent
   let fixture: ComponentFixture<ToastsComponent>
   let toastService: ToastService
-  let clipboard: Clipboard
+  let toastSubject: Subject<Toast> = new Subject()
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
       imports: [ToastsComponent, NgxBootstrapIconsModule.pick(allIcons)],
       providers: [
-        {
-          provide: ToastService,
-          useValue: {
-            getToasts: () => of(toasts),
-          },
-        },
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
       ],
@@ -60,95 +35,37 @@ describe('ToastsComponent', () => {
 
     fixture = TestBed.createComponent(ToastsComponent)
     toastService = TestBed.inject(ToastService)
-    clipboard = TestBed.inject(Clipboard)
+    jest.replaceProperty(toastService, 'showToast', toastSubject)
 
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
-  it('should call getToasts and return toasts', fakeAsync(() => {
-    const spy = jest.spyOn(toastService, 'getToasts')
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
 
-    component.ngOnInit()
-    fixture.detectChanges()
+  it('should close toast', () => {
+    component.toasts = [toast]
+    const closeToastSpy = jest.spyOn(toastService, 'closeToast')
+    component.closeToast()
+    expect(component.toasts).toEqual([])
+    expect(closeToastSpy).toHaveBeenCalledWith(toast)
+  })
 
-    expect(spy).toHaveBeenCalled()
-    expect(component.toasts).toContainEqual({
-      content: 'foo bar',
-      delay: 5000,
-    })
-
-    component.ngOnDestroy()
-    flush()
-    discardPeriodicTasks()
-  }))
-
-  it('should show a toast', fakeAsync(() => {
-    component.ngOnInit()
-    fixture.detectChanges()
-
-    expect(fixture.nativeElement.textContent).toContain('foo bar')
-
-    component.ngOnDestroy()
-    flush()
-    discardPeriodicTasks()
-  }))
-
-  it('should countdown toast', fakeAsync(() => {
-    component.ngOnInit()
-    fixture.detectChanges()
-    component.onShow(toasts[0])
-    tick(5000)
-    expect(component.toasts[0].delayRemaining).toEqual(0)
-    component.ngOnDestroy()
-    flush()
-    discardPeriodicTasks()
-  }))
-
-  it('should show an error if given with toast', fakeAsync(() => {
-    component.ngOnInit()
-    fixture.detectChanges()
-
-    expect(fixture.nativeElement.querySelector('details')).not.toBeNull()
-    expect(fixture.nativeElement.textContent).toContain('Error 1 content')
-
-    component.ngOnDestroy()
-    flush()
-    discardPeriodicTasks()
-  }))
-
-  it('should show error details, support copy', fakeAsync(() => {
-    component.ngOnInit()
-    fixture.detectChanges()
-
-    expect(fixture.nativeElement.querySelector('details')).not.toBeNull()
-    expect(fixture.nativeElement.textContent).toContain(
-      'Error 2 message details'
+  it('should unsubscribe', () => {
+    const unsubscribeSpy = jest.spyOn(
+      (component as any).subscription,
+      'unsubscribe'
     )
-
-    const copySpy = jest.spyOn(clipboard, 'copy')
-    component.copyError(toasts[2].error)
-    expect(copySpy).toHaveBeenCalled()
-
     component.ngOnDestroy()
-    flush()
-    discardPeriodicTasks()
-  }))
+    expect(unsubscribeSpy).toHaveBeenCalled()
+  })
 
-  it('should parse error text, add ellipsis', () => {
-    expect(component.getErrorText(toasts[2].error)).toEqual(
-      'Error 2 message details'
-    )
-    expect(component.getErrorText({ error: 'Error string no detail' })).toEqual(
-      'Error string no detail'
-    )
-    expect(component.getErrorText('Error string')).toEqual('')
-    expect(
-      component.getErrorText({ error: { message: 'foo error bar' } })
-    ).toContain('{"message":"foo error bar"}')
-    expect(
-      component.getErrorText({ error: new Array(205).join('a') })
-    ).toContain('...')
+  it('should subscribe to toastService', () => {
+    component.ngOnInit()
+    toastSubject.next(toast)
+    expect(component.toasts).toEqual([toast])
   })
 })