feat(components/toast): add toast and toaster harness (#3141) (#3147)

🍒 cherry pick from [#3141](#3141)


[AB#2195574](https://dev.azure.com/blackbaud/Products/_boards/board/t/SKY%20UX%20Program/Stories/?workitem=2195574)

---------

Co-authored-by: Sandhya Adhirvuh <[email protected]>

apps/code-examples/src/app/code-examples/toast/toast/basic/demo.component.spec.ts

@@ -0,0 +1,58 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SkyToastType } from '@skyux/toast';
+import { SkyToasterHarness } from '@skyux/toast/testing';
+
+import { DemoComponent } from './demo.component';
+
+describe('Basic toast demo', () => {
+  let fixture: ComponentFixture<DemoComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [DemoComponent, NoopAnimationsModule],
+    });
+
+    fixture = TestBed.createComponent(DemoComponent);
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+  });
+
+  async function setupTest(): Promise<{
+    toasterHarness: SkyToasterHarness;
+  }> {
+    fixture.componentInstance.openToast();
+    fixture.detectChanges();
+
+    const toasterHarness: SkyToasterHarness =
+      await loader.getHarness(SkyToasterHarness);
+
+    return { toasterHarness };
+  }
+
+  it('should open success toasts', async () => {
+    const { toasterHarness } = await setupTest();
+
+    fixture.componentInstance.openToast();
+    fixture.detectChanges();
+
+    await expectAsync(toasterHarness.getNumberOfToasts()).toBeResolvedTo(2);
+
+    const toast = await toasterHarness.getToastByMessage(
+      'This is a sample toast message.',
+    );
+
+    await expectAsync(toast.getType()).toBeResolvedTo(SkyToastType.Success);
+  });
+
+  it('should close all toasts', async () => {
+    fixture.componentInstance.openToast();
+    fixture.detectChanges();
+    fixture.componentInstance.closeAll();
+    fixture.detectChanges();
+
+    await expectAsync(loader.getHarness(SkyToasterHarness)).toBeRejected();
+  });
+});

apps/code-examples/src/app/code-examples/toast/toast/basic/demo.component.ts

@@ -9,13 +9,13 @@ import { SkyToastService, SkyToastType } from '@skyux/toast';
 export class DemoComponent {
   readonly #toastSvc = inject(SkyToastService);
 
-  protected openToast(): void {
+  public openToast(): void {
     this.#toastSvc.openMessage('This is a sample toast message.', {
       type: SkyToastType.Success,
     });
   }
 
-  protected closeAll(): void {
+  public closeAll(): void {
     this.#toastSvc.closeAll();
   }
 }

apps/code-examples/src/app/code-examples/toast/toast/custom-component/custom-toast-harness.ts

@@ -0,0 +1,9 @@
+import { ComponentHarness } from '@angular/cdk/testing';
+
+export class CustomToastHarness extends ComponentHarness {
+  public static hostSelector = 'app-toast-content-demo';
+
+  public async getText(): Promise<string> {
+    return await (await this.host()).text();
+  }
+}

apps/code-examples/src/app/code-examples/toast/toast/custom-component/demo.component.spec.ts

@@ -0,0 +1,56 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SkyToastType } from '@skyux/toast';
+import { SkyToasterHarness } from '@skyux/toast/testing';
+
+import { CustomToastHarness } from './custom-toast-harness';
+import { DemoComponent } from './demo.component';
+
+describe('Custom component toast demo', () => {
+  let fixture: ComponentFixture<DemoComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [DemoComponent, NoopAnimationsModule],
+    });
+
+    fixture = TestBed.createComponent(DemoComponent);
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+  });
+
+  async function setupTest(): Promise<{
+    toasterHarness: SkyToasterHarness;
+  }> {
+    fixture.componentInstance.openToast();
+    fixture.detectChanges();
+
+    const toasterHarness: SkyToasterHarness =
+      await loader.getHarness(SkyToasterHarness);
+
+    return { toasterHarness };
+  }
+
+  it('should open custom component in toast', async () => {
+    const { toasterHarness } = await setupTest();
+
+    const toasts = await toasterHarness.getToasts();
+    const customHarness = await toasts[0].queryHarness(CustomToastHarness);
+
+    await expectAsync(toasts[0].getType()).toBeResolvedTo(SkyToastType.Success);
+    await expectAsync(customHarness.getText()).toBeResolvedTo(
+      'Custom message: This toast has embedded a custom component for its content.',
+    );
+  });
+
+  it('should close all toasts', async () => {
+    fixture.componentInstance.openToast();
+    fixture.detectChanges();
+    fixture.componentInstance.closeAll();
+    fixture.detectChanges();
+
+    await expectAsync(loader.getHarness(SkyToasterHarness)).toBeRejected();
+  });
+});

