From 0223bb79df6215c2f1c20ca556e4a6e9ac219198 Mon Sep 17 00:00:00 2001
From: Vladimir <sleuths.slews0s@icloud.com>
Date: Mon, 9 Sep 2024 09:39:19 +0200
Subject: [PATCH] fix(ui): remove "filters" flickering (#6463)

---
 .github/workflows/ci.yml                           |  4 ++--
 .../ui/client/components/explorer/Explorer.vue     |  7 +++++--
 test/ui/test/html-report.spec.ts                   | 14 +++++++++++---
 test/vite-node/test/server.test.ts                 | 10 +++++-----
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 0e0270f70d46..867c17924244 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -82,7 +82,7 @@ jobs:
         os: [ubuntu-latest]
         node_version: [18, 20, 22]
         include:
-          - os: macos-14
+          - os: macos-latest
             node_version: 20
           - os: windows-latest
             node_version: 20
@@ -124,7 +124,7 @@ jobs:
     strategy:
       matrix:
         os:
-          - macos-14
+          - macos-latest
           - windows-latest
         browser:
           - [chromium, chrome]
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index c1f7613eec9e..26cc701fa237 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -11,6 +11,8 @@ import { useSearch } from '~/composables/explorer/search'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import { config } from '~/composables/client'
 
+import { panels } from '~/composables/navigation'
+
 defineOptions({ inheritAttrs: false })
 
 const { onItemClick } = defineProps<{
@@ -46,8 +48,9 @@ const filterClass = ref<string>('grid-cols-2')
 const filterHeaderClass = ref<string>('grid-col-span-2')
 const testExplorerRef = ref<HTMLInputElement | undefined>()
 
-useResizeObserver(testExplorerRef, (entries) => {
-  const { width } = entries[0].contentRect
+const { width: windowWidth } = useWindowSize()
+
+watch(() => windowWidth.value * (panels.navigation / 100), (width) => {
   if (width < 420) {
     filterClass.value = 'grid-cols-2'
     filterHeaderClass.value = 'grid-col-span-2'
diff --git a/test/ui/test/html-report.spec.ts b/test/ui/test/html-report.spec.ts
index 21c01d76ba01..cedf269705c6 100644
--- a/test/ui/test/html-report.spec.ts
+++ b/test/ui/test/html-report.spec.ts
@@ -35,11 +35,19 @@ test.describe('html report', () => {
     )
 
     // run vite preview server
-    previewServer = await preview({ build: { outDir: 'html' }, preview: { port, strictPort: true } })
+    previewServer = await preview({
+      build: { outDir: 'html' },
+      preview: { port, strictPort: true },
+    })
   })
 
   test.afterAll(async () => {
     await new Promise<void>((resolve, reject) => {
+      // if there is no preview server, `startVitest` failed already
+      if (!previewServer) {
+        resolve()
+        return
+      }
       previewServer.httpServer.close((err) => {
         if (err) {
           reject(err)
@@ -72,7 +80,7 @@ test.describe('html report', () => {
     // report
     const sample = page.getByTestId('details-panel').getByLabel('sample.test.ts')
     await sample.hover()
-    await sample.getByTestId('btn-open-details').click()
+    await sample.getByTestId('btn-open-details').click({ force: true })
     await page.getByText('All tests passed in this file').click()
 
     // graph tab
@@ -96,7 +104,7 @@ test.describe('html report', () => {
     await page.goto(pageUrl)
     const sample = page.getByTestId('details-panel').getByLabel('fixtures/error.test.ts')
     await sample.hover()
-    await sample.getByTestId('btn-open-details').click()
+    await sample.getByTestId('btn-open-details').click({ force: true })
     await expect(page.getByTestId('diff')).toContainText('- Expected + Received + <style>* {border: 2px solid green};</style>')
   })
 })
diff --git a/test/vite-node/test/server.test.ts b/test/vite-node/test/server.test.ts
index 1b8a480677ba..70c4ddd3b35a 100644
--- a/test/vite-node/test/server.test.ts
+++ b/test/vite-node/test/server.test.ts
@@ -143,12 +143,12 @@ describe('server correctly caches data', () => {
 
     await viteNode.fetchModule('/src/foo.js', 'ssr')
 
-    expect(ssrFiles).toHaveLength(3)
+    await expect.poll(() => ssrFiles).toHaveLength(3)
 
     // another fetch after invalidation returns cached result
     await viteNode.fetchModule('/src/foo.js', 'ssr')
 
-    expect(ssrFiles).toHaveLength(3)
+    await expect.poll(() => ssrFiles).toHaveLength(3)
     expect(webFiles).toHaveLength(0)
   })
 
@@ -200,13 +200,13 @@ describe('server correctly caches data', () => {
 
     await viteNode.fetchModule('/src/foo.js', 'web')
 
-    expect(webFiles).toHaveLength(3)
+    await expect.poll(() => webFiles).toHaveLength(3)
 
     // another fetch after invalidation returns cached result
     await viteNode.fetchModule('/src/foo.js', 'web')
 
-    expect(webFiles).toHaveLength(3)
-    expect(ssrFiles).toHaveLength(0)
+    await expect.poll(() => webFiles).toHaveLength(3)
+    await expect.poll(() => ssrFiles).toHaveLength(0)
   })
 
   it('correctly processes the same file with both transform modes', async ({ viteNode, ssrFiles, webFiles, root }) => {