From dd9dea2b0a04986ca84a714f9ea63983436e211d Mon Sep 17 00:00:00 2001
From: riccardoperra <riccardo.perra@icloud.com>
Date: Sun, 3 Mar 2024 22:43:19 +0100
Subject: [PATCH] feat(angular-query): add inject mutation test

---
 .../src/__tests__/inject-mutation.test.ts     | 78 +++++++++++++++++--
 .../src/__tests__/test-utils.ts               | 12 +++
 2 files changed, 82 insertions(+), 8 deletions(-)

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: `
+        <button (click)="mutate()"></button>
+        <span>{{ mutation.data() }}</span>
+      `,
       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: `
+        <button (click)="mutate()"></button>
+        <span>{{ mutation.data() }}</span>
+      `,
+      standalone: true,
+    })
+    class FakeComponent {
+      name = input.required<string>()
+
+      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<string> {
   return new Promise((resolve) => {
@@ -113,3 +114,14 @@ export function setSignalInputs<T extends NonNullable<unknown>>(
     }
   }
 }
+
+export function setFixtureSignalInputs<T extends NonNullable<unknown>>(
+  componentFixture: ComponentFixture<T>,
+  inputs: ToSignalInputUpdatableMap<T>,
+  options: { detectChanges: boolean } = { detectChanges: true },
+) {
+  setSignalInputs(componentFixture.componentInstance, inputs)
+  if (options.detectChanges) {
+    componentFixture.detectChanges()
+  }
+}