在 Angular 5 上对 http 服务进行单元测试

2023-12-28

我对如何测试数据服务感到非常困惑,可能性太多,而且令人不知所措。

我有这个简单的服务:

@Injectable()
export class DataService {

  constructor(private _http: HttpClient) { }

  getData<T>(path: string): Observable<T> {
    return this._http.get<T>(path);
  }

}

我想测试一下这个调用getData<number>事实上,将返回数据类型number.

The 角度测试指南 https://angular.io/guide/testing令人沮丧的是,展示了几种方法(使用 testbed、使用 beforeEach、在没有 testBed 的情况下使用 jasmine),我已经尝试了所有这些方法,但没有取得太大成功。

请问我该怎么做?到目前为止,我什至都没能打电话给getData。我希望能够模拟 Http,发出模拟返回值(例如jasmine.spy.and.returnValue(mockData)) 并验证 dataService 是否正常

我的里面有这个data.service.spec.ts:

describe('DataService', () => {

  beforeEach(() => {

    TestBed.configureTestingModule({
      imports: [
        HttpClientModule
      ],
      providers: [
        DataService,
        HttpClient
      ]
    });

  });

  // This was auto generated, and works
  it('should be created', inject([DataService], (service: DataService) => {
    expect(service).toBeTruthy();
  }));

  // I added this, but doesn't work
  describe('When getData() is called', () => {

    it('should return an observable of type T', inject([DataService], (service: DataService) => {

      service.getData<number>('mock-url')
        .subscribe(data => {
          expect(typeof(data)).toBe('number');
        });

    }));

  });

});

当我说它不起作用时...第二个测试通过了!但不应该。我可以看到真正的请求在开发控制台上发出到(无效)url,并且按预期出错,但测试刚刚通过......

所以我想,我的问题很简单,在 Angular 5 中,我如何模拟我的后端服务并对其进行单元测试?


