이것은 이 시리즈의 각도 단원 테스트에 관한 두 번째 문장이다.Angular CLI 사용에 익숙하지 않은 경우 이 시리즈의 첫 번째 기사를 참조하십시오.
에서 셀 테스트를 실행하기 위해 매개변수를 Angular CLI에 전달하는 방법을 학습했습니다.이 글에서 우리는 Karma 설정을 깊이 이해하고 우리의 독특한 수요에 따라 설정함으로써 테스트 실행 프로그램을 더욱 유행하게 할 것이다.당신의 테스트 게임을 업그레이드할 때가 되었습니다. 단원 테스트를 시작합니다!

따르다

Angular CLI를 사용하여 애플리케이션을 테스트하고 이전에 작성한 글의 코드를 사용합니다.

Http 요청 차단 - Angular의 HttpClient 사용 및 테스트

엘리자・ 2017년 8월 28일・ 4분 읽기

#angular #testing #javascript #programming

클론 tutorial-angular-httpclient 을 생성하고 테스트를 실행할 수 있습니다.글에서 논의한 모든 단계 업데이트는 "테스트 설정"지점에서 찾을 수 있습니다.

업력 배치

Angular 응용 프로그램에서 찾기$/src/karma.config.js.테스트를 실행하기 위한 Karma 구성 파일입니다.편집을 시작합시다!

기자

기존 Angular CLI는 "progress"와 "kjhtml"보고기를 지원합니다.v7과 v5에서 명령줄을 통해 보고기를 설정할 수 있지만, 유감스럽게도 이 옵션은 v6에서 삭제되었습니다.우리는 여전히 v6의 프로필을 통해 변경할 수 있습니다!
Angular v5 또는 v7을 사용하는 경우 reporters 플래그를 사용하여 쉼표로 구분된 보고자 목록을 가져옵니다.
업력을 바꾸다.구성reporters 그룹에서 "progress"를 삭제하고 "dots"로 대체합니다.현재, 테스트를 실행할 때, 컨트롤러의 출력은 진도 보고기가 아니라 점 보고기를 사용합니다.

새 보고서 추가

하지만 우리의 테스트 출력은 더 좋을 것이다.이것은 아직 쓸 만한 것이 없다.우리 기자 한 명을 추가해 봅시다.
"karma 스펙 리포트"npm 패키지 추가

npm install karma-spec-reporter --save-dev

응보자가 필요하다.conf.js, 리퀴어 문장을 plugins 그룹에 추가

plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-spec-reporter')
    ],

reporters 어레이에 추가

reporters: ['kjhtml', 'spec']

현재, 테스트를 실행할 때, 아래의 출력을 볼 수 있습니다


다양한 기자들이 인과응보를 보도할 수 있다.CI 환경에서 유닛 테스트 출력을 제공하려면 JUnit 출력에 보고기를 추가하고 JUnit 보고서를 예로 사용하도록 Jenkins를 구성할 수 있습니다.만약 당신이 생활에 더 많은 소질이 필요하다면, nyancatprogressreporter를 추가하십시오.

코드 덮어쓰기

테스트를 실행하고 원하는 출력 형식으로 설정하는 방법을 알았습니다. 덮어쓰기를 측정할 때가 되었습니다.
테스트 덮어쓰기 지표는 중요한 일을 테스트해서 프로그램이 예상대로 작동하는지, 또는 당신이 한 테스트가 양호한지 확인할 수 없다는 것을 기억하십시오.

Ben Lesh 회사🧢🏋️‍♂️💻🎨

100% 코드 덮어쓰기 단위 테스트를 할 수 있음을 알립니다. 모든 종류를 검사하면 프로그램이 완전히 붕괴될 수 있습니다.
2017년 9월 26일 오전 01:21
Angular CLI는 자동으로 이스탄불을 덮어쓰기 보고기로 추가하고 구성합니다.인과응보.conf.js는 coverageIstanbulReporter 보고서를 생성하는 데 사용되는 부분이 있습니다.Angular의 v7 이전에는'html'과'lcov'만 사용했습니다.그룹에 "text summary"가 없으면 그룹에 추가하십시오.
덮어쓰기 플래그가 활성화된 상태에서 테스트를 실행합니다.v6에서 사용--code-coverage.

