Merge pull request #8987 from infor-design/8904-fileuploadadv-beforef…

…ileupload 8904 - FileuploadAdvanced beforefileupload
infor-design · Sep 3, 2024 · b790728 · b790728
2 parents 05e9496 + 2910200
commit b790728
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 29 deletions.
diff --git a/app/views/components/fileupload-advanced/example-index.html b/app/views/components/fileupload-advanced/example-index.html
@@ -21,6 +21,8 @@
           value: 'fileupload-advanced-automation-id'
         }
       ]
-    })
+    }).on('beforefileupload', (args) => {
+      console.log(args);
+    });
   });
 </script>
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## v4.99.0 Features
 
 - `[Datagrid]` Added `scrollRowIntoView`. ([NG#1761](https://github.com/infor-design/enterprise-ng/issues/1761))
+- `[FileuploadAdvanced]` Added beforefileupload event in handleFileUpload method. ([#8904](https://github.com/infor-design/enterprise/issues/8904))
 - `[Listview]` Added compact layout in listview. ([#8959](https://github.com/infor-design/enterprise/issues/8959))
 - `[Module Tabs]` Updated tab colors. ([#8831](https://github.com/infor-design/enterprise/issues/8831))
 - `[Notification]` Added a callback function setting to be called when the notification is closed. ([#8767](https://github.com/infor-design/enterprise/issues/8767))

diff --git a/src/components/fileupload-advanced/fileupload-advanced.js b/src/components/fileupload-advanced/fileupload-advanced.js
@@ -256,6 +256,8 @@ FileUploadAdvanced.prototype = {
       return;
     }
 
+    this.element.triggerHandler('beforefileupload', [files]);
+
     const s = this.settings;
 
     // Clear previous errors in general area

diff --git a/tests/fileupload-advanced/fileupload-advanced.spec.js b/tests/fileupload-advanced/fileupload-advanced.spec.js
@@ -4,45 +4,68 @@ import { expect } from '@playwright/test';
 import { test } from '../base-fixture';
 
 test.describe('FileuploadAdvanced tests', () => {
-  const url = '/components/fileupload-advanced/example-index.html';
+  test.describe('FileuploadAdvanced example tests', () => {
+    const url = '/components/fileupload-advanced/example-index.html';
 
-  test.beforeEach(async ({ page }) => {
-    await page.goto(url);
-  });
+    test.beforeEach(async ({ page }) => {
+      await page.goto(url);
+    });
 
-  test.describe('general page checks', () => {
-    test('should have a title', async ({ page }) => {
-      await expect(page).toHaveTitle('IDS Enterprise');
+    test.describe('general page checks', () => {
+      test('should have a title', async ({ page }) => {
+        await expect(page).toHaveTitle('IDS Enterprise');
+      });
     });
-  });
 
-  test.describe('accessibility tests', () => {
-    test('should pass an Axe scan', async ({ page, browserName }) => {
-      if (browserName !== 'chromium') return;
-      const accessibilityScanResults = await new AxeBuilder({ page })
-        .disableRules(['meta-viewport'])
-        .exclude('[disabled]')
-        .analyze();
-      expect(accessibilityScanResults.violations).toEqual([]);
+    test.describe('accessibility tests', () => {
+      test('should pass an Axe scan', async ({ page, browserName }) => {
+        if (browserName !== 'chromium') return;
+        const accessibilityScanResults = await new AxeBuilder({ page })
+          .disableRules(['meta-viewport'])
+          .exclude('[disabled]')
+          .analyze();
+        expect(accessibilityScanResults.violations).toEqual([]);
+      });
     });
-  });
 
-  test.describe('snapshot tests', () => {
-    test('should match innerHTML snapshot', async ({ page, browserName }) => {
-      if (browserName !== 'chromium') return;
-      const html = await page.evaluate(() => {
-        const elem = document.querySelector('.fileupload-advanced');
-        return elem?.outerHTML;
+    test.describe('snapshot tests', () => {
+      test('should match innerHTML snapshot', async ({ page, browserName }) => {
+        if (browserName !== 'chromium') return;
+        const html = await page.evaluate(() => {
+          const elem = document.querySelector('.fileupload-advanced');
+          return elem?.outerHTML;
+        });
+        await expect(html).toMatchSnapshot('fileupload-advanced-html');
+      });
+
+      test('should match the visual snapshot in percy', async ({ page, browserName }) => {
+        if (browserName !== 'chromium') return;
+        await percySnapshot(page, 'fileupload-advanced-light');
       });
-      await expect(html).toMatchSnapshot('fileupload-advanced-html');
     });
 
-    test('should match the visual snapshot in percy', async ({ page, browserName }) => {
-      if (browserName !== 'chromium') return;
-      await percySnapshot(page, 'fileupload-advanced-light');
+    test.describe('functionality tests', () => {
     });
   });
 
-  test.describe('functionality tests', () => {
+  test.describe('fileuploadadvanced tests', () => {
+    const url = '/components/fileupload-advanced/example-index.html';
+
+    test.beforeEach(async ({ page }) => {
+      await page.goto(url);
+    });
+
+    test.describe('open fileupload tests', () => {
+      test('value should have a file', async ({ page }) => {
+        const input = page.locator('.hyperlink');
+
+        await expect(input).toBeVisible();
+
+        await input.setInputFiles('./app/www/images/35.jpg');
+
+        await expect(page.locator('.drop-area + .container')).toBeVisible();
+        await expect(page.locator('.drop-area + .container')).toHaveClass('container');
+      });
+    });
   });
 });