Qunit of JS automated test unit test

Qunit of JS automated test unit test
Because the company has developed a javascript SDK that requires testing, it has been searching for a long time on the Internet and found the QUnit developed by the JQuery team, and JsUnit Based on JUnit, some of which have not yet been viewed, for more information about QUnit, log on to the official JQuery website www.bkjia.com and download the latest QUnit version to the right of the home page. Or click to download the qunit-1.16.0.js, use QUnit also need to download the official css file. Www.bkjia.com QUnit prerequisites 1、 qunit-1.16.0.jsand qunit-1.16.0.css. Someone will ask, can css be left blank? The answer is no. Display the style of execution case results, which must be displayed in css. 2. Add two lines of HTML code to the body tag. The id attribute cannot be removed ~ <Div id = "qunit"> </div> <div id = "qunit-fixture"> </div> 3. Write a javascript code for testing. Here, I casually wrote a method for user. js to log out and determine whether the user name exists. Reference this user. js posts user. js Code // JavaScript Document // create user class var user = {// login userName: userPwd: password login: function (userName, userPwd) {return userName + userPwd;}, // exit. 1 is returned. 1 is returned. 0 is returned. logout: function () {// exit the logout code return "1 ";}, getUser: function () {return {userName: '', userPwd :''};}, /// determine whether the user name exists. 1 is returned. 0 is returned. // to test the asynchronous operation, a callBack function is provided to delay loading of existUserName: function (userName, callBack) {setTimeout (function () {va R state = 0; if (userName = 'milanc') {state = 1 ;}else {state = 0 ;}if (callBack) {callBack (state );}}, 1000) ;}, callback: null, existUserName2: function (userName) {setTimeout (function () {var state = 0; if (userName = 'milan ') {state = 1 ;}else {state = 0 ;}if (user. callback) {user. callback (state) ;}}, 1000) ;}; use QUnit 1, test: All use cases must be executed in the test method, indicating a test case, generally, a use case has N assertions. /// Test logon test ('user. login', function () {equal (user. login ('milanc', '123'), 'milan123', "Logon test");}) 2. asserted function OK (result, message) the assertion return value is true/falseequal (actual, expected, message). actual is the actual value, and expected is the expected value. The actual value is equal to the expected value. Equivalent to = propEqual (actual, expected, message) is used to determine whether the object and value are equal deepEqual (actual, expected, message) Deep comparison, used to determine whether the two value types and values are equal, equivalent to = The above 2, 3, and 4 provide notEqual, notPropEqual, and notDeepEqual functions with the opposite functions. Parameters are the same as 2, 3, and 4. You can also search for "notPropEqual" (or other function names) in the source code of the qunit-1.16.0.js, and find that the same-level functions are assertion functions provided by QUnit, so that you can easily view and expand. For example: 3. The author of an asserted function generally prefers an interface for a test case. Of course, everyone has different habits. It cannot be generalized. It can be clear and easy to read! /// Logout test ('user. logout', function () {OK (user. logout () = 1, "logout test OK"); // verify that the actual value is not equal to the asserted value. Here it is actually equal, so it is wrong notEqual (user. logout () = 1, true, "logout test notEqual"); // verify that the actual value is equal to the asserted value equal (user. logout () = 1, true, "logout test notEqual"); // verify whether the returned value is of the same type and the same value as deepEqual (user. logout (), 1, "logout test deepEqual") ;}); // obtain user information to test ("user. getUser ", function () {// determines whether two objects are equal. This method is not applicable to determining basic values or strings propEqual (user. getUser (), {"userName": "12", "userPwd ": ""}, "Logout test propEqual"); // you can determine whether or not they are not equal. If they are not equal, they pass notPropEqual (user. getUser (), {"userName": "12", "userPwd": ""}, "logout test propEqual");}); 4. asynchronous testing of QUnit implementation is known to all users, to test the interface/method, you must wait until the return value of the interface is returned. If there is no return value, we do not know whether the result is correct. Therefore, there are two methods for asynchronous testing: one is to pass the callback as a parameter into the method; the other is to provide a variable, and we can assign the callback function to the variable; after the asynchronous processing is complete, execute the callback function we have written. Here we use setTimeout to simulate the asynchronous delayed return operation. Use Case code: // modular module ("Asynchronous test"); // method 1 call parameters to pass in the asynchronous test user. existUserName ('milanc', function (result) {// note that the method is called first and then the use case is written. Test ("user. existUserName ", function () {OK (result = 1," determine whether the user name has OK "); notEqual (result = 1, true, "determine whether the user name has notEqual") ;};}); // method 2 call the built-in variable Assignment Method to pass in the asynchronous test user. callback = function (result) {test ("user. existUserName2 ", function () {OK (result = 1," determine whether the user name exists OK "); notEqual (result = 1, true, "determine whether the user name has notEqual") ;};}; user. existUserName2 ('milance'); 5. Modularization in the above asynchronous test, we can see that the word "Asynchronous test" is added at the beginning of each test case. So how did these words come from? In many cases, we will be dazzled. QUnit provides module ("module name") to implement case grouping. The usage method can be directly placed in a modular place. Refer to the code and results of the 4th asynchronous test and paste all the html code conclusions of the tutorial. In many cases, we cannot limit every method to the extreme, you need to give it a try. The first time I wrote a blog, I did not write well. I can reply to any suggestions or questions below. The landlord will solve the problem immediately after seeing it. Thank you! <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">