@tanstack/angular-query-experimental 5.34.1 → 5.35.0

package/src/__tests__/inject-mutation-state.test.ts

@@ -1,177 +0,0 @@
-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 { JsonPipe } from '@angular/common'
-import { injectMutation } from '../inject-mutation'
-import { injectMutationState } from '../inject-mutation-state'
-import { provideAngularQuery } from '../providers'
-import { setFixtureSignalInputs, successMutator } from './test-utils'
-
-const MUTATION_DURATION = 1000
-
-const resolveMutations = () => vi.advanceTimersByTimeAsync(MUTATION_DURATION)
-
-describe('injectMutationState', () => {
-  let queryClient: QueryClient
-
-  beforeEach(() => {
-    queryClient = new QueryClient()
-    vi.useFakeTimers()
-    TestBed.configureTestingModule({
-      providers: [provideAngularQuery(queryClient)],
-    })
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  describe('injectMutationState', () => {
-    test('should return variables after calling mutate', async () => {
-      const mutationKey = ['mutation']
-      const variables = 'foo123'
-
-      const mutation = TestBed.runInInjectionContext(() => {
-        return injectMutation(() => ({
-          mutationKey: mutationKey,
-          mutationFn: (params: string) => successMutator(params),
-        }))
-      })
-
-      mutation.mutate(variables)
-
-      const mutationState = TestBed.runInInjectionContext(() => {
-        return injectMutationState(() => ({
-          filters: { mutationKey, status: 'pending' },
-          select: (m) => m.state.variables,
-        }))
-      })
-
-      expect(mutationState()).toEqual([variables])
-    })
-
-    test('reactive options should update injectMutationState', async () => {
-      const mutationKey1 = ['mutation1']
-      const mutationKey2 = ['mutation2']
-      const variables1 = 'foo123'
-      const variables2 = 'bar234'
-
-      const [mutation1, mutation2] = TestBed.runInInjectionContext(() => {
-        return [
-          injectMutation(() => ({
-            mutationKey: mutationKey1,
-            mutationFn: (params: string) => successMutator(params),
-          })),
-          injectMutation(() => ({
-            mutationKey: mutationKey2,
-            mutationFn: (params: string) => successMutator(params),
-          })),
-        ]
-      })
-
-      mutation1.mutate(variables1)
-      mutation2.mutate(variables2)
-
-      const filterKey = signal(mutationKey1)
-
-      const mutationState = TestBed.runInInjectionContext(() => {
-        return injectMutationState(() => ({
-          filters: { mutationKey: filterKey(), status: 'pending' },
-          select: (m) => m.state.variables,
-        }))
-      })
-
-      expect(mutationState()).toEqual([variables1])
-
-      filterKey.set(mutationKey2)
-      TestBed.flushEffects()
-      expect(mutationState()).toEqual([variables2])
-    })
-
-    test('should return variables after calling mutate', async () => {
-      queryClient.clear()
-      const mutationKey = ['mutation']
-      const variables = 'bar234'
-
-      const mutation = TestBed.runInInjectionContext(() => {
-        return injectMutation(() => ({
-          mutationKey: mutationKey,
-          mutationFn: (params: string) => successMutator(params),
-        }))
-      })
-
-      mutation.mutate(variables)
-
-      const mutationState = TestBed.runInInjectionContext(() => {
-        return injectMutationState()
-      })
-
-      expect(mutationState()[0]?.variables).toEqual(variables)
-    })
-
-    test('should support required signal inputs', async () => {
-      queryClient.clear()
-      const fakeName = 'name1'
-      const mutationKey1 = ['fake', fakeName]
-
-      const mutations = TestBed.runInInjectionContext(() => {
-        return [
-          injectMutation(() => ({
-            mutationKey: mutationKey1,
-            mutationFn: () => Promise.resolve('myValue'),
-          })),
-          injectMutation(() => ({
-            mutationKey: mutationKey1,
-            mutationFn: () => Promise.reject('myValue2'),
-          })),
-        ]
-      })
-
-      mutations.forEach((mutation) => mutation.mutate())
-
-      @Component({
-        selector: 'app-fake',
-        template: `
-          @for (mutation of mutationState(); track mutation) {
-            <span>{{ mutation.status }}</span>
-          }
-        `,
-        standalone: true,
-        imports: [JsonPipe],
-      })
-      class FakeComponent {
-        name = input.required<string>()
-
-        mutationState = injectMutationState(() => ({
-          filters: {
-            mutationKey: ['fake', this.name()],
-            exact: true,
-          },
-        }))
-      }
-
-      const fixture = TestBed.createComponent(FakeComponent)
-      const { debugElement } = fixture
-      setFixtureSignalInputs(fixture, { name: fakeName })
-
-      fixture.detectChanges()
-
-      let spans = debugElement
-        .queryAll(By.css('span'))
-        .map((span) => span.nativeNode.textContent)
-
-      expect(spans).toEqual(['pending', 'pending'])
-
-      await resolveMutations()
-      fixture.detectChanges()
-
-      spans = debugElement
-        .queryAll(By.css('span'))
-        .map((span) => span.nativeNode.textContent)
-
-      expect(spans).toEqual(['success', 'error'])
-    })
-  })
-})

package/src/__tests__/inject-mutation.test-d.ts

@@ -1,71 +0,0 @@
-import { describe, expectTypeOf } from 'vitest'
-import { injectMutation } from '../inject-mutation'
-import { successMutator } from './test-utils'
-import type { Signal } from '@angular/core'
-
-describe('Discriminated union return type', () => {
-  test('data should be possibly undefined by default', () => {
-    const mutation = injectMutation(() => ({
-      mutationFn: successMutator<string>,
-    }))
-
-    expectTypeOf(mutation.data).toEqualTypeOf<Signal<string | undefined>>()
-  })
-
-  test('data should be defined when mutation is success', () => {
-    const mutation = injectMutation(() => ({
-      mutationFn: successMutator<string>,
-    }))
-
-    if (mutation.isSuccess()) {
-      expectTypeOf(mutation.data).toEqualTypeOf<Signal<string>>()
-    }
-  })
-
-  test('error should be null when mutation is success', () => {
-    const mutation = injectMutation(() => ({
-      mutationFn: successMutator<string>,
-    }))
-
-    if (mutation.isSuccess()) {
-      expectTypeOf(mutation.error).toEqualTypeOf<Signal<null>>()
-    }
-  })
-
-  test('data should be undefined when mutation is pending', () => {
-    const mutation = injectMutation(() => ({
-      mutationFn: successMutator<string>,
-    }))
-
-    if (mutation.isPending()) {
-      expectTypeOf(mutation.data).toEqualTypeOf<Signal<undefined>>()
-    }
-  })
-
-  test('error should be defined when mutation is error', () => {
-    const mutation = injectMutation(() => ({
-      mutationFn: successMutator<string>,
-    }))
-
-    if (mutation.isError()) {
-      expectTypeOf(mutation.error).toEqualTypeOf<Signal<Error>>()
-    }
-  })
-
-  test('should narrow variables', () => {
-    const mutation = injectMutation(() => ({
-      mutationFn: successMutator<string>,
-    }))
-
-    if (mutation.isIdle()) {
-      expectTypeOf(mutation.variables).toEqualTypeOf<Signal<undefined>>()
-    }
-    if (mutation.isPending()) {
-      expectTypeOf(mutation.variables).toEqualTypeOf<Signal<string>>()
-    }
-    if (mutation.isSuccess()) {
-      expectTypeOf(mutation.variables).toEqualTypeOf<Signal<string>>()
-    }
-    expectTypeOf(mutation.variables).toEqualTypeOf<Signal<string | undefined>>()
-  })
-})

package/src/__tests__/inject-mutation.test.ts

@@ -1,458 +0,0 @@
-import { Component, input, signal } from '@angular/core'
-import { QueryClient } from '@tanstack/query-core'
-import { TestBed } from '@angular/core/testing'
-import { describe, expect, vi } from 'vitest'
-import { By } from '@angular/platform-browser'
-import { injectMutation } from '../inject-mutation'
-import { provideAngularQuery } from '../providers'
-import {
-  errorMutator,
-  expectSignals,
-  setFixtureSignalInputs,
-  successMutator,
-} from './test-utils'
-
-const MUTATION_DURATION = 1000
-
-const resolveMutations = () => vi.advanceTimersByTimeAsync(MUTATION_DURATION)
-
-describe('injectMutation', () => {
-  let queryClient: QueryClient
-
-  beforeEach(() => {
-    queryClient = new QueryClient()
-    vi.useFakeTimers()
-    TestBed.configureTestingModule({
-      providers: [provideAngularQuery(queryClient)],
-    })
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  describe('callback helpers', () => {
-    test('can access client from options callback', async () => {
-      const mutation = TestBed.runInInjectionContext(() => {
-        return injectMutation((client) => ({
-          mutationFn: () => {
-            expect(client).toBe(queryClient)
-            return Promise.resolve()
-          },
-        }))
-      })
-
-      mutation.mutate()
-      vi.advanceTimersByTime(1)
-      expect(mutation.status()).toBe('pending')
-    })
-  })
-
-  test('should be in idle state initially', () => {
-    const mutation = TestBed.runInInjectionContext(() => {
-      return injectMutation(() => ({
-        mutationFn: (params) => successMutator(params),
-      }))
-    })
-
-    expectSignals(mutation, {
-      isIdle: true,
-      isPending: false,
-      isError: false,
-      isSuccess: false,
-    })
-  })
-
-  test('should change state after invoking mutate', async () => {
-    const result = 'Mock data'
-
-    const mutation = TestBed.runInInjectionContext(() => {
-      return injectMutation(() => ({
-        mutationFn: (params: string) => successMutator(params),
-      }))
-    })
-
-    mutation.mutate(result)
-    vi.advanceTimersByTime(1)
-
-    expectSignals(mutation, {
-      isIdle: false,
-      isPending: true,
-      isError: false,
-      isSuccess: false,
-      data: undefined,
-      error: null,
-    })
-  })
-
-  test('should return error when request fails', async () => {
-    const mutation = TestBed.runInInjectionContext(() => {
-      return injectMutation(() => ({
-        mutationFn: errorMutator,
-      }))
-    })
-    mutation.mutate({})
-
-    await resolveMutations()
-
-    expectSignals(mutation, {
-      isIdle: false,
-      isPending: false,
-      isError: true,
-      isSuccess: false,
-      data: undefined,
-      error: Error('Some error'),
-    })
-  })
-
-  test('should return data when request succeeds', async () => {
-    const result = 'Mock data'
-    const mutation = TestBed.runInInjectionContext(() => {
-      return injectMutation(() => ({
-        mutationFn: (params: string) => successMutator(params),
-      }))
-    })
-
-    mutation.mutate(result)
-
-    await resolveMutations()
-
-    expectSignals(mutation, {
-      isIdle: false,
-      isPending: false,
-      isError: false,
-      isSuccess: true,
-      data: result,
-      error: null,
-    })
-  })
-
-  test('reactive options should update mutation', async () => {
-    const mutationCache = queryClient.getMutationCache()
-    // Signal will be updated before the mutation is called
-    // this test confirms that the mutation uses the updated value
-    const mutationKey = signal(['1'])
-    const mutation = TestBed.runInInjectionContext(() => {
-      return injectMutation(() => ({
-        mutationKey: mutationKey(),
-        mutationFn: (params: string) => successMutator(params),
-      }))
-    })
-
-    mutationKey.set(['2'])
-
-    TestBed.flushEffects()
-
-    mutation.mutate('xyz')
-
-    const mutations = mutationCache.find({ mutationKey: ['2'] })
-
-    expect(mutations?.options.mutationKey).toEqual(['2'])
-  })
-
-  test('should reset state after invoking mutation.reset', async () => {
-    const mutation = TestBed.runInInjectionContext(() => {
-      return injectMutation(() => ({
-        mutationFn: (params: string) => errorMutator(params),
-      }))
-    })
-
-    mutation.mutate('')
-
-    await resolveMutations()
-
-    expect(mutation.isError()).toBe(true)
-
-    mutation.reset()
-
-    await resolveMutations()
-
-    expectSignals(mutation, {
-      isIdle: true,
-      isPending: false,
-      isError: false,
-      isSuccess: false,
-      data: undefined,
-      error: null,
-    })
-  })
-
-  describe('side effects', () => {
-    beforeEach(() => {
-      vi.clearAllMocks()
-    })
-
-    test('should call onMutate when passed as an option', async () => {
-      const onMutate = vi.fn()
-      const mutation = TestBed.runInInjectionContext(() => {
-        return injectMutation(() => ({
-          mutationFn: (params: string) => successMutator(params),
-          onMutate,
-        }))
-      })
-
-      mutation.mutate('')
-
-      await resolveMutations()
-
-      expect(onMutate).toHaveBeenCalledTimes(1)
-    })
-
-    test('should call onError when passed as an option', async () => {
-      const onError = vi.fn()
-      const mutation = TestBed.runInInjectionContext(() => {
-        return injectMutation(() => ({
-          mutationFn: (params: string) => errorMutator(params),
-          onError,
-        }))
-      })
-
-      mutation.mutate('')
-
-      await resolveMutations()
-
-      expect(onError).toHaveBeenCalledTimes(1)
-    })
-
-    test('should call onSuccess when passed as an option', async () => {
-      const onSuccess = vi.fn()
-      const mutation = TestBed.runInInjectionContext(() => {
-        return injectMutation(() => ({
-          mutationFn: (params: string) => successMutator(params),
-          onSuccess,
-        }))
-      })
-
-      mutation.mutate('')
-
-      await resolveMutations()
-
-      expect(onSuccess).toHaveBeenCalledTimes(1)
-    })
-
-    test('should call onSettled when passed as an option', async () => {
-      const onSettled = vi.fn()
-      const mutation = TestBed.runInInjectionContext(() => {
-        return injectMutation(() => ({
-          mutationFn: (params: string) => successMutator(params),
-          onSettled,
-        }))
-      })
-
-      mutation.mutate('')
-
-      await resolveMutations()
-
-      expect(onSettled).toHaveBeenCalledTimes(1)
-    })
-
-    test('should call onError when passed as an argument of mutate function', async () => {
-      const onError = vi.fn()
-      const mutation = TestBed.runInInjectionContext(() => {
-        return injectMutation(() => ({
-          mutationFn: (params: string) => errorMutator(params),
-        }))
-      })
-
-      mutation.mutate('', { onError })
-
-      await resolveMutations()
-
-      expect(onError).toHaveBeenCalledTimes(1)
-    })
-
-    test('should call onSuccess when passed as an argument of mutate function', async () => {
-      const onSuccess = vi.fn()
-      const mutation = TestBed.runInInjectionContext(() => {
-        return injectMutation(() => ({
-          mutationFn: (params: string) => successMutator(params),
-        }))
-      })
-
-      mutation.mutate('', { onSuccess })
-
-      await resolveMutations()
-
-      expect(onSuccess).toHaveBeenCalledTimes(1)
-    })
-
-    test('should call onSettled when passed as an argument of mutate function', async () => {
-      const onSettled = vi.fn()
-      const mutation = TestBed.runInInjectionContext(() => {
-        return injectMutation(() => ({
-          mutationFn: (params: string) => successMutator(params),
-        }))
-      })
-
-      mutation.mutate('', { onSettled })
-
-      await resolveMutations()
-
-      expect(onSettled).toHaveBeenCalledTimes(1)
-    })
-
-    test('should fire both onSettled functions', async () => {
-      const onSettled = vi.fn()
-      const onSettledOnFunction = vi.fn()
-      const mutation = TestBed.runInInjectionContext(() => {
-        return injectMutation(() => ({
-          mutationFn: (params: string) => successMutator(params),
-          onSettled,
-        }))
-      })
-
-      mutation.mutate('', { onSettled: onSettledOnFunction })
-
-      await resolveMutations()
-
-      expect(onSettled).toHaveBeenCalledTimes(1)
-      expect(onSettledOnFunction).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  test('should support required signal inputs', 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'))
-    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'])
-  })
-
-  describe('throwOnError', () => {
-    test('should evaluate throwOnError when mutation is expected to throw', async () => {
-      const err = new Error('Expected mock error. All is well!')
-      const boundaryFn = vi.fn()
-      const { mutate } = TestBed.runInInjectionContext(() => {
-        return injectMutation(() => ({
-          mutationKey: ['fake'],
-          mutationFn: () => {
-            return Promise.reject(err)
-          },
-          throwOnError: boundaryFn,
-        }))
-      })
-
-      mutate()
-
-      await resolveMutations()
-
-      expect(boundaryFn).toHaveBeenCalledTimes(1)
-      expect(boundaryFn).toHaveBeenCalledWith(err)
-    })
-  })
-
-  test('should throw when throwOnError is true', async () => {
-    const err = new Error('Expected mock error. All is well!')
-    const { mutateAsync } = TestBed.runInInjectionContext(() => {
-      return injectMutation(() => ({
-        mutationKey: ['fake'],
-        mutationFn: () => {
-          return Promise.reject(err)
-        },
-        throwOnError: true,
-      }))
-    })
-
-    await expect(() => mutateAsync()).rejects.toThrowError(err)
-  })
-
-  test('should throw when throwOnError function returns true', async () => {
-    const err = new Error('Expected mock error. All is well!')
-    const { mutateAsync } = TestBed.runInInjectionContext(() => {
-      return injectMutation(() => ({
-        mutationKey: ['fake'],
-        mutationFn: () => {
-          return Promise.reject(err)
-        },
-        throwOnError: () => true,
-      }))
-    })
-
-    await expect(() => mutateAsync()).rejects.toThrowError(err)
-  })
-})