Karma Unit Tester

# Karma란?

- 자바스크립트 테스트 러너를 의미한다. 

- npm으로 설치 가능하다.

# Karma 설치

• npm install -g karma 명령어로 설치 가능 하고, karma라는 명령어를 사용가능하다.
• karma를 사용하기 위해서는 karma.conf.js 파일이 필요
• 해당 파일을 생성하기 위해서는 karma init 명령어를 입력한 후, 부가 정보를 입력해줌으로 가능하다.

# Karma.conf.js 설정

• 카르마는 테스트러너일 뿐이므로, 테스트 프레임워크를 설정해주어야 한다.
• Jasmine, QUnit, Mocha 등을 지원한다.
• 그 외 테스트 프레임워크를 사용하려면 Karma 어뎁터가 필요하다.

ex. npm install Karma-mocha

• 추가로, RequireJS 사용여부, 테스트에 사용할 브라우저, 소스&테스트파일중에 제외할 파일 패턴을 선택한다.

@RequireJS 패키지란? JS 파일이나 모듈을 Loader하는 기능을 하는 Node 모듈이다.

ex. requirejs(['jquery', 'canvas', 'app/sub']

• 대상 파일을 감시하고 있다가 수정하면 테스트를 자동으로 수행할지 여부 또한 정의힌다.

# 테스트 프레임워크 설정

• 별도로 테스트 프레임워크 관련 패키지 설치 및 설정을 완료
• 테스트문을 test 폴더 아래에 unit 폴더를 생성 후, 작성한다.

# 테스트문 예제(Mocha 문법) - MathService에 대해

// test/unit/app.test.js

describe('MyApp', function() {

  'use strict';

  beforeEach(module('MyApp'));

  describe('MathService', function() {

    it('sum(2,4) should be 6', inject(function(MathService) {

      expect(MathService.sum(2, 4)).be.equal(6);

    }));

    it('sum(3,6) shoule be 9', inject(function(MathService) {

      expect(MathService.sum(3, 6)).be.equal(9);

    }));

  });

});

# Karma.conf.js 내 files 속성 수정

• files에 지정한 파일들은 테스트를 실행할 때 브라우저에 모두 로딩
• 애플리케이션이 의존성을 가진 모든 파일은 여기에 지정해 주어야 한다. 
• 보통은 자바스크립트만으로 충분하겠지만, CSS도 테스트에 필요하다면 여기에 같이 지정하면 된다. 
• (ex)애플리케이션이 의존하고 있는 jQuery와 AngularJS 파일을 불러오고 애플리케이션 코드를 모두 불러옴
• 테스트에 필요한 angular-mocks와 chai 라이브러리를 불러오고 앞에서 작성한 mocha와 chai의 설정파일로 로드한다. 
• 마지막으로 테스트파일에 대한 패턴을 넣은 것

# Karma.cong.js 내 files 속성 예제

// list of files / patterns to load in the browser

files: [

  // dependencies

  'components/jquery/jquery.js',

  'components/angular/angular.min.js',

  // application code

  'src/**/*.js',

  // test dependencies

  'components/angular-mocks/angular-mocks.js',

  'components/chai/chai.js',

  'test/mocha.conf.js',

  'test/chai.conf.js',

  // tests

  'test/**/*.test.js'

],

# karma start 명령어를 브라우저를 통한 테스트 수행

# 출처

• https://blog.outsider.ne.kr/1020