Add explicit test case for mutating in constructor

Author: ThiloAschebrock

packages/angular-query-experimental/src/__tests__/inject-mutation-state.test.ts

@@ -144,7 +144,6 @@ describe('injectMutationState', () => {
             <span>{{ mutation.status }}</span>
           }
         `,
-        standalone: true,
       })
       class FakeComponent {
         name = input.required<string>()

packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts

@@ -316,7 +316,6 @@ describe('injectMutation', () => {
         <button (click)="mutate()"></button>
         <span>{{ mutation.data() }}</span>
       `,
-      standalone: true,
     })
     class FakeComponent {
       name = input.required<string>()
@@ -339,8 +338,6 @@ describe('injectMutation', () => {
     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'] })
@@ -357,7 +354,6 @@ describe('injectMutation', () => {
         <button (click)="mutate()"></button>
         <span>{{ mutation.data() }}</span>
       `,
-      standalone: true,
     })
     class FakeComponent {
       name = input.required<string>()
@@ -400,6 +396,37 @@ describe('injectMutation', () => {
     expect(mutation2!.options.mutationKey).toEqual(['fake', 'updatedValue'])
   })
 
+  test('should have pending state when mutating in constructor', async () => {
+    @Component({
+      selector: 'app-fake',
+      template: `
+        <span>{{ mutation.isPending() ? 'pending' : 'not pending' }}</span>
+      `,
+    })
+    class FakeComponent {
+      mutation = injectMutation(() => ({
+        mutationKey: ['fake'],
+        mutationFn: () => sleep(0).then(() => 'fake'),
+      }))
+
+      constructor() {
+        this.mutation.mutate()
+      }
+    }
+
+    const fixture = TestBed.createComponent(FakeComponent)
+    const { debugElement } = fixture
+    const span = debugElement.query(By.css('span'))
+
+    vi.advanceTimersByTime(1)
+
+    expect(span.nativeElement.textContent).toEqual('pending')
+
+    await resolveMutations()
+
+    expect(span.nativeElement.textContent).toEqual('not pending')
+  })
+
   describe('throwOnError', () => {
     test('should evaluate throwOnError when mutation is expected to throw', async () => {
       const err = new Error('Expected mock error. All is well!')

packages/angular-query-experimental/src/__tests__/inject-query.test.ts

@@ -520,7 +520,6 @@ describe('injectQuery', () => {
     @Component({
       selector: 'app-fake',
       template: `{{ query.data() }}`,
-      standalone: true,
     })
     class FakeComponent {
       name = input.required<string>()