Home > Developer > JavaScript
In the basic knowledge of the JavaScript Ninja cheats 2.4 test condition, the author gives a simplified version of the Assert and assert group implementation, for beginners, this is a good example, not only let us get a handy gadget, It also lets us see how simple it is to implement this tool with JavaScript.
This is mainly from the code perspective of the 2.4 chapters to do some additions and explanations, including some of the original code bugs and their corrections. Of course, since it involves the code parsing, this can not be said to be the category of beginners, at least more than the function of JavaScript in the Declaration, function implementation, function closure and other content has a basic understanding, can read this article.
1.assertFirst of all, assert, the application code looks like this:
<script type= "Text/javascript" > assert (1 + 1 = = = 2, "1 + 1 = 2"); ASSERT (1 + 1 = = = 3, "1 + 1 = 3"); </script>
Assert is a JavaScript function, with two parameters, the first parameter is used to determine whether the expression is true or FALSE, the second parameter is used to explain the test, the test results are displayed directly in the HTML, here the test results are like this:
It's kinda cool. Okay, so let's take a look at how to implement this assert?
Create a new HTML file first
Then add a UL node with ID rusults in the body:
| 123 | <body> <ulid="results"></ul></body> |
All subsequent list of assert results are added to this node.
The HTML result after the Assert execution is complete is this:
It looks quite simple, that is, under the UL node for each assert test with the Li node to express. The class of the Li node tested as true is assigned a pass, and the class of the Li node tested as false is assigned the value of fail.
The principle is clear, then the code for this assert function does not look complicated:
function assert (value, desc) { //Create Li node var li = document.createelement ("li"); If value is True,li class is pass //If value is False,li class is fail Li.classname = value? "Pass": "Fail"; The text node is created according to Desc and then added to the Li node under li.appendchild (document.createTextNode (DESC)); Locate the node element in document ID results, which is the UL under the body, //Then add the new Li node to the UL node under document.getElementById ("results"). AppendChild (li); }The rest is to add some CSS, beautify the HTML, since has learned JavaScript, the general HTML and CSS content is not here to say, the complete HTML is as follows:
<! DOCTYPE html>2.assertsAsserts represents a test group, and the application code looks like this:
<script type= "Text/javascript" > asserts (); Test ("Numeric calculation Test", function () { assert (1 + 1 = = = 2, "1 + 1 = 2"); }); Test ("String tests", function () { assert ("a" + "b" = = = = "AB", ' "a" + "b" = "AB"); ASSERT ("a" + "b" = = = = = "abc", "a" + "b" = "abc"); }); </script>The code is to create a test group that is described as a "numerical test" with a set of asserts, and a test group described as "string test" with a set of asserts. The relationship between the two test groups is a lateral one.
A set of asserts in each test group is different, so a function wrapper is required. This function can be called "test Group assert assembly function".
Here's what the test results look like:
It looks more cool. Did you notice? There is a demand point here: if there is an assert test in the test group that is false, the entire test group is also marked as false.
The structure of this HTML is as follows:
Each test group is represented by an Li node, and a UL node is embedded under the Li node, which is the performance of all the Assert Li nodes in the test group under this embedded UL node.
Of course, there is a picture of the truth, here is clearly a small bug, "a" + "b" = = = "AB" is clearly correct, how to display the Li node is also painted red line? Perhaps you can argue that since the entire Test team has failed, it makes sense to draw the red line for the right Li node. Who let it belong to the failed test group? If you choose a pig-like teammate, you have to resign yourself to it. But how do you explain this? The correct Li node is drawn by the red line, while the green text is displayed on one side? This is obviously contradictory.
OK, let's ignore this little bug, and we'll fix this bug later. Now let's just take a look at how this test group function is implemented, right?
HTML related parts are not changed, the body is still the lone ID for rusults ul node, CSS also completely do not move, need to modify only JavaScript code.
Note that the code for the test group calls a asserts function that initializes some of the environment for the test group, which is simply what it looks like:
The overall initialization function of the test group asserts () { //declares a results variable,// as part of the Assert function closure and the test function closure var results; Create assert representation node assert = function (value, desc) { } //Create test Group performance node Test = function (name, FN) { } }Here the assert is re-assigned, of course, we first need to know that this assert before the Var declaration, indicating that the variable is in the global window, or will be added to this code execution place in the global window, And we're talking about a single assert instead of having an assert function implemented? That assert is also in the global window. Without a doubt, after calling the asserts function, the original Assert function is overwritten. The test variable is similar, and after calling the asserts function, it is added to the global window.
Note that the asserts function starts with the results variable, because the asserts function call will add two function assert and test in the global window, and this results variable will inevitably become part of the closure of these two functions.
Let's start by looking at how this test function is implemented:
Test = function (name, FN) { //Find the UL node element with ID results in document, which is the UL results = document.getElementById under the body (" Results "); Create a UL node var ul = document.createelement ("ul"); Create a test group node, just like create a normal assert node directly call assert //No surprises, this test group node is added to the ID results of the UL node element, //Initial default this test group node test results are true. //Add an inline UL node under the Test group node, and all assert nodes under the test group will be //added to this inline UL node. //So, then we'll let the results variable point to this inline ul node results = assert (True, name). APPENDCHILD (UL); Call "test group assert assembly function" to build each assert performance node fn (); };At the beginning of the test function execution, results is pointed to the UL node under the body, and on this basis completes the creation of the test Group performance node, and then results is pointed to the UL node embedded in the test group, "test group assert assembly function" is called, The new assert representation node is added to the results node.
Let's take a look at how the new Assert function is implemented:
assert = function (value, desc) {//Create Li node var li = document.createe Lement ("Li"); If value is True,li class is pass//if value is False,li class is fail li.classname = value? "Pass": "Fail"; The text node is created according to Desc and then added to the Li node under li.appendchild (document.createTextNode (DESC)); Add the new Li node to results, and what about this rusults? The UL node under the body before test execution is the UL node Results.appendchild (LI) under the test Group performance node after test execution. if (!value) {//If there is an assert test result is false,//Then the parent node of the Li node is found, That is, the test group performance node, and then set the class to fail li.parentNode.parentNode.className = "fail"; }//Back to Li Node//before test execution is the testing Group performance node//After test execution is assert Performance node return Li };Okay, done, complete HTML as follows:
View Code3. Fixed a bug where test group is falseThe reason for this bug, because the test group here is too simple, directly on the Li node set class, so that the control of the CSS is not high. It should be clear from the CSS list section that the control of the list should use the inline text span.
The results we want to display should be:
The corresponding HTML structure should be:
Since just adding a layer of span to the test Group performance node and the test performance node, the test function is completely unchanged, but the Assert function needs a little bit of modification:
assert = function (value, desc) {//Create Li node var li = document.createe Lement ("Li"); Create SAPN node var span = document.createelement ("span"); Creates a text node based on desc var text = document.createTextNode (DESC); Add a span node Li.appendchild (span) under Li; Add the text node under span//complete the Li>span>text three-layer relationship span.append (text); If value is True,span class is pass//if value is False,span class is fail span.classname = Value? "Pass": "Fail"; Add the new Li node to results, and what about this rusults? The UL node under the body before test execution is the UL node Results.appendchild (LI) under the test Group performance node after test execution. if (!value) {//If there is an assert test result is false, Then find the parent node of the Li node's parent node,//That is, the test Group performance node var ligroup = Li.parentNode.parentNo De Can not be directly in the test group performance node Set class//must be in the test Group performance node under the span node set class//That is, the first child element under the Test Group performance node Ligroup.childnodes[0].classname = "Fail"; }//Back to Li Node//before test execution is the testing Group performance node//After test execution is a Ssert performance node return li; };The corresponding CSS also needs to make minor changes, not directly on the Li node to do the effect, but on the span node to do the effect. These small places are easy to understand, so go directly to the modified full HTML:
View CodeJavaScript Learning-A simple test environment
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
