Tag Archives: Qunit

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

소개

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

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

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

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

Qunit

Visual Studio를가지고 가정 프로젝트 설정, 자바 패키지를 다운로드 하 여 시작 http://qunitjs.com.  솔루션에 해당 CSS와 자바 스크립트를 추가 합니다.  이런 내 모습:

image

그림 1

당신이 볼 수 있습니다, 사용 하 던 1.13.0 당시 나는이 블로그 게시물을 작성. 다운로드 CSS 파일에 추가 하는 것을 잊지 마세요.

하는 방법, 다음 단계는 테스트 프로그램의 어떤 종류를 만들고 Qunit 비트 참조.  난 라는 "QuizUtil_test.html"와 같이 HTML 페이지를 만들어 "QuizUtil.js" 라는 스크립트 파일에 잔뜩 기능 테스트:

image 그림 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>

여기 일어나 고 몇 가지:

  1. 내 코드 참조 (QuizUtil.js)
  2. Qunity.js 참조
  3. 일부 모듈 정의 (getIDFromLookup, 쿠키, 그리고 다른)
  4. 배치는 <div> ID가 "qunit".

다음, 그냥이 페이지를 당겨 하 고 당신이 이것 같은 것을 얻을합니다:

image

그림 3

위쪽에 보시 면, 몇 가지 옵션이 있습니다., 두 번째는 재미 있습니다:

  • 테스트를 통과 하는 숨기기: 꽤 분명 합니다.  문제 영역 및 불 요 반사 파의 많은 하지 그냥 볼 눈을 도울 수 있다.
  • 모듈: (드롭 다운): 이 테스트를 해당 그룹으로 테스트를 필터링 합니다..

테스트 스스로 – 몇 가지 의견 서:

  • 그것은 그것을 테스트할 수 처음에 코드를 작성 해야 한다는 말도 없이 간다.  그 규율을 적용 도울 수 있는 도구를 사용 하 여. 예를 들어, "GetTodayAsCaml 라는 함수를 했다()”.  이러면 아주 쓸만한 입력된 인수 걸리기 때문에 평등에 대 한 테스트를 하 고, 우리가 지속적으로 현재 날짜를 반영 하기 위해 테스트 코드를 업데이트 해야 합니다.  나는 데이터 입력된 매개 변수를 추가한 다음 CAML 형식으로 오늘 날짜를 원하는 경우 현재 날짜를 전달 리팩터링.
  • Qunit 프레임 워크 문서 자체 테스트 하 고 꽤 강력한 것 같습니다.  그것은 일치 여부를 테스트 같은 간단한 것 들을 할 수 있으며 ajax 스타일 호출에 대 한 지원 ("진짜" 또는 당신의 가장 좋아하는 mocker를 사용 하 여 모의).
  • -"정의 되지 않은"와 어떻게 지 사례를 통해 생각 하는 세력 또한 과정을 통과 또는 null 함수에 전달 됩니다.  그것은 죽은 간단 하 게 밖으로 이러한 시나리오를 테스트 합니다.  좋은 물건.

Blanket.js 범위

Blanket.js는 테스트 실행의 과정에서 실행 하는 코드의 실제 라인을 추적 하 여 Qunit을 보완 합니다.  그것은 통합 오른쪽 Qunit 그렇게 하더라도 그것은 완전히 별도 응용 프로그램, 그것은 정중 하 게 재생-정말 마치 그것은 하나의 완벽 한 애플 리 케이 션.

이것은 행동에 blanket.js:

image 그림 4

image

그림 5

(실제로 맨 "범위 사용" 확인란을 클릭 해야 [그림 참조 3] 이 수 있도록.)

그림에서 강조 표시 된 라인 5 내 테스트에 의해 실행 되지 않 았, 그래서 전체 범위를 원한다 면 실행 하도록 발생할 않는 테스트를 고안 해야.

다음이 단계에 따라 작업 하는 blanket.js를 얻을:

  1. 다운로드 http://blanketjs.org/.
  2. 프로젝트에 추가
  3. 테스트 프로그램 페이지 업데이트 (내 경우에는 QuizUtil_test.html) 다음과 같이:
    1. 참조 코드
    2. 장식 귀하 <스크립트> 이 같은 참조:
    <스크립트 유형= "텍스트/자바 스크립트" src="QuizUtil.js" 데이터 커버></스크립트>

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

요약 (TL; 박사)

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

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

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

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

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

행복 한 테스트!

</끝>

undefined내 블로그를 구독.

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