客户的单元测试

1 年 ago

文, 翔

4 minutes

首先

我最近想要做的事情是对HttpClient进行单元测试
首先要通过参考网站学习一下…
※然后再整理一下正在进行的信息!!

前端测试分类或考虑

★☆★我需要仔细阅读参考网站，然后考虑方针…

请参考以下网站

◆认真对待前端测试
https://qiita.com/okmttdhr/items/cc58e83c259aa0049538
◆思考前端测试
https://qiita.com/okmttdhr/items/c1e80353928e121c4761
◆汇集前端测试战略！
https://zenn.dev/seya/scraps/6f930e359d6a7c
◆在保持品质的同时减少超过190小时的测试工作量——引入前端端对端（E2E）测试所得
https://logmi.jp/tech/articles/323523
◆前端”恰到好处”自动测试的入门方式

以下是实用的前端测试战略的链接：
◆实用的前端测试战略（1）：https://meetup-jp.toast.com/1550
◆实用的前端测试战略（2）：https://meetup-jp.toast.com/1757
◆实用的前端测试战略（3）：https://meetup-jp.toast.com/1771

◆完全解决技术债务的故事 – 透露所有为Omikare系统全面刷新所做的事情
https://eh-career.com/engineerhub/entry/2020/04/09/103000
◆前端单元测试是什么呢…？
https://dev.classmethod.jp/articles/what-is-frontend-unit-test/

◆关于前端「单元测试的思考方式/使用方法」
https://zenn.dev/akfm/articles/frontend-unit-testing

故障排除

★☆★稍后更新！！（套接字超时！）

【参考网站】
◆关于使用jest测试异步函数的注意事项
https://qiita.com/rikegami/items/178ed17982b13535ad59
※好像有些地方没有在async()使用await…到底是不是应该使用async呢!?
◆jasmine：Async回调未在jasmine.DEFAULT_TIMEOUT_INTERVAL指定的超时内被调用
https://stackoverflow.com/questions/22604644/jasmine-async-callback-was-not-invoked-within-timeout-specified-by-jasmine-defa
※在karma.conf.js中尝试设置timeoutInterval!?
※flush/fakeAsync等…
◆Jasmine不支持async/await和done()两种混合回调

※最好检查是否有使用done的部分…
◆【AngularJS，Jasmine】方式的测试总结。
http://note.onichannn.net/archives/3247
※也许发生了下面描述的现象…
“当Jasmine接收参数时，它会等待处理完成。因此，即使传递了参数，如果一直不执行done，就会出现超时错误，所以要注意。”

断开连接，因为10000毫秒没有收到消息。

在参考网站上发生了错误。

REM karma.conf
    browserDisconnectTimeout : 600000,
    browserNoActivityTimeout : 600000,

REM メモリ不足対策
node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng test

【参考网址】
– 断开连接，因为10000毫秒内没有消息。·问题＃1413·茉莉花/茉莉花·GitHub
https://github.com/jasmine/jasmine/issues/1413
★这里记录了发生的错误。
– Node.js堆内存溢出
https://stackoverflow.com/questions/38558989/node-js-heap-out-of-memory/54675887#
– Karma/Jasmine在未运行测试的情况下超时
https://stackoverflow.com/questions/24119506/karma-jasmine-times-out-without-running-tests
– Karma\jasmine在没有任何错误的情况下超时
https://stackoverflow.com/questions/59208295/karma-jasmine-timeout-without-any-errors
– Karma – 配置文件
http://karma-runner.github.io/6.3/config/configuration-file.html
※包含karma.conf.js的参数说明

在afterAll中抛出了一个错误 Uncaught TypeError: 无法读取未定义的属性 ‘ほげほげ’

当出现Cannot read property ‘toLowerCase’ of undefined的错误时，应该确认以下内容：
https://qiita.com/BRSF/items/4f4e39bd82778b976392
请根据此参考链接进行原因调查。

◆原来是这样的RxJS – Subject的使用方法-
https://qiita.com/rena_m/items/25b0db2bfe77344612b5
试试这里提到的complete方法吧!

◆ Angular – Jasmine: 无法读取未定义的抛出属性”值”
https://tutorialmore.com/questions-2385453.htm
※ 看起来将Jasmine的”random”设为false就可以解决，但是这种解决方法并不理想。

◆ 使用 TestBed 和 Jasmine 在 NativeScript 中实施单元测试的方法
https://www.it-swarm.dev/ja/angular/testbed%e3%81%a8jasmine%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6nativescript%e3%81%a7%e3%83%a6%e3%83%8b%e3%83%83%e3%83%88%e3%83%86%e3%82%b9%e3%83%88%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/810895489/
※也许可以定义 afterAll…!?

