가끔씩 아래와 같이 polyfill형식으로 사용하는 경우가 있다.

(function(){
    var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame|| window.msRequestAnimationFrame;
    var caf = window.cancelAnimationFrame || window.webkitCancelAnimationFrame|| window.mozCancelAnimationFrame|| window.msCancelAnimationFrame;

    if(raf&&!caf){
        var keyInfo = {};
        var oldraf = raf;
        raf = function(callback){
        function wrapCallback(){
            if(keyInfo[key]){
            callback();
            }
        }
        var key = oldraf(wrapCallback);
        keyInfo[key] = true;
        return key;
        }
        caf = function(key){
        delete keyInfo[key];
        }
        
    }else if(!(raf&&caf)){
        raf = function(callback) { return setTimeout(callback, 16); };
        caf = clearTimeout;
    }

    window.requestAnimationFrame = raf;
    window.cancelAnimationFrame = caf;
})();

이렇게 바로 실행해버리는 코드는 테스트할때 상황을 만들어야 하는데 상황을 제어하기가 어렵기 때문에 테스트가 어렵다.

예를들어, 난 아래와 같은 테스트케이스를 작성하려고 한다.


  1. requestAnimationFrame만 있는 경우
    1. cancelAnimationFrame을 호출했을 때 cancelAnimationFrame으로 정상적으로 멈추는지 테스트
  2. cancelAnimationFrame만 있는 경우
  3. requestAnimationFrame, cancelAnimationFrame 둘다 있는 경우
  4. requestAnimationFrame, cancelAnimationFrame 둘다 없는 경우
    1. cancelAnimationFrame을 호출했을 때 cancelAnimationFrame으로 정상적으로 멈추는지 테스트


(하위 목록(1-1. 4-1)에 대한 내용을 빼고 상위 목록만 얘기하자. 하위 목록에 대한 테스트를 얘기하면 길어지기 때문에 다음 기회에.)

근데 1,2,3,4의 상황이 브라우저마다 달라서 해당 로직이 정상적으로 실행되는지 테스트하려면 상황에 맞는 브라우저에서 테스트해야한다.


얼마나 귀찮고 복잡한 일인가?


어떻게 할까 고민하다가..

생각난 방법은 브라우저가 아니라 내가 직접 상황을 만들 수 있으면 가능하지 않을까 생각했다.(사실 이게 핵심인 것 같다. testability을 높이려면 개발자가 제어할 수 있는 환경(디자인..)을 만드는게 가장 중요한것 같다.)

그래서 생각한 방법은 바로 실행하는 것이 아니라 실행시점을 제어할것.

처음에는 아래와 같이 함수를 만들어서 처리했다.


function polyfillRequestAnimationFrame(){
    var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame|| window.msRequestAnimationFrame;
    var caf = window.cancelAnimationFrame || window.webkitCancelAnimationFrame|| window.mozCancelAnimationFrame|| window.msCancelAnimationFrame;

    if(raf&&!caf){
        var keyInfo = {};
        var oldraf = raf;
        raf = function(callback){
        function wrapCallback(){
            if(keyInfo[key]){
            callback();
            }
        }
        var key = oldraf(wrapCallback);
        keyInfo[key] = true;
        return key;
        }
        caf = function(key){
        delete keyInfo[key];
        }
        
    }else if(!(raf&&caf)){
        raf = function(callback) { return setTimeout(callback, 16); };
        caf = clearTimeout;
    }

    window.requestAnimationFrame = raf;
    window.cancelAnimationFrame = caf;
}


추가로 window가 전역 객체라서 제어하게 되면 다른 곳에 영향을 줄지 몰라 아래와 같이 인자로 받아서 처리했다.(이 방법은 브라우저뿐만이 아니라 node.js와 같은 환경에서 테스트하기에 좋았다.)

