how can I unit test an output of HTML code
Question
I am extremely new to web development and testing (starting slow). I have a page with a button. Once the button is clicked, some information/text is displayed.
How do I write a test case to test that the output is as expected (that its displayed)?
I want to write a test case to make sure that the text is displayed when the button is clicked.
<!DOCTYPE html>
<html>
<body>
<button onclick="buttonClick()">Click Me</button>
<p id="test"></p>
<script>
function buttonClick() {
document.getElementById("test").innerHTML = "TESTING!";
}
</script>
</body>
</html>
My guess is that I could use some sort of string verifier. If strings are present on the screen, that means the test passed. I am unsure if that makes sense, or if it is the correct approach.
Thanks,
Code for testing:
var elem = document.getElementById('test');
var text = 'TESTING!';
if (
document.getElementById('test').innerHTML.indexOf('TESTING') != -1){
alert('success!');
}
2 answers
solution1
0 2019-05-08 13:48:01
You could test that the string is rendered, but unit tests should test data, not markup. Problems with the latter are fairly rare and are more obvious when code is deployed and manually tested. (You wouldn't promote changes that don't obviously render a button with something in it.)
Instead, assign the value to a variable and test that the variable is correct in your function.
function buttonClick();
let myButtonText = 'TESTING!';
document.getElementById("test").innerHTML = myButtonText;
}
// in the test, assert that myButtonText should equal your string,
// which demonstrates that the function works or has been called
This test is maybe more valuable if the string is passed into the function where the function is called:
function buttonClick(str);
document.getElementById("test").innerHTML = str;
}
// assert that str is defined when inside the function
If you're required to test the output, you could look at the button's string value ( nodeValue or textContent ) based on element ID, or look for the entire markup string in the document. Both approaches meet your requirement, but are fragile (dependent on specific markup and string values).
Checking the document in its entirety for a markup snippet might look like this:
document.documentElement.innerHTML.indexOf('<button>string</button>')
Of course, if any script or library adds a class or other attribute, this fails.
solution2
0 2019-05-08 22:23:42
The test as you describe it is an end-to-end test, from user input until user output, involving complex components like the browser(s). Such tests are definitely no unit-tests - it would be subsystem or even system tests.
For the specific problem of automated testing of web applications you could use a framework like Selenium ( https://en.wikipedia.org/wiki/Selenium_(software) ). This would allow you to simulate the button press and then subsequently analyse the resulting content - not in rendered form, but on the level of the html page content (text).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.