@oiz/stzh-components 4.1.1-beta2 → 4.1.1-beta3

package/dist/collection/components/stzh-upload/stzh-upload.stories.js

@@ -3,29 +3,59 @@ import { withActions } from '@storybook/addon-actions/decorator';
 import readme from './readme.md?raw';
 
 import { getFigmaLink } from '../../../figma';
+import {
+  expectIsVisible,
+  getComponentByTestId, sleep,
+  waitForElement,
+  waitForEvent
+} from "../../../.storybook/utils/component-test-utils";
+import { expect } from "@storybook/jest";
+import { fireEvent } from "@storybook/testing-library";
 
 const COMPONENT_NAME = 'stzh-upload';
 const story = createComponentStory(COMPONENT_NAME);
-const defaultLabel = 'Lohnausweis';
-const acceptedFilesDefault = '.jpg,.png,.pdf';
+const UPLOAD_TEST_ID = 'UPLOAD_TEST_ID';
+let stzhUploadEl;
 
 const TEMPLATE = `
-<stzh-upload auto-process-queue="false" hide-progress></stzh-upload>
+<stzh-upload hide-progress data-testid="${UPLOAD_TEST_ID}"></stzh-upload>
 `;
 
-// for testing form data
-// const TEMPLATE = `
-// <form action="text" method="post">
-//   <stzh-upload name="stzh-file" auto-process-queue="false" hide-progress prevent-hidden-input-clear></stzh-upload>
-//   <stzh-input name="stzh-input">
+/**
+ * Simulates uploading files into stzh-upload component via file browser.
+ *
+ * @param targetEl        The host element (stzh-upload) with the file input.
+ * @param files           Array of files: each { filename, filetype, content }
+ */
+async function chooseFilesToUpload(
+  targetEl,
+  files,
+) {
+  // Prepare DataTransfer with files
+  const dataTransfer = new DataTransfer();
+  files.forEach(fileDef => {
+    const file = new File(
+      [fileDef.content ?? 'dummy content'],
+      fileDef.filename,
+      { type: fileDef.filetype }
+    );
+    dataTransfer.items.add(file);
+  });
 
-//   <input type="file" name="stzh-native-file-input">
-//   <input type="text" name="stzh-native-input">
+  const fileInput = targetEl.querySelector('input[type="file"]');
+  if (!fileInput) throw new Error('File input not found');
 
-//   <button type="submit">Test</button>
-//   <button type="reset">Reset</button>
-// </form>
-// `;
+  // Assign files (using DataTransfer for realism)
+  fileInput.focus();
+  // @ts-ignore: files is readonly, but works in test envs
+  fileInput.files = dataTransfer.files;
+
+  fileInput.dispatchEvent(new Event('input', { bubbles: true }));
+  await new Promise(r => setTimeout(r, 0));
+  fileInput.dispatchEvent(new Event('change', { bubbles: true }));
+  await new Promise(r => setTimeout(r, 0));
+  fileInput.blur();
+}
 
 export default {
   title: 'Components/Upload',
@@ -72,43 +102,509 @@ export const Default = {
   render: (args) => story(args, TEMPLATE),
   args: {
     url: '/upload',
-    label: defaultLabel,
-    'accepted-files': acceptedFilesDefault,
-    'max-filesize-total': 15,
-    'max-filesize': 5
+    'auto-process-queue': false
   },
+  play: async ({ canvasElement, step }) => {
+    stzhUploadEl = await getComponentByTestId( canvasElement, UPLOAD_TEST_ID);
+
+    await step('Assert attributes', async () => {
+      expect(stzhUploadEl).toHaveAttribute('auto-process-queue', 'false');
+      expect(stzhUploadEl).toHaveAttribute('hide-progress');
+      expect(stzhUploadEl).toHaveAttribute('url', '/upload');
+      expect(stzhUploadEl).toHaveAttribute('accepted-files', '.jpg,.png,.pdf');
+      expect(stzhUploadEl).not.toHaveAttribute('label');
+      expect(stzhUploadEl).not.toHaveAttribute('disabled');
+      expect(stzhUploadEl).not.toHaveAttribute('max-filesize-total');
+      expect(stzhUploadEl).not.toHaveAttribute('max-filesize');
+      expect(stzhUploadEl).not.toHaveAttribute('photographing-enabled');
+      expect(stzhUploadEl).not.toHaveAttribute('prevent-duplicate-file-names');
+    });
+
+    await step('Upload button and hints for file formats and max size are visible', async () => {
+      const uploadButtonEl = stzhUploadEl.querySelector('.stzh-upload__button');
+      expectIsVisible(uploadButtonEl);
+
+      const uploadInstructionsEl = stzhUploadEl.querySelector('.stzh-upload__instructions');
+      expectIsVisible(uploadInstructionsEl);
+
+      expect(uploadInstructionsEl.textContent).toContain('Allowed file formats: .jpg,.png,.pdf (max. 25 MB per file)');
+      expect(uploadInstructionsEl.textContent).toContain('Max. size of all files: 100 MB');
+
+      // photographing button is not visible
+      const uploadButtonScanEl = stzhUploadEl.querySelector('.stzh-upload__button-scan');
+      expect(uploadButtonScanEl).toBeNull();
+    });
+
+    await step('Assert event details of stzhFilesAdded, stzhFileRemove and stzhFileRemoved', async () => {
+
+      const stzhFilesAddedEventDetailPromise = waitForEvent(stzhUploadEl, 'stzhFilesAdded');
+
+      chooseFilesToUpload(stzhUploadEl, [
+        { filename: 'file-1.pdf', filetype: 'application/pdf', content: 'file 1 pdf' },
+        { filename: 'file-2.png', filetype: 'image/png', content: 'file 2 png' }
+      ]);
+
+      const stzhFilesAddedEventDetail = await stzhFilesAddedEventDetailPromise;
+      expect(stzhFilesAddedEventDetail).toHaveProperty('component', 'stzh-upload');
+      const files = stzhFilesAddedEventDetail.files;
+      expect(files).toHaveLength(2);
+      expect(files[0]).toHaveProperty('status', 'queued');
+      expect(files[0].upload).toHaveProperty('filename', 'file-1.pdf');
+      expect(files[1]).toHaveProperty('status', 'queued');
+      expect(files[1].upload).toHaveProperty('filename', 'file-2.png');
+
+      // Remove files
+      const uploadActions = await waitForElement(() => stzhUploadEl, '.stzh-upload__delete', {multiple: true});
+      expect(uploadActions.length).toBe(2);
+
+      let stzhFileRemoveDetail;
+      stzhUploadEl.addEventListener('stzhFileRemove', (ev) => {
+        stzhFileRemoveDetail = ev.detail;
+      });
+      let stzhFileRemovedDetail;
+      stzhUploadEl.addEventListener('stzhFileRemoved', (ev) => {
+        stzhFileRemovedDetail = ev.detail;
+      });
+      fireEvent.click(uploadActions[0]);
+      expect(stzhFileRemoveDetail).toHaveProperty('component', 'stzh-upload');
+      expect(stzhFileRemoveDetail.file.upload).toHaveProperty('filename', 'file-1.pdf');
+
+      expect(stzhFileRemovedDetail).toHaveProperty('component', 'stzh-upload');
+      expect(stzhFileRemovedDetail.file.upload).toHaveProperty('filename', 'file-1.pdf');
+
+      fireEvent.click(uploadActions[1]);
+    });
+  }
 };
 
 export const ExistingFiles = {
   render: (args) => story(args, TEMPLATE),
   args: {
     url: '/upload',
-    label: defaultLabel,
-    'accepted-files': acceptedFilesDefault,
+    label: 'Lohnausweise',
     existingFiles: [
       { name: 'Filename.pdf', url: 'media/samples/document.pdf', size: 12572426, id: 'upload-1' },
-      { name: 'Filename2.pdf', url: 'media/samples/document.pdf', size: 22345, id: 'upload-2' },
-      { name: 'Filename3.pdf', url: 'media/samples/document.pdf', size: 2705487, id: 'upload-3' },
+      { name: 'Filename2.png', url: 'media/samples/document.png', size: 22345, id: 'upload-2' },
+      { name: 'Filename3.jpg', url: 'media/samples/document.jpg', size: 2705487, id: 'upload-3' },
     ],
+    'auto-process-queue': false
   },
+  play: async ({ canvasElement, step }) => {
+    stzhUploadEl = await getComponentByTestId( canvasElement, UPLOAD_TEST_ID);
+
+    await step('Assert attributes', async () => {
+      expect(stzhUploadEl).toHaveAttribute('label', 'Lohnausweise');
+    });
+
+    await step('Existing files are being displayed', async () => {
+      const uploadPreviewsContainerEl = stzhUploadEl.querySelector('.stzh-upload__previews');
+      const uploadPreviews = uploadPreviewsContainerEl.querySelectorAll('.stzh-upload__preview');
+      expect(uploadPreviews.length).toBe(3);
+
+      // Preview elements contain correct filename, size and type
+      const expectedFilename1 = 'Filename.pdf';
+      const expectedFiletype1 = 'pdf';
+      const expectedFilesize1 = '11.99 MiB';
+      const actualTextPreview1 = uploadPreviews[0].textContent || '';
+      expect(actualTextPreview1).toContain(expectedFilename1);
+      expect(actualTextPreview1).toContain(expectedFiletype1);
+      expect(actualTextPreview1).toContain(expectedFilesize1);
+
+      const expectedFilename2 = 'Filename2.png';
+      const expectedFiletype2 = 'png';
+      const expectedFilesize2 = '21.82 KiB';
+      const actualTextPreview2 = uploadPreviews[1].textContent || '';
+      expect(actualTextPreview2).toContain(expectedFilename2);
+      expect(actualTextPreview2).toContain(expectedFiletype2);
+      expect(actualTextPreview2).toContain(expectedFilesize2);
+
+      const expectedFilename3 = 'Filename3.jpg';
+      const expectedFiletype3 = 'jpg';
+      const expectedFilesize3 = '2.58 MiB';
+      const actualTextPreview3 = uploadPreviews[2].textContent || '';
+      expect(actualTextPreview3).toContain(expectedFilename3);
+      expect(actualTextPreview3).toContain(expectedFiletype3);
+      expect(actualTextPreview3).toContain(expectedFilesize3);
+    });
+  }
 };
 
-export const Photographing = {
+export const PhotographingEnabled = {
   render: (args) => story(args, TEMPLATE),
   args: {
     url: '/upload',
-    label: defaultLabel,
-    'accepted-files': '.jpg,.jpeg,.png',
+    label: 'Lohnausweis',
     'photographing-enabled': true,
+    'auto-process-queue': false
+  },
+  play: async ({ canvasElement, step }) => {
+    stzhUploadEl = await getComponentByTestId(canvasElement, UPLOAD_TEST_ID);
+
+    await step('Assert attributes', async () => {
+      expect(stzhUploadEl).toHaveAttribute('photographing-enabled', 'true');
+    });
+
+    await step('Click on photograph document button shows instruction', async () => {
+      const uploadButtonScanEl = await waitForElement(() => stzhUploadEl, '.stzh-upload__button-scan');
+      expect(uploadButtonScanEl).not.toBeNull();
+      uploadButtonScanEl.click();
+
+      const dialogEl = await waitForElement(() => stzhUploadEl, '.stzh-dialog');
+      expect(dialogEl.textContent).toContain('Connect smartphone or tablet');
+      expect(dialogEl.textContent).toContain('Scan the QR code with the camera of your mobile device');
+
+      // QR-Code canvas exists
+      const canvasEl = dialogEl.querySelector('canvas.stzh-upload-photographing-qrcode');
+      expect(canvasEl).not.toBeNull();
+
+      // click back Button
+      const backButtonEl = dialogEl.querySelector('.stzh-upload-photographing__back-button');
+      expect(backButtonEl).not.toBeNull();
+      backButtonEl.click();
+    });
+  }
+};
+
+export const LimitedFileSize = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    url: '/upload',
+    "max-filesize-total": 6,
+    "max-filesize": 2,
+    "accepted-files": '.pdf',
+    'auto-process-queue': false
   },
+  parameters: {
+    test: {
+      dangerouslyIgnoreUnhandledErrors: true
+    }
+  },
+  play: async ({ canvasElement, step }) => {
+    stzhUploadEl = await getComponentByTestId( canvasElement, UPLOAD_TEST_ID);
+
+    await step('Assert attributes', async () => {
+      expect(stzhUploadEl).toHaveAttribute('max-filesize', '2');
+      expect(stzhUploadEl).toHaveAttribute('max-filesize-total', '6');
+      expect(stzhUploadEl).toHaveAttribute('accepted-files', '.pdf');
+    });
+
+    await step('Non-default max sizes are being displayed', async () => {
+      const uploadInstructionsEl = stzhUploadEl.querySelector('.stzh-upload__instructions');
+      expect(uploadInstructionsEl.textContent).toContain('Allowed file formats: .pdf (max. 2 MB per file)');
+      expect(uploadInstructionsEl.textContent).toContain('Max. size of all files: 6 MB');
+    });
+
+    await step('Exceeding max-filesize renders file preview with error status and triggers stzhError event', async () => {
+      const MB = 1024 * 1024;
+
+      const stzhErrorEventDetailPromise = waitForEvent(stzhUploadEl, 'stzhError');
+
+      chooseFilesToUpload(stzhUploadEl, [
+        { filename: 'below-2-MB.pdf', filetype: 'application/pdf', content: 'a'.repeat(1.99 * MB) },
+        { filename: 'above-2-MB.pdf', filetype: 'application/pdf', content: 'b'.repeat(2.01 * MB) }
+      ]);
+
+      // too large file in .stzh-upload__errors container and contains message
+      const uploadErrorsContainerEl = await waitForElement(() => stzhUploadEl, '.stzh-upload__errors');
+      const uploadErrorPreviews = await waitForElement(() => uploadErrorsContainerEl, '.stzh-upload__info-wrapper', {multiple: true});
+      expect(uploadErrorPreviews).toHaveLength(1);
+      expect(uploadErrorPreviews[0].textContent).toContain('File is too big (2.01MiB). Max filesize: 2MiB.');
+
+      // stzhError event is triggered and has correct values
+      const stzhErrorEventDetail = await stzhErrorEventDetailPromise;
+      expect(stzhErrorEventDetail).toHaveProperty('component', 'stzh-upload');
+      expect(stzhErrorEventDetail).toHaveProperty('message', 'File is too big (2.01MiB). Max filesize: 2MiB.');
+      expect(stzhErrorEventDetail.file).toHaveProperty('accepted', false);
+      expect(stzhErrorEventDetail.file).toHaveProperty('status', 'error');
+      expect(stzhErrorEventDetail.file.upload).toHaveProperty('filename', 'above-2-MB.pdf');
+
+      // reset to initial state
+      const uploadActions = await waitForElement(() => stzhUploadEl, '.stzh-upload__delete', {multiple: true});
+      fireEvent.click(uploadActions[0]);
+      fireEvent.click(uploadActions[1]);
+    });
+
+    await step('Exceeding max-filesize-total displays message and does not add last file', async () => {
+      const MB = 1024 * 1024;
+
+      chooseFilesToUpload(stzhUploadEl, [
+        { filename: '1-MB.pdf', filetype: 'application/pdf', content: 'a'.repeat(1 * MB) },
+        { filename: '2-MB.pdf', filetype: 'application/pdf', content: 'a'.repeat(2 * MB) },
+        { filename: '2-MB-2.pdf', filetype: 'application/pdf', content: 'a'.repeat(2 * MB) },
+        { filename: 'above-1-MB.pdf', filetype: 'application/pdf', content: 'b'.repeat(1.01 * MB) }
+      ]);
+
+      // the 4th file won't appear in the previews
+      const uploadPreviewsContainerEl = await waitForElement(() => stzhUploadEl, '.stzh-upload__previews');
+
+      const uploadPreviews = await waitForElement(() => uploadPreviewsContainerEl, '.stzh-upload__preview', {multiple: true});
+      expect(uploadPreviews).toHaveLength(3);
+
+      // message
+      const stzhUploadMessageTextWrapperEl = await waitForElement(() => stzhUploadEl, '.stzh-message__text-wrapper');
+      expect(stzhUploadMessageTextWrapperEl.textContent).toContain('File(s) could not be uploaded.');
+      expect(stzhUploadMessageTextWrapperEl.textContent).toContain('The total size of all files is too big (6.0MiB). Maximum allowed size: 6MiB.');
+    });
+  }
 };
 
