소개
단위 테스트 탐험 했습니다 하 고 SharePoint 온라인 사무실에 대 한 새로운 SharePoint 응용 프로그램에 작업으로 자바 스크립트에 대 한 범위를 테스트 365 스위트입니다. 명백한 연구 경로를 알려준 Qunit.js 그리고 그 후 바로, 받는 사람 Blanket.js.
QUnit을 사용 하자 단위 테스트를 설정 하 고 모듈에 그룹화 수 있습니다. 모듈은 관련된 테스트를 구성 하는 간단한 방법. (의도 한 대로 그것을 사용 오전 확실 하지, 하지만 작동 나를 위해 지금까지 지금까지 정의한 테스트의 작은 세트).
Blanket.js Qunit 통합 하 고 그것은 내게 실제 줄의 JavaScript 했다-그리고 더 중요 한 것은-하지 실제로 실행 된 테스트를 실행 하는 동안 표시 됩니다. 이것은 "범위"-다른 하는 동안 실행 라인 테스트에 의해 보호 됩니다..
좋은 테스트 사례를 설정 하 고 범위 보기 사이, 우리가 우리의 코드 결함 숨겨진 위험을 줄일 수 있습니다. 좋은 시간.
Qunit
Visual Studio를가지고 가정 프로젝트 설정, 자바 패키지를 다운로드 하 여 시작 http://qunitjs.com. 솔루션에 해당 CSS와 자바 스크립트를 추가 합니다. 이런 내 모습:
그림 1
당신이 볼 수 있습니다, 사용 하 던 1.13.0 당시 나는이 블로그 게시물을 작성. 다운로드 CSS 파일에 추가 하는 것을 잊지 마세요.
하는 방법, 다음 단계는 테스트 프로그램의 어떤 종류를 만들고 Qunit 비트 참조. 난 라는 "QuizUtil_test.html"와 같이 HTML 페이지를 만들어 "QuizUtil.js" 라는 스크립트 파일에 잔뜩 기능 테스트:
그림 2
다음은 코드:
<!문서 종류 html> <html xmlns"http =://www.w3.org/ 1999/xhtml"> <머리> <제목>Qunit QuizUtil 테스트</제목> <링크 확인해"스타일 시트 =" href="../CSS/qunit-1.13.0.css" /> <스크립트 유형= "텍스트/자바 스크립트" src="QuizUtil.js" 데이터 커버></스크립트> <스크립트 유형 ="텍스트/자바 스크립트" src ="qunit-1.13.0.js"></스크립트> <스크립트 유형 ="텍스트/자바 스크립트" src ="blanket.min.js"></스크립트> <스크립트> 모듈("getIDFromLookup"); 테스트("QuizUtil getIDFromLookupField", 함수 () { var goodValue = "1;#폴 Galvin"; 동등한(getIDFromLookupField(goodValue) + 1, 2), "ID의 [" + goodValue + "] + 1 2 해야 합니다."; 동등한(getIDFromLookupField(정의 되지 않음), 정의 되지 않음, "정의 되지 않은 입력된 인수가 정의 되지 않은 결과 반환 해야 합니다."); 동등한(getIDFromLookupField(""), 정의 되지 않음, "빈 입력된 인수를 정의 되지 않은 값을 반환 해야 합니다."); 동등한(getIDFromLookupField("gobbledigood3-thq;dkvn 이다;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), 정의 되지 않음,"항상 반환 해야 결과 컨버터블을 정수로"); 동등한(getIDFromLookupField("2;#일부 다른 사람"), "2", "검사 [2;#일부 다른 사람]."); 동등한(getIDFromLookupField("9834524;#long 값"), "9834524", "큰 값 테스트입니다."); notEqual(getIDFromLookupField("5;#누구 든 지", 6), 6, "테스트는 notEqual (5 같지 6 이 샘플에 대 한: [5;#누구 든 지]"); }); 모듈("htmlEscape"); 테스트("QuizUtil htmlEscape()", 함수 () { 동등한(htmlEscape("<"), "<", "이스케이프 연산자 보다 덜 ('<')"); 동등한(htmlEscape("<사업부 클래스 = "someclass">일부 텍스트</div>"), "<사업부 클래스 ="someclass">는;일부 텍스트</div>는;", "더 복잡 한 테스트 문자열입니다."); }); 모듈("getDateAsCaml"); 테스트("QuizUtil getDateAsCaml()", 함수 () { 동등한(getDateAsCaml(새로운 내용 날짜("12/31/2013")), "2013 12 31T:00:00:00", "테스트 하드 코딩 된 날짜: [12/31/2013]"); 동등한(getDateAsCaml(새로운 내용 날짜("01/05/2014")), "2014-01-05T:00:00:00", "테스트 하드 코딩 된 날짜: [01/05/2014]"); 동등한(getDateAsCaml(새로운 내용 날짜("01/31/2014")), "2014-01-31T:00:00:00", "테스트 하드 코딩 된 날짜: [01/31/2014]"); 동등한(getTodayAsCaml(), getDateAsCaml(새로운 내용 날짜()), "getTodayAsCaml() getDateAsCaml 동일 해야 합니다.(새 날짜())"); 동등한(getDateAsCaml("말도 값"), 정의 되지 않음, "넌센스 값의 날짜를 보십시오."); 동등한(getDateAsCaml(정의 되지 않음), 정의 되지 않음, "의 날짜를 얻는 것을 시도 [정의 되지 않음] 날짜입니다."); }); 모듈("getParameterByName"); 테스트("QuizUtil getParameterByName (쿼리 문자열에서)", 함수 () { 동등한(getParameterByName(정의 되지 않음), 정의 되지 않음, "얻는 것을 시도 정의 되지 않은 매개 변수는 정의 되지 않은 반환 해야 합니다."); 동등한(getParameterByName("존재 하지 않습니다."), 정의 되지 않음, "우리가 알고 매개 변수가 존재 하지 않는 매개 변수 값을 좀 하려고 합니다."); }); 모듈("쿠키"); 테스트("QuizUtil 다양 한 쿠키 기능.", 함수 () { 동등한(setCookie("테스트", "1", -1), getCookieValue("테스트"), "가져오기 설정 쿠키 작동 합니다."); 동등한(setCookie("anycookie", "1", -1), true, "유효한 요리 설정 반환 해야 '사실'."); 동등한(setCookie("미친 쿠키 이름 !@#$%"%\^&*(()?/><.,", "1", -1), true, "나쁜 쿠키 이름 설정 false를 반환 합니다 ''."); 동등한(setCookie(정의 되지 않음, "1", -1), 정의 되지 않음, "쿠키 이름으로 정의 되지 않은 전달."); 동등한(getCookieValue("존재 하지 않습니다."), "", "쿠키 테스트를 존재 하지 않습니다."); }); </스크립트> </머리> <바디> <div id"qunit ="></div> <div id= "qunit 조명 기구"></div> </바디> </html>
여기 일어나 고 몇 가지:
- 내 코드 참조 (QuizUtil.js)
- Qunity.js 참조
- 일부 모듈 정의 (getIDFromLookup, 쿠키, 그리고 다른)
- 배치는 <div> ID가 "qunit".
다음, 그냥이 페이지를 당겨 하 고 당신이 이것 같은 것을 얻을합니다:
그림 3
위쪽에 보시 면, 몇 가지 옵션이 있습니다., 두 번째는 재미 있습니다:
- 테스트를 통과 하는 숨기기: 꽤 분명 합니다. 문제 영역 및 불 요 반사 파의 많은 하지 그냥 볼 눈을 도울 수 있다.
- 모듈: (드롭 다운): 이 테스트를 해당 그룹으로 테스트를 필터링 합니다..
테스트 스스로 – 몇 가지 의견 서:
- 그것은 그것을 테스트할 수 처음에 코드를 작성 해야 한다는 말도 없이 간다. 그 규율을 적용 도울 수 있는 도구를 사용 하 여. 예를 들어, "GetTodayAsCaml 라는 함수를 했다()”. 이러면 아주 쓸만한 입력된 인수 걸리기 때문에 평등에 대 한 테스트를 하 고, 우리가 지속적으로 현재 날짜를 반영 하기 위해 테스트 코드를 업데이트 해야 합니다. 나는 데이터 입력된 매개 변수를 추가한 다음 CAML 형식으로 오늘 날짜를 원하는 경우 현재 날짜를 전달 리팩터링.
- Qunit 프레임 워크 문서 자체 테스트 하 고 꽤 강력한 것 같습니다. 그것은 일치 여부를 테스트 같은 간단한 것 들을 할 수 있으며 ajax 스타일 호출에 대 한 지원 ("진짜" 또는 당신의 가장 좋아하는 mocker를 사용 하 여 모의).
- -"정의 되지 않은"와 어떻게 지 사례를 통해 생각 하는 세력 또한 과정을 통과 또는 null 함수에 전달 됩니다. 그것은 죽은 간단 하 게 밖으로 이러한 시나리오를 테스트 합니다. 좋은 물건.
Blanket.js 범위
Blanket.js는 테스트 실행의 과정에서 실행 하는 코드의 실제 라인을 추적 하 여 Qunit을 보완 합니다. 그것은 통합 오른쪽 Qunit 그렇게 하더라도 그것은 완전히 별도 응용 프로그램, 그것은 정중 하 게 재생-정말 마치 그것은 하나의 완벽 한 애플 리 케이 션.
이것은 행동에 blanket.js:
그림 4
그림 5
(실제로 맨 "범위 사용" 확인란을 클릭 해야 [그림 참조 3] 이 수 있도록.)
그림에서 강조 표시 된 라인 5 내 테스트에 의해 실행 되지 않 았, 그래서 전체 범위를 원한다 면 실행 하도록 발생할 않는 테스트를 고안 해야.
다음이 단계에 따라 작업 하는 blanket.js를 얻을:
- 다운로드 http://blanketjs.org/.
- 프로젝트에 추가
- 테스트 프로그램 페이지 업데이트 (내 경우에는 QuizUtil_test.html) 다음과 같이:
- 참조 코드
- 장식 귀하 <스크립트> 이 같은 참조:
<스크립트 유형= "텍스트/자바 스크립트" src="QuizUtil.js" 데이터 커버></스크립트>
Blanket.js "데이터-커버" 특성을 줍 고 그것의 마술을 않습니다. Qunit에 후크, "범위 사용" 옵션 추가 UI 업데이트 봐라!
요약 (TL; 박사)
Qunit을 사용 하 여 테스트 사례를 작성.
- 그것을 다운로드합니다
- 프로젝트에 추가
- 테스트 프로그램 페이지 작성
- 테스트 만들기
- 일부 쓸만한 수 코드 리팩터링
- 창의력을 발휘해! 미친 생각, 불가능 한 시나리오 고 어쨌든 테스트.
Blanket.js를 사용 하 여 범위를 확인
- Qunit 작동 하는지 확인
- Blanket.js를 다운로드 하 고 프로젝트에 추가
- 테스트 프로그램 페이지 추가:
- Blanket.js에 대 한 참조 추가
- "데이터-커버" 특성을 추가 여 <스크립트> 태그
- Qunit 테스트 실행.
난 결코 전에 이런 한 초보적인 물건 시간의 소수에서 근무 했다.
행복 한 테스트!
</끝>
에 지 저 귐에 나를 따르라합니다 http://www.twitter.com/pagalvin