Tech/JavaScript2017. 11. 10. 12:31

[Mocha Unit Test]

Javascript Unit Test를 수행하기 위해 Mocha, Jasmine, Qunit 중에 검토하다가 비교적 가장 최신 기술이고, Mock을 쓰기 편한 쪽이라 추측하여, Mocha의 사용법을 알아보았다. (Unit Test를 작성할 때, BDD, TDD 두 가지 스타일을 모두 제공한다는 점에서도 끌렸다.)


설치

  1. chai를 설치한다.

    npm install -g chai
    (or npm install chai --save-dev)

  2. mocha를 설치한다.

    npm install -g mocha



BDD Unit Test

  1. 모듈을 작성한다. (app.js)

    (function(exports) {
      "use strict";
     
      function Tester() {}
      exports.Tester = Tester;
     
      Tester.prototype = {
        sum: function (a, b) {
          return a + b;
        }
      };
    })(this);



  2. 테스트 코드를 작성한다. (app.test.js)

    var expect = chai.expect;
     
    describe("BDD Test", function() {
      describe("더하기 테스트", function() {
        it("2와 4를 합했으니, 6이 될 것이다.", function() {
          var tester = new Tester();
          expect(tester.sum(2, 4)).to.equal(6);
        });
      });
    });



  3. 테스트를 수행 결과를 표시하기 위한 html을 작성한다. (index.html)

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>BDD unit test</title>
      <!-- mocha 스타일 적용 -->
      <link rel="stylesheet" media="all" href="../component/mocha/mocha.css">
    </head>
    <body>
      <div id="mocha"><p><a href=".">Index</a></p></div>
      <div id="messages"></div>
      <div id="fixtures"></div>
      <!-- mocha.js 로드 -->
      <script src="../component/mocha/mocha.js"></script>
      <!-- chai.js 로드 -->
      <script src="../component/chai/chai.js"></script>
      <script src="app.js"></script>
      <!-- bdd 스타일 UnitTest임을 설정함 -->
      <script>mocha.setup('bdd')</script>
      <script src="app.test.js"></script>
      <!-- UnitTest 수행 -->
      <script>mocha.run();</script>
    </body>
    </html>



    4. html을 실행시켜본다.

    1. 성공했을 때
    2. 실패했을 때

 

 

Command Line Test

  1. 모듈을 작성한다. (app.js)

    module.exports = {
      sum: function(a,b) {
        return a+b;
      }
    }



  2. 테스트 코드를 작성한다. (app.test.js)

    var chai = require('chai');
    var assert = chai.assert;
    var app = require('../app.js');
     
    describe('Sum Test', function() {
      it("1과 2를 더하면, 3이 될 것이다.", function() {
        assert.equal(3, app.sum(1,2));
      });
    });



  3. Command Line으로 결과를 확인한다.

     

MockTest

  1. Sinon.JS를 다운로드 받는다. (사이트 주소 : http://sinonjs.org/)
    1. Document : http://sinonjs.org/docs/
    2. 참고 사이트 : http://elijahmanor.com/unit-test-like-a-secret-agent-with-sinon-js/
       

  2. 다운로드 받은 sinon.js를 추가한다. (index.html)

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>BDD unit test</title>
      <!-- mocha 스타일 적용 -->
      <link rel="stylesheet" media="all" href="../component/mocha/mocha.css">
    </head>
    <body>
      <div id="mocha"><p><a href=".">Index</a></p></div>
      <div id="messages"></div>
      <div id="fixtures"></div>
      <!-- mocha.js 로드 -->
      <script src="../component/mocha/mocha.js"></script>
      <!-- chai.js 로드 -->
      <script src="../component/chai/chai.js"></script>
      <!-- sinon.js 로드 -->
      <script src="../component/sinon/sinon-1.17.3.js"></script>
      <script src="app.js"></script>
      <!-- bdd 스타일 UnitTest임을 설정함 -->
      <script>mocha.setup('bdd')</script>
      <script src="app.test.js"></script>
      <!-- UnitTest 수행 -->
      <script>mocha.run();</script>
    </body>
    </html>



  3. 테스트를 위한 클래스를 정의한다. (person.js)

    (function(exports) {
      "use strict";
     
      function Person() {}
      exports.Person = Person;
     
      Person.prototype = {
        setName: function(name) {
          this.name = this.returnName(name);
        },
        returnName: function(name) {
          return name;
        }
      };
    })(this);



  4. Mock Test 코드를 작성한다. (person.test.js)
    (tick) "setName" 함수를 호출했을 때, "returnName" 함수를 호출하는지 확인한다.

    var expect = chai.expect;
     
    describe("Person", function() {
      describe("constructor", function() {
        it("Mock Test", function() {
          var person = new Person();
          var mock = sinon.mock(person);
     
          mock.expects("returnName").once().withExactArgs("Betty");
          person.setName("Betty");
     
          mock.verify();
          mock.restore();
        });
      });
    });



  5. 결과를 확인한다.



저작자표시 비영리 변경금지

'Tech > JavaScript' 카테고리의 다른 글

Javascript Task Runner : Grunt 의 개요 및 장점  (0) 2015.06.05
Posted by 알 수 없는 사용자

티스토리툴바