apps/code-examples/src/app/code-examples/toast/toast/custom-component/demo.component.ts

@@ -12,7 +12,7 @@ import { CustomToastComponent } from './custom-toast.component';
 export class DemoComponent {
   readonly #toastSvc = inject(SkyToastService);
 
-  protected openToast(): void {
+  public openToast(): void {
     const context = new CustomToastContext(
       'This toast has embedded a custom component for its content.',
     );
@@ -31,7 +31,7 @@ export class DemoComponent {
     );
   }
 
-  protected closeAll(): void {
+  public closeAll(): void {
     this.#toastSvc.closeAll();
   }
 }

libs/components/code-examples/src/lib/modules/toast/toast/basic/example.component.spec.ts

@@ -0,0 +1,58 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SkyToastType } from '@skyux/toast';
+import { SkyToasterHarness } from '@skyux/toast/testing';
+
+import { ToastBasicExampleComponent } from './example.component';
+
+describe('Basic toast example', () => {
+  let fixture: ComponentFixture<ToastBasicExampleComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ToastBasicExampleComponent, NoopAnimationsModule],
+    });
+
+    fixture = TestBed.createComponent(ToastBasicExampleComponent);
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+  });
+
+  async function setupTest(): Promise<{
+    toasterHarness: SkyToasterHarness;
+  }> {
+    fixture.componentInstance.openToast();
+    fixture.detectChanges();
+
+    const toasterHarness: SkyToasterHarness =
+      await loader.getHarness(SkyToasterHarness);
+
+    return { toasterHarness };
+  }
+
+  it('should open success toasts', async () => {
+    const { toasterHarness } = await setupTest();
+
+    fixture.componentInstance.openToast();
+    fixture.detectChanges();
+
+    await expectAsync(toasterHarness.getNumberOfToasts()).toBeResolvedTo(2);
+
+    const toast = await toasterHarness.getToastByMessage(
+      'This is a sample toast message.',
+    );
+
+    await expectAsync(toast.getType()).toBeResolvedTo(SkyToastType.Success);
+  });
+
+  it('should close all toasts', async () => {
+    fixture.componentInstance.openToast();
+    fixture.detectChanges();
+    fixture.componentInstance.closeAll();
+    fixture.detectChanges();
+
+    await expectAsync(loader.getHarness(SkyToasterHarness)).toBeRejected();
+  });
+});

libs/components/code-examples/src/lib/modules/toast/toast/basic/example.component.ts

@@ -9,13 +9,13 @@ import { SkyToastService, SkyToastType } from '@skyux/toast';
 export class ToastBasicExampleComponent {
   readonly #toastSvc = inject(SkyToastService);
 
-  protected openToast(): void {
+  public openToast(): void {
     this.#toastSvc.openMessage('This is a sample toast message.', {
       type: SkyToastType.Success,
     });
   }
 
-  protected closeAll(): void {
+  public closeAll(): void {
     this.#toastSvc.closeAll();
   }
 }

libs/components/code-examples/src/lib/modules/toast/toast/custom-component/custom-toast-harness.ts

@@ -0,0 +1,9 @@
+import { ComponentHarness } from '@angular/cdk/testing';
+
+export class CustomToastHarness extends ComponentHarness {
+  public static hostSelector = 'app-toast-content-example';
+
+  public async getText(): Promise<string> {
+    return await (await this.host()).text();
+  }
+}

libs/components/code-examples/src/lib/modules/toast/toast/custom-component/example.component.spec.ts

