【jasmine + Karma】에 의한 AngularJs 단체 테스트를 해 보았다
에서 만든 프로젝트에 대해 CircleCI를 사용하여 github에 push되면 karma에서 jasmine의 단위 테스트가 실행되도록 해 보았습니다.

CircleCI 설정

CircleCI 등록

CircleCI의 "Authorize Github"에서 github 계정으로 circleCI를 등록합니다.

CircleCI에서 빌드할 리포지토리 선택

CircleCI의 Add Project에서 ci에서 돌릴 리포지토리를 추가합니다.
이번에는 리포지토리 "test-circleCI"를 추가하려고 생각하기 때문에,
하기 첨부 화상의 ① > ② > ③ 의 순서로 클릭해 갑니다.



build project를 클릭한 단계에서 대상 리포지토리에 대해 Build가 수행됩니다.

circleCI의 설정을 두지 않아도 뭔가 좋은 느낌으로 npm test를 실시해 잘 하고 있는 분위기입니다만, node의 version이 낡거나 하기 때문에, circle.yml로 제대로 기술해 이까라고 생각합니다.

circle.yml

node version을 올리는 방법에 대해서는 여기 를 참고로 하고 있습니다. 테 유카 만마 코피 페 ...

종속성은 "dependencies"로 설명하는 것 같습니다? 그래서 여기에서 npm install을 할 것입니다.
캐시가 나빠져 npm install 실패하는 것도 아니므로, npm의 캐시를 지우고 나서 npm install 하고 있습니다.

마지막으로, test로서, package.json에 기술하고 있는 karma 실행 script를 두드리고 있습니다.

circle.yml

machine:
  timezone:
    Asia/Tokyo
  node:
    version: 6.3.0
  post:
    - npm install -g npm@3

dependencies:
  override:
    - npm cache clean
    - npm install

test:
  override:
    - npm run karma

Coverage

CircleCI의 Artifacts에 Coverage의 html을 토해내고 싶습니다만, 로컬에서는, ./Coverage에 토해내고 싶다.

그런 다음 karma.config.js의 coverageReporter 속성을 추가합니다.
html을 내뿜는 디렉토리는
로컬일 때는 ./coverage/
CircleCI 때는 Artifacts/coverage/
되도록 합니다.

karma.config.js

+  var reportDir = process.env['CIRCLE_TEST_REPORTS'] || '.';

+  coverageReporter: {
+    dir: reportDir + '/coverage/',
+    reporters: [ { type: 'html' } ]
+ },

실제로 Branch를 push하여 CircleCI가 돌고 있는지 확인한다.

제대로 CircleCI에서 Karma가 실행되어 Artifacts에 coverage가 토출됩니다 (^ ^)

덧붙여서, 로컬로 테스트했을 경우는, ./coverage 에 토출되고 있었습니다.

절각이므로 github 마스터 브랜치를 보호합니다.

CircleCI로 테스트 실시의 환경이 갖추어졌으므로, github의 master 브랜치에 대해서, 테스트가 통과하지 않으면 병합할 수 없게 보호하고 싶습니다.

보호하려는 리포지토리의 setting > Branches > Protected branches에서 mastar를 선택하고 status checks에서 circleci를 선택하기만 하면 됩니다.

보호된 결과

ci가 돌아가는 동안이나 테스트에 실패하면 병합 버튼이 비활성화되어 병합 할 수 없습니다.

CircleCI Running

CircleCI Test NG

CircleCI Test Success

테스트를 포함한 Build가 모두 문제없이 완료되면 병합 버튼이 활성화되었습니다.

결론

CircleCI의 목구멍 도입은 생각했던 것 이상으로 깔끔하게되어 버렸습니다.
CircleCI는, 무료 플랜에서도 여러가지 할 수 있으므로, 점점 사용해 가고 싶네요.

소스는 github에서 공개 하고 있습니다.