단위 테스트 및 E2E 테스트에 Angular CLI를 사용하는 방법

이 글에서는 주로 단위 테스트와 E2E 테스트를 위해 Angular CLI를 사용하는 방법을 소개하고 참고용으로 제공합니다.

단위 테스트.

angular cli는 단위 테스트에 카르마를 사용합니다.

먼저 ng test --help 또는 ng test -h를 실행하여 도움말을 확인합니다.

테스트를 실행하려면 ng test를 실행하면 됩니다. 프로젝트의 모든 .spec.ts 파일을 실행합니다.

그리고 파일 변경 사항도 감지합니다. 파일이 변경되면 테스트를 다시 실행합니다.

별도의 터미널 프로세스에서 실행해야 합니다.

먼저 라우팅이 포함된 각도 프로젝트 생성:

ng new sales --routing

프로젝트를 생성한 후 test 명령을 직접 실행합니다.

ng test

그러면 테스트 결과 데이터인 페이지가 나타납니다.

다음으로 추가하겠습니다. 몇 가지 구성 요소와 관리 모듈:

ng g c person
ng g c order
ng g m admin --routing
ng g c admin/user
ng g c admin/email

그런 다음 라우팅을 구성합니다. 가장 중요한 것은 이 효과를 얻는 것입니다.

이때 ng 테스트를 다시 실행합니다.

프로그램이 실행되지만 문제 없이 테스트에는 여전히 문제가 있습니다. router -outlet은 각도 구성 요소가 아닙니다.

사양 목록을 살펴볼 수 있습니다:

지금은 테스트를 실행할 때이기 때문입니다. , 관리 모듈은 독립적으로 실행되므로 모듈은 라우터 모듈을 참조하지 않으므로 라우터 출력을 식별할 수 없습니다.

이 문제를 해결하는 방법은 무엇입니까?

admin.comComponent.spec.ts 열기:

다음 문장을 채우면 오류가 발생하지 않습니다.

NO_ERRORS_SCHEMA Tell angle 인식할 수 없는 요소나 요소 속성을 무시하세요.

1. --code-coverage -cc 코드 적용 범위 보고서, 기본적으로 활성화되어 있지 않습니다. 보고서 생성 속도가 여전히 상대적으로 느리기 때문입니다.

2. --colors 출력 결과는 기본적으로 다양한 색상을 사용하여 활성화됩니다.

3. --single-run -sr은 테스트를 실행하지만 파일 변경 사항을 감지하지 못하고 기본적으로 활성화되지 않음

4. --progress는 테스트 프로세스를 콘솔에 출력하고 기본적으로 활성화됩니다

5. --sourcemaps -sm 소스 맵을 생성합니다.

6. --watch -w 테스트를 한 번 실행하고 변경 사항을 감지합니다.

ng 테스트는 테스트를 실행하는 것이며, 파일이 변경되면 테스트가 다시 실행됩니다.

ng test -sr 또는 ng test -w false 단일 테스트를 실행하려면

테스트 코드 적용 범위:

ng test --cc의 보고서는 기본적으로 /coverage 폴더에 생성되지만 .angular를 수정하여 수정할 수 있습니다. cli.json에서 속성을 수정하세요.

아래 코드 커버리지 보고서를 생성하세요:

ng test -sr -cc

일반적으로 -sr 매개변수와 함께 사용됩니다(테스트 실행).

그러면 프로젝트의 커버리지 폴더에 일부 파일이 생성됩니다:

인덱스 열기. html 직접:

모두 100%인 것을 볼 수 있습니다. 이는 제가 코드를 작성하지 않았기 때문입니다.

그런 다음 사용자 구성 요소에 일부 코드를 추가했습니다.

Run ng test -- sr -cc 다시 실행:

코드의 이 부분이 다루어지지 않은 것을 볼 수 있습니다.

코드에서 canGetUsers를 true로 변경하면:

다시 실행합니다. ng test -- sr -cc

이번에 코드 커버리지가 변경된 것을 볼 수 있습니다:

catch 부분만 커버되지 않았습니다.

코드 커버리지 내장 기능이 아주 좋은 것 같아요.

Debug单元测试.

首先执行ng test:

然后点击debug, 并打开开发者工具:

然后按cmd+p:

找到需要调试的文件:

设置断点:

然后在spec里面也设置一个断点:

最后点击浏览器的刷新按钮即可:

E2E测试的参数.

实际上angular cli是配合着protractor来进行这个测试的.

它的命令是 ng e2e.

常用的参数有:

1. --config -c 指定配置文件 默认是 protractor.conf.js

2. --element-explorer -ee 打开protractor的元素浏览器

3. --serve -s 在随机的端口编译和serve 默认true

4. --specs -sp 默认是执行所有的spec文件, 如果想执行某个spec就使用这个参数, 默认是all

5. --webdriver-update -wu 尝试更新webdriver 默认true

通常执行下面机组命令参数组合即可:

ng e2e
ng e2e -ee

Debug E2E测试.

看一下项目:

配置文件protractor.conf.js已经配置好.

而测试文件是在e2e目录下.

看一下spec和po文件:

再看一下app.component.html里面的值:

应该是没问题的.

所以执行ng e2e:

测试通过, 但是浏览器闪了一下就关闭了.

如果我想debug e2e, 那么执行这个命令:

ng e2e -ee

由于我使用的是mac, 当前这个命令在mac上貌似确实有一个bug:

如果可以正常运行这个命令的话, 终端窗口会出现“Debugger listening on xxx: ”字样, 然后就可以在下面输入变量或者表达式来查看它们的值从而进行调试了.

如果想退出调试, 那就按Ctrl+c或者输入.exit即可.

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Vue.js 表单控件操作小结

js传递数组参数到后台controller的方法

Vue.js实现可配置的登录表单代码详解

위 내용은 단위 테스트 및 E2E 테스트에 Angular CLI를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!