-export const Duplicates = {
+export const PreventDuplicateFileNames = {
   render: (args) => story(args, TEMPLATE),
   args: {
     url: '/upload',
-    label: defaultLabel,
-    'accepted-files': acceptedFilesDefault,
+    label: 'Lohnausweis',
     'prevent-duplicate-file-names': true,
+    'auto-process-queue': false
+  },
+  play: async ({ canvasElement, step }) => {
+    stzhUploadEl = await getComponentByTestId( canvasElement, UPLOAD_TEST_ID);
+
+    await step('Assert attributes', async () => {
+      expect(stzhUploadEl).toHaveAttribute('prevent-duplicate-file-names', 'true');
+    });
+
+    await step('Duplicate filename message is being displayed', async () => {
+      chooseFilesToUpload(stzhUploadEl, [
+        { filename: 'file-1.pdf', filetype: 'application/pdf', content: 'file 1 pdf' },
+        { filename: 'file-1.pdf', filetype: 'application/pdf', content: 'file 1 **different content** pdf' },
+      ]);
+
+      const stzhUploadMessageTextWrapperEl = await waitForElement(() => stzhUploadEl, '.stzh-message__text-wrapper');
+      expect(stzhUploadMessageTextWrapperEl.textContent).toContain('A file with that name already exists');
+      expect(stzhUploadMessageTextWrapperEl.textContent).toContain('file-1.pdf');
+
+      // wait until duplicate preview dissolves
+      await sleep(2100);
+
+      const uploadPreviews = await waitForElement(() => stzhUploadEl, '.stzh-upload__preview', {multiple: true});
+      expect(uploadPreviews.length).toBe(1);
+    });
+  }
+};
+
+export const Disabled = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    url: '/upload',
+    disabled: true,
+    'auto-process-queue': false
+  },
+  play: async ({ canvasElement, step }) => {
+    stzhUploadEl = await getComponentByTestId( canvasElement, UPLOAD_TEST_ID);
+
+    await step('Assert attributes', async () => {
+      expect(stzhUploadEl).toHaveAttribute('disabled');
+    });
+
+    await step('Upload button is disabled', async () => {
+      const uploadButtonEl = stzhUploadEl.querySelector('.stzh-upload__button');
+      expect(uploadButtonEl).toHaveAttribute('disabled');
+    });
+  }
+};
+
+const TEMPLATE_FORM_DATA = `
+<form action="/upload" method="post" enctype="multipart/form-data">
+  <stzh-vspace>
+    <stzh-text size="milli">Make sure to set prevent-hidden-input-clear=true if you use stzh-upload inside a multipart/formdata form with method=post.</stzh-text>
+    <stzh-upload name="stzh-file" hide-progress data-testid="${UPLOAD_TEST_ID}"></stzh-upload>
+    <stzh-text size="milli">Native file input as comparison</stzh-text>
+    <input type="file" name="stzh-native-file-input">
+    <div>
+      <stzh-input name="stzh-input" label="Text input" hide-optional="true" value="Default value" default-value="Default value">
+    </div>
+  </stzh-vspace>
+  <stzh-vspace></stzh-vspace>
+  <stzh-button type="submit">Submit</stzh-button>
+  <stzh-button type="reset" variant="secondary">Reset</stzh-button>
+</form>
+`;
+
+// prevent redirecting to upload url after submit in the next test
+let submitEvent;
+function handleSubmit(ev) {
+  submitEvent = ev;
+  ev.preventDefault();
+}
+
+export const InsideNativeFormUsingPost = {
+  render: (args) => story(args, TEMPLATE_FORM_DATA),
+  args: {
+    url: '/upload',
+    'prevent-hidden-input-clear': true,
+    'auto-process-queue': false,
+    'hide-progress': true
+  },
+  play: async ({ canvasElement, step }) => {
+    stzhUploadEl = await getComponentByTestId(canvasElement, UPLOAD_TEST_ID);
+    const formEl = canvasElement.querySelector('form');
+    const nativeFileInput = formEl.querySelector('input[type="file"][name="stzh-native-file-input"]');
+    const textInput = formEl.querySelector('stzh-input');
+    const submitButton = formEl.querySelector('stzh-button button[type="submit"]');
+
+    await step('FormData contains all form fields after submit', async () => {
+
+      // Upload file to stzh-upload
+      await chooseFilesToUpload(stzhUploadEl, [
+        { filename: 'file1.pdf', filetype: 'application/pdf', content: 'file one' }
+      ]);
+
+      // Upload file to native input
+      const nativeFile = new File(['native file'], 'nativefile.txt', { type: 'text/plain' });
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(nativeFile);
+      nativeFileInput.files = dataTransfer.files;
+      nativeFileInput.dispatchEvent(new Event('input', { bubbles: true }));
+      nativeFileInput.dispatchEvent(new Event('change', { bubbles: true }));
+
+      // Spy on submit event > don’t reload page
+      formEl.addEventListener('submit', handleSubmit,  { once: true });
+
+      // Submit the form
+      submitButton.click();
+      await new Promise(r => setTimeout(r, 0));
+
+      // Assert submit event happened
+      expect(submitEvent).toBeDefined();
+
+      // Assert FormData fields
+      const formData = new FormData(formEl);
+      expect([...formData.keys()]).toEqual(
+        expect.arrayContaining(['stzh-file', 'stzh-native-file-input', 'stzh-input'])
+      );
+
+      const uploadedFile = formData.get('stzh-file');
+      expect(uploadedFile && uploadedFile.constructor.name).toBe('File');
+      expect(uploadedFile.name).toBe('file1.pdf');
+
+      const uploadedNativeFile = formData.get('stzh-native-file-input');
+      expect(uploadedNativeFile && uploadedNativeFile.constructor.name).toBe('File');
+      expect(uploadedNativeFile.name).toBe('nativefile.txt');
+
+      expect(formData.get('stzh-input')).toBe('Default value');
+    });
+
+    await step('reset clears formdata', async () => {
+      // Find the reset button (target the native button inside stzh-button)
+      const resetButton = formEl.querySelector('stzh-button[type="reset"] button[type="reset"]');
+
+      // Click the reset button
+      resetButton.click();
+      await new Promise(r => setTimeout(r, 200));
+
+      // Native file input should have no files
+      expect(nativeFileInput.files.length).toBe(0);
+
+      // Custom upload previews should be gone
+      const uploadPreviewsContainerEl = await waitForElement(() => stzhUploadEl, '.stzh-upload__previews');
+      const uploadPreviews = uploadPreviewsContainerEl.querySelectorAll('.stzh-upload__preview');//await waitForElement(() => uploadPreviewsContainerEl, '.stzh-upload__preview', {multiple: true});
+      expect(uploadPreviews).toHaveLength(0);
+
+      // Text input should be reset to default value
+      const actualTextInput = textInput.querySelector('input');
+      expect(actualTextInput.value).toBe('Default value');
+
+      // assert FormData to verify all fields are reset
+      const formDataAfterReset = new FormData(formEl);
+
+      // stzh-input is reset to its defautl value
+      expect(formDataAfterReset.get('stzh-input')).toBe('Default value');
+
+      // File inputs after reset
+      const uploadedFile = formDataAfterReset.get('stzh-file');
+      expect(
+        uploadedFile === null ||
+        (typeof uploadedFile === 'object' && Object.keys(uploadedFile).length === 0)
+      ).toBe(true);
+
+      const uploadedFileNative = formDataAfterReset.get('stzh-native-file-input');
+      expect(
+        uploadedFileNative === null ||
+        (typeof uploadedFileNative === 'object' && Object.keys(uploadedFileNative).length === 0)
+      ).toBe(true);
+    });
+  },
+};
+
+export const AutoProcessQueue = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    url: '/upload',
+    'auto-process-queue': true,
+    'disable-toasts': true
+  },
+  play: async ({ canvasElement, step }) => {
+    stzhUploadEl = await getComponentByTestId(canvasElement, UPLOAD_TEST_ID);
+
+    await step('stzhProcessing, stzhSending, stzhProgress, stzhProgressTotal, stzhError (404) and stzhComplete events are being triggered', async () => {
+
+      const stzhProcessingEventDetailPromise = waitForEvent(stzhUploadEl, 'stzhProcessing');
+      const stzhSendingEventDetailPromise = waitForEvent(stzhUploadEl, 'stzhSending');
+      const stzhProgressEventDetailPromise = waitForEvent(stzhUploadEl, 'stzhProgress');
+      const stzhProgressTotalEventDetailPromise = waitForEvent(stzhUploadEl, 'stzhProgressTotal');
+      const stzhErrorEventDetailPromise = waitForEvent(stzhUploadEl, 'stzhError');
+      const stzhCompleteEventDetailPromise = waitForEvent(stzhUploadEl, 'stzhComplete');
+
+      chooseFilesToUpload(stzhUploadEl, [
+        { filename: 'file-1.pdf', filetype: 'application/pdf', content: 'file 1 pdf' }
+      ]);
+
+      const stzhProcessingEventDetail = await stzhProcessingEventDetailPromise;
+      expect(stzhProcessingEventDetail).toHaveProperty('component', 'stzh-upload');
+      const stzhProcessingEventDetailFile = stzhProcessingEventDetail.file;
+      expect(stzhProcessingEventDetailFile).toHaveProperty('status', 'uploading');
+      const stzhProcessingEventDetailUpload = stzhProcessingEventDetail.file.upload;
+      expect(stzhProcessingEventDetailUpload).toHaveProperty('filename', 'file-1.pdf');
+      expect(stzhProcessingEventDetailUpload).toHaveProperty('progress', 0);
+      expect(stzhProcessingEventDetailUpload).toHaveProperty('uuid');
+
+      const stzhSendingEventDetail = await stzhSendingEventDetailPromise;
+      expect(stzhSendingEventDetail).toHaveProperty('component', 'stzh-upload');
+      const stzhSendingEventDetailFile = stzhSendingEventDetail.file;
+      expect(stzhSendingEventDetailFile).toHaveProperty('status', 'uploading');
+      const stzhSendingEventDetailUpload = stzhProcessingEventDetail.file.upload;
+      expect(stzhSendingEventDetailUpload).toHaveProperty('filename', 'file-1.pdf');
+      expect(stzhSendingEventDetailUpload).toHaveProperty('progress', 0);
+      expect(stzhSendingEventDetailUpload).toHaveProperty('uuid');
+
+      const stzhProgressEventDetail = await stzhProgressEventDetailPromise;
+      expect(stzhProgressEventDetail).toHaveProperty('component', 'stzh-upload');
+      expect(stzhProgressEventDetail).toHaveProperty('bytesSent', 199);
+      const stzhProgressEventDetailFile = stzhProgressEventDetail.file;
+      expect(stzhProgressEventDetailFile).toHaveProperty('status', 'uploading');
+      const stzhProgressEventDetailUpload = stzhProgressEventDetail.file.upload;
+      expect(stzhProgressEventDetailUpload).toHaveProperty('filename', 'file-1.pdf');
+      expect(stzhProgressEventDetailUpload).toHaveProperty('progress', 100);
+      expect(stzhProgressEventDetailUpload).toHaveProperty('uuid');
+
+      const stzhProgressTotalEventDetail = await stzhProgressTotalEventDetailPromise;
+      expect(stzhProgressTotalEventDetail).toHaveProperty('component', 'stzh-upload');
+      expect(stzhProgressTotalEventDetail).toHaveProperty('totalBytes', 199);
+      expect(stzhProgressTotalEventDetail).toHaveProperty('totalBytesSent', 199);
+      expect(stzhProgressTotalEventDetail).toHaveProperty('totalUploadProgress', 100);
+
+      const stzhErrorEventDetail = await stzhErrorEventDetailPromise;
+      expect(stzhErrorEventDetail).toHaveProperty('component', 'stzh-upload');
+      expect(stzhErrorEventDetail).toHaveProperty('message');
+      const stzhErrorEventDetailFile = stzhErrorEventDetail.file;
+      expect(stzhErrorEventDetailFile).toHaveProperty('status', 'error');
+      const stzhErrorEventDetailUpload = stzhErrorEventDetail.file.upload;
+      expect(stzhErrorEventDetailUpload).toHaveProperty('filename', 'file-1.pdf');
+      expect(stzhErrorEventDetailUpload).toHaveProperty('progress', 100);
+      expect(stzhErrorEventDetailUpload).toHaveProperty('total', 199);
+      expect(stzhErrorEventDetailUpload).toHaveProperty('uuid');
+
+      const stzhCompleteEventDetail = await stzhCompleteEventDetailPromise;
+      expect(stzhCompleteEventDetail).toHaveProperty('component', 'stzh-upload');
+      const stzhCompleteEventDetailFile = stzhCompleteEventDetail.file;
+      expect(stzhCompleteEventDetailFile).toHaveProperty('status', 'error');
+      const stzhCompleteEventDetailUpload = stzhCompleteEventDetail.file.upload;
+      expect(stzhCompleteEventDetailUpload).toHaveProperty('filename', 'file-1.pdf');
+      expect(stzhCompleteEventDetailUpload).toHaveProperty('bytesSent', 199);
+      expect(stzhCompleteEventDetailUpload).toHaveProperty('total', 199);
+      expect(stzhCompleteEventDetailUpload).toHaveProperty('progress', 100);
+      expect(stzhCompleteEventDetailUpload).toHaveProperty('uuid');
+
+    });
   },
 };

package/dist/components/index.js

@@ -2,7 +2,7 @@ export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOp
 export { S as StzhSocialmediastreamItemActionVariant, V as VBZ, t as tc } from './p-f5779736.js';
 
 const name = "@oiz/stzh-components";
-const version = "4.1.1-beta2";
+const version = "4.1.1-beta3";
 
 const packageName = name.substring(name.indexOf('/')+1);
 // let focused = false;