remove e2e tests add unit tests and add changeset

.changeset/few-plants-pump.md

@@ -0,0 +1,5 @@
+---
+"@uppy/dashboard": patch
+---
+
+fix "My Device" button in dashboard, it now respects the fileManagerSelectionType.

packages/@uppy/dashboard/src/index.browser.test.ts

@@ -204,63 +204,3 @@ test('Upload, pause, and resume functionality', async () => {
   // Verify upload completion state using Playwright selector
   await expect(page.getByText('Complete', { exact: true })).toBeVisible()
 })
-
-test('My Device button triggers folder input when fileManagerSelectionType is "folders"', async () => {
-  render('<div id="uppy"></div>')
-  new Uppy().use(Dashboard, {
-    target: '#uppy',
-    inline: true,
-    fileManagerSelectionType: 'folders',
-  })
-
-  const inputs = document.querySelectorAll(
-    '.uppy-Dashboard-input',
-  ) as NodeListOf<HTMLInputElement>
-  const fileInput = inputs[0]
-  const folderInput = inputs[1]
-
-  let fileInputClicked = false
-  let folderInputClicked = false
-  fileInput.addEventListener('click', () => {
-    fileInputClicked = true
-  })
-  folderInput.addEventListener('click', () => {
-    folderInputClicked = true
-  })
-
-  const myDeviceButton = page.getByRole('tab', { name: /my device/i })
-  await myDeviceButton.click()
-
-  expect(folderInputClicked).toBe(true)
-  expect(fileInputClicked).toBe(false)
-})
-
-test('My Device button triggers file input when fileManagerSelectionType is "files"', async () => {
-  render('<div id="uppy"></div>')
-  new Uppy().use(Dashboard, {
-    target: '#uppy',
-    inline: true,
-    fileManagerSelectionType: 'files',
-  })
-
-  const inputs = document.querySelectorAll(
-    '.uppy-Dashboard-input',
-  ) as NodeListOf<HTMLInputElement>
-  const fileInput = inputs[0]
-  const folderInput = inputs[1]
-
-  let fileInputClicked = false
-  let folderInputClicked = false
-  fileInput.addEventListener('click', () => {
-    fileInputClicked = true
-  })
-  folderInput.addEventListener('click', () => {
-    folderInputClicked = true
-  })
-
-  const myDeviceButton = page.getByRole('tab', { name: /my device/i })
-  await myDeviceButton.click()
-
-  expect(fileInputClicked).toBe(true)
-  expect(folderInputClicked).toBe(false)
-})

packages/@uppy/dashboard/src/index.test.ts

@@ -153,4 +153,106 @@ describe('Dashboard', () => {
 
     core.destroy()
   })
+
+  describe('My Device acquirer respects fileManagerSelectionType', () => {
+    // `showNativePhotoCameraButton: true` is used to force the My Device tab
+    // to render — Dashboard hides it when it would be the only entry in the list
+    // (see `hasOnlyMyDevice` in AddFiles.tsx).
+    const mountDashboard = (
+      fileManagerSelectionType: 'files' | 'folders' | 'both',
+    ) => {
+      document.body.innerHTML = ''
+      const core = new Core()
+      core.use(DashboardPlugin, {
+        inline: true,
+        target: 'body',
+        fileManagerSelectionType,
+        showNativePhotoCameraButton: true,
+      })
+      return core
+    }
+
+    const getInputs = () => {
+      const fileInput = document.querySelector<HTMLInputElement>(
+        '.uppy-Dashboard-input:not([webkitdirectory])',
+      )!
+      const folderInput = document.querySelector<HTMLInputElement>(
+        '.uppy-Dashboard-input[webkitdirectory]',
+      )!
+      return { fileInput, folderInput }
+    }
+
+    const clickMyDeviceTab = () => {
+      const tab = document.querySelector<HTMLButtonElement>(
+        '[data-uppy-acquirer-id="MyDevice"] button[role="tab"]',
+      )!
+      tab.click()
+    }
+
+    it('triggers the folder input when set to "folders"', () => {
+      const core = mountDashboard('folders')
+      const { fileInput, folderInput } = getInputs()
+
+      let fileClicked = false
+      let folderClicked = false
+      fileInput.addEventListener('click', () => {
+        fileClicked = true
+      })
+      folderInput.addEventListener('click', () => {
+        folderClicked = true
+      })
+
+      clickMyDeviceTab()
+
+      expect(folderClicked).toBe(true)
+      expect(fileClicked).toBe(false)
+
+      core.destroy()
+    })
+
+    it('triggers the file input when set to "files"', () => {
+      const core = mountDashboard('files')
+      const { fileInput, folderInput } = getInputs()
+
+      let fileClicked = false
+      let folderClicked = false
+      fileInput.addEventListener('click', () => {
+        fileClicked = true
+      })
+      folderInput.addEventListener('click', () => {
+        folderClicked = true
+      })
+
+      clickMyDeviceTab()
+
+      expect(fileClicked).toBe(true)
+      expect(folderClicked).toBe(false)
+
+      core.destroy()
+    })
+
+    // `both` mode intentionally falls back to the file picker because a single
+    // HTML <input> cannot be webkitdirectory and not at the same time. The
+    // folder picker remains reachable via the tagline "browse folders" link.
+    it('falls back to the file input when set to "both"', () => {
+      const core = mountDashboard('both')
+      const { fileInput, folderInput } = getInputs()
+
+      let fileClicked = false
+      let folderClicked = false
+      fileInput.addEventListener('click', () => {
+        fileClicked = true
+      })
+      folderInput.addEventListener('click', () => {
+        folderClicked = true
+      })
+
+      clickMyDeviceTab()
+
+      expect(fileClicked).toBe(true)
+      expect(folderClicked).toBe(false)
+
+      core.destroy()
+    })
+  })
 })