test: add test case for useId

Author: yyx990803

packages/runtime-core/__tests__/helpers/useId.spec.ts

@@ -95,8 +95,8 @@ describe('useId', () => {
       'v:0-0 v:0-1 ' + // inside first async subtree
       'v:1-0 v:1-1' // inside second async subtree
     // assert different async resolution order does not affect id stable-ness
-    expect(await getOutput(() => factory(10, 20))).toBe(expected)
-    expect(await getOutput(() => factory(20, 10))).toBe(expected)
+    expect(await getOutput(() => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
   })
 
   test('serverPrefetch', async () => {
@@ -140,8 +140,8 @@ describe('useId', () => {
       'v:0-0 v:0-1 ' + // inside first async subtree
       'v:1-0 v:1-1' // inside second async subtree
     // assert different async resolution order does not affect id stable-ness
-    expect(await getOutput(() => factory(10, 20))).toBe(expected)
-    expect(await getOutput(() => factory(20, 10))).toBe(expected)
+    expect(await getOutput(() => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
   })
 
   test('async setup()', async () => {
@@ -192,8 +192,8 @@ describe('useId', () => {
       'v:1-0 v:1-1' + // inside second async subtree
       '</div>'
     // assert different async resolution order does not affect id stable-ness
-    expect(await getOutput(() => factory(10, 20))).toBe(expected)
-    expect(await getOutput(() => factory(20, 10))).toBe(expected)
+    expect(await getOutput(() => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
   })
 
   test('deep nested', async () => {
@@ -239,4 +239,46 @@ describe('useId', () => {
     expect(await getOutput(() => factory())).toBe(expected)
     expect(await getOutput(() => factory())).toBe(expected)
   })
+
+  test('async component inside async setup', async () => {
+    const factory = (
+      delay1: number,
+      delay2: number,
+    ): ReturnType<TestCaseFactory> => {
+      const p1 = promiseWithDelay(null, delay1)
+      const p2 = promiseWithDelay(BasicComponentWithUseId, delay2)
+      const AsyncInner = defineAsyncComponent(() => p2)
+
+      const AsyncSetup = defineComponent({
+        async setup() {
+          await p1
+          return {}
+        },
+        render() {
+          return h(AsyncInner)
+        },
+      })
+
+      const app = createApp({
+        setup() {
+          const id1 = useId()
+          const id2 = useId()
+          return () =>
+            h(Suspense, null, {
+              default: h('div', [id1, ' ', id2, ' ', h(AsyncSetup)]),
+            })
+        },
+      })
+      return [app, [p1, p2]]
+    }
+
+    const expected =
+      '<div>' +
+      'v:0 v:1 ' + // root
+      'v:0-0-0 v:0-0-1' + // async component inside async setup
+      '</div>'
+    // assert different async resolution order does not affect id stable-ness
+    expect(await getOutput(() => factory(0, 16))).toBe(expected)
+    expect(await getOutput(() => factory(16, 0))).toBe(expected)
+  })
 })