Tests for Upload Progress Bar for files in Sendbox (#1672)

* Resetting branch

* minor change

* Update composite automation snapshots

* Update composite automation snapshots

* Update composite automation snapshots

* Update composite automation snapshots

* Update composite automation snapshots

* Update composite automation snapshots

* Update composite automation snapshots

* Update composite automation snapshots

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Anjul Garg <anjulgarg@live.com>

Author: 3 people

packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/video-gallery-page-camera-toggled-Mobile-Android-Portrait-linux.png

@@ -62,3 +62,88 @@ test.describe('Filesharing SendBox', async () => {
     expect(await page.screenshot()).toMatchSnapshot('filesharing-sendbox-filecards.png');
   });
 });
+
+test.describe('Filesharing ProgressBar', async () => {
+  test.skip(isTestProfileStableFlavor());
+
+  test.beforeEach(async ({ pages, users, serverUrl }) => {
+    await chatTestSetup({ pages, users, serverUrl });
+  });
+
+  test('is visible if progress is between 0 and 1', async ({ serverUrl, users, page }) => {
+    await page.goto(
+      buildUrl(serverUrl, users[0], {
+        useFileSharing: 'true',
+        uploadedFiles: JSON.stringify([
+          {
+            name: 'SampleFile.pdf',
+            extension: 'pdf',
+            url: 'https://sample.com/SampleFile.pdf',
+            progress: 0.5
+          },
+          {
+            name: 'SampleXlsLoooongName.xlsx',
+            extension: 'xslx',
+            url: 'https://sample.com/SampleXls.xlsx',
+            progress: 0.8
+          }
+        ])
+      })
+    );
+    await waitForChatCompositeToLoad(page);
+    await stubMessageTimestamps(page);
+    expect(await page.screenshot()).toMatchSnapshot('filesharing-progress-bar-visible.png');
+  });
+
+  test('is not visible if progress is 0 or less than 0', async ({ serverUrl, users, page }) => {
+    await page.goto(
+      buildUrl(serverUrl, users[0], {
+        useFileSharing: 'true',
+        uploadedFiles: JSON.stringify([
+          {
+            name: 'SampleFile.pdf',
+            extension: 'pdf',
+            url: 'https://sample.com/SampleFile.pdf',
+            progress: 0
+          },
+          {
+            name: 'SampleXlsLoooongName.xlsx',
+            extension: 'xslx',
+            url: 'https://sample.com/SampleXls.xlsx',
+            progress: -1
+          }
+        ])
+      })
+    );
+    await waitForChatCompositeToLoad(page);
+    await stubMessageTimestamps(page);
+    expect(await page.screenshot()).toMatchSnapshot('filesharing-progress-bar-not-visible-progress-less-than-zero.png');
+  });
+
+  test('is not visible if progress is 1 or greater than 1', async ({ serverUrl, users, page }) => {
+    await page.goto(
+      buildUrl(serverUrl, users[0], {
+        useFileSharing: 'true',
+        uploadedFiles: JSON.stringify([
+          {
+            name: 'SampleFile.pdf',
+            extension: 'pdf',
+            url: 'https://sample.com/SampleFile.pdf',
+            progress: 1
+          },
+          {
+            name: 'SampleXlsLoooongName.xlsx',
+            extension: 'xslx',
+            url: 'https://sample.com/SampleXls.xlsx',
+            progress: 10
+          }
+        ])
+      })
+    );
+    await waitForChatCompositeToLoad(page);
+    await stubMessageTimestamps(page);
+    expect(await page.screenshot()).toMatchSnapshot(
+      'filesharing-progress-bar-not-visible-progress-greater-than-one.png'
+    );
+  });
+});

packages/react-composites/tests/browser/chat/FileSharing.test.ts

@@ -14,6 +14,8 @@ import {
   createCompletedFileUpload,
   useAzureCommunicationChatAdapter
 } from '../../../../src';
+// eslint-disable-next-line no-restricted-imports
+import { FileUpload } from '../../../../src/composites/ChatComposite/file-sharing';
 import { IDS } from '../../common/constants';
 import { initializeIconsForUITests, verifyParamExists } from '../../common/testAppUtils';
 
@@ -56,8 +58,16 @@ function App(): JSX.Element {
 
   React.useEffect(() => {
     if (adapter && uploadedFiles.length) {
-      const files = uploadedFiles.map((file) => createCompletedFileUpload(file));
-      adapter.registerFileUploads(files);
+      uploadedFiles.forEach((file) => {
+        if (file.progress) {
+          const fileUpload = new FileUpload(new File([], file.name));
+          adapter.registerFileUploads([fileUpload]);
+          fileUpload.notifyUploadProgressChanged(file.progress);
+        } else {
+          const completedFileUpload = createCompletedFileUpload(file);
+          adapter.registerFileUploads([completedFileUpload]);
+        }
+      });
     }
   }, [adapter]);