function polyfillRequestAnimationFrame(global){
    var raf = global.requestAnimationFrame || global.webkitRequestAnimationFrame || global.mozRequestAnimationFrame|| global.msRequestAnimationFrame;
    var caf = global.cancelAnimationFrame || global.webkitCancelAnimationFrame|| global.mozCancelAnimationFrame|| global.msCancelAnimationFrame;

    if(raf&&!caf){
        var keyInfo = {};
        var oldraf = raf;
        raf = function(callback){
        function wrapCallback(){
            if(keyInfo[key]){
            callback();
            }
        }
        var key = oldraf(wrapCallback);
        keyInfo[key] = true;
        return key;
        }
        caf = function(key){
        delete keyInfo[key];
        }
        
    }else if(!(raf&&caf)){
        raf = function(callback) { return global.setTimeout(callback, 16); };
        caf = global.clearTimeout;
    }

    global.requestAnimationFrame = raf;
    global.cancelAnimationFrame = caf;
}


이렇게 만든후 난 아래와 같이 테스트케이스를 만들었다.


test("requestAnimationFrame만 있는 경우",function(){
    //Given
    var global = {
        "requestAnimationFrame":function(){}
    };

    var oldRequestAnimationFrame = global.requestAnimationFrame;
    
    //Then
    polyfillRequestAnimationFrame(global);

    //When
    notEqual(global.requestAnimationFrame,oldRequestAnimationFrame);
    equal(typeof global.cancelAnimationFrame,"function");

});

이후부터는 내가 직접 global에 적절한 상황을 만들어서 테스트할 수 있기 때문에 쉽게 테스트케이스를 작성할 수 있었다.

생각해보면 정말 단순하고 간단한 문제인데 처음에 고민을 많이 했다. -_-;


ps. 아쉬운건 requestAnimationFrame, cancelAnimationFrame이 둘다 없는 경운데 이땐 전에 쓴글(링크)처럼 clearTimeout이 정상적으로 변경되었다면 정상적이라고 판단했다.

Posted by 전용우

댓글을 달아 주세요


최근(?) 자바스크립트에서는 모듈 패턴(Module Pattern)을 많이 사용한다.

이렇게 많이 사용하는 이유는 개인적으로 AMD의 영향이 크지 않을까 생각한다. (AMD의 좀 안좋은 인식이 있는데 이건 나중에 시간이 되면 쓰도록 하고....)

뭐.. 어쨌건 모듈 패턴을 사용하는 이유야 다양하겠지만 대부분은 지금의 자바스크립트에서 지원하지 않는 private 속성을 사용하기 위함이 큰 것 같다.(ECMA6에서는 뭐가 있는것 같은데..)

나는 사실 모듈 패턴을 선호하지 않는 편이다. 그 이유 중 하나가 코드 리딩이 힘들다.

왜냐하면 모듈 패턴은 함수로 감싼 형식이라 구현부를 볼 때 함수의 파라메터가 있다면 제일 마지막 부분을 확인해야 알 수 있고 클로져를 생각보다 많이 사용해 코드 리딩도 좀 힘들다. 그래서 난 개인적으로 모듈 패턴을 사용할 때는 파라메터를 넣지 않기를 선호하며 클로져도 적게 쓰려고 한다.

그리고 모듈 패턴을 쓰면 private의 사용이 많아지고 private이 많아질 수록 테스트는 만들기 힘들어진다. 물론, private를 테스트하기 힘든건 모듈 패턴의 문제는 아니다.

이런 경우 대체적으로 private함수는 직접 테스트하기 보다는 private함수를 사용하는 public함수를 테스트한다.

나도 보통은 그렇게 하는데 한편으론 맘에 안들때도 있다.

예를 들면 아래의 코드형식이다.

(function(){
    var global = this;
    function Stub(vName, sType){
        this.stubMethod = new StubMethod();
    }
    Stub.prototype.with_param = function(){
        return this.stubMethod;
    }

    //private
    function StubMethod(iStub){
    }
    StubMethod.prototype.and_return = function(vReturn){
    }

    global.stub = global.Stub = Stub;
})();

위에 코드를 보면 StubMethod는 외부에서 생성해서 사용하지 않기 때문에 외부에 노출하지 않는다.

