|
| 1 | +--- |
| 2 | +id: testing |
| 3 | +title: Testing |
| 4 | +--- |
| 5 | + |
| 6 | +As there is currently no simple way to await a signal to reach a specific value we will use polling to wait in our test (instead of transforming our signals in observable and use RxJS features to filter the values). If you want to do like us for the polling you can use the angular testing library. |
| 7 | + |
| 8 | +Install this by running: |
| 9 | + |
| 10 | +```sh |
| 11 | +ng add @testing-library/angular |
| 12 | +``` |
| 13 | + |
| 14 | +Otherwise we recommend to use the toObservable feature from Angular. |
| 15 | + |
| 16 | +## What to test |
| 17 | + |
| 18 | +Because the recommendation is to use services that provide the Query options through function this is what we are going to do. |
| 19 | + |
| 20 | +## A simple test |
| 21 | + |
| 22 | +```ts |
| 23 | +//tasks.service.ts |
| 24 | +import { HttpClient } from '@angular/common/http' |
| 25 | +import { Injectable, inject } from '@angular/core' |
| 26 | +import { |
| 27 | + QueryClient, |
| 28 | + mutationOptions, |
| 29 | + queryOptions, |
| 30 | +} from '@tanstack/angular-query-experimental' |
| 31 | + |
| 32 | +import { lastValueFrom } from 'rxjs' |
| 33 | + |
| 34 | +@Injectable({ |
| 35 | + providedIn: 'root', |
| 36 | +}) |
| 37 | +export class TasksService { |
| 38 | + #queryClient = inject(QueryClient) // Manages query state and caching |
| 39 | + #http = inject(HttpClient) // Handles HTTP requests |
| 40 | + |
| 41 | + /** |
| 42 | + * Fetches all tasks from the API. |
| 43 | + * Returns an observable containing an array of task strings. |
| 44 | + */ |
| 45 | + allTasks = () => |
| 46 | + queryOptions({ |
| 47 | + queryKey: ['tasks'], |
| 48 | + queryFn: () => { |
| 49 | + return lastValueFrom(this.#http.get<Array<string>>('/api/tasks')); |
| 50 | + } |
| 51 | + }) |
| 52 | +} |
| 53 | +``` |
| 54 | + |
| 55 | +```ts |
| 56 | +// tasks.service.spec.ts |
| 57 | +import { TestBed } from "@angular/core/testing"; |
| 58 | +import { provideHttpClient, withFetch, withInterceptors } from "@angular/common/http"; |
| 59 | +import { QueryClient, injectQuery, provideTanStackQuery } from "@tanstack/angular-query-experimental"; |
| 60 | +import { Injector, inject, runInInjectionContext } from "@angular/core"; |
| 61 | +import { waitFor } from '@testing-library/angular'; |
| 62 | +import { mockInterceptor } from "../interceptor/mock-api.interceptor"; |
| 63 | +import { TasksService } from "./tasks.service"; |
| 64 | +import type { CreateQueryResult} from "@tanstack/angular-query-experimental"; |
| 65 | + |
| 66 | +describe('Test suite: TaskService', () => { |
| 67 | + let service!: TasksService; |
| 68 | + let injector!: Injector; |
| 69 | + |
| 70 | + // https://angular.dev/guide/http/testing |
| 71 | + beforeEach(() => { |
| 72 | + TestBed.configureTestingModule({ |
| 73 | + providers: [ |
| 74 | + provideHttpClient(withFetch(), withInterceptors([mockInterceptor])), |
| 75 | + TasksService, |
| 76 | + // It is recommended to cancel the retries in the tests |
| 77 | + provideTanStackQuery(new QueryClient({ |
| 78 | + defaultOptions: { |
| 79 | + queries: { |
| 80 | + retry: false |
| 81 | + } |
| 82 | + } |
| 83 | + })) |
| 84 | + ] |
| 85 | + }); |
| 86 | + service = TestBed.inject(TasksService); |
| 87 | + injector = TestBed.inject(Injector); |
| 88 | + }); |
| 89 | + |
| 90 | + it('should get all the Tasks', () => { |
| 91 | + let allTasks: any; |
| 92 | + runInInjectionContext(injector, () => { |
| 93 | + allTasks = injectQuery(() => service.allTasks()); |
| 94 | + }); |
| 95 | + expect(allTasks.status()).toEqual('pending'); |
| 96 | + expect(allTasks.isFetching()).toEqual(true); |
| 97 | + expect(allTasks.data()).toEqual(undefined); |
| 98 | + // We await the first result from the query |
| 99 | + await waitFor(() => expect(allTasks.isFetching()).toBe(false), {timeout: 10000}); |
| 100 | + expect(allTasks.status()).toEqual('success'); |
| 101 | + expect(allTasks.data()).toEqual([]); // Considering that the inteceptor is returning [] at the first query request. |
| 102 | + // To have a more complete example have a look at "unit testing / jest" |
| 103 | + }); |
| 104 | +}); |
| 105 | +``` |
| 106 | + |
| 107 | +```ts |
| 108 | +// mock-api.interceptor.ts |
| 109 | +/** |
| 110 | + * MockApiInterceptor is used to simulate API responses for `/api/tasks` endpoints. |
| 111 | + * It handles the following operations: |
| 112 | + * - GET: Fetches all tasks from sessionStorage. |
| 113 | + * - POST: Adds a new task to sessionStorage. |
| 114 | + * Simulated responses include a delay to mimic network latency. |
| 115 | + */ |
| 116 | +import { HttpResponse } from '@angular/common/http' |
| 117 | +import { delay, of, throwError } from 'rxjs' |
| 118 | +import type { |
| 119 | + HttpEvent, |
| 120 | + HttpHandlerFn, |
| 121 | + HttpInterceptorFn, |
| 122 | + HttpRequest, |
| 123 | +} from '@angular/common/http' |
| 124 | +import type { Observable } from 'rxjs' |
| 125 | + |
| 126 | +export const mockInterceptor: HttpInterceptorFn = ( |
| 127 | + req: HttpRequest<unknown>, |
| 128 | + next: HttpHandlerFn, |
| 129 | +): Observable<HttpEvent<any>> => { |
| 130 | + const respondWith = (status: number, body: any) => |
| 131 | + of(new HttpResponse({ status, body })).pipe(delay(1000)) |
| 132 | + if (req.url === '/api/tasks') { |
| 133 | + switch (req.method) { |
| 134 | + case 'GET': |
| 135 | + return respondWith( |
| 136 | + 200, |
| 137 | + JSON.parse( |
| 138 | + sessionStorage.getItem('unit-testing-tasks') || '[]', |
| 139 | + ), |
| 140 | + ) |
| 141 | + case 'POST': |
| 142 | + const tasks = JSON.parse( |
| 143 | + sessionStorage.getItem('unit-testing-tasks') || '[]', |
| 144 | + ) |
| 145 | + tasks.push(req.body) |
| 146 | + sessionStorage.setItem( |
| 147 | + 'unit-testing-tasks', |
| 148 | + JSON.stringify(tasks), |
| 149 | + ) |
| 150 | + return respondWith(201, { |
| 151 | + status: 'success', |
| 152 | + task: req.body, |
| 153 | + }) |
| 154 | + } |
| 155 | + } |
| 156 | + if (req.url === '/api/tasks-wrong-url') { |
| 157 | + return throwError(() => new Error('error')).pipe(delay(1000)); |
| 158 | + } |
| 159 | + |
| 160 | + return next(req) |
| 161 | +} |
| 162 | +``` |
| 163 | + |
| 164 | +## Turn off retries |
| 165 | + |
| 166 | +The library defaults to three retries with exponential backoff, which means that your tests are likely to timeout if you want to test an erroneous query. The easiest way to turn retries off is via the provideTanStackQuery during the TestBed setup as shown in the above example. |
| 167 | + |
| 168 | +## Testing Network Calls |
| 169 | + |
| 170 | +Instead of targetting a server for the data you should mock the requests. There are multiple way of handling the mocking, we recommend to use the Interceptor from Angular, see [here](https://angular.dev/guide/http/interceptors) for more details. |
| 171 | +You can see the the Interceptor setup in the "Unit testing / Jest" examples. |
0 commit comments