feat(components/indicators): add key info component harness (#498)

Author: Blackbaud-CoreyArcher

libs/components/indicators/src/index.ts

@@ -11,6 +11,7 @@ export * from './lib/modules/icon/icon.module';
 export * from './lib/modules/icon/types/icon-type';
 export * from './lib/modules/icon/types/icon-variant-type';
 
+export * from './lib/modules/key-info/key-info-layout-type';
 export * from './lib/modules/key-info/key-info.module';
 
 export * from './lib/modules/label/label-type';

libs/components/indicators/src/lib/modules/key-info/key-info-layout-type.ts

@@ -0,0 +1 @@
+export type SkyKeyInfoLayoutType = 'horizontal' | 'vertical';

libs/components/indicators/src/lib/modules/key-info/key-info.component.ts

@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
 
+import { SkyKeyInfoLayoutType } from './key-info-layout-type';
+
 @Component({
   selector: 'sky-key-info',
   templateUrl: './key-info.component.html',
@@ -13,5 +15,5 @@ export class SkyKeyInfoComponent {
    */
   // TODO: More strongly type this in a future breaking change.
   @Input()
-  public layout: string | undefined = 'vertical';
+  public layout: SkyKeyInfoLayoutType | string | undefined = 'vertical';
 }

libs/components/indicators/testing/src/key-info/fixtures/key-info-harness-test.component.html

@@ -0,0 +1,8 @@
+<sky-key-info data-sky-id="vertical-key-info">
+  <sky-key-info-value>100</sky-key-info-value>
+  <sky-key-info-label>Vertical label</sky-key-info-label>
+</sky-key-info>
+<sky-key-info [layout]="horizontalLayout" data-sky-id="horizontal-key-info">
+  <sky-key-info-value>200</sky-key-info-value>
+  <sky-key-info-label>Horizontal label</sky-key-info-label>
+</sky-key-info>

libs/components/indicators/testing/src/key-info/fixtures/key-info-harness-test.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { SkyKeyInfoLayoutType } from '@skyux/indicators';
+
+@Component({
+  selector: 'sky-test-key-info',
+  templateUrl: './key-info-harness-test.component.html',
+})
+export class KeyInfoHarnessTestComponent {
+  public horizontalLayout: SkyKeyInfoLayoutType = 'horizontal';
+}

libs/components/indicators/testing/src/key-info/fixtures/key-info-harness-test.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SkyKeyInfoModule } from '@skyux/indicators';
+
+import { KeyInfoHarnessTestComponent } from './key-info-harness-test.component';
+
+@NgModule({
+  declarations: [KeyInfoHarnessTestComponent],
+  imports: [CommonModule, SkyKeyInfoModule],
+  exports: [KeyInfoHarnessTestComponent],
+})
+export class KeyInfoHarnessTestModule {}

libs/components/indicators/testing/src/key-info/key-info-harness-filters.ts

@@ -0,0 +1,8 @@
+import { SkyHarnessFilters } from '@skyux/core/testing';
+
+/**
+ * A set of criteria that can be used to filter a list of SkyKeyInfoHarness instances.
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SkyKeyInfoHarnessFilters extends SkyHarnessFilters {}

libs/components/indicators/testing/src/key-info/key-info-harness.spec.ts

@@ -0,0 +1,49 @@
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { TestBed } from '@angular/core/testing';
+
+import { KeyInfoHarnessTestComponent } from './fixtures/key-info-harness-test.component';
+import { KeyInfoHarnessTestModule } from './fixtures/key-info-harness-test.module';
+import { SkyKeyInfoHarness } from './key-info-harness';
+
+describe('Key Info harness', () => {
+  async function setupTest(options: { dataSkyId?: string } = {}) {
+    const fixture = TestBed.createComponent(KeyInfoHarnessTestComponent);
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+
+    const keyInfoHarness = await loader.getHarness(
+      SkyKeyInfoHarness.with({ dataSkyId: options.dataSkyId })
+    );
+
+    return { fixture, keyInfoHarness };
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [KeyInfoHarnessTestModule],
+    });
+  });
+
+  it('should return properties for a horizontal layout', async () => {
+    const { keyInfoHarness } = await setupTest({
+      dataSkyId: 'horizontal-key-info',
+    });
+
+    await expectAsync(keyInfoHarness.getLayout()).toBeResolvedTo('horizontal');
+    await expectAsync(keyInfoHarness.getValueText()).toBeResolvedTo('200');
+    await expectAsync(keyInfoHarness.getLabelText()).toBeResolvedTo(
+      'Horizontal label'
+    );
+  });
+
+  it('should return properties for a vertical layout', async () => {
+    const { keyInfoHarness } = await setupTest({
+      dataSkyId: 'vertical-key-info',
+    });
+
+    await expectAsync(keyInfoHarness.getLayout()).toBeResolvedTo('vertical');
+    await expectAsync(keyInfoHarness.getValueText()).toBeResolvedTo('100');
+    await expectAsync(keyInfoHarness.getLabelText()).toBeResolvedTo(
+      'Vertical label'
+    );
+  });
+});

libs/components/indicators/testing/src/key-info/key-info-harness.ts

@@ -0,0 +1,54 @@
+import { HarnessPredicate } from '@angular/cdk/testing';
+import { SkyComponentHarness } from '@skyux/core/testing';
+import { SkyKeyInfoLayoutType } from '@skyux/indicators';
+
+import { SkyKeyInfoHarnessFilters } from './key-info-harness-filters';
+import { SkyKeyInfoLabelHarness } from './key-info-label-harness';
+import { SkyKeyInfoValueHarness } from './key-info-value-harness';
+
+/**
+ * Harness for interacting with a key info component in tests.
+ * @internal
+ */
+export class SkyKeyInfoHarness extends SkyComponentHarness {
+  public static hostSelector = 'sky-key-info';
+
+  #getLabel = this.locatorFor(SkyKeyInfoLabelHarness);
+  #getValue = this.locatorFor(SkyKeyInfoValueHarness);
+  #getWrapper = this.locatorFor('.sky-key-info');
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a
+   * `SkyKeyInfoHarness` that meets certain criteria.
+   */
+  public static with(
+    filters: SkyKeyInfoHarnessFilters
+  ): HarnessPredicate<SkyKeyInfoHarness> {
+    return SkyKeyInfoHarness.getDataSkyIdPredicate(filters);
+  }
+
+  /**
+   * Gets the current value text.
+   */
+  public async getValueText(): Promise<string> {
+    return await (await this.#getValue()).getText();
+  }
+
+  /**
+   * Gets the current label text.
+   */
+  public async getLabelText(): Promise<string> {
+    return await (await this.#getLabel()).getText();
+  }
+
+  /**
+   * Gets the current layout type.
+   */
+  public async getLayout(): Promise<SkyKeyInfoLayoutType> {
+    return (await (
+      await this.#getWrapper()
+    ).hasClass('sky-key-info-horizontal'))
+      ? 'horizontal'
+      : 'vertical';
+  }
+}

libs/components/indicators/testing/src/key-info/key-info-label-harness.ts

@@ -0,0 +1,16 @@
+import { SkyComponentHarness } from '@skyux/core/testing';
+
+/**
+ * Harness for interacting with a key info label component in tests.
+ * @internal
+ */
+export class SkyKeyInfoLabelHarness extends SkyComponentHarness {
+  public static hostSelector = 'sky-key-info-label';
+
+  /**
+   * Gets the text value of the component content.
+   */
+  public async getText(): Promise<string> {
+    return (await this.host()).text();
+  }
+}