I'm enjoying Angular's new HttpResource, it does a lot of stuff that I've been wanting for ages. It can really make life easier.
However, I'm having trouble unit testing a httpResource with jasmine.
For example, this does not work:
fit('should call the expected URL', () => {
TestBed.runInInjectionContext(() => {
const resource = service.fetchSettings(); //httpResourceRef
resource.reload();
const req = httpMock.expectOne(`${environment.baseUrls.api.wellcomm}/1.0/cluster/getPendingSettings`); //HttpTestingController
expect(req.request.method).toBe('GET');
req.flush({});
});
});
I would expect this to trigger the request method, so that the test passes. However, it does not.
I know it's tied to how a component reads it, but how can I emulate this? Would I have to build a component that reads and renders the data every time I use this?
I'm enjoying Angular's new HttpResource, it does a lot of stuff that I've been wanting for ages. It can really make life easier.
However, I'm having trouble unit testing a httpResource with jasmine.
For example, this does not work:
fit('should call the expected URL', () => {
TestBed.runInInjectionContext(() => {
const resource = service.fetchSettings(); //httpResourceRef
resource.reload();
const req = httpMock.expectOne(`${environment.baseUrls.api.wellcomm}/1.0/cluster/getPendingSettings`); //HttpTestingController
expect(req.request.method).toBe('GET');
req.flush({});
});
});
I would expect this to trigger the request method, so that the test passes. However, it does not.
I know it's tied to how a component reads it, but how can I emulate this? Would I have to build a component that reads and renders the data every time I use this?
Share Improve this question edited Mar 27 at 20:17 jonrsharpe 122k30 gold badges268 silver badges476 bronze badges asked Mar 19 at 16:25 SolidShookSolidShook 491 silver badge3 bronze badges1 Answer
Reset to default 1You should be using the HttpTestingController, as this was already the case for testing the HttpClient.
@Component({
selector: 'app-my-component',
template: `
<h1>Name: {{ data.value()?.name }}
</h1>`,
})
export class MyComponentComponent {
data = httpResource(() => `https://swapi.dev/api/planets/1/`);
}
describe('...', () => {
let fixture: ComponentFixture<MyComponentComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
provideHttpClient(),
provideHttpClientTesting(),
],
});
fixture = TestBed.createComponent(MyComponentComponent);
});
it('...', async () => {
const httpMock: HttpTestingController = TestBed.inject(
HttpTestingController
);
// This will trigger the http request
TestBed.inject(ApplicationRef).tick();
fixture.detectChanges();
// expectation + flushing mock response
httpMock
.expectOne('https://swapi.dev/api/planets/1/')
.flush({ name: 'Potato' });
// Waiting for the app to stabilise = resource to resolve
await TestBed.inject(ApplicationRef).whenStable();
expect(fixtureponentInstance.data.status()).toBe(
ResourceStatus.Resolved
);
// Render the template after the resource is resolved
fixture.detectChanges();
expect(fixture.nativeElement.querySelector('h1').textContent).toContain(
'Name: Potato'
);
httpMock.verify();
});
});