깍돌이의 _WebQA(SQA)

일반적인 웹 브라우저에서의 이벤트 루프는 

단일 스레드에서 동작 을 하고 있으며 이사실을 꼭 인지하고 있어야 합니다.

전에 봤던 JavaScript는 1종 객체 (First-Class Object)라는 점과 같이 알아야 합니다.

function test() {};

는 언제든지

var fn = test; 가 가능 하다는 점

브라우저는 단일 스레드에서 이벤큐를 이용하여 들어오는 이벤트를 처리하게 되는데 

모든 이벤트를 큐에 들어온 순서대로 진행이 됩니다.

C언어 하실 때 자료구조에서 queue(큐)를 stack(스택)과 같은 공부 를 하실 때 

stack 에서는 push pop 이라는 용어를 썻지만

C에서는 front rear 라는 말도 있고 put get 뭐 이부분은 C에서 나오는 부분이니

중요한 점은 FIFO(First In First Out) 이라는 점입니다.

먼저 들어온 놈이 먼저 나간다는 말이 될수 있겠죠

대학로 아서 연극 표를 사러 갈때는 생각 하면 줄을 서서 먼저 표를 받게되면 바로 나가게 되는

모습을 생각 하면 될것 같습니다.

매표소는 1개 있죠 대부분 

브라우저도 메시지 큐 1개(매표소) 에서 티켓터(이벤트) 들을 기다리면서

행동을 하나씩 하나씩 처리해주는 방식을 가집니다.

** 브라우저 자체의 JavaScript 인터 프린터의 경우 단일 스레드 를 가지고 있습니다. 

-> JavaScript는 멀티 스레딩을 지원하지 않음 

-> Web Worker 사용을 하시는 분들은 논외 

** 해당 관련한 스터디 및 관련 책들에 대한 자료인데 아직까지는 이해가 되지 않는 부분이 있습니다.

브라우저는 브라우저별로 각각 다른 엔진을 쓰고 있고 

Chrome 28 이전 - > webkit

Chrome 28 이후 -> Blink

IE -> Trident

Gecko ->  FireFox 

각 브라우저별 엔진이 다릅니다. 엔진이 다르기 때문에 렌더링 되는 동작이 다릅니다. 

(화면 및 다른 쪽 렌더링으로 자바스크립트의 이벤트 방식은 위와 같습니다.)

자바스크립트 작성에 의해서 함수를 이해하는 것은 매우 중요합니다.

우선적으로 알고 들어가야 할 부분 은 

자바스크립트 함수는 1종 객체 (first-class Object) 라는 점을 알고 가야 합니다.

이를 뜻하는 점은

기존에 C에서의 가정하면

void show () const 

{

printf("Function Show");

}

int fn_value = 1;

에 경우가 있을때 fn_value는 int 형 변수이며

show는 함수이기 때문에

fn_value = show ; 라는 동작이 성립이 되지 않습니다.

위의 상황을 자바스크립트로 변경을 해보게 되면

function show ()  

{

console.log("Functioin Show");

}

var fn_value = 1;

fn_value = show; 가 가능해지기 때문에

자바스크립트에서의 함수는 1종 객체 (First-Class Object)라는 점을 알고 가야 합니다. 

위에 설명에서 C의 경우는 성립이 되지않아 저 코드 상태로 확인이 할수있는 점이 없습니다. 

show를 부르고싶다면

int fn_value는 그대로 놓은 상태에서

show(); 를 호출하여야 하지만

자바스크립트 코드에서는

fn_value = show; 한 후에

fn_value(); 로 하게되면

Function Show를 확인 하실수 있습니다.

function show()
{
		console.log("Function Show");
}
 	
	
var fn_value =1;
	fn_value = show;
	fn_value();

해당 사항에 대해서 이해를 하고 넘어 가야 합니다.

이해가 되었다면

1종 객체란 무엇인가

리터럴 로 생성 될수 있다.

변수,배열 요소, 다른 오브젝트의 프로퍼티에 할당이 가능

함수의 인자로 전달 가능

함수의 결과 값으로 반환 가능

동적으로 생성된 프로퍼티를 가질수 있다.

동적으로 생성된 프로퍼티라 함은

		var obj_ = [];
		obj_.push({name:"test",age:"18"});
		console.log(obj_[0]);

		obj_.push({name:"testB",age:"20",addProperty:"addProp"});
		console.log(obj_[1]);

와 같이 생성되는 점을 말할수 있다. Chrome 브라우저 개발자 도구(F12)을 누른후 콘솔 탭에서 해당 코드를 실행해보면

추가 하는형식에 따른 프로퍼티들이 동적으로 생성됨이 확인된다.