尝试使用flush方法来测试它

 inject(
  [HttpTestingController, DataService],
  (httpMock: HttpTestingController, service: DataService) =>{
     const mockResponse = 5;
     const mock-url = '...';

     service.getData<number>('mock-url').subscribe(data => {
        expect(data).toEqual(mockResponse);
         expect(typeof(data)).toBe('number');
    });

    const mockRequest = httpMock.expectOne((req: HttpRequest<any>) => req.url === mock-url); //get your request here

    expect(mockRequest.request.method).toBe('GET');

    mockRequest.flush(mockResponse);
   })
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Angular 5 上对 http 服务进行单元测试 的相关文章

  • 单击上一页的按钮路由到该页面后如何刷新页面

    我有 2 个页面 一个主页和一个页面 2 当我单击主页上的按钮时 它会路由到 page2 现在 单击主页上的按钮后 当我到达第 2 页时 它应该刷新 因为我的项目中存在一些缓存问题 我在ngoninit上添加了window location
  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一
  • 如何让Angular2绑定innerHTML中的组件

    我想创建一个组件myApp它将把控制器上的属性中的 HTML 嵌入到其模板中 但是 其中一些 HTML 可能包含其他组件选择器 import InfoComponent from Component selector myApp templ
  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要
  • 如何通过自定义指令动态添加组件

    我想编写一个自定义指令 它将根据 div 内的某些逻辑动态添加组件 我在其中使用了自定义指令 我尝试使用 componentFactoryResolver 和 viewContainerRef createComponent 动态添加组件
  • 如何将 Laravel 5.4 与 Angular 4 集成

    我知道如何创造完整的拉拉维尔 5 4自己的项目 我也知道如何使用创建 SPA角4 Problem 我不知道如何将 Laravel 与 Angular 集成 另外 我想使用 Laravel 5 4 作为后端 使用 Angular 4 作为前端
  • 如何使用降级 Module() 引导应用程序与 ui-router 混合

    我正在使用 ui router 混合 https github com ui router angular hybrid https github com ui router angular hybrid 引导 经典 方式 我们在数据网格中
  • D3、TS 和 Angular 2

    我正在尝试将 D3 v4 与 Angular 2 Typescript 一起使用 我目前正在研究 D3 v4 我能够遵循 stackoverflow 中类似问题的一些答案 但没有成功 我已经导入了大部分 D3 库及其类型 我使用的是 TS
  • Angular4 屏蔽输入中的字符而不更改其值

    如何屏蔽输入中除 Angular 4 中最后四个字符之外的所有字符 即显示 而不更改实际值 例如 输入文本框中的数字应类似于 1234 且值应为 7671234 使用指令 Directive selector stringHide expo
  • angular2 MdDialog 未显示为弹出窗口

    所以我尝试使用 MdDialog 来显示错误消息 不幸的是 它不是显示为弹出窗口 而是显示为页面底部的块 我需要查看或更改哪些内容才能使其正常工作 下面的代码 common modal component html h2 title h2
  • 对预检请求的响应未通过访问控制检查:响应中“Access-Control-Allow-Credentials”标头的值为“”

    我正在 Angular 6 和 asp net core 上使用 SignalR 功能 但不断收到此错误对预检请求的响应未通过访问控制检查 响应中 Access Control Allow Credentials 标头的值为 当请求的凭据模
  • 使用 Retrofit2 和 Mockito 或 Robolectric 进行 Android 单元测试

    我可以测试 Retrofit2beta4 的真实响应吗 我需要 Mockito 或 Robolectic 吗 我的项目中没有活动 它将是一个库 我需要测试服务器是否正确响应 现在我有这样的代码并卡住了 Mock ApiManager api
  • 测试弱引用

    在 Java 中测试弱引用的正确方法是什么 我最初的想法是执行以下操作 public class WeakReferenceTest public class Target private String value public Targe
  • Cucumber Java 与 Spring Boot 集成 - Spring @Autowired 抛出 NullPointer 异常

    我正在为 Spring boot 应用程序编写 cucumber java 单元测试来测试每个功能 当我与 Spring Boot 集成时 Autowired 类抛出 NullPointer 异常 Spring Boot应用程序类 Spri
  • Angular 2 - ng 构建与 webpack 构建

    我想了解构建和部署 Angular 2 Web 应用程序的最佳方法是什么 我最终需要将其作为 Web 捆绑资源提供给我的 dropwizard 应用程序 我试图了解是否应该保留 ng build 并使用它来生成我的 dist 文件夹 或者我
  • 如何使用 google test for C++ 来运行数据组合

    我有一个单元测试 需要针对 200 种可能的数据组合运行 生产实现在配置文件中有要测试的数据 我知道如何模拟这些值 我更喜欢为每个组合编写单独的测试用例 并使用某种方式循环数据 有没有使用 Google test for C 的直接方法 您
  • RxJS 订阅内部订阅,每个级别返回值并存储到各自的变量中

    我知道已经有关于嵌套订阅的帖子 在这里 我们有 5 个级别的订阅操作 每个变量 operationId actionlistId componentId traceId 这里 API 正在调用 其功能如下 Step 1 订单模板 ID 为a
  • 无法获取log.d或输出Robolectrict + gradle

    有没有人能够将 System out 或 Log d 跟踪从 robolectric 测试输出到 gradle 控制台 我在用Robolectric Gradle 测试插件 https github com robolectric robo
  • 何时使用模拟框架?

    因此 我正在使用模拟框架 Moq 进行单元测试 并且想知道何时应该使用模拟框架 以下两个测试之间的优点 缺点是什么 public class Tests Fact public void TestWithMock Arrange var r
  • Angular 2 和 TypeScript 的承诺

    我正在尝试使用routerCanDeactivate我的应用程序中的组件的函数 简单的使用方法如下 routerCanDeactivate return confirm Are you sure you want to leave this

随机推荐