@tanstack/angular-query-experimental 5.103.1 → 5.103.3

package/src/__tests__/provide-tanstack-query.test.ts

@@ -0,0 +1,38 @@
+import { TestBed } from '@angular/core/testing'
+import { describe, expect, it } from 'vitest'
+import { InjectionToken, provideZonelessChangeDetection } from '@angular/core'
+import { QueryClient } from '@tanstack/query-core'
+import { provideTanStackQuery } from '../providers'
+
+describe('provideTanStackQuery', () => {
+  it('should provide a QueryClient instance directly', () => {
+    const queryClient = new QueryClient()
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
+    })
+
+    const providedQueryClient = TestBed.inject(QueryClient)
+    expect(providedQueryClient).toBe(queryClient)
+  })
+
+  it('should provide a QueryClient instance using an InjectionToken', () => {
+    const queryClient = new QueryClient()
+    const CUSTOM_QUERY_CLIENT = new InjectionToken<QueryClient>('', {
+      factory: () => queryClient,
+    })
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(CUSTOM_QUERY_CLIENT),
+      ],
+    })
+
+    const providedQueryClient = TestBed.inject(QueryClient)
+    expect(providedQueryClient).toBe(queryClient)
+  })
+})

package/src/__tests__/query-options.test-d.ts

@@ -0,0 +1,262 @@
+import { assertType, describe, expectTypeOf, it } from 'vitest'
+import { queryKey } from '@tanstack/query-test-utils'
+import {
+  QueryClient,
+  dataTagSymbol,
+  injectQuery,
+  queryOptions,
+  skipToken,
+} from '..'
+import type { Signal } from '@angular/core'
+import type { InitialDataFunction } from '@tanstack/query-core'
+
+// Regression test for exported queryOptions inference under declaration emit.
+// TypeScript should be able to name the return type without expanding the
+// internal data tag symbols into the consumer's .d.ts output.
+export const exportedQueryOptions = queryOptions({
+  queryKey: ['invalid'],
+})
+
+describe('queryOptions', () => {
+  it('should not allow excess properties', () => {
+    expectTypeOf(queryOptions).parameter(0).not.toHaveProperty('stallTime')
+  })
+
+  it('should infer types for callbacks', () => {
+    const key = queryKey()
+    queryOptions({
+      queryKey: key,
+      queryFn: () => Promise.resolve(5),
+      staleTime: 1000,
+      select: (data) => {
+        expectTypeOf(data).toEqualTypeOf<number>()
+      },
+    })
+  })
+
+  it('should allow undefined response in initialData', () => {
+    const key = queryKey()
+    const options = (id: string | null) =>
+      queryOptions({
+        queryKey: [...key, id],
+        queryFn: () =>
+          Promise.resolve({
+            id: '1',
+            title: 'Do Laundry',
+          }),
+        initialData: () =>
+          !id
+            ? undefined
+            : {
+                id,
+                title: 'Initial Data',
+              },
+      })
+
+    expectTypeOf(options(null).initialData).returns.toEqualTypeOf<
+      { id: string; title: string } | undefined
+    >()
+  })
+
+  it('should allow optional initialData object', () => {
+    const options = queryOptions({
+      queryKey: queryKey(),
+      queryFn: () => Promise.resolve('something string'),
+      initialData: Math.random() > 0.5 ? 'initial string' : undefined,
+    })
+
+    expectTypeOf(options.initialData).toExtend<
+      InitialDataFunction<string> | string | undefined
+    >()
+  })
+})
+
+it('should work when passed to injectQuery', () => {
+  const key = queryKey()
+  const options = queryOptions({
+    queryKey: key,
+    queryFn: () => Promise.resolve(5),
+  })
+
+  const { data } = injectQuery(() => options)
+  expectTypeOf(data).toEqualTypeOf<Signal<number | undefined>>()
+})
+
+it('should work when passed to fetchQuery', () => {
+  const key = queryKey()
+  const options = queryOptions({
+    queryKey: key,
+    queryFn: () => Promise.resolve(5),
+  })
+
+  // eslint-disable-next-line no-restricted-syntax -- grandfathered direct test
+  const data = new QueryClient().fetchQuery(options)
+  assertType<Promise<number>>(data)
+})
+
+it('should work when passed to query', () => {
+  const options = queryOptions({
+    queryKey: ['key'],
+    queryFn: () => Promise.resolve(5),
+  })
+
+  const data = new QueryClient().query(options)
+  assertType<Promise<number>>(data)
+})
+
+it('should work when passed to query with select', () => {
+  const options = queryOptions({
+    queryKey: ['key'],
+    queryFn: () => Promise.resolve(5),
+    select: (data) => data.toString(),
+  })
+
+  const data = new QueryClient().query(options)
+  assertType<Promise<string>>(data)
+})
+
+it('should work when passed to query with enabled: false', () => {
+  const options = queryOptions({
+    queryKey: ['key'],
+    queryFn: () => Promise.resolve(5),
+    enabled: false,
+  })
+
+  const data = new QueryClient().query(options)
+  assertType<Promise<number>>(data)
+})
+
+it('should work when passed to query with skipToken', () => {
+  const options = queryOptions({
+    queryKey: ['key'],
+    queryFn: skipToken,
+  })
+
+  const data = new QueryClient().query(options)
+  assertType<Promise<unknown>>(data)
+})
+
+it('should tag the queryKey with the result type of the QueryFn', () => {
+  const key = queryKey()
+  const { queryKey: tagged } = queryOptions({
+    queryKey: key,
+    queryFn: () => Promise.resolve(5),
+  })
+  assertType<number>(tagged[dataTagSymbol])
+})
+
+it('should tag the queryKey even if no promise is returned', () => {
+  const key = queryKey()
+  const { queryKey: tagged } = queryOptions({
+    queryKey: key,
+    queryFn: () => 5,
+  })
+  assertType<number>(tagged[dataTagSymbol])
+})
+
+it('should tag the queryKey with unknown if there is no queryFn', () => {
+  const key = queryKey()
+  const { queryKey: tagged } = queryOptions({
+    queryKey: key,
+  })
+
+  assertType<unknown>(tagged[dataTagSymbol])
+})
+
+it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
+  const key = queryKey()
+  const { queryKey: tagged } = queryOptions({
+    queryKey: key,
+    queryFn: () => Promise.resolve(5),
+    select: (data) => data.toString(),
+  })
+
+  assertType<number>(tagged[dataTagSymbol])
+})
+
+it('should return the proper type when passed to getQueryData', () => {
+  const key = queryKey()
+  const { queryKey: tagged } = queryOptions({
+    queryKey: key,
+    queryFn: () => Promise.resolve(5),
+  })
+
+  const queryClient = new QueryClient()
+  const data = queryClient.getQueryData(tagged)
+
+  expectTypeOf(data).toEqualTypeOf<number | undefined>()
+})
+
+it('should return the proper type when passed to getQueryState', () => {
+  const key = queryKey()
+  const { queryKey: tagged } = queryOptions({
+    queryKey: key,
+    queryFn: () => Promise.resolve(5),
+  })
+
+  const queryClient = new QueryClient()
+  const state = queryClient.getQueryState(tagged)
+
+  expectTypeOf(state?.data).toEqualTypeOf<number | undefined>()
+})
+
+it('should properly type updaterFn when passed to setQueryData', () => {
+  const key = queryKey()
+  const { queryKey: tagged } = queryOptions({
+    queryKey: key,
+    queryFn: () => Promise.resolve(5),
+  })
+
+  const queryClient = new QueryClient()
+  const data = queryClient.setQueryData(tagged, (prev) => {
+    expectTypeOf(prev).toEqualTypeOf<number | undefined>()
+    return prev
+  })
+
+  expectTypeOf(data).toEqualTypeOf<number | undefined>()
+})
+
+it('should properly type value when passed to setQueryData', () => {
+  const key = queryKey()
+  const { queryKey: tagged } = queryOptions({
+    queryKey: key,
+    queryFn: () => Promise.resolve(5),
+  })
+
+  const queryClient = new QueryClient()
+
+  // @ts-expect-error value should be a number
+  queryClient.setQueryData(tagged, '5')
+  // @ts-expect-error value should be a number
+  queryClient.setQueryData(tagged, () => '5')
+
+  const data = queryClient.setQueryData(tagged, 5)
+
+  expectTypeOf(data).toEqualTypeOf<number | undefined>()
+})
+
+it('should infer even if there is a conditional skipToken', () => {
+  const key = queryKey()
+  const options = queryOptions({
+    queryKey: key,
+    queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+  })
+
+  const queryClient = new QueryClient()
+  const data = queryClient.getQueryData(options.queryKey)
+
+  expectTypeOf(data).toEqualTypeOf<number | undefined>()
+})
+
+it('should infer to unknown if we disable a query with just a skipToken', () => {
+  const key = queryKey()
+  const options = queryOptions({
+    queryKey: key,
+    queryFn: skipToken,
+  })
+
+  const queryClient = new QueryClient()
+  const data = queryClient.getQueryData(options.queryKey)
+
+  expectTypeOf(data).toEqualTypeOf<unknown>()
+})