그리고 with_param의 반환 값이 StubMethod인지 테스트해야 하는 코드를 아래와 같이 작성하려고 한다.

test("with_param의 반환 값은 StubMethod 인스턴스여야 한다.",function(){
    //Given
    var stubInstance = stub("Stub");
    //When
    var stubMethod = stubInstance.with_param();
    //Then
    ok(stubMethod instanceof StubMethod);
 });

근데 여기서 StubMethod는 외부에 노출하지 않았기 때문에 위와 같은 테스트가 불가능하다.

그래서 테스트하는 방법을 고민해봤는데 몇 가지가 떠올랐다.

첫 번째. 반환 값을 가지고 add_return을 사용하여 테스트한다.(간접적으로)

두 번째.  반환 값에서 add_return메서드가 있는지 확인하는 테스트를 작성해야 한다(덕타이핑과 같이)

세 번째. 키워드를 넘겨서 테스트 중이면 외부에서도 StubMethod를 접근할 수 있게 한다. (이건 좀 구린것 같다.)

처음 고민한건 add_return 함수의 기능을 테스트하면 StubMethod인지 동시에 테스트되는 방법이다. 물론 간접적으로 테스트 되지만 반환 값이 StubMethod인지 테스트하는 부분이 코드로 표현되지 않아서 좀 별루라고 생각했다.

이것 저것 고민하다가 결국엔 덕타이핑으로 판단했지만 여전히 찜찜함은 남는다.

test("with_param은 반환 값이 StubMethod 인스턴스여야 한다.",function(){
    //Given
    var stubInstance = stub("Stub");
    //When
    var stubMethod = stubInstance.with_param();
    //Then
    // ok(stubMethod instanceof StubMethod);
    // StubMethod는 private으로 접근할 수 없어 덕타이핑으로 판단한다.
    equal(typeof stubMethod.and_return,"function");
});


이와 관련한 질문도 많고 답변도 봤는데 나의 고민을 해결해주는 글은 없었다. 그리고 유사한 패턴이 jQuery의 Deferred, Promise인 것 같아서 코드와 테스트 케이스를 보니 위에 경우랑은 좀 차이가 있었다.

결론은 위와 같이 했지만 이런 경우는 어떻게 처리해야 할지 아직 고민이 된다.


ps. 여전히 고민인 건 정말 private로 만들어야만 했는가? 그냥 public이면 되는거 아닌가? 외부에 노출시켜 발생하는 문제에 비해 테스트의 가치가 큰게 아닌가? 등 많은 고민이 되는데 잘 모르겠다.


ps. 정말 오랫만에 블로그를 썼다. 한동안 바쁘다는 이유로 안썼는데 이젠 조금씩 써보려고 하는데 얼마나 갈지는 잘 모르겠다. ㅎㅎ

Posted by 전용우

댓글을 달아 주세요

좀더 자세히 말하면 UI테스트가 불가능하다기 보단 자동화된 UI테스트가 불가능한것 같다.
사실 테스트만 잘되면 자동화하는 작업은 그렇게 힘들지 않는다고 생각한다.
하지만 UI쪽 테스트 자체가 힘들기 때문에 자동화된 테스트가 안되고 그렇기 때문에 테스트가 잘되고 있는것 같지 않다.
그래서 왜 UI쪽 테스트가 불가능한가 정리를 해볼까 한다.



개인적으로 UI개발의 테스트를 자동화 할수 있다면 정말 혁신적인 일이라 생각하고 아마 수많은 시간과 돈이 save될거다.
(지식이 부족한지 몰라도 내가 알기론 없다. 있다면 제발 누군가 알려줬으면 좋겠다.)
그럼 먼저 UI개발이란 말이 좀 명확하지 않으니  HTML, Javascript, CSS을 가지고 개발하는 것으로 정하자. Flash,Silverlight등은 제외.


첫째, 테스트 할 조건이 너무 많다.

