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', () => {