@lion/ui 0.24.0 → 0.26.0

package/components/input-file/test/lion-input-file.test.js

@@ -1,1274 +1,2 @@
-import '@lion/ui/define/lion-input-file.js';
-import { Required } from '@lion/ui/form-core.js';
-import { getInputMembers } from '@lion/ui/input-test-helpers.js';
-import { getLocalizeManager } from '@lion/ui/localize-no-side-effects.js';
-import { localizeTearDown } from '@lion/ui/localize-test-helpers.js';
-import { expect, fixture as _fixture, html, oneEvent, elementUpdated } from '@open-wc/testing';
-import sinon from 'sinon';
-
-/**
- * @typedef {import('../src/LionInputFile.js').LionInputFile} LionInputFile
- * @typedef {import('../types/input-file.js').InputFile} InputFile
- * @typedef {import('../types/input-file.js').SystemFile} SystemFile
- * @typedef {import('lit').TemplateResult} TemplateResult
- */
-const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionInputFile>} */ _fixture;
-const filesListChanged = (/** @type {LionInputFile} */ el, /** @type { CustomEvent } */ ev) => {
-  // eslint-disable-next-line no-param-reassign
-  el.uploadResponse = [...ev.detail.newFiles];
-};
-function mimicSelectFile(
-  /** @type {LionInputFile} */ formControl,
-  /** @type {InputFile[]}  */ mockFiles,
-) {
-  // @ts-expect-error [allow-protected-in-tests]
-  formControl._processFiles(mockFiles);
-  // TODO: doesn't this set latest file.name only to formControl._inputNode.value?
-  mockFiles.forEach((file) => {
-    // @ts-expect-error [allow-protected-in-tests]
-    Object.defineProperty(formControl._inputNode, 'value', {
-      value: `C:\\fakepath\\${file.name}`,
-      writable: true,
-    });
-  });
-  // @ts-expect-error [allow-protected-in-tests]
-  Object.defineProperty(formControl._inputNode, 'files', {
-    value: mockFiles,
-    writable: true,
-  });
-  // @ts-expect-error [allow-protected-in-tests]
-  formControl._inputNode.dispatchEvent(
-    new Event('input', {
-      bubbles: true,
-    }),
-  );
-}
-const file =
-  /** @type {InputFile} */
-  new File(['foo'], 'foo.txt', {
-    type: 'text/plain',
-  });
-const file2 =
-  /** @type {InputFile} */
-  new File(['bar'], 'bar.txt', {
-    type: 'text/plain',
-  });
-const file3 =
-  /** @type {InputFile} */
-  new File(['foo3'], 'foo3.txt', {
-    type: 'text/plain',
-  });
-const file4 =
-  /** @type {InputFile} */
-  new File(['foo4'], 'foo4.txt', {
-    type: 'text/plain',
-  });
-describe('lion-input-file', () => {
-  const localizeManager = getLocalizeManager();
-  afterEach(localizeTearDown);
-  it('has a type of "file"', async () => {
-    const el = await fixture(html`<lion-input-file></lion-input-file>`);
-    // @ts-expect-error [allow-protected-in-tests]
-    const { _inputNode } = getInputMembers(el);
-    expect(_inputNode.type).to.equal('file');
-  });
-  it('should add single file and dispatch "file-list-changed" event with newly added file', async () => {
-    const el = await fixture(html`<lion-input-file></lion-input-file>`);
-    const fileListChangedEventPromise = oneEvent(el, 'file-list-changed');
-    mimicSelectFile(el, [file]);
-    const fileListChangedEvent = await fileListChangedEventPromise;
-    // @ts-expect-error [allow-protected-in-tests]
-    expect(el._selectedFilesMetaData.length).to.equal(1);
-    expect(el.uploadResponse.length).to.equal(1);
-    expect(fileListChangedEvent).to.exist;
-    expect(fileListChangedEvent.detail.newFiles.length).to.equal(1);
-    expect(fileListChangedEvent.detail.newFiles[0].name).to.equal('foo.txt');
-  });
-  it('should select 1 file', async () => {
-    const el = await fixture(html`<lion-input-file></lion-input-file>`);
-    // @ts-expect-error [allow-protected-in-test]
-    const processedFilesSpy = sinon.spy(el, '_processFiles');
-
-    // @ts-expect-error [allow-protected-in-test]
-    await el._onChange({
-      target: {
-        files: [file],
-      },
-    });
-    expect(processedFilesSpy).have.been.calledOnce;
-    processedFilesSpy.restore();
-  });
-  it('should retain selected file when "Cancel" button is clicked in system file explorer dialog', async () => {
-    const el = await fixture(html`<lion-input-file></lion-input-file>`);
-    mimicSelectFile(el, [file]);
-    await el.updateComplete;
-    // @ts-expect-error [allow-protected-in-test]
-    expect(el._selectedFilesMetaData.length).to.equal(1);
-    expect(el.uploadResponse.length).to.equal(1);
-
-    // when cancel is clicked, native input value is blank which means modelValue is blank
-    el.modelValue = [];
-    await el.updateComplete;
-    // @ts-expect-error [allow-protected-in-test]
-    expect(el._selectedFilesMetaData.length).to.equal(1);
-  });
-  it('has an attribute focused when focused', async () => {
-    const el = await fixture(html` <lion-input-file label="Select"></lion-input-file> `);
-
-    // @ts-expect-error [allow-protected-in-test]
-    el._buttonNode.focus();
-    await el.updateComplete;
-    expect(el.hasAttribute('focused')).to.be.true;
-
-    // @ts-expect-error [allow-protected-in-test]
-    el._buttonNode.blur();
-    await el.updateComplete;
-    expect(el.hasAttribute('focused')).to.be.false;
-  });
-  it('should set touched property true on change', async () => {
-    const el = await fixture(html` <lion-input-file label="Select"></lion-input-file> `);
-    expect(el.touched).to.be.false;
-
-    // @ts-expect-error [allow-protected-in-test]
-    await el._onChange({
-      target: {
-        files: [file],
-      },
-    });
-    expect(el.touched).to.be.true;
-  });
-  it('should replace previous file when new file is selected', async () => {
-    const el = await fixture(html`<lion-input-file></lion-input-file>`);
-    mimicSelectFile(el, [file]);
-    await el.updateComplete;
-    // @ts-expect-error [allow-protected-in-test]
-    expect(el._selectedFilesMetaData.length).to.equal(1);
-    // @ts-expect-error [allow-protected-in-test]
-    expect(el._selectedFilesMetaData[0].systemFile.name).to.equal('foo.txt');
-    mimicSelectFile(el, [file2]);
-    await el.updateComplete;
-    // @ts-expect-error [allow-protected-in-test]
-    expect(el._selectedFilesMetaData.length).to.equal(1);
-    // @ts-expect-error [allow-protected-in-test]
-    expect(el._selectedFilesMetaData[0].systemFile.name).to.equal('bar.txt');
-  });
-  describe('structure', async () => {
-    it('can has a button label by default', async () => {
-      const el = await fixture(html`<lion-input-file></lion-input-file>`);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._buttonNode.textContent).to.equal('Select file');
-    });
-    it('can has a button label by default when multiple', async () => {
-      const el = await fixture(html`<lion-input-file multiple></lion-input-file>`);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._buttonNode.textContent).to.equal('Select files');
-    });
-    it('will update the button label on locale change', async () => {
-      const el = await fixture(html`<lion-input-file></lion-input-file>`);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._buttonNode.textContent).to.equal('Select file');
-      localizeManager.locale = 'nl-NL';
-      await localizeManager.loadingComplete;
-      await el.updateComplete;
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._buttonNode.textContent).to.equal('Selecteer bestand');
-    });
-    it('can overwrite the button label', async () => {
-      const el = await fixture(html`<lion-input-file .buttonLabel="${'Foo'}"></lion-input-file>`);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._buttonNode.textContent).to.equal('Foo');
-      el.buttonLabel = 'Bar';
-      await el.updateComplete;
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._buttonNode.textContent).to.equal('Bar');
-    });
-  });
-  describe('invalid file types', async () => {
-    const fileWrongType =
-      /** @type {InputFile} */
-      new File(['foobar'], 'foobar.txt', {
-        type: 'xxxxx',
-      });
-    it('error should not be there when the file extensions are accepted', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept=".txt"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-      expect(el.hasFeedbackFor.length).to.equal(0);
-    });
-    it('should not be added to the selected list', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept="text/plain"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(1);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].failedProp?.length).to.equal(1);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].validationFeedback).to.exist;
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].status).to.equal('FAIL');
-      expect(el.uploadResponse[0].status).to.equal('FAIL');
-    });
-    it('error message should use main type when "/*" is used', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept="text/*"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.deep.equal('Please select a(n) text file with max 500MB.');
-      });
-    });
-    it('error message should use main type when "text/plain" is used', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept="text/plain"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.deep.equal('Please select a(n) text file with max 500MB.');
-      });
-    });
-    it('error message should use sub type when e.g. "text/html" is used', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept="text/html"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.deep.equal('Please select a(n) .html file with max 500MB.');
-      });
-    });
-    it('error message should use the first sub type when e.g. "image/svg+xml" is used', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept="image/svg+xml"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.deep.equal('Please select a(n) .svg file with max 500MB.');
-      });
-    });
-    it('can reflect multiple types in the error message', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept="text/html, text/csv"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.deep.equal('Please select a .html or .csv file with max 500MB.');
-      });
-    });
-    it('can reflect multiple types in the error message also with a space " "', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept="text/html,text/csv"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.deep.equal('Please select a .html or .csv file with max 500MB.');
-      });
-    });
-    it('can reflect multiple types in the error message with preference to extensions', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept=".jpg,image/svg+xml"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.deep.equal('Please select a(n) .jpg file with max 500MB.');
-      });
-    });
-  });
-  describe('invalid file extensions', async () => {
-    const fileWrongType =
-      /** @type {InputFile} */
-      new File(['foobar'], 'foobar.txt', {
-        type: 'xxxxx',
-      });
-    it('should not be added to the selected list', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept=".jpg, .png, .pdf"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(1);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].failedProp?.length).to.equal(1);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].validationFeedback).to.exist;
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].status).to.equal('FAIL');
-      expect(el.uploadResponse[0].status).to.equal('FAIL');
-    });
-    it('error message should add the file extension to the validator message', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept=".jpg"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.equal('Please select a(n) .jpg file with max 500MB.');
-      });
-    });
-    it('error message should add all file extensions to the validator message', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept=".jpg, .png, .pdf"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.equal('Please select a .jpg, .png or .pdf file with max 500MB.');
-      });
-    });
-    it('error message should add all file extensions to the validator message also works without spaces " "', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" accept=".jpg,.png,.pdf"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.equal('Please select a .jpg, .png or .pdf file with max 500MB.');
-      });
-    });
-  });
-  describe('invalid file sizes', async () => {
-    // Size of this file is 4 bytes
-    const fileWrongSize = /** @type {InputFile} */ new File(['foobar'], 'foobar.txt');
-    it('should not be added to the selected list', async () => {
-      const el = await fixture(html` <lion-input-file max-file-size="2"></lion-input-file> `);
-      mimicSelectFile(el, [fileWrongSize]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(1);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].failedProp?.length).to.equal(1);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].validationFeedback).to.exist;
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].status).to.equal('FAIL');
-      expect(el.uploadResponse[0].status).to.equal('FAIL');
-    });
-    it('error message should show only the max file size if no type/extension restrictions are defined', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" max-file-size="2"></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongSize]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.equal('Please select a file with max 2 bytes.');
-      });
-    });
-    it('error message should show the correct max file size if type/extension restrictions are defined', async () => {
-      const el = await fixture(html`
-        <lion-input-file
-          label="Select"
-          max-file-size="2"
-          accept=".jpg, .png, .pdf"
-        ></lion-input-file>
-      `);
-      mimicSelectFile(el, [fileWrongSize]);
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._selectedFilesMetaData[0].validationFeedback?.forEach((error) => {
-        expect(error.message).to.equal('Please select a .jpg, .png or .pdf file with max 2 bytes.');
-      });
-    });
-  });
-  it('should send "file-list-changed" event if selecting files succeeded partially', async () => {
-    const el = await fixture(html`<lion-input-file multiple max-file-size="3"></lion-input-file>`);
-
-    // Size of this file is 4 bytes
-    const fileWrongSize = /** @type {InputFile} */ new File(['foobar'], 'foobar.txt');
-    setTimeout(() => {
-      mimicSelectFile(el, [fileWrongSize, file2]);
-    });
-    const fileListChangedEvent = await oneEvent(el, 'file-list-changed');
-
-    // @ts-expect-error [allow-protected-in-test]
-    expect(el._selectedFilesMetaData.length).to.equal(2);
-    // @ts-expect-error [allow-protected-in-test]
-    expect(el._selectedFilesMetaData[0].status).to.equal('FAIL');
-    expect(el.uploadResponse[0].status).to.equal('FAIL');
-    expect(fileListChangedEvent.detail.newFiles.length).to.equal(1);
-  });
-  it('should update downloadurl for successful files', async () => {
-    const el = await fixture(html`<lion-input-file></lion-input-file>`);
-    setTimeout(() => {
-      mimicSelectFile(el, [file]);
-    });
-    const fileListChangedEvent = await oneEvent(el, 'file-list-changed');
-    filesListChanged(el, fileListChangedEvent);
-
-    // @ts-expect-error [allow-protected-in-test]
-    expect(el._selectedFilesMetaData[0].downloadUrl).to.exist;
-  });
-  describe('format', () => {
-    it('modelValue is an array of files', async () => {
-      const el = await fixture(html` <lion-input-file name="select"></lion-input-file> `);
-      mimicSelectFile(el, [file]);
-      await el.updateComplete;
-      expect(el.modelValue).to.deep.equal([file]);
-    });
-    it('view value is a string', async () => {
-      const el = await fixture(html` <lion-input-file name="select"></lion-input-file> `);
-      mimicSelectFile(el, [file]);
-      await el.updateComplete;
-      expect(el.value).to.equal('C:\\fakepath\\foo.txt');
-      // @ts-expect-error [allow-protected-in-tests]
-      expect(el._inputNode.value).to.equal('C:\\fakepath\\foo.txt');
-    });
-    it('formattedValue is a string', async () => {
-      const el = await fixture(html` <lion-input-file name="select"></lion-input-file> `);
-      mimicSelectFile(el, [file]);
-      await el.updateComplete;
-      expect(el.formattedValue).to.equal('C:\\fakepath\\foo.txt');
-    });
-    it('serializedValue is an array of files', async () => {
-      const el = await fixture(html` <lion-input-file name="select"></lion-input-file> `);
-      mimicSelectFile(el, [file]);
-      await el.updateComplete;
-      expect(el.serializedValue).to.deep.equal([file]);
-    });
-    it('fires `model-value-changed` for every programmatic modelValue change', async () => {
-      const el = await fixture(html` <lion-input-file name="select"></lion-input-file> `);
-      let counter = 0;
-      let isTriggeredByUser = false;
-      el.addEventListener('model-value-changed', (event) => {
-        counter += 1;
-        isTriggeredByUser = /** @type {CustomEvent} */ event.detail.isTriggeredByUser;
-      });
-      el.modelValue = [file];
-      expect(counter).to.equal(1);
-      expect(isTriggeredByUser).to.be.false;
-
-      // TODO: should no change mean no event?
-      // el.modelValue = [file];
-      // expect(counter).to.equal(1);
-
-      el.modelValue = [file, file2];
-      expect(counter).to.equal(2);
-    });
-    it('fires `model-value-changed` for every user input, adding `isTriggeredByUser` in event detail', async () => {
-      const el = await fixture(html` <lion-input-file name="select"></lion-input-file> `);
-      let counter = 0;
-      let isTriggeredByUser = false;
-      el.addEventListener('model-value-changed', (event) => {
-        counter += 1;
-        isTriggeredByUser = /** @type {CustomEvent} */ event.detail.isTriggeredByUser;
-      });
-      mimicSelectFile(el, [file]);
-      await el.updateComplete;
-      expect(counter).to.equal(1);
-      expect(isTriggeredByUser).to.be.true;
-      mimicSelectFile(el, [file, file2]);
-      await el.updateComplete;
-      expect(counter).to.equal(2);
-    });
-  });
-  describe('multiple file select', () => {
-    it('should add multiple files', async () => {
-      const el = await fixture(html`
-        <lion-input-file label="Select" .multiple="${true}"> </lion-input-file>
-      `);
-      mimicSelectFile(el, [file, file2]);
-      await el.updateComplete;
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(2);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].systemFile.name).to.equal('foo.txt');
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[1].systemFile.name).to.equal('bar.txt');
-      expect(el.uploadResponse.length).to.equal(2);
-      expect(el.uploadResponse[0].name).to.equal('foo.txt');
-      expect(el.uploadResponse[1].name).to.equal('bar.txt');
-    });
-    it('should add new files and retain previous files', async () => {
-      const el = await fixture(html` <lion-input-file .multiple="${true}"></lion-input-file> `);
-      setTimeout(() => {
-        mimicSelectFile(el, [file, file2]);
-      });
-      const fileListChangedEvent = await oneEvent(el, 'file-list-changed');
-      filesListChanged(el, fileListChangedEvent);
-      await elementUpdated(el);
-
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(2);
-      expect(el.modelValue.length).to.equal(2);
-      setTimeout(() => {
-        mimicSelectFile(el, [file3, file4]);
-      });
-      const fileListChangedEvent1 = await oneEvent(el, 'file-list-changed');
-      filesListChanged(el, fileListChangedEvent1);
-      await elementUpdated(el);
-
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(4);
-      expect(el.modelValue.length).to.equal(4);
-    });
-    it('should add multiple files and dispatch file-list-changed event ONLY with newly added file', async () => {
-      const el = await fixture(html` <lion-input-file .multiple="${true}"></lion-input-file> `);
-      setTimeout(() => {
-        mimicSelectFile(el, [file, file2]);
-      });
-      const fileListChangedEvent = await oneEvent(el, 'file-list-changed');
-      filesListChanged(el, fileListChangedEvent);
-      setTimeout(() => {
-        mimicSelectFile(el, [file3, file4]);
-      });
-      const fileListChangedEvent1 = await oneEvent(el, 'file-list-changed');
-      filesListChanged(el, fileListChangedEvent1);
-      expect(fileListChangedEvent1).to.exist;
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(4);
-      expect(fileListChangedEvent1.detail.newFiles.length).to.equal(2);
-      expect(fileListChangedEvent1.detail.newFiles[0].name).to.equal('foo3.txt');
-      expect(fileListChangedEvent1.detail.newFiles[1].name).to.equal('foo4.txt');
-    });
-    it('should not allow duplicate files to be selected and show notification message', async () => {
-      const el = await fixture(html` <lion-input-file .multiple="${true}"></lion-input-file> `);
-      setTimeout(() => {
-        mimicSelectFile(el, [file]);
-      });
-
-      // create condition to also show the feedback
-      el.prefilled = true;
-      const fileListChangedEvent = await oneEvent(el, 'file-list-changed');
-
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(1);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].systemFile.name).to.equal('foo.txt');
-      expect(fileListChangedEvent).to.exist;
-      expect(fileListChangedEvent.detail.newFiles.length).to.equal(1);
-      expect(fileListChangedEvent.detail.newFiles[0].name).to.equal('foo.txt');
-      const fileDuplicate =
-        /** @type {InputFile} */
-        new File(['foo'], 'foo.txt', {
-          type: 'text/plain',
-        });
-      mimicSelectFile(el, [fileDuplicate]);
-      await el.updateComplete;
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(1);
-      expect(el.hasFeedbackFor).to.deep.equals(['info'], 'hasFeedbackFor');
-      expect(el.showsFeedbackFor).to.deep.equals(['info'], 'showsFeedbackFor');
-    });
-    it('should add valid files and skip invalid ones', async () => {
-      const fileWrongSize = /** @type {InputFile} */ new File(['foobar'], 'foobar.txt');
-      const fileWrongType =
-        /** @type {InputFile} */
-        new File(['foobar'], 'foobar.txt', {
-          type: 'xxxxx',
-        });
-      const el = await fixture(html`
-        <lion-input-file multiple max-file-size="3" accept=".txt"></lion-input-file>
-      `);
-      setTimeout(() => {
-        mimicSelectFile(el, [file, fileWrongSize, file2, fileWrongType]);
-      });
-      const fileListChangedEvent = await oneEvent(el, 'file-list-changed');
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(4);
-      expect(fileListChangedEvent).to.exist;
-      expect(fileListChangedEvent.detail.newFiles.length).to.equal(2);
-      expect(fileListChangedEvent.detail.newFiles[0].name).to.equal('foo.txt');
-      expect(fileListChangedEvent.detail.newFiles[1].name).to.equal('bar.txt');
-    });
-  });
-  describe('status and error', () => {
-    /**
-     * @type {LionInputFile}
-     */
-    let el;
-    beforeEach(async () => {
-      el = await fixture(html`<lion-input-file accept="text/plain"></lion-input-file>`);
-    });
-    it('should set uploadResponse data to _selectedFilesMetaData for rendering error and status', async () => {
-      mimicSelectFile(el, [file]);
-      el.uploadResponse = [
-        {
-          name: 'foo.txt',
-          status: 'LOADING',
-          errorMessage: '500',
-        },
-      ];
-      await el.updateComplete;
-
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].status).to.equal('LOADING');
-      // @ts-ignore
-      expect(el._selectedFilesMetaData[0].validationFeedback[0].message).to.equal('500');
-    });
-    it('should not fire file-list-changed event if invalid file is selected', async () => {
-      const filePdf =
-        /** @type {InputFile} */
-        new File(['foo'], 'foo.pdf', {
-          type: 'application/pdf',
-        });
-      // @ts-ignore
-      const fileListChangedSpy = sinon.spy(el, '_dispatchFileListChangeEvent');
-      mimicSelectFile(el, [filePdf]);
-      expect(fileListChangedSpy).have.not.been.called;
-      fileListChangedSpy.restore();
-    });
-    it('updates showFeedbackFor when a wrong file has been added/removed', async () => {
-      const fileWrongType =
-        /** @type {InputFile} */
-        new File(['foobar'], 'foobar.txt', {
-          type: 'xxxxx',
-        });
-
-      // create condition to also show the feedback
-      el.prefilled = true;
-      mimicSelectFile(el, [fileWrongType]);
-      await el.updateComplete;
-      expect(el.hasFeedbackFor).to.deep.equals(['error'], 'hasFeedbackFor');
-      expect(el.showsFeedbackFor).to.deep.equals(['error'], 'showsFeedbackFor');
-
-      // on change the showsFeedbackFor should be empty again
-      mimicSelectFile(el, [file]);
-      await el.updateComplete;
-      expect(el.hasFeedbackFor).to.deep.equals([]);
-      expect(el.showsFeedbackFor).to.deep.equals([]);
-    });
-  });
-  describe('validations when used with lion-form', () => {
-    it('should throw error with Required validator', async () => {
-      const el = await fixture(html`
-        <lion-input-file
-          name="myFileInput"
-          .validators="${[
-            new Required(
-              {},
-              {
-                getMessage: () => 'FooBar',
-              },
-            ),
-          ]}"
-        >
-        </lion-input-file>
-      `);
-      el.touched = true;
-      el.dirty = true;
-      await el.updateComplete;
-      await el.feedbackComplete;
-      // @ts-ignore input type="file" is a specific input member
-      const { _feedbackNode } = getInputMembers(el);
-      expect(_feedbackNode.feedbackData?.[0].message).to.equal('FooBar');
-      expect(el.hasFeedbackFor.includes('error')).to.be.true;
-    });
-    it('reset method should remove File from modelValue but keep uploadResponse', async () => {
-      const uploadResponse = [
-        {
-          name: 'file1.txt',
-          status: 'SUCCESS',
-          errorMessage: '',
-          downloadUrl: '/downloadFile',
-        },
-      ];
-      const el = await fixture(html`
-        <lion-input-file label="Select" .uploadResponse="${uploadResponse}"></lion-input-file>
-      `);
-
-      // @ts-expect-error [allow-protected-in-test]
-      el.uploadResponse = uploadResponse;
-      await el.updateComplete;
-      mimicSelectFile(el, [file]);
-      await el.updateComplete;
-      await el.reset();
-      expect(el.modelValue).to.deep.equal([]);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData).to.deep.equal([]);
-      expect(el.uploadResponse).to.deep.equal(uploadResponse);
-    });
-    it('clear method should remove File from modelValue and uploadResponse', async () => {
-      const uploadResponse = [
-        {
-          name: 'file1.txt',
-          status: 'SUCCESS',
-          errorMessage: '',
-          downloadUrl: '/downloadFile',
-        },
-      ];
-      const el = await fixture(html` <lion-input-file label="Select"></lion-input-file> `);
-
-      // @ts-expect-error [allow-protected-in-test]
-      el.uploadResponse = uploadResponse;
-      setTimeout(() => {
-        mimicSelectFile(el, [file]);
-      });
-      await oneEvent(el, 'file-list-changed');
-      await el.clear();
-      expect(el.modelValue).to.deep.equal([]);
-      expect(el.uploadResponse).to.deep.equal([]);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData).to.deep.equal([]);
-    });
-  });
-  describe('file select component with prefilled state', () => {
-    /**
-     * @type {LionInputFile}
-     */
-    let el;
-    const uploadResponse = [
-      {
-        name: 'file1.txt',
-        status: 'SUCCESS',
-        errorMessage: '',
-        downloadUrl: '/downloadFile',
-      },
-      {
-        name: 'file2.txt',
-        status: 'FAIL',
-        errorMessage: 'something went wrong',
-      },
-    ];
-    beforeEach(async () => {
-      el = await fixture(html`
-        <lion-input-file name="myFiles" multiple="${true}"> </lion-input-file>
-      `);
-
-      // @ts-expect-error [allow-protected-in-test]
-      el.uploadResponse = uploadResponse;
-      await el.updateComplete;
-    });
-    it('should update the _selectedFilesMetaData according to uploadResponse', () => {
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(2);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].systemFile.name).to.equal('file1.txt');
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].status).to.equal('SUCCESS');
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].downloadUrl).to.equal('/downloadFile');
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[1].validationFeedback[0].message).to.equal(
-        'something went wrong',
-      );
-    });
-    it('should remove file on click of cross button', async () => {
-      /**
-       * @type {Partial<InputFile>}
-       */
-      const removedFile = {
-        name: 'file2.txt',
-        status: 'FAIL',
-        systemFile: {
-          name: 'file2.txt',
-        },
-        response: {
-          name: 'file2.txt',
-          status: 'FAIL',
-        },
-      };
-      // @ts-expect-error [allow-protected-in-test]
-      const removeFileSpy = sinon.spy(el, '_removeFile');
-
-      // assertion for displayed file list to be same
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(2);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[1].systemFile.name).to.equal('file2.txt');
-
-      // @ts-expect-error [allow-protected-in-test]
-      el._fileListNode.dispatchEvent(
-        new CustomEvent('file-remove-requested', {
-          detail: {
-            removedFile,
-            status: removedFile.status,
-            uploadResponse: removedFile.response,
-          },
-        }),
-      );
-      await el.updateComplete;
-      expect(removeFileSpy).have.been.calledOnce;
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(1);
-      removeFileSpy.restore();
-    });
-    it('should fire file-removed event with uploadResponse in the details', async () => {
-      /**
-       * @type {Partial<InputFile>}
-       */
-      const removedFile = {
-        name: 'file2.txt',
-        status: 'FAIL',
-        systemFile: {
-          name: 'file2.txt',
-        },
-        response: {
-          name: 'file2.txt',
-          status: 'FAIL',
-        },
-      };
-      setTimeout(() => {
-        // @ts-ignore ignore file typing
-        el._removeFile(removedFile);
-      });
-      await el.updateComplete;
-      const removeFileEvent = await oneEvent(el, 'file-removed');
-
-      // assertion for event data
-      expect(removeFileEvent).to.exist;
-      expect(removeFileEvent.detail.removedFile).to.deep.equal({
-        name: 'file2.txt',
-        status: 'FAIL',
-        systemFile: {
-          name: 'file2.txt',
-        },
-        response: {
-          name: 'file2.txt',
-          status: 'FAIL',
-        },
-      });
-      expect(removeFileEvent.detail.status).to.deep.equal('FAIL');
-      expect(removeFileEvent.detail.uploadResponse).to.deep.equal({
-        name: 'file2.txt',
-        status: 'FAIL',
-      });
-    });
-  });
-  describe('drag and drop', () => {
-    /**
-     * @type {LionInputFile}
-     */
-    let el;
-    beforeEach(async () => {
-      el = await fixture(html`
-        <lion-input-file name="myFiles" multiple enable-drop-zone></lion-input-file>
-      `);
-      await el.updateComplete;
-    });
-    it('should set "is-dragging" on dragenter', async () => {
-      const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
-      dropzone?.dispatchEvent(
-        new Event('dragenter', {
-          bubbles: true,
-        }),
-      );
-      await el.updateComplete;
-      expect(el.hasAttribute('is-dragging')).to.equal(true);
-    });
-    it('should set "is-dragging" on dragover', async () => {
-      const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
-      dropzone?.dispatchEvent(
-        new Event('dragover', {
-          bubbles: true,
-        }),
-      );
-      await el.updateComplete;
-      expect(el.hasAttribute('is-dragging')).to.equal(true);
-    });
-    it('should remove "is-dragging" on dragleave', async () => {
-      const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
-      dropzone?.dispatchEvent(
-        new Event('dragenter', {
-          bubbles: true,
-        }),
-      );
-      await el.updateComplete;
-      dropzone?.dispatchEvent(
-        new Event('dragleave', {
-          bubbles: true,
-        }),
-      );
-      await el.updateComplete;
-      expect(el.hasAttribute('is-dragging')).to.equal(false);
-    });
-    it('should remove "is-dragging" on drop', async () => {
-      const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
-      dropzone?.dispatchEvent(
-        new Event('dragenter', {
-          bubbles: true,
-        }),
-      );
-      await el.updateComplete;
-      window.dispatchEvent(
-        new Event('drop', {
-          bubbles: true,
-        }),
-      );
-      await el.updateComplete;
-      expect(el.hasAttribute('is-dragging')).to.equal(false);
-    });
-    it('should update modelValue on drop', async () => {
-      const list = new DataTransfer();
-      // @ts-ignore
-      list.items.add(file);
-      const droppedFiles = list.files;
-
-      // @ts-expect-error [allow-protected-in-test]
-      await el._processDroppedFiles({
-        // @ts-ignore
-        dataTransfer: {
-          files: droppedFiles,
-          items: [
-            {
-              name: 'test.txt',
-            },
-          ],
-        },
-        preventDefault: () => {},
-      });
-      await el.updateComplete;
-      expect(el.modelValue.length).to.equal(1);
-      const list2 = new DataTransfer();
-      // @ts-ignore
-      list2.items.add(file2);
-
-      // @ts-expect-error [allow-protected-in-test]
-      await el._processDroppedFiles({
-        // @ts-ignore
-        dataTransfer: {
-          files: list2.files,
-          items: [
-            {
-              name: 'test2.txt',
-            },
-          ],
-        },
-        preventDefault: () => {},
-      });
-      await el.updateComplete;
-      expect(el.modelValue.length).to.equal(2);
-    });
-    it('should call _processFiles method', async () => {
-      const list = new DataTransfer();
-      // @ts-ignore
-      list.items.add(file);
-      const droppedFiles = list.files;
-      // @ts-ignore
-      const _processFilesSpy = sinon.spy(el, '_processFiles');
-
-      // @ts-expect-error [allow-protected-in-test]
-      await el._processDroppedFiles({
-        // @ts-ignore
-        dataTransfer: {
-          files: droppedFiles,
-          items: [
-            {
-              name: 'test.txt',
-            },
-          ],
-        },
-        preventDefault: () => {},
-      });
-      expect(_processFilesSpy).have.been.calledOnce;
-      _processFilesSpy.restore();
-    });
-  });
-  describe('uploadOnSelect as true', () => {
-    it('should not remove file on click of cross button and fire file-removed event', async () => {
-      /**
-       * @type {Partial<InputFile>}
-       */
-      const removeFile = {
-        name: 'foo.txt',
-        status: 'SUCCESS',
-        systemFile: {
-          name: 'foo.txt',
-        },
-        response: {
-          name: 'foo.txt',
-          status: 'SUCCESS',
-        },
-      };
-      const el = await fixture(html`
-        <lion-input-file .uploadOnSelect="${true}"> </lion-input-file>
-      `);
-      el.modelValue = [file];
-      mimicSelectFile(el, [file]);
-      await el.updateComplete;
-      setTimeout(() => {
-        // @ts-ignore ignore file typing
-        el._removeFile(removeFile);
-      });
-      const removeFileEvent = await oneEvent(el, 'file-removed');
-
-      // assertion for displayed file list to be same
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(1);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].systemFile.name).to.equal('foo.txt');
-
-      // assertion for event data
-      expect(removeFileEvent).to.exist;
-      expect(removeFileEvent.detail.removedFile).to.deep.equal({
-        name: 'foo.txt',
-        status: 'SUCCESS',
-        systemFile: {
-          name: 'foo.txt',
-        },
-        response: {
-          name: 'foo.txt',
-          status: 'SUCCESS',
-        },
-      });
-      expect(removeFileEvent.detail.status).to.deep.equal('SUCCESS');
-      expect(removeFileEvent.detail.uploadResponse).to.deep.equal({
-        name: 'foo.txt',
-        status: 'SUCCESS',
-      });
-    });
-    it('should remove file from displayed list if not available in uploadResponse array', async () => {
-      const uploadResponse = [
-        {
-          name: 'file1.txt',
-          status: 'SUCCESS',
-          errorMessage: '',
-          downloadUrl: '/downloadFile',
-        },
-        {
-          name: 'file2.txt',
-          status: 'FAIL',
-          errorMessage: 'something went wrong',
-        },
-      ];
-      const el = await fixture(html`
-        <lion-input-file label="Select" .uploadOnSelect="${true}"> </lion-input-file>
-      `);
-
-      // @ts-expect-error [allow-protected-in-test]
-      el.uploadResponse = uploadResponse;
-      await el.updateComplete;
-      // assertion for displayed file list to be same
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(2);
-      el.uploadResponse = [
-        {
-          name: 'file1.txt',
-          status: 'SUCCESS',
-          errorMessage: '',
-          downloadUrl: '/downloadFile',
-        },
-      ];
-      await el.updateComplete;
-      // assertion for displayed file list to be same
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData.length).to.equal(1);
-      // @ts-expect-error [allow-protected-in-test]
-      expect(el._selectedFilesMetaData[0].systemFile.name).to.equal('file1.txt');
-      // @ts-expect-error [allow-protected-in-tests]
-      expect(el._inputNode.value).to.equal('');
-    });
-  });
-  describe('Accessibility', async () => {
-    it('is accessible', async () => {
-      const el = await fixture(html`<lion-input-file label="Select"></lion-input-file>`);
-      await expect(el).to.be.accessible();
-    });
-    it('is accessible when a file is selected', async () => {
-      const uploadResponse = [
-        {
-          name: 'file1.txt',
-          status: 'SUCCESS',
-          errorMessage: '',
-          downloadUrl: '/downloadFile',
-        },
-      ];
-      const el = await fixture(html` <lion-input-file label="Select"></lion-input-file>`);
-
-      // @ts-expect-error [allow-protected-in-test]
-      el.uploadResponse = uploadResponse;
-      await expect(el).to.be.accessible();
-    });
-    it('is accessible with an selected file and disabled', async () => {
-      const uploadResponse = [
-        {
-          name: 'file1.txt',
-          status: 'SUCCESS',
-          errorMessage: '',
-          downloadUrl: '/downloadFile',
-        },
-      ];
-      const el = await fixture(html` <lion-input-file label="Select" disabled></lion-input-file> `);
-
-      // @ts-expect-error [allow-protected-in-test]
-      el.uploadResponse = uploadResponse;
-      await expect(el).to.be.accessible();
-    });
-    describe('has correct aria-roles', async () => {
-      it('select-button has aria-labelledby set to itself and the label', async () => {
-        const el = await fixture(html` <lion-input-file label="Select"></lion-input-file> `);
-        // @ts-expect-error [allow-protected-in-test]
-        expect(el._buttonNode?.getAttribute('aria-labelledby')).to.contain(
-          // @ts-expect-error [allow-protected-in-test]
-          `select-button-${el._inputId}`,
-        );
-        // @ts-expect-error [allow-protected-in-test]
-        expect(el._buttonNode?.getAttribute('aria-labelledby')).to.contain(
-          // @ts-expect-error [allow-protected-in-test]
-          `label-${el._inputId}`,
-        );
-      });
-      it('select-button has aria-describedby set to the help-text, after and the feedback message', async () => {
-        const uploadResponse = [
-          {
-            name: 'file1.txt',
-            status: 'SUCCESS',
-            errorMessage: '',
-            downloadUrl: '/downloadFile',
-          },
-        ];
-        const el = await fixture(html`
-          <lion-input-file label="Select" help-text="foo"></lion-input-file>
-        `);
-
-        // @ts-expect-error [allow-protected-in-test]
-        el.uploadResponse = uploadResponse;
-
-        // @ts-expect-error [allow-protected-in-test]
-        expect(el._buttonNode?.getAttribute('aria-describedby')).to.contain(
-          // @ts-expect-error [allow-protected-in-test]
-          `help-text-${el._inputId}`,
-        );
-        // @ts-expect-error [allow-protected-in-test]
-        expect(el._buttonNode?.getAttribute('aria-describedby')).to.contain(
-          // @ts-expect-error [allow-protected-in-test]
-          `feedback-${el._inputId}`,
-        );
-        // @ts-expect-error [allow-protected-in-test]
-        expect(el._buttonNode?.getAttribute('aria-describedby')).to.contain(
-          // @ts-expect-error [allow-protected-in-test]
-          `after-${el._inputId}`,
-        );
-      });
-      it('after contains upload name of file when uploadOnSelect is true and status is SUCCESS', async () => {
-        const uploadResponse = [
-          {
-            name: 'file1.txt',
-            status: 'SUCCESS',
-            errorMessage: '',
-            downloadUrl: '/downloadFile',
-          },
-        ];
-        const el = await fixture(html`
-          <lion-input-file label="Select" upload-on-select></lion-input-file>
-        `);
-        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('No files uploaded.');
-        // @ts-expect-error
-        el.uploadResponse = uploadResponse;
-        await el.updateComplete;
-        expect(el.querySelector('[slot="after"]')?.textContent).to.equal(
-          'Uploaded file: file1.txt',
-        );
-      });
-      it('after contains upload name of file when uploadOnSelect is false and status is SUCCESS', async () => {
-        const uploadResponse = [
-          {
-            name: 'file1.txt',
-            status: 'SUCCESS',
-            errorMessage: '',
-            downloadUrl: '/downloadFile',
-          },
-        ];
-        const el = await fixture(html` <lion-input-file label="Select"></lion-input-file> `);
-        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('No files selected.');
-        // @ts-expect-error
-        el.uploadResponse = uploadResponse;
-        await el.updateComplete;
-        expect(el.querySelector('[slot="after"]')?.textContent).to.equal(
-          'Selected file: file1.txt',
-        );
-      });
-      it('after contains upload validator message of file when FAIL', async () => {
-        const uploadResponse = [
-          {
-            name: 'file1.txt',
-            status: 'FAIL',
-            errorMessage: 'something went wrong',
-            downloadUrl: '/downloadFile',
-          },
-        ];
-        const el = await fixture(html` <lion-input-file label="Select"></lion-input-file> `);
-        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('No files selected.');
-        // @ts-expect-error
-        el.uploadResponse = uploadResponse;
-        await el.updateComplete;
-        expect(el.querySelector('[slot="after"]')?.textContent).to.equal('something went wrong');
-      });
-      it('after contains upload status of files when uploadOnSelect is true and multiple files have been selected', async () => {
-        const uploadResponse = [
-          {
-            name: 'file1.txt',
-            status: 'SUCCESS',
-            errorMessage: '',
-            downloadUrl: '/downloadFile',
-          },
-          {
-            name: 'file2.txt',
-            status: 'FAIL',
-            errorMessage: 'something went wrong',
-            downloadUrl: '/downloadFile',
-          },
-        ];
-        const el = await fixture(html`
-          <lion-input-file label="Select" multiple upload-on-select></lion-input-file>
-        `);
-        // @ts-expect-error
-        el.uploadResponse = uploadResponse;
-        await el.updateComplete;
-        expect(el.querySelector('[slot="after"]')?.textContent?.trim()).to.equal(
-          'Uploaded files: 2 files. "something went wrong", for file2.txt.',
-        );
-      });
-      it('after contains upload status of files when uploadOnSelect is false and multiple files have been selected', async () => {
-        const uploadResponse = [
-          {
-            name: 'file1.txt',
-            status: 'SUCCESS',
-            errorMessage: '',
-            downloadUrl: '/downloadFile',
-          },
-          {
-            name: 'file2.txt',
-            status: 'FAIL',
-            errorMessage: 'something went wrong',
-            downloadUrl: '/downloadFile',
-          },
-        ];
-        const el = await fixture(html`
-          <lion-input-file label="Select" multiple></lion-input-file>
-        `);
-        // @ts-expect-error
-        el.uploadResponse = uploadResponse;
-        await el.updateComplete;
-        expect(el.querySelector('[slot="after"]')?.textContent?.trim()).to.equal(
-          'Selected files: 2 files. "something went wrong", for file2.txt.',
-        );
-      });
-    });
-  });
-});
+import { runInputFileSuite } from '../test-suites/lion-input-file.suite.js';
+runInputFileSuite();