크게 OS는 window, Mac, Linux... 브라우져는 IE, Firefox, Safari, Opera... 어림 잡아 12가지이다. 근데 버전별로 하면.... 생각하기 힘들 정도로 많다. 게다가 프레임워크나 컴퍼넌트 같은 경우는 어떤 상황에서도 정상적으로 작동해야 하는데 DTD로 인해 영향을 미치는 경우가 있다. 그럼 또 경우에 수는 상상하기 싫을 정도로 많아진다.이렇게 많은 종류에 환경을 갖추고 테스트를 하기란 정말 힘들기 때문에 자동화된 테스트를 하기가 힘들다.

이정도 되면 UI개발자 입장에서 정말 세상에 단일OS와 단일 브라우져만 있다면 좋겠다라는 생각을 한다.

이렇게 테스트 할 조건이 많고 만약 테스트가 자동화 되지 않았다면 비용이 너무 많이 들어서 사실상 테스트 하는건 한계가 있다.




둘째, 테스트 자체가 불가능한 경우가 많다.

사실 첫번째 같은 경우 환경을 갖추기는 어렵지만 할수 있는 일이다.
돈과 시간만 있다면 몇대 PC에 버철머신 설치 해가면서 환경을 갖출 순 있다.
(testswarm, selenium grid같은걸로 하면 자동화 하면 되나 일반적으로 힘들다고 말하는것임)

환경을 갖춘다고 해도 테스트를 만드는것 자체가 힘든 경우가 많다.
먼저 자바스크립트 같은 경우는 일반적으로 테스트가 가능하다.
Ajax, Timer등의 테스트들 같은 경우 까다롭긴 하지만 mock을 사용하던지 테스트 가능하게 레이어를 올리던지 가능하다.

하지만 로직상 정상적으로 작동하지만 실제 브라우져에서 정상적으로 작동하지 않는 기능들 같은 경우는 힘들다. 대부분이 이벤트를 가지고 하는 작업들이 그렇다.
네이티브 브라우져 이벤트를 다루면 해결할것 같은데 이건 쉽지 않다. 예전에 selenium-ice라는게 이런 문제를 해결해 줄거라고 생각했는데 프로젝트가 더이상 진행되지 않는것 같아 정말 아쉽다.

디자인이 엮이면 힘들다.
예를 들면 로직상은 정상인데 css랑 엮이면서 디자인 자체가 일그러지는 현상들.
이런 현상들이 생각 보다 굉장히 많다.
그래서 자동화를 하기 위해 selenium에 capture기능을 써서 이미지를 떠서 비교를 하려고 했으나 쉽지 않았고 반자동화로 진행하려고 했으나 역시 쉽진 않았다.

CSS 자체는 테스트를 어떻게 해야 할지 감이 안잡힌다.
CSS가 변경이 되면 영향이 미치는 경우가 많다. 그래서 어디서는 이런 방법으로 테스트를 한다고는 하지만 실제로 보니 크게 도움이 될까?라는 의구심이 든다.
그리고 위에서 말한 capture기능도 생각보다 굉장히 비효율적이라 딱히 방법이 떠오르지 않는다.



정리하면.
  1. 환경이 너무 많다.
  2. 브라우져 자체에서 실행시켜야만 알수 있는 에러는 찾기 힘들다.
  3. 렌더링에 따라 눈으로 발견하는 에러는 찾기 힘들다.
  4. CSS를 어떻게 테스트 해야 할지 모르겠다.
이다.

계속 고민은 하지만 딱히 떠오르는 방법이 없다.-_-;
아무리 찾아봐도 없는걸 보면 아직 해답을 못찾았다고 생각하고 계속 실험하고 탐구해봐야 하는 영역인듯;;

참고로 일부가 불가능하다고 해서 안하는게 낫다라고 말하는게 아니다.
오해하지 마시길.

ps. TEST는 그렇다고 하고 과연 세계적으로 UI개발에 대한 퀄리티를 어떻게 측정하며 하는곳이 얼마나 있을까?

Posted by 전용우

