@lion/ui 0.22.0 → 0.24.0

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

@@ -12,13 +12,11 @@ import sinon from 'sinon';
  * @typedef {import('../types/input-file.js').SystemFile} SystemFile
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
-const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionInputFile>} */ (_fixture);
-
+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,
@@ -26,7 +24,7 @@ function mimicSelectFile(
   // @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 => {
+  mockFiles.forEach((file) => {
     // @ts-expect-error [allow-protected-in-tests]
     Object.defineProperty(formControl._inputNode, 'value', {
       value: `C:\\fakepath\\${file.name}`,
@@ -34,75 +32,75 @@ function mimicSelectFile(
     });
   });
   // @ts-expect-error [allow-protected-in-tests]
-  Object.defineProperty(formControl._inputNode, 'files', { value: mockFiles, writable: true });
+  Object.defineProperty(formControl._inputNode, 'files', {
+    value: mockFiles,
+    writable: true,
+  });
   // @ts-expect-error [allow-protected-in-tests]
-  formControl._inputNode.dispatchEvent(new Event('input', { bubbles: true }));
+  formControl._inputNode.dispatchEvent(
+    new Event('input', {
+      bubbles: true,
+    }),
+  );
 }
-
-const file = /** @type {InputFile} */ (
+const file =
+  /** @type {InputFile} */
   new File(['foo'], 'foo.txt', {
     type: 'text/plain',
-  })
-);
-const file2 = /** @type {InputFile} */ (
+  });
+const file2 =
+  /** @type {InputFile} */
   new File(['bar'], 'bar.txt', {
     type: 'text/plain',
-  })
-);
-const file3 = /** @type {InputFile} */ (
+  });
+const file3 =
+  /** @type {InputFile} */
   new File(['foo3'], 'foo3.txt', {
     type: 'text/plain',
-  })
-);
-const file4 = /** @type {InputFile} */ (
+  });
+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] } });
+    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);
@@ -110,12 +108,10 @@ describe('lion-input-file', () => {
 
     // 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> `);
 
@@ -129,26 +125,26 @@ describe('lion-input-file', () => {
     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] } });
