QUnit을 사용한 JavaScript 단위 테스트에 대한 샘플 코드 세부정보

QUnit을 사용한 JavaScript 유닛 테스트용 샘플 코드 세부정보

소개

QUnit은 강력한 JavaScript 유닛 테스트 프레임워크입니다. jQuery, jQuery UI, jQuery Mobile 프로젝트는 물론 JavaScript 코드로 작성된 모든 프로젝트를 테스트하는 데 사용할 수 있습니다.

런타임 환경

• 모든 Html 및 JavaScript 편집기(Visual Studio 2013)

• QUnit 공식 및 CSS에서 참조 js 다운로드 파일

단위 테스트에 QUnit 추가

테스트하려는 HTML 페이지에 QUnit.js 및 QUnit.css를 추가합니다.

<script src="//code.jquery.com/qunit/qunit-1.22.0.js"></script>
<link rel="stylesheet" 
href="https://code.jquery.com/qunit/qunit-1.22.0.css">

단위 테스트가 필요한 JavaScript 클래스를 생성합니다.

위와 같이 단위 테스트할 코드를 별도의 js 파일(Calculations.js)에 넣습니다.

// Create Calculation class.
var Calculation = function () { };

// Add Addition to method to the Calculation class.
Calculation.prototype.Add = function (a, b) {
    return a + b;
};

// Add Subtraction method to the Calculation class.
Calculation.prototype.Substraction = function (a, b) {
    return a - b;
};

// Add Multiplication method to the Calculation class.
Calculation.prototype.Multiplication = function (a, b) {
    return a * b;
};

// Add pision method to the Calculation class.
Calculation.prototype.pision = function (a, b) {
    return a / b;
};

단위 테스트 케이스 생성 방법

다음 코드는 위 자바스크립트 메소드의 단위 테스트 케이스이기도 합니다. 별도의 js 파일(UnitTest.js)에도 넣어두었습니다.

// Instantiate Calculation class.
var c = new Calculation();
// Unit test for addition.
QUnit.test("Addition Test", function (assert) {   
    assert.ok(c.Add(2, 3) == "5", "Passed!");
});

// Unit test for subtraction.
QUnit.test("Substraction Test", function (assert) {
    assert.ok(c.Substraction(3, 2) == "1", "Passed!");
});

// Unit test for pision.
QUnit.test("pision Test", function (assert) {
    assert.ok(c.pision(5, 5) == "1", "Passed!");
});

// Unit test for multiplication.
QUnit.test("Multiplication Test", function (assert) {
    assert.ok(c.Multiplication(5, 5) == "25", "Passed!");
});

참고 HTML 코드의 모든 js 및 css 파일

HTML 코드에서 각각 ID qunit 및 qunit-fixture를 사용하여 p 태그를 만듭니다.

<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src="~/Scripts/Calculations.js"></script>
<p id="qunit"></p>
<p id="qunit-fixture"></p>
<script src="//code.jquery.com/qunit/qunit-1.22.0.js"></script>
<script src="~/Scripts/UnitTest.js"></script>

QUnit 테스트 결과 창

위 내용은 QUnit을 사용한 JavaScript 단위 테스트에 대한 샘플 코드 세부정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!