test: add nested suspense tests

vuejs · Feb 28, 2022 · cf0281e · cf0281e
1 parent 322402a
commit cf0281e
Show file tree

Hide file tree

Showing 3 changed files with 801 additions and 477 deletions.
diff --git a/e2e/suspense/index.ts b/e2e/suspense/index.ts
@@ -38,12 +38,19 @@ const delay = (t: number) => new Promise(r => setTimeout(r, t))
  * creates a component that logs the guards
  * @param name
  */
-function createTestComponent(key: string, isAsync = false) {
+function createTestComponent(
+  key: string,
+  isAsync = false,
+  logCreation = false
+) {
   return defineComponent({
     name: key,
     template: `<div id="${key}">${key}</div>`,
 
     setup() {
+      if (logCreation) {
+        logs.value.push(`${key} setup`)
+      }
       onBeforeRouteUpdate((to, from) => {
         logs.value.push(
           `${key}: setup:update ${from.fullPath} - ${to.fullPath}`
@@ -65,6 +72,23 @@ function createTestComponent(key: string, isAsync = false) {
   })
 }
 
+function createPassThroughWithSuspense(key: string) {
+  return defineComponent({
+    name: `PassThroughViewWithSuspense:${key}`,
+    setup() {
+      logs.value.push(`PassThrough:${key} setup`)
+    },
+
+    template: `
+<router-view v-slot="{ Component }">
+  <Suspense>
+    <component :is="Component" />
+  </Suspense>
+</router-view>
+  `,
+  })
+}
+
 const Foo = createTestComponent('Foo')
 const FooAsync = createTestComponent('FooAsync', true)
 const PassThroughView: FunctionalComponent = () => h(RouterView)
@@ -91,6 +115,26 @@ const router = createRouter({
         { path: 'two', component: createTestComponent('two', true) },
       ],
     },
+    {
+      path: '/n/sus/one',
+      component: createPassThroughWithSuspense('sus-one'),
+      children: [
+        {
+          path: 'child',
+          component: createTestComponent('one:child', true, true),
+        },
+      ],
+    },
+    {
+      path: '/n/sus/two',
+      component: createPassThroughWithSuspense('sus-two'),
+      children: [
+        {
+          path: 'child',
+          component: createTestComponent('two:child', true, true),
+        },
+      ],
+    },
   ],
 })
 const shouldFail = ref(false)
@@ -118,6 +162,8 @@ leaves: {{ state.leave }}
       <li><router-link id="update-query" :to="{ query: { n: (Number($route.query.n) || 0) + 1 }}" v-slot="{ route }">{{ route.fullPath }}</router-link></li>
       <li><router-link to="/nested/one">/nested/one</router-link></li>
       <li><router-link to="/nested/two">/nested/two</router-link></li>
+      <li><router-link to="/n/sus/one/child">Nested Suspense one</router-link></li>
+      <li><router-link to="/n/sus/two/child">Nested Suspense two</router-link></li>
     </ul>
 
     <router-view v-slot="{ Component }" >

diff --git a/package.json b/package.json
@@ -75,17 +75,17 @@
   "devDependencies": {
     "@microsoft/api-extractor": "^7.18.11",
     "@rollup/plugin-alias": "^3.1.4",
-    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-commonjs": "^21.0.2",
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-replace": "^3.0.0",
     "@sucrase/jest-plugin": "^2.1.1",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^27.4.1",
     "@types/jsdom": "^16.2.13",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.16.2",
-    "@vitejs/plugin-vue": "^2.1.0",
-    "@vue/compiler-sfc": "^3.2.19",
-    "@vue/server-renderer": "^3.2.19",
+    "@vitejs/plugin-vue": "^2.2.2",
+    "@vue/compiler-sfc": "^3.2.31",
+    "@vue/server-renderer": "^3.2.31",
     "@vue/test-utils": "^2.0.0-rc.3",
     "axios": "^0.25.0",
     "brotli": "^1.3.2",
@@ -98,23 +98,23 @@
     "dotenv": "^16.0.0",
     "faked-promise": "^2.2.2",
     "html-webpack-plugin": "^5.3.2",
-    "jest": "^27.2.3",
+    "jest": "^27.5.1",
     "jest-mock-warn": "^1.1.0",
-    "lint-staged": "^12.1.2",
+    "lint-staged": "^12.3.4",
     "nightwatch": "^1.7.11",
     "nightwatch-helpers": "^1.2.0",
     "prettier": "^2.4.1",
-    "rollup": "^2.57.0",
+    "rollup": "^2.68.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.0",
     "selenium-server": "^3.141.59",
     "serve-handler": "^6.1.3",
     "typescript": "~4.4.3",
-    "vite": "~2.7.13",
+    "vite": "~2.8.4",
     "vitepress": "^0.20.0",
-    "vue": "^3.1.0",
-    "vue-tsc": "^0.31.1",
+    "vue": "^3.2.31",
+    "vue-tsc": "^0.32.0",
     "yorkie": "^2.0.0"
   }
 }