package/src/__tests__/query-options.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import { queryOptions } from '../query-options'
+import type { CreateQueryOptions } from '../types'
+
+describe('queryOptions', () => {
+  it('should return the object received as a parameter without any modification.', () => {
+    const object: CreateQueryOptions = {
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve(5),
+    } as const
+
+    expect(queryOptions(object)).toBe(object)
+  })
+})

package/src/__tests__/signal-proxy.test.ts

@@ -0,0 +1,27 @@
+import { isSignal, signal } from '@angular/core'
+import { describe, expect, it } from 'vitest'
+import { signalProxy } from '../signal-proxy'
+
+describe('signalProxy', () => {
+  const inputSignal = signal({ fn: () => 'bar', baz: 'qux' })
+  const proxy = signalProxy(inputSignal)
+
+  it('should have computed fields', () => {
+    expect(proxy.baz()).toEqual('qux')
+    expect(isSignal(proxy.baz)).toBe(true)
+  })
+
+  it('should pass through functions as-is', () => {
+    expect(proxy.fn()).toEqual('bar')
+    expect(isSignal(proxy.fn)).toBe(false)
+  })
+
+  it('should support "in" operator', () => {
+    expect('baz' in proxy).toBe(true)
+    expect('foo' in proxy).toBe(false)
+  })
+
+  it('should support "Object.keys"', () => {
+    expect(Object.keys(proxy)).toEqual(['fn', 'baz'])
+  })
+})

