JSFiddle - React, Tailwind, and code Playground

by Stephen Fuqua

HTML

<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qunit/1.14.0/qunit.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.7.3/sinon-min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/qunit/1.14.0/qunit.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.flat.min.css">
    <button id="showMessage">Show Message</button>
    <div id="message">this text will be replaced with a dialog box containing new text</div>
    <hr />
    <!-- Standard setup for Qunit is -->
    <h1 id="qunit-header">QUnit Test Results</h1>
    <h2 id="qunit-banner"></h2>
    <div id="qunit-testrunner-toolbar"></div>
    <h2 id="qunit-userAgent"></h2>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>

JavaScript

// Here is a simple function for opening a dialog box.
        // This is the "system under test" (SUT)
        function displayMessage(message, title) {

            // Setup the KendoWindow as a dialog box
            var dialog = $("#message").kendoWindow({
                width: "300px",
                height: "200px",
                title: title,
                modal: true,
                visible: false,
                actions: ["Close"]
            });

            // Inject the message argument into the window
            $("#message").html(message);

            // Center and open the window
            dialog.data("kendoWindow")
                  .center()
                  .open();
        }

        // Sample usage - setting up a button that will invoke the SUT
        $("#showMessage").click(function () {
            console.log("button clicked");
            displayMessage("here's the message", "and this is the title");
        });

        // A few variables that will help us setup the tests
        var sandbox; // this will be a SinonJS sandbox - a container for mocks, stubs, and spies.
        var kendoWindowSpy // this will be a spy for the KendoWindow;
        var jQueryHtmlSpy // and this will become a spy for changing the HTML inside the window;

        // Prepare a QUnit module for testing - this is the test fixture
        module("displayMessage tests",
            {
                setup: function () {
                    sandbox = sinon.sandbox.create();

                    // Using mocks with jQuery and Kendo is very challenging, since you have to
                    // specify all behavior and returned objects. Instead, SinonJS's spies functionality
                    // is the right choice - it allows us to look at what was called, without
                    // having specify all expected behavior. In .Net testing, I prefer mocks
                    // so that we can define all expected behavior. But so far I've simply
        ...