test(files): add e2e tests for search filter

cover search toggle visibility, filtering by name and CID in both
list and grid views, hiding search to clear filter, and no-matches
message.

Author: lidel

test/e2e/files.test.js

@@ -1,6 +1,7 @@
 import { test, expect } from './setup/coverage.js'
 import { fixtureData } from './fixtures/index.js'
 import { files, explore, dismissImportNotification } from './setup/locators.js'
+import { selectViewMode, toggleSearchFilter } from '../helpers/grid'
 import all from 'it-all'
 import filesize from 'filesize'
 import * as kuboRpcModule from 'kubo-rpc-client'
@@ -297,4 +298,118 @@ test.describe('Files screen', () => {
     // confirm navigation back to files root
     await page.waitForURL('/#/files')
   })
+
+  test.describe('Search filter', () => {
+    // inline CIDs for small text content (no network needed)
+    const orangeCid = 'bafkqaddjnzzxazldoqwxizltoq'
+    const appleCid = 'bafkqac3imvwgy3zao5xxe3de'
+    const orangeFile = 'search-orange.txt'
+    const appleFile = 'search-apple.txt'
+
+    /**
+     * Import a file via "Add by path" using an inline CID.
+     */
+    async function importByPath (page, cid, filename) {
+      await files.importButton(page).click()
+      await expect(files.addByPathOption(page)).toBeVisible()
+      await files.addByPathOption(page).click()
+
+      const pathInput = files.dialogInput(page, 'path')
+      await expect(pathInput).toBeVisible()
+      await pathInput.fill(`/ipfs/${cid}`)
+      await files.dialogInput(page, 'name').fill(filename)
+      await page.keyboard.press('Enter')
+
+      // wait for dialog to close
+      await expect(pathInput).not.toBeVisible({ timeout: 10000 })
+    }
+
+    test.beforeEach(async ({ page }) => {
+      test.slow()
+
+      // import two files with distinct names
+      await importByPath(page, orangeCid, orangeFile)
+      await dismissImportNotification(page)
+      await importByPath(page, appleCid, appleFile)
+      await dismissImportNotification(page)
+
+      // verify both files are visible before each test
+      await expect(page.getByTestId('file-row').filter({ hasText: orangeFile })).toBeVisible({ timeout: 30000 })
+      await expect(page.getByTestId('file-row').filter({ hasText: appleFile })).toBeVisible({ timeout: 30000 })
+    })
+
+    test('search is hidden by default', async ({ page }) => {
+      await expect(files.searchInput(page)).not.toBeVisible()
+
+      await files.searchToggle(page).click()
+      await expect(files.searchInput(page)).toBeVisible()
+    })
+
+    test('filter by name in list view', async ({ page }) => {
+      await selectViewMode(page, 'list')
+      await toggleSearchFilter(page, true)
+
+      await files.searchInput(page).fill('orange')
+
+      // only the orange file should be visible
+      await expect(page.getByTestId('file-row').filter({ hasText: orangeFile })).toBeVisible()
+      await expect(page.getByTestId('file-row').filter({ hasText: appleFile })).not.toBeVisible()
+
+      // filtered count should show "1 /"
+      await expect(page.getByText(/^1\s*\/\s*\d+$/)).toBeVisible()
+    })
+
+    test('filter by CID in list view', async ({ page }) => {
+      await selectViewMode(page, 'list')
+      await toggleSearchFilter(page, true)
+
+      // get the CID from the orange file row
+      const orangeRow = page.getByTestId('file-row').filter({ hasText: orangeFile })
+      const cidText = await orangeRow.locator('div.monospace').textContent()
+      // use last 10 chars of the CID to avoid shared prefix between inline CIDs
+      const trimmed = cidText.trim()
+      const cidFragment = trimmed.slice(-10)
+
+      await files.searchInput(page).fill(cidFragment)
+
+      await expect(page.getByTestId('file-row').filter({ hasText: orangeFile })).toBeVisible()
+      await expect(page.getByTestId('file-row').filter({ hasText: appleFile })).not.toBeVisible()
+    })
+
+    test('filter by name in grid view', async ({ page }) => {
+      await selectViewMode(page, 'grid')
+      await toggleSearchFilter(page, true)
+
+      await files.searchInput(page).fill('apple')
+
+      // only the apple file should be visible
+      await expect(files.gridFileByName(page, appleFile)).toBeVisible()
+      await expect(files.gridFileByName(page, orangeFile)).not.toBeVisible()
+    })
+
+    test('hiding search clears filter', async ({ page }) => {
+      await selectViewMode(page, 'list')
+      await toggleSearchFilter(page, true)
+
+      await files.searchInput(page).fill('orange')
+      // only orange visible
+      await expect(page.getByTestId('file-row').filter({ hasText: appleFile })).not.toBeVisible()
+
+      // hide the search filter
+      await toggleSearchFilter(page, false)
+
+      await expect(files.searchInput(page)).not.toBeVisible()
+      // both files should be visible again
+      await expect(page.getByTestId('file-row').filter({ hasText: orangeFile })).toBeVisible()
+      await expect(page.getByTestId('file-row').filter({ hasText: appleFile })).toBeVisible()
+    })
+
+    test('no matches message', async ({ page }) => {
+      await toggleSearchFilter(page, true)
+
+      await files.searchInput(page).fill('nonexistent-file-xyz')
+
+      await expect(page.getByText('No files match your search')).toBeVisible()
+    })
+  })
 })