package/src/__tests__/test-utils.ts

@@ -0,0 +1,77 @@
+import { isSignal, untracked } from '@angular/core'
+import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals'
+import { expect } from 'vitest'
+import type { InputSignal, Signal } from '@angular/core'
+import type { ComponentFixture } from '@angular/core/testing'
+
+// Evaluate all signals on an object and return the result
+function evaluateSignals<T extends Record<string, any>>(
+  obj: T,
+): { [K in keyof T]: ReturnType<T[K]> } {
+  const result: Partial<{ [K in keyof T]: ReturnType<T[K]> }> = {}
+
+  untracked(() => {
+    for (const key in obj) {
+      if (
+        Object.prototype.hasOwnProperty.call(obj, key) &&
+        // Only evaluate signals, not normal functions
+        isSignal(obj[key])
+      ) {
+        const func = obj[key]
+        result[key] = func()
+      }
+    }
+  })
+
+  return result as { [K in keyof T]: ReturnType<T[K]> }
+}
+
+export const expectSignals = <T extends Record<string, any>>(
+  obj: T,
+  expected: Partial<{
+    [K in keyof T]: T[K] extends Signal<any> ? ReturnType<T[K]> : never
+  }>,
+): void => {
+  expect(evaluateSignals(obj)).toMatchObject(expected)
+}
+
+type ToSignalInputUpdatableMap<T> = {
+  [
+    K in keyof T as T[K] extends InputSignal<any> ? K : never
+  ]: T[K] extends InputSignal<infer Value> ? Value : never
+}
+
+function componentHasSignalInputProperty<TProperty extends string>(
+  component: object,
+  property: TProperty,
+): component is { [key in TProperty]: InputSignal<unknown> } {
+  return (
+    component.hasOwnProperty(property) && (component as any)[property][SIGNAL]
+  )
+}
+
+/**
+ * Set required signal input value to component fixture
+ * @see https://github.com/angular/angular/issues/54013
+ */
+export function setSignalInputs<T extends NonNullable<unknown>>(
+  component: T,
+  inputs: ToSignalInputUpdatableMap<T>,
+) {
+  for (const inputKey in inputs) {
+    if (componentHasSignalInputProperty(component, inputKey)) {
+      signalSetFn(component[inputKey][SIGNAL], inputs[inputKey])
+    }
+  }
+}
+
+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()
+  }
+}