3

前言

这周开始接触到了十分正式的项目开发,感觉自己距离能实战真的差太多了,有一些小问题可能要半天或者更久才能解决,单元测试还是硬伤,效率低的不行,早起九点开始写代码,晚上十一点多结束,甚至有一次肝到一点多,但是解决的问题不多,感觉自己有程序员加班的潜质,还没有写好代码的水平,跟代码交流挺有意思的,只是现在能力有限,有些问题还不能有效地解决,这一周的问题还真不少,总结性的整理了一下。

带有param的GET请求单元测试

之前对单元测试的理解是路由对上了就能过,即请求的url与预测的url对应上就可以了,殊不知并非所有的预测url与请求url一致就可以,比如GET方法,下面是一个GET方法的请求:

  public  getUserByUsername(username: string): Observable<boolean> {
    return this.httpClient.get<boolean>(`${this.baseUrl}/getUserByUsername`, {params: {username}});
  }

下面是测试:

 it('getUserByUsername', () => {
    const username = Random.nextString ('', 11);
    let result;
    /* 进行订阅,发送数据后将called置true */
    let called = false;
    service.getUserByUsername(username).subscribe ((data) => {
      called = true;
      result = data;
    });
    const request = httpController.expectOne ( `${baseUrl}/getUserByUsername`);
    expect (request.request.method).toEqual ('GET');
    req.flush(of(undefined));
    expect (called).toBe (true);
  });

然后运行测试:
image.png
当时不是很理解为何报错,后来问了一下潘老师,然后老师说教程上有:5 测试HTTP请求【前】,就看到了这:

 const req = httpTestingController.expectOne('http://localhost:8080/Klass?name=');

我以为加上参数就好了,然后就改成了这样:

 const request = httpController.expectOne ( `${baseUrl}/getUserByUsername?username=`);

结果可想而知,还是ERROR,然后启动项目,打开控制台看了一下实际请求的:
image.png
注:该方法并非项目原有的方法,只是为了演示,所以请求时会发生错误。
实际请求的url带有参数名和参数,然后就改成了这样:

 it('getUserByUsername', () => {
    const username = Random.nextString('', 11);
    let result;
    /* 进行订阅,发送数据后将called置true */
    let called = false;
    service.getUserByUsername(username).subscribe ((data) => {
      called = true;
      result = data;
    });
    const request = httpController.expectOne( `${baseUrl}/getUserByUsername?usename=${username}`);
    expect(request.request.method).toEqual('GET');
    req.flush(of(undefined));
    expect(called).toBe(true);
  });

再次测试通过。
image.png

在解决问题的时候看到StackOverflow解决同样问题的博客下面有人这样说,然后就懵了,毕竟教程用的expectOne()测试的带有参数的url,经过自己实践才发现实践出真知,听到的看到的都不一定是正确的。
image.png

结论

测试请求时,如果没有把握就实际调用一下,看一下实际请求的url,预测的url要和实际请求的url完全一致。

HTTP请求

之前经常用到的HTTP请求有GET,POST,PUT,DELETE等,
最近接触到了PATCH,对于PATCH也只是在教程里听说过,第一次用也不知道咋用,然后就查了一下:

PATCH是对 PUT 方法的补充,用来对已知资源进行局部更新 。

当时对patch请求不是很熟悉,然后就开始了“创作”:
老师已经给了后台,前台怎么传不是很熟悉,一开始想着直接传:

 updatePasswordOfCurrentLoginUser(password: Password): Observable<void> {
        return this.http.patch<void>(`${this.baseUrl}/updatePasswordOfCurrentLoginUser`, password);
    }

殊不知后台只接收JSON对象,然后就改成了:

updatePasswordOfCurrentLoginUser(password: Password): Observable<void> {
        return this.http.patch<void>(`${this.baseUrl}/updatePasswordOfCurrentLoginUser`, {params:rePassword});
    }

但是@RequestBody却不收:
image.png
然后只能传一个User对象过去,把后台需要的值给User相应的属性就好了。

小结

本以为照着别人的写能成功,但发现自己想的太天真,并没有对应上。
image.png
后来在教程里发现了请求对应的前后台写法:
image.png
绑定到用户输入事件【前】

总结

之前写代码都是Ctrl + C , Ctrl + V ,没有切实地去体会代码的意思,在出错误之前一直以为自己的想法是对的,然后就一直照着自己的想法来,出错了就懵了,各种想不通,好在这次把问题暴露出来了,改正了自己的一些想法,也补齐了一些知识性上的缺陷,当然也知道了遇到不会的先去教程找找,否则再遇上同样的问题,又要好久才能解决。
最后,感谢潘老师和学长们以及小伙伴们给予的指导和帮助。

本文作者:河北工业大学梦云智开发团队 张文达


锦城
854 声望21 粉丝

好好生活