2022. 3. 8. 17:37ㆍ개발/자바스크립트
테스트 스위트 구축
테스트 그룹 구축 & 비동기 처리 테스트 스위트 구축
테스트 그룹 여러가지 함수를 한번에 테스트 할 때
<html>
<head>
<title>test Suite</title>
<script>
(function() {
var results;
this.assert = function assert(value, desc){
var li = document.createElement("li");
li.className = value ? "pass" : "fail";
li.appendChild(document.createTextNode(desc));
results.appendChild(li);
if(!value){
li.parentNode.parentNode.className = "fail"
}
return li;
};
this.test = function test(name, fn){
results = document.getElementById("results");
results = assert(true, name).appendChild(
document.createElement("ul"));
fn();
};
})();
window.onload = function() {
test("A test.", function() {
assert(true, "First assertion completed")
assert(true, "Second assertion completed")
assert(true, "Third assertion completed")
});
test("Another test." , function(){
assert(true, "First test completed");
assert(false, "Second test failed");
assert(true, "Third assertion completed")
});
test("A third test." , function(){
assert(null, "fail")
assert(5, "pass")
});
}
</script>
<style>
#results li.pass {color: green;}
#results li.fail {color: red;}
</style>
</head>
<body>
<ul id="results"></ul>
</body>
</html>용어정리
node.appendChild(파라미터) : 해당 노드의 자식요소에 파라미터 추가
node.parentNode(파라미터) : 해당 노드의 부모요소에 파라미터 추가
파라미터가 될 수 있는 것 들
document.createElement("div"등등) : 요소추가
document.createTextNode(parm) : 텍스트 추가
비동기 테스트 스위트
<html>
<head>
<title>비동기테스트</title>
<script>
(function() {
var queue = [], paused = false, results;
this.test = function(name, fn){
queue.push(function(){
results = document.getElementById("results");
results = assert(true, name).appendChild(
document.createElement("ul"));
fn();
});
runTest();
};
this.pause = function() {
paused = true;
};
this.resume = function() {
paused = false;
setTimeout(runTest, 1);
};
function runTest() {
if (!paused && queue.length){
queue.shift()();
if(!paused) {
resume();
}
}
}
this.assert = function assert(value, desc) {
var li = document.createElement("li");
li.className = value ? "pass" : "fail";
li.appendChild(document.createTextNode(desc));
results.appendChild(li)
if(!value){
li.parentNode.parentNode.className = "fail";
}
return li;
};
})();
window.onload = function() {
test("Async Test #1" , function() {
pause();
setTimeout(function() {
assert(true, "first test1 completed");
assert(true, "first test2 completed");
assert(true, "first test3 completed");
assert(false, "first test4 fail");
resume();
}, 1000);
});
test("Async Test #2" , function() {
pause();
setTimeout(function() {
assert(true, "Second test completed");
resume();
}, 1000);
});
}
</script>
<style>
#results li.pass {
color: green;
}
#results li.fail {
color: red;
}
</style>
</head>
<body>
<ul id = "results"></ul>
</body>
</html>
용어정리
공통점은 : 제거 혹은 추가 에 따라서 배열이 변화해서 빈공간이 없음
pop , push , shift, unshift
배열 뒤단 에서 작업하는데 array.pop 나오고 <-----------> array.push 넣고
배열 앞단 에서 작업하는데 array.shift 나오고 < ---------- > array. unshift 넣고
나온 값이 반환 완성된 배열의길이 반환
-- > delete 의 경우 빈 공간을 만듬
splice
그리고 splice 애도 빈 공간을 안만드는 (시작위치 , 삭제할 원소 갯수 , 추가할 값 , ... , ) 빈공간 안만듬
반환값은 삭제된 배열의 값 삭제된게 없다면 [] 빈배열을 반환 그리고 추가된 값은 기존 배열에 추가 됨
-- > slice , concat 의 경우 빈 공간을 만듬
shift 활용
배열의 index 0 을 반환 하는데 shift( )( ) ; 이 모양으로 사용해서
shift ( ) 반환값이 함수 즉 배열 의 인자로 함수를 넣어 놨다면
shift( )( ) 해당 함수를 실행 시킨다.
'개발 > 자바스크립트' 카테고리의 다른 글
| TDI : 테스트 스위트 구축 1 (0) | 2022.03.07 |
|---|