jQWidgets Forums

jQuery UI Widgets › Forums › General Discussions › Unit Testing in JQWidgets

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 10 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Unit Testing in JQWidgets Posts
  • November 12, 2014 at 3:35 pm Unit Testing in JQWidgets #62605

    dpibt
    Participant

    Hi,

    I want to unit test my jqwidget code in order to not break it when I modify it. In the documentation you say:

    5.Unit tests

    All jQWidget unit tests are located in the tests directory.
    You can use the unit tests if you’re planning to modify some of the widgets.

    But I can’t find the tests directory anywhere. How can I do it to unit test my modified jqwidgets code?

    Thank you!

    November 12, 2014 at 3:46 pm Unit Testing in JQWidgets #62606

    Peter Stoev
    Keymaster

    Hi dpibt,

    I would suggest you to use QUnit for unit testing. However, you can use a tool which you prefer.

    Here’s a simple test.

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/Site.css" media="screen" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.arctic.css" media="screen" />
    <link rel="stylesheet" href="../../styles/qunit-git.css" media="screen" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/qunit-git.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxbuttons').jqxButton({ width: '250px', height: '30px' });
            $('#jqxbuttons').css('visibility', 'hidden');

            module("Module Properties");

            test("width property test", function () {
                // get width.
                var width = $('#jqxbuttons').jqxButton('width');
                ok(width == "250px", "get width test.");

                // set width.
                $('#jqxbuttons').jqxButton({ width: "300px" });
                width = $('#jqxbuttons').jqxButton('width');
                ok(width == "300px", "set width test.");
            });

            test("height property test", function () {
                // get height.
                var height = $('#jqxbuttons').jqxButton('height');
                ok(height == "30px", "get height test.");

                // set height.
                $('#jqxbuttons').jqxButton({ height: "50px" });
                height = $('#jqxbuttons').jqxButton('height');
                ok(height == "50px", "set height test.");
            });

            test("disabled property test", function () {
                // get disabled.
                var disabled = $('#jqxbuttons').jqxButton('disabled');
                ok(disabled == false, "get disabled test.");

                // set disabled.
                $('#jqxbuttons').jqxButton({ disabled: true });
                var newDisabled = $('#jqxbuttons').jqxButton('disabled');
                ok(newDisabled == true, "set disabled test.");

            });

            module("Module Methods");

            module("Module Events");

        });
    </script>
</head>
<body>
    <input type="button" id='jqxbuttons' value='Button' />
    <br />
    <br />
    <div>
        <h1 id="qunit-header">
            QUnit example</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">
            test markup, will be hidden</div>
    </div>
</body>
</html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.