Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge 23b1af766b into edc299a043

Browse Source
This commit is contained in:
Peter Buglavecz 2024-11-20 06:35:52 -05:00 committed by GitHub
commit 1654f5c08e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 58 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/nuxt/src/pages/runtime/page.ts
View File

@ -41,7 +41,6 @@ export default defineComponent({
const nuxtApp = useNuxtApp()
const pageRef = ref()
const forkRoute = inject(PageRouteSymbol, null)
let previousPageKey: string | undefined | false
expose({ pageRef })
@ -97,10 +96,6 @@ export default defineComponent({
}
const key = generateRouteKey(routeProps, props.pageKey)
if (!nuxtApp.isHydrating && !hasChildrenRoutes(forkRoute, routeProps.route, routeProps.Component) && previousPageKey === key) {
nuxtApp.callHook('page:loading:end')
}
previousPageKey = key
const hasTransition = !!(props.transition ?? routeProps.route.meta.pageTransition ?? defaultPageTransition)
const transitionProps = hasTransition && _mergeTransitionProps([
@ -161,10 +156,3 @@ function haveParentRoutesRendered (fork: RouteLocationNormalizedLoaded | null, n
(c, i) => c.components?.default !== fork.matched[i]?.components?.default) ||
(Component && generateRouteKey({ route: newRoute, Component }) !== generateRouteKey({ route: fork, Component }))
}
function hasChildrenRoutes (fork: RouteLocationNormalizedLoaded | null, newRoute: RouteLocationNormalizedLoaded, Component?: VNode) {
if (!fork) { return false }
const index = newRoute.matched.findIndex(m => m.components?.default === Component?.type)
return index < newRoute.matched.length - 1
}

38
test/basic.test.ts
View File

@ -625,6 +625,44 @@ describe('pages', () => {
const html = await $fetch('/prerender/test')
expect(html).toContain('should be prerendered: true')
})
it('should trigger page:loading:end only once', async () => {
const { page, consoleLogs } = await renderPage('/')
await page.getByText('to page load hook').click()
await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, '/page-load-hook')
const loadingEndLogs = consoleLogs.filter(c => c.text.includes('page:loading:end'))
expect(loadingEndLogs.length).toBe(1)
await page.close()
})
it('should hide nuxt page load indicator after navigate back from nested page', async () => {
const LOAD_INDICATOR_SELECTOR = '.nuxt-loading-indicator'
const { page } = await renderPage('/')
await page.getByText('to page nuxt load indicator').click()
await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, '/nested/xyz')
await page.waitForSelector(LOAD_INDICATOR_SELECTOR)
let isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
expect(isVisible).toBe(true)
await page.waitForSelector(LOAD_INDICATOR_SELECTOR, { state: 'hidden' })
isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
expect(isVisible).toBe(false)
await page.goBack()
await page.waitForSelector(LOAD_INDICATOR_SELECTOR)
isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
expect(isVisible).toBe(true)
await page.waitForSelector(LOAD_INDICATOR_SELECTOR, { state: 'hidden' })
isVisible = await page.isVisible(LOAD_INDICATOR_SELECTOR)
expect(isVisible).toBe(false)
await page.close()
})
})
describe('nuxt composables', () => {

7
test/fixtures/basic/pages/index.vue vendored
View File

@ -3,6 +3,7 @@
<Head>
<Title>Basic fixture</Title>
</Head>
<NuxtLoadingIndicator :throttle="0" />
<h1>Hello Nuxt 3!</h1>
<div>RuntimeConfig | testConfig: {{ config.public.testConfig }}</div>
<div>Composable | foo: {{ foo }}</div>
@ -94,6 +95,12 @@
<NuxtLink to="/server-page">
to server page
</NuxtLink>
<NuxtLink to="/page-load-hook">
to page load hook
</NuxtLink>
<NuxtLink to="/nested/xyz">
to page nuxt load indicator
</NuxtLink>
</div>
</template>

5
test/fixtures/basic/pages/page-load-hook.vue vendored Normal file
View File

@ -0,0 +1,5 @@
<template>
<div>
Page for hook tests.
</div>
</template>

8
test/fixtures/basic/plugins/page-hook-plugin.ts vendored Normal file
View File

@ -0,0 +1,8 @@
export default defineNuxtPlugin((nuxtApp) => {
const route = useRoute()
nuxtApp.hook('page:loading:end', () => {
if (route.path === '/page-load-hook') {
console.log('page:loading:end')
}
})
})