댓글을 달아 주세요

  1. Favicon of http://blog.gloridea.net BlogIcon Gloridea 2009.10.13 19:42  댓글주소  수정/삭제  댓글쓰기

    'UI테스트는 불가능한가?' 앞에 '완벽한' 이라는 수식어를 넣어야 맞을 것 같고,
    또 그럴 경우에 'UI'를 빼도 여전히 성립할 것 같다는 생각이 드네.

    실전에 적용하면서 가능할 것 같은 접근은 딱 두 개인데, 하나는, '이걸 어떻게 설계를 드러내는 도구로 사용할까' 하는 거랑, 또 하나는 '어떻게 하면 설계 변경 시 회귀 오류를 감소시키는 도구로 사용할까' 인데, 이 정도의 목표는 분명 달성 가능한 거라고 봐. 나머지 가능성에 대해서는 아직은 좀 중립적인 입장이고.

    버릴 것을 버리고 나면 할 수 있는 것들이 좀 더 분명해지지 않을까?

    그리고, UI라고는 하지만... 사실은 전혀 다른 것을 말하고 있다는 생각도 들어.

    자체적인 모델을 가질 경우, 그것은 UI라고 부르기보다는 'UI 개발에 일반적으로 사용되는 기술을 활용해 만들어진 어플리케이션' 이라고 봐야 하고, 자체적인 모델이 아예 없거나 매우 빈약할 때에야 'UI'라고 부를 수 있지 않을까.

    두 가지에 대한 접근이 같지 않을거라는 (실은 완전히 다를거라는)생각이 요즘 많이 들어.

    • Favicon of https://blog.mixed.kr BlogIcon Mixed 2009.10.14 15:19 신고  댓글주소  수정/삭제

      그렇죠. 완벽히 자동화된 테스트는 불가능한가?
      라고 해야겠죠.

      그리고 버릴것을 버리고 나면 할수 있는것은 분명하죠.
      다만 제가 경험해보면 버린곳에서 발생된 에러가 큰 이슈를 내는깐 문제 같아요.

      그래서 이부분을 해결할만한 방법이 없을까라고 생각해서 글을 써본거에요.

      -------------------------------
      그리고, UI라고는 하지만... 사실은 전혀 다른 것을 말하고 있다는 생각도 들어.

      자체적인 모델을 가질 경우, 그것은 UI라고 부르기보다는 'UI 개발에 일반적으로 사용되는 기술을 활용해 만들어진 어플리케이션' 이라고 봐야 하고, 자체적인 모델이 아예 없거나 매우 빈약할 때에야 'UI'라고 부를 수 있지 않을까.

      두 가지에 대한 접근이 같지 않을거라는 (실은 완전히 다를거라는)생각이 요즘 많이 들어.
      -------------------------------

      이 부분은 좀 얘기를 해봐야 하는 문제이긴 한데 전 단순히 모델이 있고 없고에 문제는 아니라고 봐요 :)

전에 봤던 JS Test Driver(이하 JTD)의 플러그인이 개발 되었다고 하여 한번 사용해 봤다.

먼저 JTD가 무엇인지를 알기 위해서는 전에 적은 JTD사용기를 읽어보길 바란다.

기존에도 js에 테스트 결과를 IDE에 볼수 있는게 편리 했는데 이번 플러그인은  JsUnit과 유사하게 보기 좋은 인스턴스 메시지를 보여준다.

JsUnit의 다른 점은 각 브라우져 별로 확인 가능하다는 사실이다.
정말 편하다.

아래의 그림을 보면 좀더 쉽게 이해가 갈것이다.

사용자 삽입 이미지

위에서 보듯이 각 브라우져별로 테스트 결과를 알수 있다.(다만 속도는 정확하지 않은듯)

JTD가 사용법이 바뀐건 아니니 간단히 플러그인 사용법을 적을까 한다.