여기까지 대충 이해가 된 상태라면

브라우저에서 window 객체에 대한 특정 함수를 할당 하는 경우

 function browserInit(){
                   // do thing
} 
  window.onload = browserInit;

  // 방식을 사용 하는 것 보다 


  window.onload = function () {  

           // do thing 

  }
//  혹은
  window.onload  = () => {

// do thing 

}
 // 의 방식을 사용할수 있으며 위의 방식보다 코드도 짧아지고 좋다고 생각된다.

비동기 테스트 

메인 (A) 가  실행 될때

테스트 스위트 (A-a)

테스트 케이스(A-a-001)

테스트 케이스(A-a-002)

테스트 케이스(A-a-003)

테스트 케이스(A-a-004)

테스트 스위트 (A-b) ...

....

와 같이 진행 되는 경우에 아래 보이는 케이스들이 동기 방식 일때

** 테스트 를 하기 위한 로직은 비동기,동기 둘다 작성할수 있는 경우가 있지만 해당 내용은 배제 하도록 하겠습니다.  케이스 001을 파일 쓰기 작업을 기준으로 설명 드리지만 해당 작업은

비동기로 짤수 도 있지만 동기로 짤수도 있습니다.

동기 : 케이스(001) 가 실행이 끝난후에 결과를 return 하고 002 로 넘어가는 방식

ex :  케이스 001 이  log 10만 줄을 쓰는 작업을 동기식으로 확인 한다고 가정하게되면

언젠가는 10만 줄을 작업 후에 return 을 하게 됩니다.

->결과에 대한 기대가 가능합니다.  

해당 의 경우에 대해서는 결과에 대한 기대 가 가능하기 때문에 expect 를 작성하여서 테스트 코드를 작성하기가 수월합니다.

하지만 비동기에 대해서는 결과에 대한 기대가 명확하지 않습니다.

비동기 : 케이스 (002)

ex : ajax 에 대한 케이스가 가장 대표적일수 있습니다.

ajax로 특정 url에 대한 get을 요청 하였을 경우

// REST API 에 대한 테스트 케이스 로직을 짜는 경우

GET  /userInfo

$.ajax  ({

url : "127.0.0.1:8080/userInfo?userid=test_info

method:"GET",

success:function(res)

{

_before_api  = Array.prototype.slice.call(res.split('.'));

}

});

특정 url에 get요청을 하게되는데 id값을 보내서 해당 유저의 정보를 가져오는 작업에 대한 테스트 케이스를 작성하려고 할시에

백(서버) 에서 유저를 찾는데 오래걸리는 경우

서버에서 에러가 나는 경우

서버의 속도가 느린 경우

도대체 언제 해당 결과를 받을수 있는지

어떻게 받을수 있을지 -> error 코드를 받을수도 있고

해당의 경우에 테스트를 위해서는

비동기 테스트 로직을 짜야 한다.

동기 테스트에 경우는

getUserInfo = () => {return "testInfo"};



var expectValue = "testInfo";



getUserInfo===expectValue ? console.log("pass") : console.log("fail");

해당과 같이 기대값을 지정 하여서 assertion 을 진행할수 있지만

비동기의 경우는 위의 이유와 같이 언제 걸릴지도 모르고 결과가 일정하지 않습니다.

이렇기에 비동기 테스트를 짜기 위한 방식 및 테스트 코드 자체에서도 검증이 필요합니다.

우선 적으로 위의 ajax를 연속으로 확인한다고 해보겠습니다.

var testRunner = (function(){



var queue = [],paused=false, results;



// 멈춤

this.pause = function(){ paused= true;};

// 재 시작

this.resume = function(){ 

paused=false;  setTimeout(testMain,1);

 }



var testAssertion = function(testValue,testName){   // do it assertion };



// 스위트 이름 , 실행할 함수 (testsuite, fnc) 

var testFunction = function(testsuite,fnc)

{

queue.push(function(){
        fnc();

});



testMain();

};





var testMain = function()

{

if(!paused && queue.length)

{

queue.shift()();

if(!paused){ resume();}

}







};

return {

pause : pause,

resume : resume,

testFunction : testFunction,

};

})();



외부 접근 testRunner.testFunction("First Async",function(){









});





testRunner.testFunction("Second Async",function()

{

// 멈춤

testRunner.pause();



//비동기 코드 작성 ajax



$.ajax({

....

success:function(data)

{

// 시작

testRunner.resume();




}





});





});

생각나는대로 적어 봤는데 해당 코드는 대충 슈도 코드 정도로 보고

실제 테스트 를 하기 위한 테스트 모듈은 뒤에 만들어 볼 예정입니다.