Search code examples
javascriptjqueryunit-testingqunit

QUnit Testing: reveal is not a function

Hello I'm very new to JavaScript Unit Testing, and I'm in the process of attempting to see if it would be possible to test some existing JavaScript.

I've got my test runner up, but I'm receiving this error in regards to function.

Test Runner the markup there is just to test something for the moment:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>QUnit Main Test Suite</title>
    <link rel="stylesheet" href="../qunit.css">     
    <script src="../sinon-1.17.3.js"></script>
    <script src="../jquery-2.2.2.min.js"></script>
    <script src="../qunit.js"></script>
    <script src="PreferenceControl.js"></script>  
    <script src="tests.js"></script>        
</head>
<body>
    <div id='MainContentDiv'>
        <div id='PreferenceType'>PreferenceFrequency</div>
        <div id='PreferenceId'>1</div>
        <table id='RadioButtonList'>
          <tbody>
            <tr>
                <td> 
                    <span id='1'>
                        <input id='RadioButtonList_0' type='radio' name='RadioButtonList' value='1'>
                    </span>
                </td>
            </tr>
            <tr>
                <td> 
                    <span id='2'>
                        <input id='RadioButtonList_1' type='radio' name='RadioButtonList' value='2' checked='checked'>
                    </span>
                </td>
            </tr>
            <tr>
                <td> 
                    <span id='3'>
                        <input id='RadioButtonList_2' type='radio' name='RadioButtonList' value='3'>
                    </span>
                </td>
            </tr>
            <tr>
                <td> 
                    <span id='4'>
                        <input id='RadioButtonList_3' type='radio' name='RadioButtonList' value='4'>
                    </span>
                </td>
            </tr>
          </tbody>
        </table>
        <input type="submit" name="SaveButton" id="SaveButton" />
      </div>
      <div id="CheckBoxList"></div>
    <div id="qunit"></div>
    <div id="qunit-fixture">test markup</div>
</body>

Below is the section it's breaking on:

this.loaderContainer = $('#AjaxLoader', this.mainContentDiv);

if (this.loaderContainer.length == 0) {
    this.loaderContainer = $("<div id=\"AjaxLoader\" class=\"full-width columns alpha omega\">" +
                                "<span class=\"loader\"><img src=\"/Common/CSS/Core/Images/Throbbers/Ajax-Loader.gif\" style=\"display: none\" ></span>" +
                            "</div>");

    this.loaderContainer.appendTo(this.mainContentDiv);
}

this.loaderContainer.reveal({
    animation: 'throbber'
});

These are the results of my break:

enter image description here

I'm not sure how to rectify this, or if it's possible the way I've done it? Any help would be much appreciated, thank you in advance.

Solution

  • This is due to a missed reference to another library that deals with the .reveal method.