먼저 이 플러그인은 eclipse에서만 작동된다.(aptana는 작동을 안함.)
  1. 플러그인 사이트에서 인스톨을 한다.( http://js-test-driver.googlecode.com/svn/update/)
  2. window -> show view -> other -> javascript -> JsTestDriver 선택 (위에 같은 그림의 패널이 나옴)
  3. perferences에 가서 JS Test Driver에 port와 각 브라우져의 실행 파일을 지정한다.(위에 각 브라우져의 로고가 클릭이 가능함)
  4. 희안하게 3번에서 적용후 끄고 켜야지만 적용이 됨.
  5. 원하는 프로젝트에 run configuration을 들어가 JsTestDriverTest에 해당 프로젝트를 지정하면 바로 conf파일을 바로 읽음.(여기서 conf파일이 해당 프로젝트에 바로 밑에 있어야함.)
  6. 다시 끈후 켠다.
위에 까지 하면 사용할 준비가 되었고 사용법은 간단하다.
  1. 아래 그림에서 run버튼을 누른후

    사용자 삽입 이미지
  2. 위의 3번에서 지정한 브라우저의 로고를 클릭한다.(클릭을 하면 브라우져가 캡쳐가 됨)
  3. 테스트를 돌리고 싶은 파일에 오른쪽 마우스를 클릭후 Run as로 들어가 JTD를 클릭하면 상단의 첫번째 그림처럼 결과가 확인 가능하다.

간단히 써본 소감은 기존에 비해서 인스턴스 메시지가 이뻐진듯.

다만 fail일 경우 몇가지 단점들이 보인다.
일단 에러메세지는 많이 난감하네 나온다.
또한 메소드를 클릭하면 해당 부분으로 점프 하는 기능이 있으면 좋을것 같다.

다른건 많이 안써봐서 잘 모르겠음 -_-;



자세한 사용법을 원하면 원글을 확인 하기 바란다.


Posted by 전용우

댓글을 달아 주세요

얼마 전에 google test 블로그에서 js test framework가 소개가 됬다.

ui test에 대해서 나름 흥미를 가지고 있어서 한번 설치를 해봤다.

먼저 간단한 설치 방법을 설명한다. (eclipse,aptana를 기준으로 되어 있다.)

  1. http://js-test-driver.googlecode.com/svn/samples/hello-world 에서 checkout 한다.
  2. properties가 가서 builders를 선택한다.
  3. js-test-builder가 잡혀 있는데 edit를 누른다.
  4. 일단 checkout할때 프로젝트명을 똑같이(hello-world) 하지 않았다면 해당 부분을 Working Directory에 수정한다. 그리고 mac사용자가 아니라면 location에 jdk경로도 수정해야 한다.
  5. 그리고 나서 터미널(커멘드)창에 java -jar JsTestDriver.jar --browser open을 하면 기본 브라우져 창이 뜨면서 테스트가 실행이 된다.하지만 윈도우에서는 기본 브라우져가 뜨지 않는것 같다.mac에선 기본 브라우져가 뜬다.
  6. 다음 부턴 파일이 저장이 되면 매번 테스트가 실행되어 피드백을 IDE에서 받을수 있다.
  7. 또한 다른 브라우져에서 테스트를 하고 싶다면 jsTestDriver.conf안에 server라고 적혀있는 주소로 들어가면 capture라는 링크가 보이는데 클릭을 하면 다음 부턴 해당 브라우져도 같이 테스트가 된다.
여기 까지가 설치 및 사용방법이다.
좀더 자세한 사용법이 필요하면 이곳을 참고 하길 바란다.

위와 같이 설치해보고 직접 사용해 보면 어떨까 하는 생각에 기존에 JSSpec으로 되어 있던 코드중 일부를 porting 하는 작업을 해봤다.

역시 장단점은 있었다.

먼저 단점
첫번째.  jsTestDriver가 계속 풀링하고 있어서 리소스를 많이 잡아먹어 막 버벅인다.
두번째.  전혀 인간적이 않은 피드백 메세지. 굉장히 보기 힘들다.
세번째.  다소 불편한 사용법. js가 아닌 파일은 사용하지를 못한다. 가끔 HTML도 사용하게 되는데 body에 innerHTML로 삽입하는등 다소 희안한 작업을 해야한다.

장점.
첫번째. 기존 js test framework은 여러개의 브라우져를 띄워서 계속 ctrl+r를 누르거나 settimeout으로 계속 돌리는 작업해야 되는데 비해 쉽게 실행 시킬수 있다.
두번째. 비록 보기 쉽지 않지만 IDE에서 모든 브자우져의 피드백을 볼수 있는건 큰 메리트다.

마지막으로 가장 큰 장점은 추후에 추가될 커버리지,퍼포먼스 측정과 같은 기능이다.

사실 지금 상태로는 기존에 쓰고 있는 js test framework를 변경할 만큼의 메리트는 없지만 추후에 커버리지, 퍼포먼스 측정 및 단점들이 보안이 되면 충분히 기존에 js test framework에서 변경해도 좋을것 같다.

또한 소스를 보니 JsTestDriver안에 들어있는 unit test를 사용하는게 아니라 기타 다른 unit test tool로 변경이 가능할것 같았다.
 
내가 기존에 생각했던 자바스크립트 개발 환경과 굉장히 유사하다. 비록 지금은 다소 부족하지만 훌륭한 툴로서 성장하길 기대한다. ^^;

근데... 레식횽이 만들고 있는 testswarm은 언제쯤 나오려나...


Posted by 전용우

댓글을 달아 주세요

  1. Favicon of http://maxzero.kr BlogIcon 꿈트리 2009.05.27 15:59  댓글주소  수정/삭제  댓글쓰기

    이제 올린거얌?


아마 자바스크립트로 unit test를 해본 사람이라면 늘 막히는 곳이 있게 마련인데
그중에 잘 막히는 부분은 set(Timeout|Interval)을 테스트 하는 것일겁니다..

예를 들면 아래와 같은 코드를 테스트 하고 싶다면 현재 자바스크립트의 특성상 일반적인 방법으로는 테스트가 불가능 합니다.



자바스크립트는 단일 스레드 방식이기 때문에 testDelay 함수를 호출할때 testDelay함수가 호출이 끝나지 않고는 delay안에 있는 setTimeout에 할당한 함수는 실행하지 않습니다. 그렇기 때문에 testDelay는 테스트 절대 성공할수 없습니다,

안되는 문제의 원인을 보면 자바스크립트가 단일 스레드이기 때문에 그렇고
그래서 setTimeout과 같은 함수를 사용하면 테스트가 한 함수 스코프에서 불가능하다는 생각을 했습니다.
위에 문제점을 어떻하면 해결할수 있을까 고민을 했는데 방법은 두 가지가 떠올랐습니다.

첫 번째.단일 스레드라는 환경을 변경하면 됩니다.
즉,일반적으로 iframe방식을 사용하면 됩니다.(즉,selenium 같은 방식)
실제 코드가 실행하는 환경과 테스트 코드가 실행하는 환경과 분리하면 된니다.

 아래 그림을 보면 이해하기가 쉽습니다.

이 방법은 테스트는 가능하지만 약간 복잡해질 소지가 있습니다.

두 번째. setTimeout을 안사용하면 됩니다.
즉, Simulating Time in jsUnit Tests,라고 나온 방법입니다.
이 방법의 핵심은 어차피 우리는 setTimeout을 테스트를 하는게 아니고 주기적으로 함수가 호출될 경우 정상적으로 작동하는지만 확인 하는게 목적이기 때문에 setTimeout과 유사한 함수를 만들어서 테스트를 하면 됩니다,
(mock으로 만들면 됩니다.-Ajax도 유사한 방법으로 테스트 하곤 합니다.)

2가지중 여러가지 고민을 해봤지만 2번째 방법이 쉽고 좋은 방법이라고 생각합니다.
혹시 javascript로 unit테스트를 진행하는데 이런 부분이 고민이였다면 해결하셨으면 좋겠습니다.

요즘 javascript란 언어를 가지고 (unit|acceptance)테스트를 진행하다보면 여러가지 문제을 겪게 되는데 이런 문제를 해결하기위해 고민 중입니다.
몇가지는 해결이 되고 몇가지는 아직도 고민 중인데 시간이 되면 겪었던 경험들을 공유할수 있도록 노력하겠습니다.^^;
Posted by 전용우

댓글을 달아 주세요