test/nuxt/router.option.test.ts (5)

13-24: Consider making the sleep duration configurable and increasing the waitFor timeout.

The hardcoded 10ms sleep duration may be insufficient for testing realistic async behaviour, and the 1000ms timeout could cause flaky tests in CI environments.

-const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+const sleep = (ms: number = 50) => new Promise(resolve => setTimeout(resolve, ms))

-const waitFor = async (condition: () => boolean, timeout = 1000) => {
+const waitFor = async (condition: () => boolean, timeout = 5000) => {

---

32-52: Extract component definitions to improve test readability.

The inline component definitions make the addRoute function complex. Consider extracting them for better maintainability.

+const createSyncComponent = () => defineComponent({
+  name: '~/pages/[...slug].vue',
+  setup: () => () => h('div'),
+})
+
+const createAsyncComponent = () => defineComponent({
+  name: '~/pages/[...slug].vue',
+  async setup() {
+    await sleep(50)
+    return () => h('div')
+  },
+})

 const addRoute = (sync: boolean) => {
   router.addRoute({
     name: 'slug',
     path: '/:slug(.*)*',
-    component: defineComponent({
-      name: '~/pages/[...slug].vue',
-      ...(sync
-        ? {
-            setup: () => () => h('div'),
-          }
-        : {
-            async setup () {
-              await sleep(10)
-              return () => h('div')
-            },
-          }
-      ),
-    }),
+    component: sync ? createSyncComponent() : createAsyncComponent(),
   })
 }

---

58-62: Enhance cleanup to prevent test interference.

The current cleanup may not fully reset the router state, potentially causing test interference.

 afterEach(() => {
+  // Clear any pending navigation
+  router.replace('/')
   router.removeRoute('slug')
   vi.clearAllMocks()
   scrollTo.mockClear()
+  // Clear any registered hooks
+  nuxtApp.hooks.clear()
 })

---

96-126: Consider consolidating duplicate test logic.

Both test cases share nearly identical setup and assertions. Extract common logic to reduce duplication.

+const runScrollBehaviorTest = async (useAsyncComponent: boolean) => {
+  addRoute(!useAsyncComponent)
+
+  await mountSuspended({
+    setup: () => () => h(NuxtPage, {
+      transition: {
+        name: 'fade',
+        mode: 'out-in',
+        duration: 10,
+      },
+    }),
+  })
+
+  await flushPromises()
+
+  const pageTransitionFinish = vi.fn()
+  const pageLoadingEnd = vi.fn()
+
+  nuxtApp.hook('page:transition:finish', pageTransitionFinish)
+  nuxtApp.hook('page:loading:end', pageLoadingEnd)
+
+  await router.push('/page')
+  await waitFor(() => pageTransitionFinish.mock.calls.length > 0)
+
+  expect(pageTransitionFinish).toHaveBeenCalled()
+  expect(pageLoadingEnd).toHaveBeenCalled()
+  expect(scrollTo).toHaveBeenCalled()
+  expect(pageTransitionFinish).toHaveBeenCalledBefore(scrollTo)
+}

 it('should call scrollTo after page transition is finished with async component', async () => {
-  addRoute(false)
-  // ... rest of test logic
+  await runScrollBehaviorTest(true)
 })

 it('should call scrollTo after page transition is finished with sync component', async () => {
-  addRoute(true)
-  // ... rest of test logic
+  await runScrollBehaviorTest(false)
 })

---

67-75: Transition duration may be too short for reliable testing.

The 10ms transition duration could cause timing issues in slower test environments.

       transition: {
         name: 'fade',
         mode: 'out-in',
-        duration: 10,
+        duration: 100,
       },

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro