如何使用 Jasmine/Karma 测试端点？

Question

I have a method in one of my components that hits an endpoint like this...

private async getRolesAsync(): Promise<void> {
    const roles = await this.http.get<any>('https://jsonplaceholder.typicode.com/todos/1').toPromise();
    this.data = roles;
  }

Notice I have a fake endpoint in there, but what I'd like to know is how do I test that in a unit test? I want a unit test that tests to see if the endpoint works, ie, it returns a 200 success.

I'm using Angular 13 as my application framework and Jasmine/Karma as my unit testing framework.

Answer 1

Please use this end-to-end running code for the resolution of all your issues.

spec.ts file -

import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing";
import { TestBed, async, ComponentFixture } from "@angular/core/testing";
import { RouterTestingModule } from "@angular/router/testing";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let httpTestingController: HttpTestingController;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        HttpClientTestingModule,
      ],
      declarations: [AppComponent],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    httpTestingController = TestBed.inject(HttpTestingController)
    fixture.detectChanges();
  });

  it('#getRolesAsync should return expected data', async (done) => {
    const expectedData = {
      userId: 1,
      id: 1,
      title: "delectus aut autem",
      completed: false
    };
    (await component.getData()).subscribe(data => {
      expect(data).toEqual(expectedData);
      done();
    });
    const testRequest = httpTestingController.expectOne('https://jsonplaceholder.typicode.com/todos/1');
    testRequest.flush(expectedData);
  });
});

component.ts file -

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  data: any;

  constructor(private http: HttpClient) { }

   async getData(): Promise<Observable<any>> {
    const roles = await this.http.get<any>('https://jsonplaceholder.typicode.com/todos/1');
    return this.data = roles;
  }
}