fix(ui): remove "filters" flickering (#6463)

vitest-dev · Sep 9, 2024 · 0223bb7 · 0223bb7
1 parent 97773e2
commit 0223bb7
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 }) => {