fix(components/forms): ensure form error always has errorName attri…

…bute for test harnesses (#3071)

libs/components/forms/src/lib/modules/form-error/form-error.component.ts

@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  HostBinding,
   Input,
   inject,
 } from '@angular/core';
@@ -49,6 +50,10 @@ export class SkyFormErrorComponent {
   @Input({ required: true })
   public errorText!: string;
 
+  @HostBinding('attr.errorName') public get hostErrorName(): string {
+    return this.errorName;
+  }
+
   protected readonly formErrors = inject(SKY_FORM_ERRORS_ENABLED, {
     optional: true,
   });

libs/components/forms/testing/src/modules/form-error/form-errors-harness.spec.ts

@@ -25,7 +25,14 @@ import { SkyFormErrorsHarness } from './form-errors-harness';
       [dirty]="true"
       [labelText]="errorText"
       [errors]="errors"
-    />
+    >
+      @if (customErrorName) {
+        <sky-form-error
+          [errorName]="customErrorName"
+          errorText="Custom error"
+        />
+      }
+    </sky-form-errors>
     <sky-form-errors
       data-sky-id="other-error"
       labelText="other error"
@@ -37,6 +44,7 @@ import { SkyFormErrorsHarness } from './form-errors-harness';
 class TestComponent {
   public errorText: string | undefined = 'Form';
   public errors: ValidationErrors | undefined;
+  public customErrorName: string | undefined;
 }
 //#endregion Test component
 
@@ -112,4 +120,19 @@ describe('Form errors harness', () => {
       { errorName: 'maxlength' },
     ]);
   });
+
+  it('should return custom errors', async () => {
+    const { formErrorsHarness, fixture } = await setupTest();
+
+    fixture.componentInstance.customErrorName = 'custom';
+    fixture.detectChanges();
+
+    await expectAsync(formErrorsHarness.hasError('custom')).toBeResolvedTo(
+      true,
+    );
+
+    await expectAsync(formErrorsHarness.getFormErrors()).toBeResolvedTo([
+      { errorName: 'custom' },
+    ]);
+  });
 });