Beispielcodedetails für JavaScript-Unit-Tests mit QUnit

Details zum Beispielcode für JavaScript-Unit-Tests mit QUnit

Einführung

QUnit ist ein leistungsstarkes JavaScript-Unit-Test-Framework. Es kann zum Testen von jQuery-, jQuery UI- und jQuery Mobile-Projekten sowie aller in JavaScript-Code geschriebenen Projekte verwendet werden.

Laufzeitumgebung

• Beliebiger HTML- und JavaScript-Editor (Visual Studio 2013)

• Referenz-JS von QUnit offiziell und CSS herunterladen Datei

QUnit zum Komponententest hinzufügen

Fügen Sie QUnit.js und QUnit.css zur HTML-Seite hinzu, die Sie testen möchten.

<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">

Erstellen Sie eine JavaScript-Klasse, die einem Unit-Test unterzogen werden muss

Fügen Sie den Code, der einem Unit-Test unterzogen werden soll, in eine separate js-Datei (Calculations.js) ein:

// 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;
};

Erstellen Sie einen Unit-Testfall für die obige Methode

Der folgende Code ist der Unit-Testfall für die obige JavaScript-Methode. Wir legen ihn auch in einer separaten js-Datei (UnitTest.js) ab:

// 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!");
});

Referenzieren Sie alle JS- und CSS-Dateien im HTML-Code

Erstellen Sie im HTML-Code ein p-Tag mit der ID von qunit bzw. qunit-fixture.

<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-Testergebnisfenster

Das obige ist der detaillierte Inhalt vonBeispielcodedetails für JavaScript-Unit-Tests mit QUnit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!