단위 테스트 및 E2E 테스트를 위한 Angular CLI

이번에는 단위 테스트 및 E2E 테스트를 위한 Angular CLI를 가져왔습니다. Angular CLI를 사용한 단위 테스트 및 E2E 테스트 시 주의 사항은 무엇인가요?

단위 테스트.

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 매개변수와 함께 사용됩니다(테스트 실행).

그러면 프로젝트의 적용 범위 폴더에 일부 파일이 생성됩니다.

index.html을 직접 엽니다.

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

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

再运行一次 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:"라는 문구가 뜨고, 아래에 변수나 표현식을 입력하면 디버깅을 위한 값을 볼 수 있습니다.

믿어요 당신은 그것을 읽었습니다. 당신은 이 기사의 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하십시오!

추천 자료:

Angular는 ng-click을 사용하여 여러 매개변수를 전달합니다.

H5 터치 이벤트에서 사용자의 슬라이딩 방향을 결정하는 방법

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