◆Angular SPA的Karma + Jasmine测试出现随机失败
https://www.366service.com/jp/qa/2117fd3759287d92ad5a8d4dfca095d1
※似乎没有在所有测试之前重置主状态的beforeEach()方法。可能值得检查一下是否所有测试都不会在同一个位置发生!!

确认msSaveBlob的根目录。


// service.ts
test(): void {
  const content = 'あいうえお';
  const blob = new Blob([content], { type: 'text/plain' });
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(blob, 'test.csv');
    console.log('test!!');
  } else {
    console.log('だめか...');
  }
}

// service.spec.ts
//  'test!!'
const dummy1 = {
  msSaveBlob: function (blob: any, defaultName?: string) {
    expect(blob).toEqual(new Blob(['あいうえお'], { type: 'text/plain' }));
    expect(defaultName).toEqual('test.csv');
    return true;
  }
};
const spyobj = spyOnProperty(window, 'navigator', 'get').and.returnValue(dummy1);

service.test();

expect(spyobj).toHaveBeenCalledTimes(2);

//  'だめか...'
const dummy2 = {
  msSaveOrOpenBlob: () => { }
};
const spyobj = spyOnProperty(window, 'navigator', 'get').and.returnValue(dummy2);

service.test();

expect(spyobj).toHaveBeenCalledTimes(1);

③其他
◆Angular测试前错误解决备忘录
https://qiita.com/mokkos/items/a6e982f6b798383fb353
◆Angular8单元测试无法运行！
https://qiita.com/ringtail003/items/79c5d14b76a690321114
◆Angular jasmine使用方法备忘录
https://qiita.com/mokkos/items/95f07b443aeeab19f53b
◆记录了Angular单元测试的编写方式试错过程
https://qiita.com/eguhiryo_tg/items/f71bda926a2350eff599
◆一个完全不懂Angular和Jasmine，也没怎么做过单元测试的人学习Angular5测试的经历
https://qiita.com/wamekukyouzin/items/15bd3676319b08f6bfcd

请查看以下网站。
參考網站

◆Angular日文文档 – 测试
https://angular.jp/guide/testing

◆阅读Angular测试指南时，边写测试代码边做的记录
https://qiita.com/gaaamii/items/c41f5d8b7bb5cae43f93

◆Angular的HttpClientModule使用方法

◆GitHub – jun06t/angular-sample
https://github.com/jun06t/angular-sample

◆Angular 单元测试助手和示例 · GitHub
https://gist.github.com/kaplan81/a97662f5909867aa64852122c58e64af

◆在Angular 4.3中对HttpClientModule进行单元测试：HttpTestingController.expectOne(url)返回undefined值
https://stackoverrun.com/ja/q/12475745

在Angular中测试HttpClient请求

如何在Angular组件测试中模拟提供的服务中的HttpClient？

◆在Angular中使用HttpClient模拟Http请求
https://www.syntaxsuccess.com/viewarticle/mocking-http-request-with-httpclient-in-angular

◆Angular 8教程: REST API和HttpClient示例
https://www.djamware.com/post/5d8d7fc10daa6c77eed3b2f2/angular-8-tutorial-rest-api-and-httpclient-examples
※也许基于这里的内容，可以完成。

◆从服务器获取数据
https://angular.jp/tutorial/toh-pt6#%E4%BB%BB%E5%8A%A1%E5%88%97%E8%A1%A8%E4%BB%8B%E7%BB%8D
※这个可能是官方网站上的最好的选项

◆尝试使用Angular v4.3新增的HttpClient
https://neos21.hatenablog.com/entry/2017/08/09/080000
◆Angular的HttpClient备忘录

※在不理解的情况下，参考这些解释来理解…

◆angular.io指南：HttpClient
https://qiita.com/mixplace/items/887cd5e79d9d08c3e7e8
※理应查看官方网站以理解…

◆GitHub – gilsdav/HttpClient-mock：如何使用Angular HttpClient模拟服务。
https://github.com/gilsdav/HttpClient-mock

Angular的in-memory-web-api是如何运作的呢？

Source: https://www.techscore.com/blog/2019/08/23/angular-in-memory-web-api-%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E4%BB%95%E7%B5%84%E3%81%BF%E3%81%A7%E5%8B%95%E4%BD%9C%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B/

使用Angular In Memory Web API来创建一个模拟服务器。

Angular8 单元测试无法运行！
https://qiita.com/ringtail003/items/79c5d14b76a690321114

Angular8 单元测试运行不了！
https://qiita.com/ringtail003/items/79c5d14b76a690321114

首先