feat(components/indicators): update alert test harness with accessibility functions (#500)

Author: Blackbaud-ErikaMcVey

libs/components/indicators/testing/src/alert/alert-harness.spec.ts

@@ -1,7 +1,11 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { SkyAlertModule, SkyIndicatorIconType } from '@skyux/indicators';
+import {
+  SkyAlertModule,
+  SkyIndicatorDescriptionType,
+  SkyIndicatorIconType,
+} from '@skyux/indicators';
 
 import { SkyAlertHarness } from './alert-harness';
 
@@ -13,6 +17,8 @@ import { SkyAlertHarness } from './alert-harness';
       [alertType]="alertType"
       [closeable]="closeable"
       [closed]="closed"
+      [customDescription]="customDescription"
+      [descriptionType]="descriptionType"
       (closedChange)="closedChange()"
       data-sky-id="test-alert"
     >
@@ -28,6 +34,10 @@ class TestComponent {
 
   public closed = false;
 
+  public customDescription: string;
+
+  public descriptionType: SkyIndicatorDescriptionType;
+
   public closedChange() {
     // Only exists for the spy.
   }
@@ -44,6 +54,21 @@ async function validateAlertType(
   await expectAsync(alertHarness.getAlertType()).toBeResolvedTo(alertType);
 }
 
+async function validateDescriptionType(
+  alertHarness: SkyAlertHarness,
+  fixture: ComponentFixture<TestComponent>,
+  descriptionType: SkyIndicatorDescriptionType,
+  customDescription?: string
+) {
+  fixture.componentInstance.descriptionType = descriptionType;
+  fixture.componentInstance.customDescription = customDescription;
+  fixture.detectChanges();
+
+  const componentDesciptionType = await alertHarness.getDescriptionType();
+
+  expect(componentDesciptionType).toEqual(descriptionType);
+}
+
 describe('Alert harness', () => {
   async function setupTest(options: { dataSkyId?: string } = {}) {
     await TestBed.configureTestingModule({
@@ -116,6 +141,52 @@ describe('Alert harness', () => {
     await validateAlertType(alertHarness, fixture, 'warning');
   });
 
+  it('should return the expected description type', async () => {
+    const { alertHarness, fixture } = await setupTest();
+    await validateDescriptionType(alertHarness, fixture, 'attention');
+    await validateDescriptionType(alertHarness, fixture, 'caution');
+    await validateDescriptionType(alertHarness, fixture, 'completed');
+    await validateDescriptionType(alertHarness, fixture, 'danger');
+    await validateDescriptionType(alertHarness, fixture, 'error');
+    await validateDescriptionType(alertHarness, fixture, 'important-info');
+    await validateDescriptionType(alertHarness, fixture, 'important-warning');
+    await validateDescriptionType(alertHarness, fixture, 'success');
+    await validateDescriptionType(alertHarness, fixture, 'warning');
+    await validateDescriptionType(alertHarness, fixture, 'none');
+    await validateDescriptionType(
+      alertHarness,
+      fixture,
+      'custom',
+      'custom text'
+    );
+  });
+
+  it('should return the custom description when `descriptionType` is custom', async () => {
+    const { fixture, alertHarness } = await setupTest();
+    const description = 'Custom description:';
+
+    fixture.componentInstance.descriptionType = 'custom';
+    fixture.componentInstance.customDescription = description;
+
+    fixture.detectChanges();
+
+    const componentDesciption = await alertHarness.getCustomDescription();
+
+    expect(componentDesciption).toEqual(description);
+  });
+
+  it('should return an empty string when `descriptionType` is not custom', async () => {
+    const { fixture, alertHarness } = await setupTest();
+
+    fixture.componentInstance.descriptionType = 'attention';
+
+    fixture.detectChanges();
+
+    const componentDesciption = await alertHarness.getCustomDescription();
+
+    expect(componentDesciption).toEqual('');
+  });
+
   it('should return the expected text', async () => {
     const { alertHarness } = await setupTest();
     await expectAsync(alertHarness.getText()).toBeResolvedTo(

libs/components/indicators/testing/src/alert/alert-harness.ts

@@ -1,6 +1,9 @@
 import { HarnessPredicate } from '@angular/cdk/testing';
 import { SkyComponentHarness } from '@skyux/core/testing';
-import { SkyIndicatorIconType } from '@skyux/indicators';
+import type {
+  SkyIndicatorDescriptionType,
+  SkyIndicatorIconType,
+} from '@skyux/indicators';
 
 import { SkyAlertHarnessFilters } from './alert-harness-filters';
 
@@ -13,6 +16,7 @@ export class SkyAlertHarness extends SkyComponentHarness {
   #getAlert = this.locatorFor('.sky-alert');
   #getContent = this.locatorFor('.sky-alert-content');
   #getCloseButton = this.locatorFor('.sky-alert-close');
+  #getScreenReaderTextEl = this.locatorForOptional('.sky-screen-reader-only');
 
   /**
    * Gets a `HarnessPredicate` that can be used to search for a
@@ -42,11 +46,7 @@ export class SkyAlertHarness extends SkyComponentHarness {
       return 'success';
     }
 
-    if (await alert.hasClass('sky-alert-warning')) {
-      return 'warning';
-    }
-
-    return undefined;
+    return 'warning';
   }
 
   /**
@@ -83,4 +83,57 @@ export class SkyAlertHarness extends SkyComponentHarness {
     const closeBtn = await this.#getCloseButton();
     return !(await closeBtn.getProperty('hidden'));
   }
+
+  /**
+   * Gets the `descriptionType` of the label component.
+   */
+  public async getDescriptionType(): Promise<SkyIndicatorDescriptionType> {
+    const srEl = await this.#getScreenReaderTextEl();
+
+    if (!srEl) {
+      return 'none';
+    }
+
+    const srText = await srEl.text();
+
+    switch (srText) {
+      case 'Attention:':
+        return 'attention';
+      case 'Caution:':
+        return 'caution';
+      case 'Completed:':
+        return 'completed';
+      case 'Danger:':
+        return 'danger';
+      case 'Error:':
+        return 'error';
+      case 'Important information:':
+        return 'important-info';
+      case 'Important warning:':
+        return 'important-warning';
+      case 'Success:':
+        return 'success';
+      case 'Warning:':
+        return 'warning';
+      default:
+        return 'custom';
+    }
+  }
+
+  /**
+   * Gets the custom text used for the screen reader description of the label component icon.
+   */
+  public async getCustomDescription(): Promise<string> {
+    const descriptionType = await this.getDescriptionType();
+
+    if (descriptionType === 'custom') {
+      const srEl = await this.#getScreenReaderTextEl();
+
+      if (srEl) {
+        return await srEl.text();
+      }
+    }
+
+    return '';
+  }
 }

libs/components/indicators/testing/src/label/label-harness.spec.ts

@@ -124,9 +124,9 @@ describe('Label harness', () => {
 
       fixture.detectChanges();
 
-      const componentDesciptionType = await labelHarness.getCustomDescription();
+      const componentDesciption = await labelHarness.getCustomDescription();
 
-      expect(componentDesciptionType).toEqual(description);
+      expect(componentDesciption).toEqual(description);
     });
 
     it('should return an empty string when `descriptionType` is not custom', async () => {