Digression: I want to write an article easily, but I don't know why every article feels heavy.
qunit is a unit testing framework for JavaScript. It is as easy to use as junit and is visualized.
By reading the API and some test demos, you can quickly grasp the basic usage of qunit. The following is a test example to illustrate the usage of qunit, and then it is gone.
A demo collection used by the qunit framework
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Test JCN.dom.node.util.js</title> <link href="../script/jquery/qunit-1.14.0.css" rel="stylesheet"/> <!-- <script type="text/javascript" src="../script/jquery/jquery-1.8.0.min.js"></script> --> <script type="text/javascript" src="../script/jquery/qunit-1.14.0.js"></script> <script type="text/javascript" src="JCN.dom.node.util.js"></script> <script> window.onload = function () { var e = document.getElementById("content"); var L = function (msg) { console.info("Test Log is : " + msg); }; //Test001 test("test getStyle", function () { expect(4); // var w = JCN.getStyle(e, "width"); var h = JCN.getStyle(e, "height"); L(w); L(h); equal(w, "30px", "Test getStyle(element, name) width to match."); equal(h, "20px", "Test getStyle(element, name) height to match."); e.style.width = "30px"; e.style.height = "20px"; // var w = JCN.getStyle(e, "width"); var h = JCN.getStyle(e, "height"); L(w); L(h); equal(w, "30px", "Test getStyle(element, name) width to match."); equal(h, "20px", "Test getStyle(element, name) height to match."); }); //Test002 test("test setElementOpactiy", function () { JCN.setElementOpactiy(e, 0.5); var o = JCN.getStyle(e, "opacity"); L(o); equal(o, 0.5, "Test setElementOpactiy(element, opactiy) opactiy to match."); }); module("module test", { setup: function () { L("module test setUp"); }, teardown: function () { L("module test teardown"); } }); //Test003 test("test relativePage", function () { var pageX = JCN.relativePage.pageX(e); var pageY = JCN.relativePage.pageY(e); L("pageX=" + pageX + ", pageY=" + pageY); equal(pageX, 0, "Test pageX."); equal(pageY, 498, "Test pageY."); }); //Test004 test("test relativeParent", function () { expect(2); var offsetParentX = JCN.relativeParent.parentX(e); var offsetParentY = JCN.relativeParent.parentY(e); L("offsetParentX=" + offsetParentX + ", offsetParentY=" + offsetParentY); equal(offsetParentX, 0, "Test relativeParent(element) offsetParentX to match."); equal(offsetParentY, 0, "Test relativeParent(element) offsetParentY to match."); }); }; </script> <style> .content { width: 30px; height: 20px; background-color: salmon; } </style> </head> <body> <h1 id="qunit-header">Qunit Example</h1> <h2 id="qunit-banner"></h2> <div id="qunit-testrunner-toolbar"></div> <h2 id="qunit-userAgent"></h2> <ol id="qunit-tests"></ol> <div id="qunit-fixture"> <span id="content" class="content"> This is a test div. </span> </div> </body> </html>
Dependency, setting instructions
1. The qunit test framework provides a clear test result feedback interface, here to introduce: qunit.css style file
2. Introduce the core library qunit.js and provide a set of APIs for testing frameworks.
3. The previous version relied on jquery, and currently qunit is an independent JavaScript.
4. Introduce the JavaScript code to be tested, this example is: JCN.dom.node.util.js
5. <body>xx</body>: The content of the body is a fixed template for displaying the test results of qunit, among which qunit-header: test title, qunit-testrunner-toolbar: a set of selection boxes provide some options during test runtime Condition settings, qunit-userAgent: (very clear) test client information, qunint-tests: a set of test results, qunit-fixture: (this is important) fixture means fixed, not likely to move, if tested The use case performs corresponding operations on the DOM, such as moving, deleting, setting properties, etc. Any node under this node will return to the original state after each test case ends, which ensures the independence and closure of the test case. Will not affect other tests and the original environment.
Test case description
1. For the test function provided by qunit, check the API
2. The above code: Test001 analysis
test("test getStyle", function(){...}): The first parameter: the name of the test case, the second parameter: assert (assertion), note: if the second parameter is an array, it means expectation The number of assertions, then the third parameter is an assertion. In this example, set the number of assertions in the assertion method: expect(4). It is recommended to write this way, concise and concise, and it will not take a long time. The second parameter can't remember what it means, and you have to go back to the API.
The use of the assertion method is similar to Junit. You can view the source code of qunit for clear and readable comments.
Below is a fragment map for quick locating friends who go back to the source.
Test module
Module can be understood as a group here. The reason for using module is that the test cases classified as a group have common logic to be processed before or after test execution.
qunit plugin mockjax and qunit asyncTest(testName, assert)
The asynchronous test method of qunit, asyncTest, is opened with start() and ended with stop(), and then continues with a test case. The problem is that it cannot achieve the function of real asynchronous communication and data transmission. At this time, it can achieve what you want with the help of mockjax result. An example of the test demo provided by mockjax is as follows:
asyncTest('Support 1.5 $.ajax(url, settings) signature.', function() { $.mockjax({ url: '/resource', responseText: 'Hello Word' }); $.ajax('/resource', { success: function(response) { equal(response, 'Hello Word'); }, complete: function() { start(); } }); $.mockjaxClear();});To summarize, mockjax completed the front-end asynchronous request and the back-end server response in a test case.
The editor is too difficult to use during the broadcast, the format is always bad, the cursor position jumps, and the content floats.
The test results of the test code provided in the article are as follows:
Explain some test results:
1. Test result: "module name" + "test case name" + "result data (number of failed, number of passed, number of test)"
2. From top to bottom in the test result diagram are: title, slogan, client information, test result.