Tests

Author: EliasVal

angular.json

@@ -80,7 +80,8 @@
           "options": {
             "runner": "karma",
             "runnerConfig": true,
-            "coverage": true
+            "coverage": true,
+            "coverageExclude": ["src/app/*-toast/**"]
           }
         },
         "lint": {

karma.conf.js

@@ -12,17 +12,21 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
     ],
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
     client: {
       clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/zzz'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true,
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/ngx-toastr'),
+      subdir: '.',
+      includeAllSources: false,
+      reporters: [{ type: 'html' }, { type: 'text-summary' }, { type: 'lcovonly' }],
     },
-    reporters: ['coverage-istanbul', 'progress', 'kjhtml'],
+    reporters: ['progress', 'kjhtml', 'coverage'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

projects/ngx-toastr/src/lib/toastr/toast/toast.component.scss

@@ -4,7 +4,7 @@
   }
 
   &.toast-out {
-    animation: toast-animation var(--animation-duration) var(--animation-easing) reverse;
+    animation: toast-animation var(--animation-duration) var(--animation-easing) reverse forwards;
   }
 }
 

projects/ngx-toastr/src/lib/toastr/toast/toast.component.ts

@@ -1,19 +1,31 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, inject } from '@angular/core';
 import { ToastBase } from '../base-toast/base-toast.component';
 
 @Component({
   selector: '[toast-component]',
   templateUrl: '../base-toast/base-toast.component.html',
   styleUrl: './toast.component.scss',
   host: {
-    '[style.--animation-easing]': 'params().easing',
-    '[style.--animation-duration]': 'params().easeTime + "ms"',
+    '[style.--animation-easing]': 'params.easing',
+    '[style.--animation-duration]': 'params.easeTime + "ms"',
     'animate.enter': 'toast-in',
-    'animate.leave': 'toast-out',
   },
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Toast<ConfigPayload = unknown> extends ToastBase<ConfigPayload> {
-  readonly params = signal({ easeTime: this.toastPackage.config.easeTime, easing: 'ease-in' });
+  readonly params = { easeTime: this.toastPackage.config.easeTime, easing: 'ease-in' };
+  private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  override remove(): void {
+    if (this.state() === 'removed') return;
+
+    clearTimeout(this.timeout);
+    this.state.set('removed');
+    this.elementRef.nativeElement.classList.add('toast-out');
+    this.timeout = this.timeoutsService.setTimeout(
+      () => this.toastrService.remove(this.toastPackage.toastId),
+      +this.params.easeTime,
+    );
+  }
 }

projects/ngx-toastr/src/lib/toastr/toastr-config.ts

@@ -118,7 +118,7 @@ export interface ToastrIconClasses {
  * Global Toast configuration
  * Includes all IndividualConfig
  */
-export interface GlobalConfig extends IndividualConfig {
+export interface GlobalConfig<C = unknown> extends IndividualConfig<C> {
   /**
    * max toasts opened. Toasts will be queued
    * Zero is unlimited

projects/ngx-toastr/src/lib/toastr/toastr.service.ts

@@ -14,6 +14,7 @@ import {
   ToastToken,
   TOAST_CONFIG,
 } from './toastr-config';
+import type { ToastBase } from './base-toast/base-toast.component';
 
 export interface ActiveToast<C> {
   /** Your Toast ID. Use this to close it individually */
@@ -65,13 +66,18 @@ export class ToastrService {
     }
   }
   /** show toast */
-  show<ConfigPayload = unknown>(
+  show<C extends ToastBase = ToastBase, ConfigPayload = unknown>(
     message?: string,
     title?: string,
     override: Partial<IndividualConfig<ConfigPayload>> = {},
     type = '',
   ) {
-    return this._preBuildNotification(type, message, title, this.applyConfig(override));
+    return this._preBuildNotification(
+      type,
+      message,
+      title,
+      this.applyConfig(override),
+    ) as ActiveToast<C> | null;
   }
   /** show successful toast */
   success<ConfigPayload = unknown>(

src/app/app.component.spec.ts

@@ -502,20 +502,24 @@
                 <small>Toast Controls:</small>
               </p>
               <div class="d-flex justify-content-center">
-                <button (click)="openToast()" type="button" class="btn btn-primary btn-block mx-1">
+                <button
+                  (click)="toastManager.openToastAnimation(options, type, { message, title })"
+                  type="button"
+                  class="btn btn-primary btn-block mx-1"
+                >
                   Open Toast
                 </button>
 
                 <button
-                  (click)="clearLastToast()"
+                  (click)="toastManager.clearLastToast()"
                   type="button"
                   class="btn btn-outline-primary btn-block mx-1"
                 >
                   Clear Last Toast
                 </button>
 
                 <button
-                  (click)="clearToasts()"
+                  (click)="toastManager.clearToasts()"
                   type="button"
                   class="btn btn-outline-primary btn-block mx-1"
                 >
@@ -530,23 +534,31 @@
                 <small>Example Custom Toasts:</small>
               </p>
               <button
-                (click)="openToastNoAnimation()"
+                (click)="toastManager.openToastNoAnimation(options, type, { message, title })"
                 type="button"
                 class="btn btn-sm btn-light mx-1"
               >
                 No Animations
               </button>
               <button
-                (click)="openBootstrapToast()"
+                (click)="toastManager.openBootstrapToast(options, { message, title })"
                 type="button"
                 class="btn btn-sm btn-light mx-1"
               >
                 Bootstrap 5's Toast
               </button>
-              <button (click)="openPinkToast()" type="button" class="btn btn-sm btn-pink mx-1">
+              <button
+                (click)="toastManager.openPinkToast(options, { message, title })"
+                type="button"
+                class="btn btn-sm btn-pink mx-1"
+              >
                 Pink
               </button>
-              <button (click)="openNotyf()" type="button" class="btn btn-sm btn-dark mx-1">
+              <button
+                (click)="toastManager.openNotyf(options, { message, title })"
+                type="button"
+                class="btn btn-sm btn-dark mx-1"
+              >
                 Notyf
               </button>
             </div>