ng test --watch false --browsers ChromeHeadless --codeCoverage

현재 컨트롤러에 좋은 덮어쓰기 요약 출력이 있습니다.

'html'보고 실행 덮어쓰기를 사용하면 html 형식으로 덮어쓰기의 시각적 개술을 만들 수 있습니다.전체 프로그램의 덮어쓰기 결과를 보고 파일로 분류할 수 있습니다.

그리고 단일 파일의 덮어쓰기 보고서에 들어가서 행 코드의 실행 횟수를 보십시오.

"text", "json", "Cobertura", "TeamCity"같은 기본 보고 형식을 추가하거나 "lcov"보고서를 CI 프로세스의 일부로 사용하여 구축된 테스트 덮어쓰기 추세선을 표시할 수 있습니다.

유지 임계값

만약 어느 정도의 덮어쓰기를 확보하고 싶다면,karma에서 coverageIstanbulReporter 대상을 설정할 수 있습니다.conf.js 추가thresholds.thresholds 객체의 경우 statements, lines, branches 및 functions 키를 입력합니다.

coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true,
      thresholds: {
            statements: 80,
            lines: 80,
            branches: 80,
            functions: 80
      }
},

현재 코드 덮어쓰기가 있는 테스트를 실행할 때, 항목이 덮어쓰기 한도값에 도달하지 않으면 테스트는 실패로 끝납니다.

각도를 설정합니다.기본값은 json

물론, npm 스크립트를 만들어서 단원 테스트를 실행할 때 보내는 모든 파라미터를 봉인할 수 있지만, 때때로 우리는 항상 어떤 설정 집합이 필요합니다.예를 들어 코드 덮어쓰기.비록 watch 또는 browsers 설정이 있지만, 우리는 항상 덮어쓰기를 실행하기를 희망합니다.우리는 각도로 설정할 수 있다.json.$/angular.json 파일에서 "test"설정을 찾습니다.옵션(Options) 속성이 있습니다."codeCoverage"에 새 속성을 추가하고 이 값을true로 설정합니다.
덮어쓰기뿐만 아니라 더 많은 속성을 설정할 수 있습니다.Angular CLI로 전달되는 모든 매개변수를 구성할 수 있습니다.보기schema for angular.json for more details.

Git 연결 추가

매번 환매를 추진하는 노력이 단원 테스트를 통과하고 충분한 범위가 있는지 확인하고 싶습니까?npm 패키지'husky'를 추가하고 단원 테스트를 실행하는 pre-push 절차following their instructions를 추가합니다.
현재 코드 커버율을 충족시키는 단원 테스트를 통과하지 않으면 사람들은 코드를 환매에 밀어넣을 수 없다.모든 지점에 적용됩니다. 이 요구 사항은 팀워크를 어렵게 할 수 있습니다. 따라서 본 GitHub 문제에서 발표한 방법에 따라 주 지점에만 적용되기를 원할 수도 있습니다.

huskygit 연결만 특정 지점에 적용 #186

IAMtheIAM
발표 날짜 Sep 19, 2017
husky를 특정git 갈고리prepush만 특정 지점master에 적용하는 것으로 설정할 수 있습니까?
나는 가방의 갈고리를 수정할 수 있다는 것을 알고 있지만, 이것은 그것을 더욱 복잡하게 만든다. 왜냐하면 허스키가 자신의 갈고리를 설치했기 때문이다. 그리고 나는 수정된 버전으로 덮어쓰는 스크립트를 사용해야 하기 때문이다.
주요 목적은 마스터로 밀기 전에 e2e나 단원 테스트만 실행하는 것이지 dev로 밀릴 때마다 (브라우저가 튀어나오는 것을 볼 때마다 얄밉다) 는 것이 아니다.
View on GitHub

다음 글에서 우리는 실행할 테스트에 대한 방법을 배우고 맞춤형 해결 방안을 깊이 있게 이해할 것이다.