test/e2e/setup/locators.js

@@ -40,6 +40,11 @@ export const files = {
   contextMenuButton: (page, name) => page.locator(`button[aria-label="View more options for ${name}"]`),
   contextMenuItem: (page, text) => page.locator('button[role="menuitem"]').filter({ hasText: text }),
 
+  // Search filter
+  searchToggle: (page) => page.getByRole('button', { name: 'Click to show search filter' }),
+  searchInput: (page) => page.locator('input[aria-label="Filter by name or CID…"]'),
+  searchClearButton: (page) => page.getByRole('button', { name: 'Clear search' }),
+
   // Dialogs
   dialog: (page) => page.locator('div[role="dialog"]'),
   dialogInput: (page, name) => page.locator(`div[role="dialog"] input[name="${name}"]`),

test/helpers/grid.js

@@ -44,6 +44,7 @@ const navigateToFilesPage = async (page) => {
     try {
       localStorage.removeItem('files.viewMode')
       localStorage.removeItem('files.sorting')
+      localStorage.removeItem('files.showSearch')
     } catch (e) {
       // Ignore if localStorage is not available
     }
@@ -95,8 +96,27 @@ const addTestFiles = async (page, directoryName, numFiles = 5) => {
   await page.waitForSelector('[title*="test-file-"]')
 }
 
+/**
+ * Toggle search filter visibility
+ * @param {import('@playwright/test').Page} page - The Playwright page object
+ * @param {boolean} show - Whether to show (true) or hide (false) the search filter
+ */
+const toggleSearchFilter = async (page, show) => {
+  const searchInput = page.locator('input[aria-label="Filter by name or CID…"]')
+  const isVisible = await searchInput.isVisible().catch(() => false)
+
+  if (show && !isVisible) {
+    await page.getByRole('button', { name: 'Click to show search filter' }).click()
+    await searchInput.waitFor({ state: 'visible', timeout: 5000 })
+  } else if (!show && isVisible) {
+    await page.getByRole('button', { name: 'Click to show search filter' }).click()
+    await searchInput.waitFor({ state: 'hidden', timeout: 5000 })
+  }
+}
+
 export {
   navigateToFilesPage,
   addTestFiles,
-  selectViewMode
+  selectViewMode,
+  toggleSearchFilter
 }