diff --git a/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts b/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts index 5d9c2e93c3..b9d3eea6e1 100644 --- a/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts +++ b/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts @@ -9,6 +9,7 @@ import { import { TestBed } from '@angular/core/testing' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { By } from '@angular/platform-browser' +import { render } from '@testing-library/angular' import { queryKey, sleep } from '@tanstack/query-test-utils' import { QueryClient, injectMutation, provideTanStackQuery } from '..' import { expectSignals, setFixtureSignalInputs } from './test-utils' @@ -94,24 +95,36 @@ describe('injectMutation', () => { it('should return data when request succeeds', async () => { const result = 'Mock data' - const mutation = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ + + @Component({ + template: ` +
isIdle: {{ mutation.isIdle() }}
+
isPending: {{ mutation.isPending() }}
+
isError: {{ mutation.isError() }}
+
isSuccess: {{ mutation.isSuccess() }}
+
data: {{ mutation.data() ?? 'none' }}
+
error: {{ mutation.error()?.message ?? 'none' }}
+ `, + }) + class Page { + readonly mutation = injectMutation(() => ({ mutationFn: (params: string) => sleep(10).then(() => params), })) - }) + } - mutation.mutate(result) + const rendered = await render(Page) - await vi.advanceTimersByTimeAsync(11) + rendered.fixture.componentInstance.mutation.mutate(result) - expectSignals(mutation, { - isIdle: false, - isPending: false, - isError: false, - isSuccess: true, - data: result, - error: null, - }) + await vi.advanceTimersByTimeAsync(11) + rendered.fixture.detectChanges() + + expect(rendered.getByText('isIdle: false')).toBeInTheDocument() + expect(rendered.getByText('isPending: false')).toBeInTheDocument() + expect(rendered.getByText('isError: false')).toBeInTheDocument() + expect(rendered.getByText('isSuccess: true')).toBeInTheDocument() + expect(rendered.getByText(`data: ${result}`)).toBeInTheDocument() + expect(rendered.getByText('error: none')).toBeInTheDocument() }) it('should update mutation when reactive options change', () => { @@ -138,31 +151,44 @@ describe('injectMutation', () => { }) it('should reset state after invoking mutation.reset', async () => { - const mutation = TestBed.runInInjectionContext(() => { - return injectMutation(() => ({ + @Component({ + template: ` +
isIdle: {{ mutation.isIdle() }}
+
isPending: {{ mutation.isPending() }}
+
isError: {{ mutation.isError() }}
+
isSuccess: {{ mutation.isSuccess() }}
+
data: {{ mutation.data() ?? 'none' }}
+
error: {{ mutation.error()?.message ?? 'none' }}
+ `, + }) + class Page { + readonly mutation = injectMutation(() => ({ mutationFn: () => sleep(10).then(() => Promise.reject(new Error('Some error'))), })) - }) + } - mutation.mutate() + const rendered = await render(Page) + + rendered.fixture.componentInstance.mutation.mutate() await vi.advanceTimersByTimeAsync(11) + rendered.fixture.detectChanges() - expect(mutation.isError()).toBe(true) + expect(rendered.getByText('isError: true')).toBeInTheDocument() + expect(rendered.getByText('error: Some error')).toBeInTheDocument() - mutation.reset() + rendered.fixture.componentInstance.mutation.reset() await vi.advanceTimersByTimeAsync(0) - - expectSignals(mutation, { - isIdle: true, - isPending: false, - isError: false, - isSuccess: false, - data: undefined, - error: null, - }) + rendered.fixture.detectChanges() + + expect(rendered.getByText('isIdle: true')).toBeInTheDocument() + expect(rendered.getByText('isPending: false')).toBeInTheDocument() + expect(rendered.getByText('isError: false')).toBeInTheDocument() + expect(rendered.getByText('isSuccess: false')).toBeInTheDocument() + expect(rendered.getByText('data: none')).toBeInTheDocument() + expect(rendered.getByText('error: none')).toBeInTheDocument() }) describe('side effects', () => {