Qunit

소개

단위 테스트 탐험 했습니다 하 고 SharePoint 온라인 사무실에 대 한 새로운 SharePoint 응용 프로그램에 작업으로 자바 스크립트에 대 한 범위를 테스트 365 스위트입니다. 명백한 연구 경로를 알려준 Qunit.js 그리고 그 후 바로, 받는 사람 Blanket.js.

QUnit을 사용 하자 단위 테스트를 설정 하 고 모듈에 그룹화 수 있습니다. 모듈은 관련된 테스트를 구성 하는 간단한 방법. (의도 한 대로 그것을 사용 오전 확실 하지, 하지만 작동 나를 위해 지금까지 지금까지 정의한 테스트의 작은 세트).

Blanket.js Qunit 통합 하 고 그것은 내게 실제 줄의 JavaScript 했다-그리고 더 중요 한 것은-하지 실제로 실행 된 테스트를 실행 하는 동안 표시 됩니다. 이것은 "범위"-다른 하는 동안 실행 라인 테스트에 의해 보호 됩니다..

좋은 테스트 사례를 설정 하 고 범위 보기 사이, 우리가 우리의 코드 결함 숨겨진 위험을 줄일 수 있습니다. 좋은 시간.

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("<"), "&lt;", "이스케이프 연산자 보다 덜 ('<')");
            동등한(htmlEscape("<사업부 클래스 =  "someclass">일부 텍스트</div>"), "&lt;사업부 클래스 =&quot;someclass&quot;&gt는;일부 텍스트&lt;/div&gt는;", "더 복잡 한 테스트 문자열입니다.");
        });

        모듈("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) 다음과 같이:
1. 참조 코드
2. 장식 귀하 <스크립트> 이 같은 참조:

    <스크립트 유형= "텍스트/자바 스크립트" src="QuizUtil.js" 데이터 커버></스크립트>

Blanket.js "데이터-커버" 특성을 줍 고 그것의 마술을 않습니다. Qunit에 후크, "범위 사용" 옵션 추가 UI 업데이트 봐라!

요약 (TL; 박사)

Qunit을 사용 하 여 테스트 사례를 작성.

그것을 다운로드합니다
프로젝트에 추가
테스트 프로그램 페이지 작성
테스트 만들기
- 일부 쓸만한 수 코드 리팩터링
- 창의력을 발휘해! 미친 생각, 불가능 한 시나리오 고 어쨌든 테스트.

Blanket.js를 사용 하 여 범위를 확인

Qunit 작동 하는지 확인
Blanket.js를 다운로드 하 고 프로젝트에 추가
테스트 프로그램 페이지 추가:
- Blanket.js에 대 한 참조 추가
- "데이터-커버" 특성을 추가 여 <스크립트> 태그
Qunit 테스트 실행.

난 결코 전에 이런 한 초보적인 물건 시간의 소수에서 근무 했다.

행복 한 테스트!

</끝>

내 블로그를 구독.

에 지 저 귐에 나를 따르라합니다 http://www.twitter.com/pagalvin

폴 Galvin의 SharePoint 공간

Tag Archives: Qunit

HOWTO: 사무실에 대 한 QUnit.js 및 Blanket.js 단위 테스트 및 테스트 범위 구성 365 SharePoint 응용 프로그램

소개

Qunit

Blanket.js 범위

요약 (TL; 박사)