IT 회사에서 즐겁게 지내기!

Angular의 테스트가 좀 번거롭게 느껴졌습니다.

매번 Chrome 브라우저가 뜨는 것이 귀찮았죠.

그리고 한 번만 실행하고 싶었습니다.

기본적으로는 코드 변경 시마다 반복하거든요.

그리고 가장 귀찮았던건 진행률...

깔끔하게 표출되지 않습니다.

길고 지저분하게 찍혀요.

에러가 나면 로그 보기도 어렵게말이죠.

가장 귀찮았던 것의 해결방법부터 보죠.

1. Progress 제거

사실 매우 간단하게 해결되었습니다.

ng test에 옵션이 있거든요.

바로 --no-progress 옵션

ng test --no-progress 

위 명령어를 통해 해결!

2. 한 번만 실행

이것도 옵션으로 해결될 줄 알았습니다.

그런데 잘 안되더군요.

문서의 --single-run 이란 옵션

그런데 동작하지 않습니다.

Unknown Option이란 경고만...

그래서 karma.conf.js 파일을 수정합니다.

singleRun이란 속성값을 true로 바꿉니다.

옵션 변경을 통해 해결!

3. 브라우저 실행 안함

두 가지 방법이 있었습니다.

1) Headless Chrome을 사용하는 방법

2) Phantom.js를 이용하는 방법

저는 후자가 마음에 들더라구요.

jest를 이용할 때 Phantom을 써서 그런지..

반가운 마음도 ^^

사용방법은 간단합니다.

1) dependency 설치

npm install --save-dev karma-phantomjs-launcher

위 명령어로 설치해줍니다.

2) karma.conf.js 수정

아래와 같이 변경해주면 됩니다.

아래 코드에 highlight 된 부분이 중요한 부분이에요.

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'), 
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: true,

    phantomjsLauncher: {
      exitOnResourceError: true
    }
  });
};

require('karma-phantomjs-launcher')

browsers: ['PhantomJS']

바로 요 두 부분의 코드입니다.

아래는 깔끔해진 콘솔에서의 테스트 모습이에요.

테스트 실행 화면

브라우저 테스트가 번거로우셨거나

테스트 콘솔이 길어서 불편하셨던 분은

저처럼 바꿔보시는 걸 추천드립니다.

CI 구성하시는 분들은 필수!

*CI(Continuous Integration)