Javascript의 유닛 테스트, Qunit.

오늘은 자바스크립트에서 유닛테스트하는 방법중 하나인 Qunit을 이용하는 방법을 알아보겠습니다.

우선 Qunit은 jQuery에서 수월한 개발을 위해 만들어졌지만, 다른 자바스크립트 프로그램에서도 이용됩니다.

유닛테스트는 테스트를 먼저 작성하고 코드를 구현하며 TDD를 구현하기 위해서도 필요한 작업이기도 합니다.

시작하기

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.6.0.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="https://code.jquery.com/qunit/qunit-2.6.0.js"></script>
  <script src="tests.js"></script>
</body>
</html>

우선 위 코드로 유닛 테스트의 결과를 출력해줄 html파일을 만듭니다.

위처럼 브라우저로 할 수도 있지만, npm으로도 받을 수 있습니다.

$ npm install -g qunit
$ qunit

그리고 테스트 코드를 작성할 자바스크립트 파일을 만듭니다.

위 html 파일을 기준으로는 tests.js가 됩니다.

QUnit.test( "hello test", function( assert ) {
  assert.ok( 1 == "1", "Passed!" );
});

우선 자바스크립트 파일에 위와 같이 입력하면,

hello test
Passed!

라고 출력되면 준비는 다 된 것입니다.

기본적인 문법 알아보기

QUnit.test("ok test", function (assert) {
  assert.ok(1 == "1", "Passed!");
  assert.ok(1 == "0", "Wrong result!");
});

참과 거짓으로 나타낸 값을 비교합니다.

틀리면,

Wrong result!
Expected: true

Result: false

위와 같이 나타납니다.

QUnit.test("equls test", function (assert) {
  assert.equal(1, 1, "Passed!");
  assert.equal(1 + 1, "2", "Passed!");
});

두 값이 같은지 비교합니다.

QUnit.test("NOT equls test", function (assert) {
  assert.notEqual(1, 2, "Passed!");
  assert.notEqual(1 + 1, "2", "Passed!");
});

not이 붙으므로 두번째 테스트는 실패됩니다.

QUnit.test("equls test", function (assert) {
  assert.deepEqual(1, 1, "Passed!");
  assert.deepEqual(1 + 1, "2", "Passed!");
});

타입까지 비교하므로, 위 두번째 예시에서는 "2"가 아닌 2가 와야 통과됩니다.

QUnit.test( "strictEqual test", function( assert ) {
  assert.strictEqual( 1, 1, "1 and 1 have the same value and type" );
  assert.strictEqual( 1, "1", "1 and 1 have the same value and type" );
});

타입과 값을 매우 까다롭게 비교하여 === 연산자와 비교합니다. 당연히 두번째 테스트는 실패합니다.

QUnit.test( "a test", function( assert ) {
  assert.expect( 2 );

 function calc( x, operation ) {
    return x * x;
  }
  assert.equal( calc(2), 4, "2 squared equals 4" );
  assert.deepEqual(calc(4), 16, "Passed!");
});

한 테스트 묶음에서 테스트의 갯수를 확인받고 싶을 때는 expect를 써서 테스트의 갯수를 검증합니다.

QUnit.module( "group a" );
QUnit.test( "a basic test example", function( assert ) {
  assert.ok( true, "this test is fine" );
});
QUnit.test( "a basic test example 2", function( assert ) {
  assert.ok( true, "this test is fine" );
});

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

테스트를 필요한 모듈별로 구별하며 관리 할 수 있습니다.

실습하기

function realFunc(x) {
  var a = x;
  n = a % 10;
  var n2 = Math.floor(a / 10);
  while (n2 > 10) {
    n2 = Math.floor(n2 / 10);
  }
  if (n == n2) {
    return "같음";
  } else {
    return "다름";
  }
}

제가 대충 작성한 임의의 코드가 있습니다.

이 코드는 들어간 수의 양 옆의 숫자가 같으면 같다고 출력하고, 아니면 다르다고 출력해야되는 함수입니다.

QUnit.test("real function test", function (assert) {
  assert.deepEqual(realFunc(5445), "같음", "통과해야됨!");
  assert.deepEqual(realFunc(2344), "다름", "통과해야됨!");
  assert.deepEqual(realFunc(54424525), "같음", "통과해야됨!");
  assert.deepEqual(realFunc(2344353), "다름", "통과해야됨!");
  assert.notDeepEqual(realFunc(54443624325423), "같음", "실패해야됨!");
  assert.deepEqual(realFunc(23442352545224), "다름", "통과해야됨!");
});

위와 같이 테스트하여, 성공하는 케이스와 실패하는 케이스를 작성합니다.

Written on April 14, 2018