Merge pull request #775 from wearefrank/fix/detailed-toast

Fix: detailed toast

src/app/shared/components/toast/toast.component.html

@@ -5,6 +5,7 @@
       <ngb-toast class="fade animate-show animate-hide position-relative" [ngClass]="'bg-' + toast.type"
                  [autohide]="toast.type !== 'danger'"
                  [delay]="toast.type === 'info' || toast.type ==='success' ? 3000 : toast.type ==='warning' ? 8000 : 0"
+                 (click)="toast.detailed ? showDetailedErrorMessages(toast) : null"
                  (hidden)="close(toast)">
         <i class="fa fa-close close-icon" (click)="close(toast)"></i>
         <div class="d-flex flex-row align-items-center">
@@ -23,31 +24,31 @@
             }
           }
           <div class="ml-2 mr-4">{{ toast.message }}</div>
-          @if (toast.detailed) {
-            <span>
-              <br>
-              <i>Click to see a more detailed description</i>
-            </span>
-          }
           @if (toast.toastCallback) {
             <button class="btn btn-info" (click)="toast.toastCallback.callback()">{{ toast.toastCallback.buttonText }}</button>
           }
         </div>
+        @if (toast.detailed) {
+          <span>
+              <br>
+              <i>Click to see a more detailed description</i>
+            </span>
+        }
       </ngb-toast>
     </div>
   }
 </div>
 
 <ng-template #modal let-modal>
   <div class="modal-header">
-    <h5 class="modal-title" id="settingsModal">{{ selectedAlert.message }}</h5>
+    <h5 class="modal-title" id="settingsModal">{{ selected.message }}</h5>
   </div>
   <div class="modal-body text-wrap" id="detailedErrorMessage">
-    {{ selectedAlert.detailed }}
+    {{ selected.detailed }}
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-info" id="CopyToClipboard" title="Copy to Clipboard"
-            [cdkCopyToClipboard]="selectedAlert.detailed ?? ''"
+            [cdkCopyToClipboard]="selected.detailed ?? ''"
             (click)="copyToClipboard()">{{ this.justCopied ? 'Copied!' : 'Copy to clipboard' }}
     </button>
     <button type="button" class="btn btn-info" (click)="modal.dismiss();">Dismiss</button>

src/app/shared/components/toast/toast.component.spec.ts

@@ -1,14 +1,36 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ToastComponent } from './toast.component';
+import { ToastService } from '../../services/toast.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { of } from 'rxjs';
+import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Toast } from '../../interfaces/toast';
+import { By } from '@angular/platform-browser';
 
 describe('ToastComponent', () => {
   let component: ToastComponent;
   let fixture: ComponentFixture<ToastComponent>;
+  let mockToastService: jasmine.SpyObj<ToastService>;
+  let mockNgbModal: jasmine.SpyObj<NgbModal>;
 
   beforeEach(async () => {
+    mockToastService = jasmine.createSpyObj('ToastService', ['toastObservable']);
+    mockToastService.toastObservable = of({
+      title: 'Test Toast',
+      message: 'Detailed error message',
+      detailed: 'Detailed error message',
+      type: 'danger',
+    } as Toast);
+
+    mockNgbModal = jasmine.createSpyObj('NgbModal', ['open']);
+
     await TestBed.configureTestingModule({
       imports: [ToastComponent],
+      providers: [
+        { provide: ToastService, useValue: mockToastService },
+        { provide: NgbModal, useValue: mockNgbModal },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   });
 
@@ -18,7 +40,13 @@ describe('ToastComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should open modal when a toast with detailed message is clicked', () => {
+    const toastDebugElement: DebugElement = fixture.debugElement.query(By.css('ngb-toast'));
+
+    // Simulate click on the toast item
+    toastDebugElement.triggerEventHandler('click', null);
+
+    // Assert that the modal opens and the selectedAlert is set correctly
+    expect(mockNgbModal.open).toHaveBeenCalledWith(component.modal, { size: 'lg' });
   });
 });

src/app/shared/components/toast/toast.component.ts

@@ -14,9 +14,10 @@ import { NgClass } from '@angular/common';
   imports: [NgbToast, ClipboardModule, NgClass],
 })
 export class ToastComponent implements OnInit, OnDestroy {
-  toastSubscription!: Subscription;
-  selectedAlert!: Toast;
   @ViewChild('modal') modal!: TemplateRef<Element>;
+  toastSubscription!: Subscription;
+  selected!: Toast;
+
   toasts: Toast[] = [];
   justCopied: boolean = false;
 
@@ -42,7 +43,7 @@ export class ToastComponent implements OnInit, OnDestroy {
   }
 
   showDetailedErrorMessages(alert: Toast): void {
-    this.selectedAlert = alert;
+    this.selected = alert;
     this.modalService.open(this.modal, { size: 'lg' });
   }