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

…4736)
vitest-dev · Dec 19, 2023 · f43fdd8 · f43fdd8
1 parent fd5d7e6
commit f43fdd8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/packages/ui/client/components/TaskTree.vue b/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` }"

diff --git a/test/ui/test/ui.spec.ts b/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()
+  })
 })