[WIP] - Add tests to drag and drop features

alphagov · Jan 20, 2025 · 8f53794 · 8f53794
1 parent a6fb4f6
commit 8f53794
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 0 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.mjs
@@ -98,6 +98,7 @@ export class FileUpload extends ConfigurableComponent {
     // Handle drop zone visibility
     // A live region to announce when users enter or leave the drop zone
     this.$announcements = document.createElement('span')
+    this.$announcements.classList.add('govuk-file-upload-announcements')
     this.$announcements.classList.add('govuk-visually-hidden')
     this.$announcements.setAttribute('aria-live', 'assertive')
     this.$wrapper.insertAdjacentElement('afterend', this.$announcements)

diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.puppeteer.test.js
@@ -246,6 +246,96 @@ describe('/components/file-upload', () => {
         })
       })
 
+      describe('dropzone', () => {
+        let $wrapper
+        let $announcements
+        let wrapperBoundingBox
+
+        // Shared data to drag on the element
+        const dragData = {
+          items: [],
+          files: [__filename],
+          dragOperationsMask: 1 // Copy
+        }
+
+        const selectorDropzoneVisible =
+          '.govuk-file-upload-wrapper.govuk-file-upload-wrapper--show-dropzone'
+        const selectorDropzoneHidden =
+          '.govuk-file-upload-wrapper:not(.govuk-file-upload-wrapper--show-dropzone)'
+
+        beforeEach(async () => {
+          await render(page, 'file-upload', examples.default)
+
+          $wrapper = await page.$('.govuk-file-upload-wrapper')
+          wrapperBoundingBox = await $wrapper.boundingBox()
+
+          $announcements = await page.$('.govuk-file-upload-announcements')
+        })
+
+        it('is not shown by default', async () => {
+          await expect(page.$(selectorDropzoneHidden)).resolves.toBeTruthy()
+          await expect(
+            $announcements.evaluate((e) => e.textContent)
+          ).resolves.toBe('')
+        })
+
+        it('gets shown when entering the field', async () => {
+          // Add a little pixel to make sure we're effectively within the element
+          await page.mouse.dragEnter(
+            { x: wrapperBoundingBox.x + 1, y: wrapperBoundingBox.y + 1 },
+            structuredClone(dragData)
+          )
+
+          await expect(page.$(selectorDropzoneVisible)).resolves.toBeTruthy()
+          await expect(
+            $announcements.evaluate((e) => e.textContent)
+          ).resolves.toBe('Entered drop zone')
+        })
+
+        it('gets hidden when dropping on the field', async () => {
+          // Add a little pixel to make sure we're effectively within the element
+          await page.mouse.drop(
+            { x: wrapperBoundingBox.x + 1, y: wrapperBoundingBox.y + 1 },
+            structuredClone(dragData)
+          )
+
+          await expect(page.$(selectorDropzoneHidden)).resolves.toBeTruthy()
+          await expect(
+            $announcements.evaluate((e) => e.textContent)
+          ).resolves.toBe('Left drop zone')
+        })
+
+        it('gets hidden when dragging a file and leaving the field', async () => {
+          // Add a little pixel to make sure we're effectively within the element
+          await page.mouse.dragEnter(
+            { x: wrapperBoundingBox.x + 1, y: wrapperBoundingBox.y + 1 },
+            structuredClone(dragData)
+          )
+
+          // Move enough to the left to be out of the wrapper properly
+          // but not up or down in case there's other elements in the flow of the page
+          await page.mouse.dragEnter(
+            { x: wrapperBoundingBox.x - 20, y: wrapperBoundingBox.y },
+            structuredClone(dragData)
+          )
+
+          await expect(page.$(selectorDropzoneHidden)).resolves.toBeTruthy()
+          await expect(
+            $announcements.evaluate((e) => e.textContent)
+          ).resolves.toBe('Left drop zone')
+        })
+
+        it('gets hidden when dragging a file and leaving the document', async () => {
+          // Add a little pixel to make sure we're effectively within the element
+          await page.mouse.dragEnter(
+            { x: wrapperBoundingBox.x + 1, y: wrapperBoundingBox.y + 1 },
+            structuredClone(dragData)
+          )
+
+          // TODO: Trigger two mouse leave events or find another way to leave the window while dragging
+        })
+      })
+
       describe('i18n', () => {
         beforeEach(async () => {
           await render(page, 'file-upload', examples.translated)