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() + } +}