feat(components/lookup): add test harnesses to country field (#2822)

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

@@ -4,7 +4,7 @@ import { SkyAutocompleteHarness } from '@skyux/lookup/testing';
 
 import { DemoComponent } from './demo.component';
 
-describe('Basic colorpicker demo', () => {
+describe('Basic autocomplete demo', () => {
   async function setupTest(options: { dataSkyId: string }): Promise<{
     harness: SkyAutocompleteHarness;
     fixture: ComponentFixture<DemoComponent>;

apps/code-examples/src/app/code-examples/lookup/country-field/basic/demo.component.html

@@ -1,5 +1,6 @@
 <form [formGroup]="countryForm">
   <sky-input-box
+    data-sky-id="country-field"
     hintText="If you have multiple countries, choose your primary country."
     labelText="Country"
     [helpPopoverContent]="helpPopoverContent"

apps/code-examples/src/app/code-examples/lookup/country-field/basic/demo.component.spec.ts

@@ -0,0 +1,56 @@
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SkyInputBoxHarness } from '@skyux/forms/testing';
+import { SkyCountryFieldHarness } from '@skyux/lookup/testing';
+
+import { DemoComponent } from './demo.component';
+
+describe('Basic country field demo', () => {
+  async function setupTest(options: { dataSkyId: string }): Promise<{
+    harness: SkyCountryFieldHarness;
+    fixture: ComponentFixture<DemoComponent>;
+  }> {
+    const fixture = TestBed.createComponent(DemoComponent);
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+
+    const harness = await (
+      await loader.getHarness(
+        SkyInputBoxHarness.with({ dataSkyId: options.dataSkyId }),
+      )
+    ).queryHarness(SkyCountryFieldHarness);
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    return { harness, fixture };
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [DemoComponent],
+    });
+  });
+
+  it('should set up country field input', async () => {
+    const { harness, fixture } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    await harness.focus();
+    await harness.enterText('ger');
+
+    const searchResultsText = await harness.getSearchResultsText();
+
+    expect(searchResultsText.length).toBe(4);
+
+    await harness.clear();
+    await harness.enterText('can');
+
+    const searchResults = await harness.getSearchResults();
+    await expectAsync(searchResults[1].getText()).toBeResolvedTo('Canada');
+
+    await searchResults[1].select();
+    const value = fixture.componentInstance.countryForm.get('country')?.value;
+    expect(value?.name).toBe('Canada');
+  });
+});

apps/code-examples/src/app/code-examples/lookup/country-field/basic/demo.component.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import {
   AbstractControl,
+  FormBuilder,
   FormControl,
   FormGroup,
   FormsModule,
@@ -34,11 +35,13 @@ function validateCountry(
 })
 export class DemoComponent {
   protected countryControl: FormControl<SkyCountryFieldCountry | undefined>;
-  protected countryForm: FormGroup<DemoForm>;
+  public countryForm: FormGroup<DemoForm>;
 
   protected helpPopoverContent =
     'We use the country to validate your passport within 10 business days. You can update it at any time.';
 
+  #formBuilder = inject(FormBuilder);
+
   constructor() {
     this.countryControl = new FormControl(
       {
@@ -51,7 +54,7 @@ export class DemoComponent {
       },
     );
 
-    this.countryForm = new FormGroup({
+    this.countryForm = this.#formBuilder.group({
       country: this.countryControl,
     });
   }

libs/components/lookup/testing/src/country-field/country-field-harness-filters.ts

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

libs/components/lookup/testing/src/country-field/country-field-harness.spec.ts

@@ -0,0 +1,183 @@
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SkyCountryFieldHarness } from './country-field-harness';
+import { CountryFieldHarnessTestComponent } from './fixtures/country-field-harness-test.component';
+
+describe('Country field harness', () => {
+  async function setupTest(options: { dataSkyId?: string } = {}): Promise<{
+    countryFieldHarness: SkyCountryFieldHarness;
+    fixture: ComponentFixture<CountryFieldHarnessTestComponent>;
+    loader: HarnessLoader;
+  }> {
+    await TestBed.configureTestingModule({
+      imports: [CountryFieldHarnessTestComponent],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(CountryFieldHarnessTestComponent);
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+
+    let countryFieldHarness: SkyCountryFieldHarness | undefined;
+    if (options.dataSkyId) {
+      countryFieldHarness = await loader.getHarness(
+        SkyCountryFieldHarness.with({ dataSkyId: options.dataSkyId }),
+      );
+    }
+
+    return { countryFieldHarness, fixture, loader };
+  }
+
+  it('should focus and blur input', async () => {
+    const { countryFieldHarness } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    await expectAsync(countryFieldHarness?.isFocused()).toBeResolvedTo(false);
+
+    await countryFieldHarness?.focus();
+    await expectAsync(countryFieldHarness?.isFocused()).toBeResolvedTo(true);
+
+    await countryFieldHarness?.blur();
+    await expectAsync(countryFieldHarness?.isFocused()).toBeResolvedTo(false);
+  });
+
+  it('should check if country field is disabled', async () => {
+    const { fixture, countryFieldHarness } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    await expectAsync(countryFieldHarness?.isDisabled()).toBeResolvedTo(false);
+
+    fixture.componentInstance.disableForm();
+
+    await expectAsync(countryFieldHarness?.isDisabled()).toBeResolvedTo(true);
+  });
+
+  it('should check if country field is open', async () => {
+    const { countryFieldHarness } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    await countryFieldHarness?.enterText('gr');
+
+    await expectAsync(countryFieldHarness?.isOpen()).toBeResolvedTo(true);
+  });
+
+  it('should return search result harnesses', async () => {
+    const { countryFieldHarness } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    await countryFieldHarness?.enterText('gr');
+
+    const results = (await countryFieldHarness?.getSearchResults()) ?? [];
+
+    await expectAsync(results[0].getDescriptorValue()).toBeResolvedTo('Greece');
+    await expectAsync(results[0].getText()).toBeResolvedTo('Greece');
+  });
+
+  it('should return search results text content', async () => {
+    const { countryFieldHarness } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    await countryFieldHarness?.enterText('gr');
+
+    await expectAsync(
+      countryFieldHarness?.getSearchResultsText(),
+    ).toBeResolvedTo([
+      'Greece',
+      'Greenland',
+      'Grenada',
+      'Montenegro',
+      'St. Vincent & Grenadines',
+    ]);
+  });
+
+  it('should select a search result', async () => {
+    const { countryFieldHarness } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    await countryFieldHarness?.enterText('gr');
+    const result = ((await countryFieldHarness?.getSearchResults()) ?? [])[0];
+    await result.select();
+
+    await expectAsync(countryFieldHarness?.getValue()).toBeResolvedTo('Greece');
+  });
+
+  it('should select a search result using filters', async () => {
+    const { countryFieldHarness } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    await countryFieldHarness?.enterText('gr');
+    await countryFieldHarness?.selectSearchResult({
+      text: 'Grenada',
+    });
+
+    await expectAsync(countryFieldHarness?.getValue()).toBeResolvedTo(
+      'Grenada',
+    );
+  });
+
+  it('should clear the input value', async () => {
+    const { countryFieldHarness } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    // First, set a value on the countryField.
+    await countryFieldHarness?.enterText('gr');
+    await countryFieldHarness?.selectSearchResult({
+      text: 'Greenland',
+    });
+    await expectAsync(countryFieldHarness?.getValue()).toBeResolvedTo(
+      'Greenland',
+    );
+
+    // Now, clear the value.
+    await countryFieldHarness?.clear();
+    await expectAsync(countryFieldHarness?.getValue()).toBeResolvedTo('');
+  });
+
+  it('should throw error if getting search results when country field not open', async () => {
+    const { countryFieldHarness } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    await expectAsync(
+      countryFieldHarness?.getSearchResults(),
+    ).toBeRejectedWithError(
+      'Unable to retrieve search results. The country field is closed.',
+    );
+  });
+
+  it('should throw error if filtered search results are empty', async () => {
+    const { countryFieldHarness } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    await countryFieldHarness?.enterText('gr');
+
+    await expectAsync(
+      countryFieldHarness?.getSearchResults({
+        text: /invalidSearchText/,
+      }),
+    ).toBeRejectedWithError(
+      'Could not find search results matching filter(s): {"text":"/invalidSearchText/"}',
+    );
+  });
+
+  it('should return an empty array if search results are not filtered', async () => {
+    const { countryFieldHarness } = await setupTest({
+      dataSkyId: 'country-field',
+    });
+
+    await countryFieldHarness?.enterText('invalidSearchText');
+
+    await expectAsync(countryFieldHarness?.getSearchResults()).toBeResolvedTo(
+      [],
+    );
+  });
+});