QUnit을 이용한 Javascript 단위테스트 > jquery

페이지 정보

본문

출처 : http://www.nextree.co.kr/p2256/

프로젝트에 참여하여 개발을 하게되면 설계에 맞춰 코딩을 하고, 완료된 코드에대해서 의도한대로 정확히 작동되는지 검증하기 위해서 단위 테스트를 수행합니다.

자바에서는 junit을 이용하여 단위테스트를 쉽게 할 수 있었고 이를 통해 문제가 발생할 경우 단시간 내에 문제를 파악하고 수정할 수 있었습니다.

자바의 junit처럼 자바스크립트 단위테스트를 쉽게 할 수 있도록 도와주는 QUnit에 대해서 알아보겠습니다.

 

1. QUnit이란?

  QUnit은 강력하고 사용하기 쉬운 자바스크립트 단위테스트 프레임 워크입니다.

  QUnit은 jQuery와 jQuery UI, jQuery모바일을 포함하여 일반적인 자바스크립트 코드까지 테스트를 할 수 있습니다.

 
2. Qunit test setup.

  QUnit 테스트 환경은 매우 간단하게 설정할 수 있습니다.  

  QUnit테스트에 필요한 구성 파일.

  qunit-1.12.0.js / qunit-1.12.0.css (해당파일은 qunit 홈페이지에서 제공하고있습니다.)

  위 두개의 파일만 있으면 간단하게 QUnit을 이용한 javascript 단위테스트를 실행 할 수 있습니다. 

 

3. Unit Test.

- test( title, test )

  QUnit에서 일반적으로 코드를 테스트 할 때 test()를 사용합니다.

  test(“테스트 명”, 테스트 함수) 아래의 예제에서 어떻게 동작하는 함께 보도록하겠습니다.

 

- ok( truthy , message ) assertion

  QUnit에서는 junit의 assertTrue()와 동일한 기능.

1 2 3 4 5 6 7 8 9 10

test( "ok test", function() {     ok( true, "true succeeds" );     ok( "non-empty", "non-empty string succeeds" );     ok( false, "false fails" );     ok( 0, "0 fails" );     ok( NaN, "NaN fails" );     ok( "", "empty string fails" );     ok( null, "null fails" );     ok( undefined, "undefined fails" ); });

  hello test라는 테스트로직 함수는 8개의 ok() 테스트중에 2개가 passed를 했고 6개가 실패했다는 결과를 보여주며

  ok test(6, 2, 8)는 테스트내의 6개의 테스트실패와 2개의 테스트성공, 8개의 assert 테스트수행을 했다는 테스트결과를 표시해주고있습니다.

 

- equal( actual, expected, message ) assertion

  assertEquals()와 같은 기능을 합니다.

  equal() assertion은 단순비교연산자(==)를 사용하여 동일한 경우 통과하고 실패할 경우 테스트 결과에 메세지와 함께 표시해줍니다.

1 2 3 4 5 6 7 8

test( "equal test", function() {     equal( 0, 0, "Zero; equal succeeds" );     equal( "", 0, "Empty, Zero; equal succeeds" );     equal( "", "", "Empty, Empty; equal succeeds" );     equal( 0, 0, "Zero, Zero; equal succeeds" );     equal( "three", 3, "Three, 3; equal fails" );     equal( null, false, "null, false; equal fails" ); });

- deepEqual( actual, expected, message ) assertion

  deepEqual() assertion은 NaN, 날짜, 정규표현식, 배열 및 객체에 대해서 동일 여부를 테스트합니다.

1 2 3 4 5

test( "deepEqual test", function() {     var obj = { foo: "bar" };     deepEqual( obj, { foo: "bar" }, "Two objects can be the same in value" );     deepEqual( obj, { foo: "car" }, "Two objects can be the same in value" ); });

- strictEqual( actual, expected, mesage) assertion

  strictEqual() assertion은 완전항등연산자(===)를 사용하여 값과 타입까지 비교하여 테스트합니다.

1 2 3 4

test( "strictEqual test", function() {     strictEqual( 1, 1, "1 and 1 are the same value and type" );     strictEqual( 1, "1", "1 and '1' are the not same value and type" ); });

  위의 equal() assertion에서 1과 “1″의 비교테스트는 통과하였으나 strictEqual() assertion에서는 실패하였습니다.

  위의 equal(), deepEqual(), stringcEqual()과 반하여 notEqual(), notDeepEqual(), notStrictEqual() 또한 제공하고있습니다.

 

 

 

4. Grouping Tests

- expect( number )

  expect( number )는 assertion test내의 함수에서 assertion test가 몇 개가 수행되었는지 확인할 때 사용할 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

test( "a test", function() {     expect( 2 );       function calc( x, operation ) {         return operation( x );     }       var result = calc( 2, function( x ) {     ok( true, "calc() calls operation function" );         return x * x;     });       equal( result, 4, "2 square equals 4" ); });

  test() 블럭함수 내에서 assertion 실행 예상개수와 일치하지 않으면 테스트는 실패하게 됩니다.

  위의 예제에서는 ok() assertion과 equal assertion이 있어서 expect(2)로 지정을하였고 테스트 결과는 성공이 나왔습니다.

 

  expect()의 숫자를 expect(1)로 변경하고 테스트를 했을 때의 결과는 아래와 같습니다.

  

 

- module()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

module( "group a" ); test( "a basic test example", function() {     ok( true, "this test is fine" ); }); test( "a basic test example 2", function() {     ok( false, "this test is fine" ); });   module( "group b" ); test( "a basic test example 3", function() {     ok( true, "this test is fine" ); }); test( "a basic test example 4", function() {     ok( false, "this test is fine" ); });

  module()을 이용하면 어떠한 모듈내의 여러가지의 함수를 한번에 돌릴때 연관되는 함수들끼리 모듈을 나눠서 각각 테스트할 수 있습니다.

  결과화면에서 볼 수 있듯이 각 테스트명 앞에 모듈명이 붙어서 어떤 모듈의 테스트가 성공, 실패하였는지

  구분되어 단계별로 나눠서 볼 수 있습니다.

 

5. 마치며…

  실제 프로젝트에서 junit을 이용한 자바 단위테스트는 유용하게 사용하고있으나 자바스크립트에 대한 단위테스트는 잘 이뤄지지

  않고있는데 이번에 QUnit을 사용해보고 공부하면서 다음 프로젝트에서는 좀 더 심도깊에 적용하고

  QUnit을 이용하여 TDD를 해보고 싶다는 생각이 들었다. 이후에 실제 프로젝트에서 적용을 못해보더라도

  간단한 예제 프로젝트로 QUnit을 이용한 TDD를 해볼 생각입니다.

첨부파일

• MonthPicker.css (2.1K) 4회 다운로드 | DATE : 2015-11-16 15:23:13
• test.html (919byte) 2회 다운로드 | DATE : 2015-11-16 15:23:13
• MonthPicker.js (31.5K) 3회 다운로드 | DATE : 2015-11-16 15:23:14

댓글목록

등록된 댓글이 없습니다.