+    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]
@@ -156,67 +152,55 @@ describe('lion-input-file', () => {
     // @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} */ (
+    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;
 
@@ -230,118 +214,101 @@ describe('lion-input-file', () => {
       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 => {
+      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 => {
+      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 => {
+      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 => {
+      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 => {
+      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 => {
+      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 => {
+      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} */ (
+    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;
 
@@ -355,57 +322,48 @@ describe('lion-input-file', () => {
       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 => {
+      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 => {
+      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 => {
+      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'));
-
+    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;
 
@@ -419,21 +377,18 @@ describe('lion-input-file', () => {
       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 => {
+      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
@@ -442,27 +397,23 @@ describe('lion-input-file', () => {
           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 => {
+      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'));
-
+    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]
@@ -470,13 +421,10 @@ describe('lion-input-file', () => {
     // @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]);
     });
@@ -486,54 +434,41 @@ describe('lion-input-file', () => {
     // @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 => {
+      el.addEventListener('model-value-changed', (event) => {
         counter += 1;
-        isTriggeredByUser = /** @type {CustomEvent} */ (event).detail.isTriggeredByUser;
+        isTriggeredByUser = /** @type {CustomEvent} */ event.detail.isTriggeredByUser;
       });
-
       el.modelValue = [file];
       expect(counter).to.equal(1);
       expect(isTriggeredByUser).to.be.false;
@@ -545,36 +480,29 @@ describe('lion-input-file', () => {
       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 => {
+      el.addEventListener('model-value-changed', (event) => {
         counter += 1;
-        isTriggeredByUser = /** @type {CustomEvent} */ (event).detail.isTriggeredByUser;
+        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);
@@ -582,15 +510,12 @@ describe('lion-input-file', () => {
       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]);
       });
@@ -601,7 +526,6 @@ describe('lion-input-file', () => {
       // @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]);
       });
@@ -613,23 +537,18 @@ describe('lion-input-file', () => {
       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);
@@ -637,10 +556,8 @@ describe('lion-input-file', () => {
       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]);
       });
@@ -653,17 +570,14 @@ describe('lion-input-file', () => {
       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} */ (
+      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]
@@ -671,23 +585,19 @@ describe('lion-input-file', () => {
       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} */ (
+      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);
@@ -697,7 +607,6 @@ describe('lion-input-file', () => {
       expect(fileListChangedEvent.detail.newFiles[1].name).to.equal('bar.txt');
     });
   });
-
   describe('status and error', () => {
     /**
      * @type {LionInputFile}
@@ -706,12 +615,15 @@ describe('lion-input-file', () => {
     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' }];
-
+      el.uploadResponse = [
+        {
+          name: 'foo.txt',
+          status: 'LOADING',
+          errorMessage: '500',
+        },
+      ];
       await el.updateComplete;
 
       // @ts-expect-error [allow-protected-in-test]
@@ -719,32 +631,27 @@ describe('lion-input-file', () => {
       // @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} */ (
+      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} */ (
+      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');
@@ -757,17 +664,22 @@ describe('lion-input-file', () => {
       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' })]}"
+          .validators="${[
+            new Required(
+              {},
+              {
+                getMessage: () => 'FooBar',
+              },
+            ),
+          ]}"
         >
         </lion-input-file>
       `);
-
       el.touched = true;
       el.dirty = true;
       await el.updateComplete;
@@ -777,7 +689,6 @@ describe('lion-input-file', () => {
       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 = [
         {
@@ -794,17 +705,14 @@ describe('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 = [
         {
@@ -818,7 +726,6 @@ describe('lion-input-file', () => {
 
       // @ts-expect-error [allow-protected-in-test]
       el.uploadResponse = uploadResponse;
-
       setTimeout(() => {
         mimicSelectFile(el, [file]);
       });
@@ -830,7 +737,6 @@ describe('lion-input-file', () => {
       expect(el._selectedFilesMetaData).to.deep.equal([]);
     });
   });
-
   describe('file select component with prefilled state', () => {
     /**
      * @type {LionInputFile}
@@ -849,7 +755,6 @@ describe('lion-input-file', () => {
         errorMessage: 'something went wrong',
       },
     ];
-
     beforeEach(async () => {
       el = await fixture(html`
         <lion-input-file name="myFiles" multiple="${true}"> </lion-input-file>
@@ -857,10 +762,8 @@ describe('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);
@@ -875,7 +778,6 @@ describe('lion-input-file', () => {
         'something went wrong',
       );
     });
-
     it('should remove file on click of cross button', async () => {
       /**
        * @type {Partial<InputFile>}
@@ -883,8 +785,13 @@ describe('lion-input-file', () => {
       const removedFile = {
         name: 'file2.txt',
         status: 'FAIL',
-        systemFile: { name: 'file2.txt' },
-        response: { 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');
@@ -905,14 +812,12 @@ describe('lion-input-file', () => {
           },
         }),
       );
-
       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>}
@@ -920,17 +825,19 @@ describe('lion-input-file', () => {
       const removedFile = {
         name: 'file2.txt',
         status: 'FAIL',
-        systemFile: { name: 'file2.txt' },
-        response: { 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
@@ -953,7 +860,6 @@ describe('lion-input-file', () => {
       });
     });
   });
-
   describe('drag and drop', () => {
     /**
      * @type {LionInputFile}
@@ -963,44 +869,60 @@ describe('lion-input-file', () => {
       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 }));
+      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 }));
+      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 }));
+      dropzone?.dispatchEvent(
+        new Event('dragenter', {
+          bubbles: true,
+        }),
+      );
       await el.updateComplete;
-
-      dropzone?.dispatchEvent(new Event('dragleave', { bubbles: true }));
+      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 }));
+      dropzone?.dispatchEvent(
+        new Event('dragenter', {
+          bubbles: true,
+        }),
+      );
       await el.updateComplete;
-
-      window.dispatchEvent(new Event('drop', { bubbles: true }));
+      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
@@ -1010,13 +932,18 @@ describe('lion-input-file', () => {
       // @ts-expect-error [allow-protected-in-test]
       await el._processDroppedFiles({
         // @ts-ignore
-        dataTransfer: { files: droppedFiles, items: [{ name: 'test.txt' }] },
+        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);
@@ -1024,14 +951,19 @@ describe('lion-input-file', () => {
       // @ts-expect-error [allow-protected-in-test]
       await el._processDroppedFiles({
         // @ts-ignore
-        dataTransfer: { files: list2.files, items: [{ name: 'test2.txt' }] },
+        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
@@ -1043,15 +975,20 @@ describe('lion-input-file', () => {
       // @ts-expect-error [allow-protected-in-test]
       await el._processDroppedFiles({
         // @ts-ignore
-        dataTransfer: { files: droppedFiles, items: [{ name: 'test.txt' }] },
+        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 () => {
       /**
@@ -1060,24 +997,24 @@ describe('lion-input-file', () => {
       const removeFile = {
         name: 'foo.txt',
         status: 'SUCCESS',
-        systemFile: { name: 'foo.txt' },
-        response: { 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
@@ -1105,7 +1042,6 @@ describe('lion-input-file', () => {
         status: 'SUCCESS',
       });
     });
-
     it('should remove file from displayed list if not available in uploadResponse array', async () => {
       const uploadResponse = [
         {
@@ -1120,14 +1056,12 @@ describe('lion-input-file', () => {
           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]
@@ -1150,13 +1084,11 @@ describe('lion-input-file', () => {
       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 = [
         {
@@ -1170,10 +1102,8 @@ describe('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 = [
         {
@@ -1183,15 +1113,12 @@ describe('lion-input-file', () => {
           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> `);
@@ -1206,7 +1133,6 @@ describe('lion-input-file', () => {
           `label-${el._inputId}`,
         );
       });
-
       it('select-button has aria-describedby set to the help-text, after and the feedback message', async () => {
         const uploadResponse = [
           {
@@ -1239,7 +1165,6 @@ describe('lion-input-file', () => {
           `after-${el._inputId}`,
         );
       });
-
       it('after contains upload name of file when uploadOnSelect is true and status is SUCCESS', async () => {
         const uploadResponse = [
           {
@@ -1252,7 +1177,6 @@ describe('lion-input-file', () => {
         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;
@@ -1261,7 +1185,6 @@ describe('lion-input-file', () => {
           'Uploaded file: file1.txt',
         );
       });
-
       it('after contains upload name of file when uploadOnSelect is false and status is SUCCESS', async () => {
         const uploadResponse = [
           {
@@ -1272,7 +1195,6 @@ describe('lion-input-file', () => {
           },
         ];
         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;
@@ -1281,7 +1203,6 @@ describe('lion-input-file', () => {
           'Selected file: file1.txt',
         );
       });
-
       it('after contains upload validator message of file when FAIL', async () => {
         const uploadResponse = [
           {
@@ -1292,14 +1213,12 @@ describe('lion-input-file', () => {
           },
         ];
         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 = [
           {
@@ -1320,13 +1239,11 @@ describe('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 = [
           {
@@ -1347,7 +1264,6 @@ describe('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.',