@@ -0,0 +1,56 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { SkyToastType } from '@skyux/toast';
+import { SkyToasterHarness } from '@skyux/toast/testing';
+
+import { CustomToastHarness } from './custom-toast-harness';
+import { ToastCustomComponentExampleComponent } from './example.component';
+
+describe('Custom component toast demo', () => {
+  let fixture: ComponentFixture<ToastCustomComponentExampleComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ToastCustomComponentExampleComponent, NoopAnimationsModule],
+    });
+
+    fixture = TestBed.createComponent(ToastCustomComponentExampleComponent);
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+  });
+
+  async function setupTest(): Promise<{
+    toasterHarness: SkyToasterHarness;
+  }> {
+    fixture.componentInstance.openToast();
+    fixture.detectChanges();
+
+    const toasterHarness: SkyToasterHarness =
+      await loader.getHarness(SkyToasterHarness);
+
+    return { toasterHarness };
+  }
+
+  it('should open custom component in toast', async () => {
+    const { toasterHarness } = await setupTest();
+
+    const toasts = await toasterHarness.getToasts();
+    const customHarness = await toasts[0].queryHarness(CustomToastHarness);
+
+    await expectAsync(toasts[0].getType()).toBeResolvedTo(SkyToastType.Success);
+    await expectAsync(customHarness.getText()).toBeResolvedTo(
+      'Custom message: This toast has embedded a custom component for its content.',
+    );
+  });
+
+  it('should close all toasts', async () => {
+    fixture.componentInstance.openToast();
+    fixture.detectChanges();
+    fixture.componentInstance.closeAll();
+    fixture.detectChanges();
+
+    await expectAsync(loader.getHarness(SkyToasterHarness)).toBeRejected();
+  });
+});

libs/components/code-examples/src/lib/modules/toast/toast/custom-component/example.component.ts

@@ -12,7 +12,7 @@ import { CustomToastComponent } from './custom-toast.component';
 export class ToastCustomComponentExampleComponent {
   readonly #toastSvc = inject(SkyToastService);
 
-  protected openToast(): void {
+  public openToast(): void {
     const context = new CustomToastContext(
       'This toast has embedded a custom component for its content.',
     );
@@ -31,7 +31,7 @@ export class ToastCustomComponentExampleComponent {
     );
   }
 
-  protected closeAll(): void {
+  public closeAll(): void {
     this.#toastSvc.closeAll();
   }
 }

libs/components/core/testing/src/modules/overlay/overlay-harness-filters.ts

@@ -1,8 +1,8 @@
-import { SkyHarnessFilters } from '../../shared/harness-filters';
+import { BaseHarnessFilters } from '@angular/cdk/testing';
 
 /**
  * A set of criteria that can be used to filter a list of SkyOverlayHarness instances.
  * @internal
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-empty-object-type
-export interface SkyOverlayHarnessFilters extends SkyHarnessFilters {}
+export interface SkyOverlayHarnessFilters extends BaseHarnessFilters {}

libs/components/toast/package.json

@@ -17,6 +17,7 @@
   "homepage": "https://github.com/blackbaud/skyux#readme",
   "peerDependencies": {
     "@angular/animations": "^19.0.5",
+    "@angular/cdk": "^19.0.4",
     "@angular/common": "^19.0.5",
     "@angular/core": "^19.0.5",
     "@angular/platform-browser": "^19.0.5",

libs/components/toast/project.json

@@ -24,7 +24,7 @@
       "dependsOn": [
         "^build",
         {
-          "projects": ["testing"],
+          "projects": ["core", "testing"],
           "target": "build"
         }
       ],

libs/components/toast/src/lib/modules/toast/types/toast-config.ts

@@ -8,7 +8,7 @@ import { SkyToastType } from './toast-type';
  */
 export interface SkyToastConfig {
   /**
-   * The `SkyToastType` type that determines the color and icon for the toast. This property defaults to `SkyToastType.Info`.
+   * The `SkyToastType` type that determines the color and icon for the toast. This property defaults to `Info`.
    */
   type?: SkyToastType;
 

libs/components/toast/testing/src/modules/toast-harness-filters.ts

@@ -0,0 +1,12 @@
+import { BaseHarnessFilters } from '@angular/cdk/testing';
+
+/**
+ * A set of criteria that can be used to filter a list of `SkyToastHarness` instances.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-empty-object-type
+export interface SkyToastHarnessFilters extends BaseHarnessFilters {
+  /**
+   * Finds toasts with the matching text.
+   */
+  message?: string;
+}