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 dcefffa807..ab9ea2f531 100644
--- a/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts
+++ b/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts
@@ -2,12 +2,13 @@ import { Component, input, signal } from '@angular/core'
import { QueryClient } from '@tanstack/query-core'
import { TestBed } from '@angular/core/testing'
import { describe, expect, test, vi } from 'vitest'
+import { By } from '@angular/platform-browser'
import { injectMutation } from '../inject-mutation'
import { provideAngularQuery } from '../providers'
import {
errorMutator,
expectSignals,
- setSignalInputs,
+ setFixtureSignalInputs,
successMutator,
} from './test-utils'
@@ -314,7 +315,10 @@ describe('injectMutation', () => {
@Component({
selector: 'app-fake',
- template: ``,
+ template: `
+
+ {{ mutation.data() }}
+ `,
standalone: true,
})
class FakeComponent {
@@ -322,22 +326,80 @@ describe('injectMutation', () => {
mutation = injectMutation(() => ({
mutationKey: ['fake', this.name()],
- mutationFn: (params: string) => successMutator(params),
+ mutationFn: () => successMutator(this.name()),
}))
+
+ mutate(): void {
+ this.mutation.mutate()
+ }
}
const fixture = TestBed.createComponent(FakeComponent)
- setSignalInputs(fixture.componentInstance, {
- name: 'value',
- })
- fixture.detectChanges()
+ const { debugElement } = fixture
+ setFixtureSignalInputs(fixture, { name: 'value' })
- fixture.componentInstance.mutation.mutate('myValue')
+ const button = debugElement.query(By.css('button'))
+ button.triggerEventHandler('click')
await resolveMutations()
+ fixture.detectChanges()
+ const text = debugElement.query(By.css('span')).nativeElement.textContent
+ expect(text).toEqual('value')
const mutation = mutationCache.find({ mutationKey: ['fake', 'value'] })
expect(mutation).toBeDefined()
expect(mutation!.options.mutationKey).toStrictEqual(['fake', 'value'])
})
+
+ test('should update options on required signal input change', async () => {
+ const mutationCache = queryClient.getMutationCache()
+
+ @Component({
+ selector: 'app-fake',
+ template: `
+
+ {{ mutation.data() }}
+ `,
+ standalone: true,
+ })
+ class FakeComponent {
+ name = input.required()
+
+ mutation = injectMutation(() => ({
+ mutationKey: ['fake', this.name()],
+ mutationFn: () => successMutator(this.name()),
+ }))
+
+ mutate(): void {
+ this.mutation.mutate()
+ }
+ }
+
+ const fixture = TestBed.createComponent(FakeComponent)
+ const { debugElement } = fixture
+ setFixtureSignalInputs(fixture, { name: 'value' })
+
+ const button = debugElement.query(By.css('button'))
+ const span = debugElement.query(By.css('span'))
+
+ button.triggerEventHandler('click')
+ await resolveMutations()
+ fixture.detectChanges()
+
+ expect(span.nativeElement.textContent).toEqual('value')
+
+ setFixtureSignalInputs(fixture, { name: 'updatedValue' })
+
+ button.triggerEventHandler('click')
+ await resolveMutations()
+ fixture.detectChanges()
+
+ expect(span.nativeElement.textContent).toEqual('updatedValue')
+
+ const mutations = mutationCache.findAll()
+ expect(mutations.length).toBe(2)
+ const [mutation1, mutation2] = mutations
+ expect(mutation1!.options.mutationKey).toEqual(['fake', 'value'])
+ expect(mutation2!.options.mutationKey).toEqual(['fake', 'updatedValue'])
+ })
})
diff --git a/packages/angular-query-experimental/src/__tests__/test-utils.ts b/packages/angular-query-experimental/src/__tests__/test-utils.ts
index 9f04630c0f..1f9f6d9b25 100644
--- a/packages/angular-query-experimental/src/__tests__/test-utils.ts
+++ b/packages/angular-query-experimental/src/__tests__/test-utils.ts
@@ -1,5 +1,6 @@
import { type InputSignal, isSignal, untracked } from '@angular/core'
import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals'
+import type { ComponentFixture } from '@angular/core/testing'
export function simpleFetcher(): Promise {
return new Promise((resolve) => {
@@ -113,3 +114,14 @@ export function setSignalInputs>(
}
}
}
+
+export function setFixtureSignalInputs>(
+ componentFixture: ComponentFixture,
+ inputs: ToSignalInputUpdatableMap,
+ options: { detectChanges: boolean } = { detectChanges: true },
+) {
+ setSignalInputs(componentFixture.componentInstance, inputs)
+ if (options.detectChanges) {
+ componentFixture.detectChanges()
+ }
+}