feat(components/forms): file attachment harness (#2930)

apps/code-examples/src/app/code-examples/forms/file-attachment/basic/demo.component.html

@@ -1,6 +1,7 @@
 <form [formGroup]="formGroup">
   <sky-file-attachment
     acceptedTypes="application/pdf,image/jpeg,image/png,image/gif"
+    data-sky-id="birth-certificate"
     formControlName="attachment"
     helpPopoverTitle="Requirements"
     hintText="Attach a .pdf, .gif, .png, or .jpeg file."

apps/code-examples/src/app/code-examples/forms/file-attachment/basic/demo.component.spec.ts

@@ -0,0 +1,73 @@
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  SkyFileAttachmentHarness,
+  provideSkyFileAttachmentTesting,
+} from '@skyux/forms/testing';
+
+import { DemoComponent } from './demo.component';
+
+describe('Basic file attachment demo', () => {
+  async function setupTest(options: { dataSkyId: string }): Promise<{
+    harness: SkyFileAttachmentHarness;
+    fixture: ComponentFixture<DemoComponent>;
+  }> {
+    TestBed.configureTestingModule({
+      providers: [provideSkyFileAttachmentTesting()],
+    });
+    const fixture = TestBed.createComponent(DemoComponent);
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+
+    const harness = await loader.getHarness(
+      SkyFileAttachmentHarness.with({ dataSkyId: options.dataSkyId }),
+    );
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    return { harness, fixture };
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [DemoComponent, NoopAnimationsModule],
+    });
+  });
+
+  it('should set initial values', async () => {
+    const { harness } = await setupTest({
+      dataSkyId: 'birth-certificate',
+    });
+
+    await expectAsync(harness.getLabelText()).toBeResolvedTo(
+      'Birth certificate',
+    );
+    await expectAsync(harness.getHintText()).toBeResolvedTo(
+      'Attach a .pdf, .gif, .png, or .jpeg file.',
+    );
+    await expectAsync(harness.getAcceptedTypes()).toBeResolvedTo(
+      'application/pdf,image/jpeg,image/png,image/gif',
+    );
+    await expectAsync(harness.isRequired()).toBeResolvedTo(true);
+
+    await harness.clickHelpInline();
+
+    await expectAsync(harness.getHelpPopoverTitle()).toBeResolvedTo(
+      'Requirements',
+    );
+  });
+
+  it('should throw an error if file begins with the letter a', async () => {
+    const { harness } = await setupTest({
+      dataSkyId: 'birth-certificate',
+    });
+
+    const file = new File([], 'art.png', { type: 'image/png' });
+    await harness.attachFile(file);
+
+    await expectAsync(
+      harness.hasCustomError('invalidStartingLetter'),
+    ).toBeResolvedTo(true);
+  });
+});

apps/playground/src/app/components/forms/file-attachment/file-attachment.component.html

@@ -21,6 +21,7 @@
 
 <form [formGroup]="formGroup">
   <sky-file-attachment
+    formControlName="attachment"
     helpPopoverContent="Sample help content"
     helpPopoverTitle="Inline help"
     hintText="Sample hint text"

apps/playground/src/app/components/forms/file-attachment/file-attachment.component.ts

@@ -4,6 +4,7 @@ import {
   FormBuilder,
   FormControl,
   FormGroup,
+  Validators,
 } from '@angular/forms';
 import {
   SkyFileAttachmentChange,
@@ -30,7 +31,7 @@ export class FileAttachmentComponent {
 
   public rejectedFiles: SkyFileItem[];
 
-  protected attachment: FormControl;
+  protected attachment: FormControl<SkyFileItem>;
   protected formGroup: FormGroup;
   protected required = true;
 
@@ -43,6 +44,7 @@ export class FileAttachmentComponent {
     this.rejectedFiles = [];
     this.allItems = [];
     this.linksToUpload = [];
+    this.attachment = new FormControl(undefined, Validators.required);
     this.formGroup = inject(FormBuilder).group({
       attachment: this.attachment,
     });

libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.html

@@ -87,6 +87,7 @@
         "
         [disabled]="disabled"
         (click)="onDropClicked()"
+        (blur)="onButtonBlur()"
       >
         <sky-icon icon="folder-open-o" />
         {{

libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.spec.ts

@@ -6,7 +6,7 @@ import {
   tick,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { expect, expectAsync } from '@skyux-sdk/testing';
+import { SkyAppTestUtility, expect, expectAsync } from '@skyux-sdk/testing';
 import { SkyIdService, SkyLiveAnnouncerService } from '@skyux/core';
 import {
   SkyHelpTestingController,
@@ -1523,6 +1523,7 @@ describe('File attachment', () => {
 
     fixture.componentInstance.required = true;
     fixture.componentInstance.labelText = 'file attachment';
+    fixture.detectChanges();
 
     fixture.componentInstance.attachment.markAsTouched();
     fixture.detectChanges();
@@ -1743,6 +1744,15 @@ describe('File attachment', () => {
 
     expect(fileAttachment).not.toHaveClass('sky-form-field-stacked');
   });
+
+  it('should mark file attachment as touched when blurred', () => {
+    expect(fixture.componentInstance.attachment.touched).toBeFalse();
+    const button = getButtonEl(el);
+    SkyAppTestUtility.fireDomEvent(button, 'blur');
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.attachment.touched).toBeTrue();
+  });
 });
 
 describe('File attachment (template-driven)', () => {

libs/components/forms/src/lib/modules/file-attachment/file-attachment/file-attachment.component.ts

@@ -105,7 +105,6 @@ export class SkyFileAttachmentComponent
   /**
    * The comma-delimited string literal of MIME types that users can attach.
    * By default, all file types are allowed.
-   * @required
    */
   @Input()
   public acceptedTypes: string | undefined;
@@ -360,6 +359,14 @@ export class SkyFileAttachmentComponent
         });
         this.#changeDetector.markForCheck();
       });
+
+      // There is some disconnect between the host control and the form control.
+      // This handles that by running change detection whenever the host control
+      // has any changes. This is a workaround for this existing bug and will be
+      // addressed in a future story that refactors file attachment.
+      this.ngControl.control?.events.subscribe(() => {
+        this.#changeDetector.markForCheck();
+      });
     }
   }
 
@@ -380,6 +387,10 @@ export class SkyFileAttachmentComponent
     }
   }
 
+  public onButtonBlur(): void {
+    this.#onTouched();
+  }
+
   public onDropClicked(): void {
     this.#onTouched();
     /* istanbul ignore else */
@@ -440,6 +451,7 @@ export class SkyFileAttachmentComponent
   }
 
   public fileDrop(dropEvent: DragEvent): void {
+    this.#onTouched();
     dropEvent.stopPropagation();
     dropEvent.preventDefault();
 

libs/components/forms/testing/src/modules/file-attachment/file-attachment/file-attachment-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 `SkyFileAttachmentHarness` instances.
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-empty-object-type
+export interface SkyFileAttachmentHarnessFilters extends SkyHarnessFilters {}