>  기사  >  웹 프론트엔드  >  QUnit을 사용한 JavaScript 단위 테스트에 대한 샘플 코드 세부정보

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

黄舟
黄舟원래의
2017-03-09 14:16:291473검색

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 单元测试


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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.