From 1daf92b3de053416ddb2b235657409afa7249cc7 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 24 Jan 2024 11:49:47 +0000 Subject: [PATCH] test: avoid explicit timeouts (#25395) --- test/basic.test.ts | 86 +++++++++++++++++++++------------------------- 1 file changed, 40 insertions(+), 46 deletions(-) diff --git a/test/basic.test.ts b/test/basic.test.ts index 9e76c02456..44f7045564 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -7,7 +7,6 @@ import { join, normalize } from 'pathe' import { $fetch, createPage, fetch, isDev, setup, startServer, url, useTestContext } from '@nuxt/test-utils/e2e' import { $fetchComponent } from '@nuxt/test-utils/experimental' -import type { ConsoleMessage } from 'playwright-core' import type { NuxtIslandResponse } from '../packages/nuxt/src/core/runtime/nitro/renderer' import { expectNoClientErrors, expectWithPolling, gotoPath, isRenderingJson, parseData, parsePayload, renderPage } from './utils' @@ -272,8 +271,7 @@ describe('pages', () => { it('/client-server', async () => { // expect no hydration issues await expectNoClientErrors('/client-server') - const page = await createPage('/client-server') - await page.waitForLoadState('networkidle') + const { page } = await renderPage('/client-server') const bodyHTML = await page.innerHTML('body') expect(await page.locator('.placeholder-to-ensure-no-override').all()).toHaveLength(5) expect(await page.locator('.server').all()).toHaveLength(0) @@ -285,6 +283,7 @@ describe('pages', () => { expect(bodyHTML).not.toContain('hello') expect(bodyHTML).toContain('world') + await page.close() }) it('/client-only-components', async () => { @@ -363,8 +362,7 @@ describe('pages', () => { // don't expect any errors or warning on client-side navigation const { page: page2, consoleLogs: consoleLogs2 } = await renderPage('/') await page2.locator('#to-client-only-components').click() - // force wait for a few ticks - await page2.waitForTimeout(50) + await page2.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/client-only-components`) expect(consoleLogs2.some(log => log.type === 'error' || log.type === 'warning')).toBeFalsy() await page2.close() }) @@ -591,50 +589,48 @@ describe('nuxt links', () => { it('expect scroll to top on routes with same component', async () => { // #22402 - const page = await createPage('/big-page-1') - await page.setViewportSize({ - width: 1000, - height: 1000 + const page = await createPage('/big-page-1', { + viewport: { + width: 1000, + height: 1000 + } }) - await page.waitForLoadState('networkidle') + await page.waitForFunction(() => window.useNuxtApp?.()._route.fullPath === '/big-page-1') await page.locator('#big-page-2').scrollIntoViewIfNeeded() expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0) await page.locator('#big-page-2').click() - await page.waitForURL(url => url.href.includes('/big-page-2')) - await page.waitForTimeout(25) + await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/big-page-2`) expect(await page.evaluate(() => window.scrollY)).toBe(0) await page.locator('#big-page-1').scrollIntoViewIfNeeded() expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0) await page.locator('#big-page-1').click() - await page.waitForURL(url => url.href.includes('/big-page-1')) - await page.waitForTimeout(25) + await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/big-page-1`) expect(await page.evaluate(() => window.scrollY)).toBe(0) await page.close() }) it('expect scroll to top on nested pages', async () => { // #20523 - const page = await createPage('/nested/foo/test') - await page.setViewportSize({ - width: 1000, - height: 1000 + const page = await createPage('/nested/foo/test', { + viewport: { + width: 1000, + height: 1000 + } }) - await page.waitForLoadState('networkidle') + await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/nested/foo/test`) await page.locator('#user-test').scrollIntoViewIfNeeded() expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0) await page.locator('#user-test').click() - await page.waitForURL(url => url.href.includes('/nested/foo/user-test')) - await page.waitForTimeout(25) + await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/nested/foo/user-test`) expect(await page.evaluate(() => window.scrollY)).toBe(0) await page.locator('#test').scrollIntoViewIfNeeded() expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0) await page.locator('#test').click() - await page.waitForURL(url => url.href.includes('/nested/foo/test')) - await page.waitForTimeout(25) + await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/nested/foo/test`) expect(await page.evaluate(() => window.scrollY)).toBe(0) await page.close() }) @@ -1504,12 +1500,8 @@ describe('server components/islands', () => { }) it('lazy server components', async () => { - const logs: ConsoleMessage[] = [] + const { page, consoleLogs } = await renderPage('/server-components/lazy/start') - const { page } = await renderPage('/server-components/lazy/start') - - page.on('console', (msg) => { if (msg.type() === 'error') { logs.push(msg) } }) - await page.waitForLoadState('networkidle') await page.getByText('Go to page with lazy server component').click() const text = await page.innerText('pre') @@ -1528,7 +1520,7 @@ describe('server components/islands', () => { await page.getByText('Go to page with lazy server component').click() await page.waitForLoadState('networkidle') - expect(logs).toHaveLength(0) + expect(consoleLogs.filter(l => l.type === 'error')).toHaveLength(0) await page.close() }) @@ -2163,17 +2155,17 @@ describe.skipIf(isWindows)('useAsyncData', () => { }) it('data is null after navigation when immediate false', async () => { - const page = await createPage('/useAsyncData/immediate-remove-unmounted') - await page.waitForLoadState('networkidle') - await page.waitForFunction(() => window.useNuxtApp?.()._route.fullPath === '/useAsyncData/immediate-remove-unmounted') + const { page } = await renderPage('/useAsyncData/immediate-remove-unmounted') expect(await page.locator('#immediate-data').getByText('null').textContent()).toBe('null') await page.click('#execute-btn') expect(await page.locator('#immediate-data').getByText(',').textContent()).not.toContain('null') await page.click('#to-index') + await page.waitForFunction(() => window.useNuxtApp?.()._route.fullPath === '/') await page.click('#to-immediate-remove-unmounted') + await page.waitForFunction(() => window.useNuxtApp?.()._route.fullPath === '/useAsyncData/immediate-remove-unmounted') expect(await page.locator('#immediate-data').getByText('null').textContent()).toBe('null') await page.click('#execute-btn') @@ -2199,7 +2191,7 @@ describe('keepalive', () => { const pageName = 'not-keepalive' await page.click(`#${pageName}`) - await page.waitForTimeout(25) + await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`) expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`]) @@ -2211,7 +2203,7 @@ describe('keepalive', () => { const pageName = 'keepalive-in-config' await page.click(`#${pageName}`) - await page.waitForTimeout(25) + await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`) expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`]) @@ -2223,7 +2215,7 @@ describe('keepalive', () => { const pageName = 'not-keepalive-in-nuxtpage' await page.click(`#${pageName}`) - await page.waitForTimeout(25) + await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`) expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`]) @@ -2235,7 +2227,7 @@ describe('keepalive', () => { const pageName = 'keepalive-in-nuxtpage' await page.click(`#${pageName}`) - await page.waitForTimeout(25) + await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${pageName}`) expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`, `${pageName}: onActivated`]) @@ -2245,16 +2237,18 @@ describe('keepalive', () => { it('should preserve keepalive config when navigate routes in nuxt-page', async () => { const { page, consoleLogs } = await renderPage('/keepalive') - await page.click('#keepalive-in-nuxtpage') - await page.waitForTimeout(25) - await page.click('#keepalive-in-nuxtpage-2') - await page.waitForTimeout(25) - await page.click('#keepalive-in-nuxtpage') - await page.waitForTimeout(25) - await page.click('#not-keepalive') - await page.waitForTimeout(25) - await page.click('#keepalive-in-nuxtpage-2') - await page.waitForTimeout(25) + const slugs = [ + 'keepalive-in-nuxtpage', + 'keepalive-in-nuxtpage-2', + 'keepalive-in-nuxtpage', + 'not-keepalive', + 'keepalive-in-nuxtpage-2', + ] + + for (const slug of slugs) { + await page.click(`#${slug}`) + await page.waitForFunction(path => window.useNuxtApp?.()._route.fullPath === path, `/keepalive/${slug}`) + } expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([ 'keepalive-in-nuxtpage: onMounted',