fix(ui): show file item when search filter matches only test cases (#4736)

Author: hi-ogawa

packages/ui/client/components/TaskTree.vue

@@ -17,7 +17,7 @@ const { task, indent = 0, nested = false, search, onItemClick } = defineProps<{
   <!-- maybe provide a KEEP STRUCTURE mode, do not filter by search keyword  -->
   <!-- v-if = keepStructure ||  (!search || caseInsensitiveMatch(task.name, search)) -->
   <TaskItem
-    v-if="!search || caseInsensitiveMatch(task.name, search)"
+    v-if="!nested || !search || caseInsensitiveMatch(task.name, search)"
     v-bind="$attrs"
     :task="task"
     :style="{ paddingLeft: `${indent * 0.75 + 1}rem` }"

test/ui/test/ui.spec.ts

@@ -53,4 +53,22 @@ test.describe('ui', () => {
     await page.getByTestId('btn-console').click()
     await page.getByText('/(?<char>\\w)/').click()
   })
+
+  test('file-filter', async ({ page }) => {
+    await page.goto(pageUrl)
+
+    // match all files when no filter
+    await page.getByPlaceholder('Search...').fill('')
+    await page.getByText('PASS (3)').click()
+    await expect(page.getByText('fixtures/sample.test.ts', { exact: true })).toBeVisible()
+
+    // match nothing
+    await page.getByPlaceholder('Search...').fill('nothing')
+    await page.getByText('No matched test').click()
+
+    // searching "add" will match "sample.test.ts" since it includes a test case named "add"
+    await page.getByPlaceholder('Search...').fill('add')
+    await page.getByText('PASS (1)').click()
+    await expect(page.getByText('fixtures/sample.test.ts', { exact: true })).toBeVisible()
+  })
 })