0

Below is my javascript file that shows the sum of two numbers.

var getSum = function (arg1, arg2) {
    var intArg1 = parseInt(arg1);
    var intArg2 = parseInt(arg2);
    return intArg1 + intArg2;
};

var getSumText = function (arg1, arg2) {
    var sum = getSum(arg1, arg2);
    return 'The sum of ' + arg1 + ' and ' + arg2 + ' is ' + sum + '.';
};

$(document).ready(function () {
    $("#button1").click(function (e) {
        console.log('button clicked');
        var sumText = getSumText($("#arg1").val(), $("#arg2").val());
        $("#output1").text(sumText);
        e.stopPropagation();
    });
});

Here's my QUnit.html file.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Test Suite</title>
    <link href="Content/qunit-1.12.0.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.0.0.min.js"></script>
    <script src="Scripts/qunit-1.12.0.js"></script>
    <script src="Scripts/main.js" data-cover></script>
    <script src="Scripts/mainTests.js"></script>
    <script src="Scripts/blanket.min.js"></script>
</head>
<body>
    <h1 id="qunit-header">Test Suite</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">
        <input type="text" id="arg1" />&nbsp;
        <input type="text" id="arg2" /> <br />
        <div id="output1">&nbsp;</div>
        <input type="button" id="button1" value="Show sum" />
    </div>
        <script type="text/javascript">function blanket_toggleSource(e) {
    var t = document.getElementById(e);
    t.style.display === "block" ? t.style.display = "none" : t.style.display = "block";
}</script>
</body>
</html>

And here's my js tests file.

module('DOM');
test('should add correctly', 1, function() {
    $('#arg1').val('2');
    $('#arg2').val('5');
    console.log($('#arg1').val());
    console.log($('#arg2').val());
    $('#button1').trigger('click');
    var output = $('#output1').text();

    equal(output, 'The sum of 2 and 5 is 7.', 'sum text is correct');
});

module('Sum');
test('should add correctly', 1, function() {
    var sum = getSum('2', '1');
    deepEqual(sum, 3, 'sum is correct');
});

If I move the 'Sum' module above the 'DOM' one, the test in the DOM module fail intermittently. What am I missing?

Thanks, Arun

0

1 Answer 1

0

You need to separate the library code, that you can test, from the initialization code, that you don't really need to test in this case. Move the code inside the click handler into another named function and called that from a separate script tag or file. That way you can test all three functions from your tests. Currently you end up with document-ready executing code at a some point in time, while your tests run at another. That causes the seemingly random behaviour you're seeing.

1
  • 'separate script tag' - how does this help? Also, how would you suggest doing complete e2e testing for JS (other than switching to AngularJS that is!!).
    – Arun
    Jul 23, 2013 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.