diff --git a/packages/angular-query-persist-client/src/__tests__/with-persist-query-client.test.ts b/packages/angular-query-persist-client/src/__tests__/with-persist-query-client.test.ts index 40cdf47ae6..00493e7c04 100644 --- a/packages/angular-query-persist-client/src/__tests__/with-persist-query-client.test.ts +++ b/packages/angular-query-persist-client/src/__tests__/with-persist-query-client.test.ts @@ -1,4 +1,4 @@ -import { describe, expect, test, vi } from 'vitest' +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' import { QueryClient, injectQuery, @@ -10,7 +10,7 @@ import { effect, provideZonelessChangeDetection, } from '@angular/core' -import { render, screen, waitFor } from '@testing-library/angular' +import { render } from '@testing-library/angular' import { queryKey, sleep } from '@tanstack/query-test-utils' import { withPersistQueryClient } from '../with-persist-query-client' import type { @@ -18,6 +18,14 @@ import type { Persister, } from '@tanstack/query-persist-client-core' +beforeEach(() => { + vi.useFakeTimers() +}) + +afterEach(() => { + vi.useRealTimers() +}) + const createMockPersister = (): Persister => { let storedState: PersistedClient | undefined @@ -26,8 +34,7 @@ const createMockPersister = (): Persister => { storedState = persistClient }, async restoreClient() { - await sleep(10) - return storedState + return sleep(10).then(() => storedState) }, removeClient() { storedState = undefined @@ -46,8 +53,9 @@ const createMockErrorPersister = ( // noop }, async restoreClient() { - await sleep(10) - throw error + return sleep(10).then(() => { + throw error + }) }, removeClient, }, @@ -64,14 +72,16 @@ describe('withPersistQueryClient', () => { }> = [] const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() @@ -86,10 +96,7 @@ describe('withPersistQueryClient', () => { class Page { state = injectQuery(() => ({ queryKey: key, - queryFn: async () => { - await sleep(10) - return 'fetched' - }, + queryFn: () => sleep(10).then(() => 'fetched'), })) _ = effect(() => { states.push({ @@ -100,7 +107,7 @@ describe('withPersistQueryClient', () => { }) } - render(Page, { + const rendered = await render(Page, { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( @@ -110,9 +117,14 @@ describe('withPersistQueryClient', () => { ], }) - await waitFor(() => screen.getByText('fetchStatus: idle')) - await waitFor(() => screen.getByText('hydrated')) - await waitFor(() => screen.getByText('fetched')) + expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument() + await vi.advanceTimersByTimeAsync(10) + rendered.fixture.detectChanges() + expect(rendered.getByText('hydrated')).toBeInTheDocument() + + await vi.advanceTimersByTimeAsync(11) + rendered.fixture.detectChanges() + expect(rendered.getByText('fetched')).toBeInTheDocument() expect(states).toHaveLength(3) @@ -148,14 +160,16 @@ describe('withPersistQueryClient', () => { }> = [] const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() @@ -170,10 +184,7 @@ describe('withPersistQueryClient', () => { class Page { state = injectQuery(() => ({ queryKey: key, - queryFn: async () => { - await sleep(10) - return 'fetched' - }, + queryFn: () => sleep(10).then(() => 'fetched'), initialData: 'initial', // make sure that initial data is older than the hydration data // otherwise initialData would be newer and takes precedence @@ -188,7 +199,7 @@ describe('withPersistQueryClient', () => { }) } - render(Page, { + const rendered = await render(Page, { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( @@ -198,7 +209,14 @@ describe('withPersistQueryClient', () => { ], }) - await waitFor(() => screen.getByText('fetched')) + expect(rendered.getByText('initial')).toBeInTheDocument() + await vi.advanceTimersByTimeAsync(10) + rendered.fixture.detectChanges() + expect(rendered.getByText('hydrated')).toBeInTheDocument() + + await vi.advanceTimersByTimeAsync(11) + rendered.fixture.detectChanges() + expect(rendered.getByText('fetched')).toBeInTheDocument() expect(states).toHaveLength(3) @@ -230,14 +248,16 @@ describe('withPersistQueryClient', () => { }> = [] const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() @@ -254,11 +274,11 @@ describe('withPersistQueryClient', () => { class Page { state = injectQuery(() => ({ queryKey: key, - queryFn: async () => { - fetched = true - await sleep(10) - return 'fetched' - }, + queryFn: () => + sleep(10).then(() => { + fetched = true + return 'fetched' + }), staleTime: Infinity, })) _ = effect(() => { @@ -270,7 +290,7 @@ describe('withPersistQueryClient', () => { }) } - render(Page, { + const rendered = await render(Page, { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( @@ -280,8 +300,10 @@ describe('withPersistQueryClient', () => { ], }) - await waitFor(() => screen.getByText('data: null')) - await waitFor(() => screen.getByText('data: hydrated')) + expect(rendered.getByText('data: null')).toBeInTheDocument() + await vi.advanceTimersByTimeAsync(10) + rendered.fixture.detectChanges() + expect(rendered.getByText('data: hydrated')).toBeInTheDocument() expect(states).toHaveLength(2) @@ -303,13 +325,15 @@ describe('withPersistQueryClient', () => { test('should call onSuccess after successful restoring', async () => { const key = queryKey() const queryClient = new QueryClient() - await queryClient.prefetchQuery({ + queryClient.prefetchQuery({ queryKey: key, - queryFn: () => Promise.resolve('hydrated'), + queryFn: () => sleep(10).then(() => 'hydrated'), }) + await vi.advanceTimersByTimeAsync(10) const persister = createMockPersister() - await persistQueryClientSave({ queryClient, persister }) + persistQueryClientSave({ queryClient, persister }) + await vi.advanceTimersByTimeAsync(0) queryClient.clear() @@ -324,16 +348,13 @@ describe('withPersistQueryClient', () => { class Page { state = injectQuery(() => ({ queryKey: key, - queryFn: async () => { - await sleep(10) - return 'fetched' - }, + queryFn: () => sleep(10).then(() => 'fetched'), })) } const onSuccess = vi.fn() - render(Page, { + const rendered = await render(Page, { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( @@ -347,8 +368,14 @@ describe('withPersistQueryClient', () => { }) expect(onSuccess).toHaveBeenCalledTimes(0) - await waitFor(() => screen.getByText('fetched')) + await vi.advanceTimersByTimeAsync(10) + rendered.fixture.detectChanges() + expect(rendered.getByText('hydrated')).toBeInTheDocument() expect(onSuccess).toHaveBeenCalledTimes(1) + + await vi.advanceTimersByTimeAsync(11) + rendered.fixture.detectChanges() + expect(rendered.getByText('fetched')).toBeInTheDocument() }) test('should remove cache after non-successful restoring', async () => { @@ -373,14 +400,11 @@ describe('withPersistQueryClient', () => { class Page { state = injectQuery(() => ({ queryKey: key, - queryFn: async () => { - await sleep(10) - return 'fetched' - }, + queryFn: () => sleep(10).then(() => 'fetched'), })) } - render(Page, { + const rendered = await render(Page, { providers: [ provideZonelessChangeDetection(), provideTanStackQuery( @@ -394,11 +418,16 @@ describe('withPersistQueryClient', () => { ], }) - await waitFor(() => screen.getByText('fetched')) + await vi.advanceTimersByTimeAsync(10) + rendered.fixture.detectChanges() expect(removeClient).toHaveBeenCalledTimes(1) expect(onSuccess).toHaveBeenCalledTimes(0) expect(onError).toHaveBeenCalledTimes(1) + await vi.advanceTimersByTimeAsync(11) + rendered.fixture.detectChanges() + expect(rendered.getByText('fetched')).toBeInTheDocument() + expect(onErrorMock).toHaveBeenCalledTimes(1) expect(onErrorMock).toHaveBeenNthCalledWith(1, error) onErrorMock.mockRestore() diff --git a/packages/angular-query-persist-client/test-setup.ts b/packages/angular-query-persist-client/test-setup.ts index ef53141bdc..cb8519a824 100644 --- a/packages/angular-query-persist-client/test-setup.ts +++ b/packages/angular-query-persist-client/test-setup.ts @@ -1,3 +1,4 @@ +import '@testing-library/jest-dom/vitest' import { getTestBed } from '@angular/core/testing' import { BrowserTestingModule,