spec(file-input): add form integration tests

Author: simeonoff

src/components/file-input/file-input.spec.ts

@@ -3,10 +3,18 @@ import { spy } from 'sinon';
 
 import type { TemplateResult } from 'lit';
 import { defineComponents } from '../common/definitions/defineComponents.js';
-import { simulateFileUpload } from '../common/utils.spec.js';
+import {
+  createFormAssociatedTestBed,
+  simulateFileUpload,
+} from '../common/utils.spec.js';
 import IgcFileInputComponent from './file-input.js';
 
-describe('File input component', () => {
+describe('File Input component', () => {
+  const files = [
+    new File(['test content'], 'test.txt', { type: 'text/plain' }),
+    new File(['image data'], 'image.png', { type: 'image/png' }),
+  ];
+
   before(() => {
     defineComponents(IgcFileInputComponent);
   });
@@ -50,12 +58,6 @@ describe('File input component', () => {
 
     it('returns the uploaded files when input is of type file', async () => {
       await createFixture(html`<igc-file-input></igc-file-input>`);
-
-      const files = [
-        new File(['test content'], 'test.txt', { type: 'text/plain' }),
-        new File(['image data'], 'image.png', { type: 'image/png' }),
-      ];
-
       await simulateFileUpload(element, files);
 
       expect(element.files).to.exist;
@@ -82,18 +84,28 @@ describe('File input component', () => {
           .textContent!.trim()
       ).to.equal('Select a document');
 
-      const file = new File(['test content'], 'test.txt', {
-        type: 'text/plain',
-      });
-
-      await simulateFileUpload(element, [file]);
+      await simulateFileUpload(element, [files[0]]);
 
       expect(
         element
           .shadowRoot!.querySelector('[part="file-names"]')!
           .textContent!.trim()
       ).to.equal('test.txt');
     });
+
+    it('resets the file selection when empty string is passed for value', async () => {
+      const file = files[0];
+      await createFixture(html`<igc-file-input></igc-file-input>`);
+      await simulateFileUpload(element, [file]);
+
+      expect(element.value).to.equal(`C:\\fakepath\\${file.name}`);
+      expect(element.files!.length).to.equal(1);
+      expect(element.files![0]).to.equal(file);
+
+      element.value = '';
+      expect(element.value).to.equal('');
+      expect(element.files!.length).to.equal(0);
+    });
   });
 
   describe('File type layout', () => {
@@ -138,11 +150,7 @@ describe('File input component', () => {
       await createFixture(html`<igc-file-input></igc-file-input>`);
       const eventSpy = spy(element, 'emitEvent');
 
-      const files = [
-        new File(['test content'], 'test.txt', { type: 'text/plain' }),
-      ];
-
-      await simulateFileUpload(element, files);
+      await simulateFileUpload(element, [files[0]]);
 
       expect(eventSpy).calledWith('igcChange', {
         detail: element.value,
@@ -191,3 +199,97 @@ describe('File input component', () => {
     });
   });
 });
+
+describe('Form Validation', () => {
+  const files = [
+    new File(['test content'], 'test.txt', { type: 'text/plain' }),
+  ];
+  const _expectedValidation = Symbol();
+
+  type TestBedInput = IgcFileInputComponent & {
+    [_expectedValidation]: boolean;
+  };
+
+  function validateInput(event: CustomEvent<string>) {
+    const element = event.target as TestBedInput;
+    expect(element.checkValidity()).to.equal(element[_expectedValidation]);
+  }
+
+  function setExpectedValidationState(
+    state: boolean,
+    element: IgcFileInputComponent
+  ) {
+    (element as TestBedInput)[_expectedValidation] = state;
+  }
+
+  const spec = createFormAssociatedTestBed<IgcFileInputComponent>(
+    html`<igc-file-input
+      name="input"
+      required
+      @igcChange=${validateInput}
+    ></igc-file-input>`
+  );
+
+  beforeEach(async () => {
+    await spec.setup(IgcFileInputComponent.tagName);
+  });
+
+  it('validates component', async () => {
+    setExpectedValidationState(true, spec.element);
+    await simulateFileUpload(spec.element, files);
+  });
+});
+
+describe('Form Integration', () => {
+  const files = [
+    new File(['test content'], 'test.txt', { type: 'text/plain' }),
+  ];
+
+  const spec = createFormAssociatedTestBed<IgcFileInputComponent>(
+    html`<igc-file-input name="input" required></igc-file-input>`
+  );
+
+  beforeEach(async () => {
+    await spec.setup(IgcFileInputComponent.tagName);
+  });
+
+  it('correct initial state', () => {
+    spec.assertIsPristine();
+    expect(spec.element.value).to.equal('');
+  });
+
+  it('is form associated', () => {
+    expect(spec.element.form).to.equal(spec.form);
+  });
+
+  it('is not associated on submit if no value', () => {
+    spec.assertSubmitHasValue(null);
+  });
+
+  it('is associated on submit', async () => {
+    await simulateFileUpload(spec.element, files);
+    spec.assertSubmitHasValue(files[0]);
+  });
+
+  it('is correctly resets on form reset', async () => {
+    await simulateFileUpload(spec.element, files);
+    spec.reset();
+
+    expect(spec.element.value).to.be.empty;
+  });
+
+  it('reflects disabled ancestor state', () => {
+    spec.setAncestorDisabledState(true);
+    expect(spec.element.disabled).to.be.true;
+
+    spec.setAncestorDisabledState(false);
+    expect(spec.element.disabled).to.be.false;
+  });
+
+  it('fulfils required constraint', async () => {
+    spec.assertSubmitFails();
+
+    await simulateFileUpload(spec.element, files);
+    spec.assertSubmitPasses();
+  });
+});

src/components/file-input/file-input.ts

@@ -83,6 +83,10 @@ export default class IgcFileInputComponent extends IgcInputBaseComponent {
     }
   }
 
+  public get value(): string {
+    return this.input?.value ?? '';
+  }
+
   /**
    * The multiple attribute of the control.
    * Used to indicate that a file input allows the user to select more than one file.
@@ -132,10 +136,6 @@ export default class IgcFileInputComponent extends IgcInputBaseComponent {
     this._updateValidity();
   }
 
-  public get value(): string {
-    return this.input?.value ?? '';
-  }
-
   /** @hidden */
   public override setSelectionRange(): void {}
 
@@ -149,10 +149,9 @@ export default class IgcFileInputComponent extends IgcInputBaseComponent {
   }
 
   private handleChange() {
-    this.value = this.input.value;
     this._formValue.setValueAndFormState(this.files);
-
     this._validate();
+    this.requestUpdate();
     this.emitEvent('igcChange', { detail: this.value });
   }
 

src/components/file-input/themes/file-input.base.scss

@@ -37,19 +37,25 @@ $theme: $base;
         grid-column: 2 / 4;
         appearance: none;
         opacity: 0;
-        cursor: pointer;
     }
 
     [part~='input']::file-selector-button {
-        cursor: pointer !important;
         width: 100%;
+        cursor: auto;
     }
 
     [part~='suffix'] {
         grid-area: 1 / 4;
     }
 }
 
+:host(:not(:disabled)) {
+    [part~='input'],
+    [part~='input']::file-selector-button {
+        cursor: pointer;
+    }
+}
+
 :host(:is(igc-file-input):disabled),
 :host(:is(igc-file-input)[disabled]) {
     [part~='file-names'] {