<%@ Page
    Language="C#"
    MasterPageFile="~/DefaultMaster.master"
    AutoEventWireup="true"
    Title="Automated Testing" %>
<asp:Content ContentPlaceHolderID="SampleContent" Runat="Server">
    <div class="walkthrough">
        <div class="heading">Automated Testing</div>
        <p>
            JavaScript presents several challenges when testing user interface components written using ASP.NET AJAX.
            With asynchronous operations like web service calls or animation, you have to start the operation
            and wait for it to complete without blocking before you can verify the result.  Postbacks are just
            as difficult because you have to perform an action that causes a postback and then have the test
            resume processing where it left off when the page loads again.  We have written a JavaScript testing
            framework, in the <span class="codeReference">ToolkitTests</span> web project, to eliminate these
            problems when writing tests for your components.
        </p>
        <p></p>
        <p>
            The following walkthrough describes the steps you need to take to get started using the AJAX Control
            Toolkit Automated Test Harness.
        </p>
        <p></p>
        <div class="subheading">Creating a Component Unit Test</div>
        <p>
            The AJAX Control Toolkit Automated Test Harness allows you to easily write tests for user interface
            components written in JavaScript.  The test harness is the web application that actually runs all of
            the selected test suites and displays their results.  A test suite is an <span class="codeReference">*.aspx</span>
            page that contains instances of your component as well as the definition of several test cases.  A test
            case is an individual unit test consisting of a series of test steps to evaluate a particular area of
            functionality.  A test step is an action (possibly performed asynchronously or after a postback) that
            operates on your component.
        </p>
        <p></p>
        <p>
            There are four basic steps to creating a suite:</p>
            <ol>
                <li>Create an ASPX page with the UI that you'd like to test.</li><li>Declare a top-level JavaScript variable called <span class="codeReference">typeDependencies</span>
                    that lists the types that need to be loaded for your type to run.</li><li>Declare a JavaScript function called <span class="codeReference">registerTests</span> that defines
                    the tests and the steps of those tests.</li><li>Inside of <span class="codeReference">registerTests</span>, declare a set of tests and test steps.</li></ol>
        <p>
            As you'll see below, the Test Harness takes a set of steps, queues them up, then executes them in order, either
            synchronously or asynchronously, by waiting for their completion function to return true.
        </p>
        <p></p>
        <p>
            To create a new test suite, add a new Web Form to the <span class="codeReference">ToolkitTests</span> project and
            select the <span class="codeReference">Default.master</span> master page.  Then add instances of your component to
            the Web Form that you will use in the tests.  Next, you need to create a <span class="codeReference">&lt;script&gt;</span>
            block that contains definitions of your test cases and test harness entry points.  If you were writing a test suite
            for <span class="codeReference">CascadingDropDown</span>, it would look something like this:
        </p>
        <code>
            
                <span style=" background: yellow; font-family: 'Lucida Console'; 
                    ">&lt;%</span><span style=" color: blue; font-family: 'Lucida Console';
                        ">@</span><span style=" font-family: 'Lucida Console';
                            "> <span style="color: maroon">Page</span></span>
                
                <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span><span style="color: red">Language</span><span
                        style="color: blue">="C#"</span></span>
                <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span><span style="color: red">CodeFile</span><span
                        style="color: blue">="CascadingDropDown.aspx.cs"</span></span>
                <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span><span style="color: red">Inherits</span><span
                        style="color: blue">="Automated_CascadingDropDown"</span></span>
                <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span><span style="color: red">Title</span><span
                        style="color: blue">="CascadingDropDown Tests"</span></span>
                <br />        
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span><span style="color: red">MasterPageFile</span><span
                        style="color: blue">="~/Default.master"</span></span>
                <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span><span style="color: red">EnableEventValidation</span><span
                        style="color: blue">="false"</span> <span style="background: yellow; ">
                            %&gt;</span></span>
                <br />  
                <span style=" color: blue; font-family: 'Lucida Console'; ">
                    &lt;</span><span style=" color: maroon; font-family: 'Lucida Console';
                        ">asp</span><span style=" color: blue; font-family: 'Lucida Console';
                            ">:</span><span style=" color: maroon; font-family: 'Lucida Console';
                                ">Content</span><span style=" font-family: 'Lucida Console';
                                    "> <span style="color: red">ID</span><span style="color: blue">="Content"</span></span><
                  <br />
                 <span style=" font-family: 'Lucida Console'; ">
                    <span style="color: blue"></span></span><span style=" font-family: 'Lucida Console';
                        "><span style="color: red">ContentPlaceHolderID</span><span style="color: blue">="SampleContent"</span></span>
                  <br />
                 <span style=" font-family: 'Lucida Console'; ">
                    <span style="color: blue"></span><span style="color: red">Runat</span><span style="color: blue">="Server"&gt;</span></span>
                  <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue"><span style="color: #000">
                         </span>&lt;</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span
                            style="color: maroon">DropDownList</span> <span style="color: red">ID</span><span
                                style="color: blue">="DropDownList1"</span></span>
                  <br />
                  <span style=" font-family: 'Lucida Console'; ">
                    <span style="color: blue"></span><span style="color: red">runat</span><span style="color: blue">="server"</span>
                    <span style="color: red">Width</span><span style="color: blue">="170"</span><span
                        style="color: #0000ff; ">&gt;</span></span>
                  <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span><span style="color: blue">&lt;</span><span
                        style="color: maroon">ajaxToolkit</span><span style="color: blue">:</span><span
                            style="color: maroon">CascadingDropDown</span> <span style="color: red">ID</span><span
                                style="color: blue">="CascadingDropDown1"</span></span>
                  <br />
                  <span style=" font-family: 'Lucida Console'; ">
                    <span style="color: blue"></span><span style="color: red">runat</span><span style="color: blue">="server"</span></span>
                  <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="color: red">  TargetControlID</span><span style="color: blue">="DropDownList1"</span>
                    
                </span>
                  <br />
            
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span><span style="color: red">Category</span><span
                        style="color: blue">="Make"</span></span>
                  <br />
                  <span style=" font-family: 'Lucida Console';
                    "><span style="color: blue"></span><span style="color: red">PromptText</span><span
                        style="color: blue">="Please select a make"</span><span style=""> </span></span>
                  <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span></span><span style=" font-family: 'Lucida Console';
                        "><span style="">  </span><span
                            style="color: red">ServicePath</span><span style="color: blue">="CarsService.asmx"</span></span>
                  <br />
                  <span style=" font-family: 'Lucida Console';
                    "><span style="color: blue"></span><span style="color: red">ServiceMethod</span><span
                        style="color: blue">="GetDropDownContents"</span> <span style="color: blue">/&gt;</span><span
                            style="">    </span><span style="color: blue">
                            </span></span>
                  <br />
                 <span style=" font-family: 'Lucida Console'; ">
                    <span style="color: blue">&lt;</span><span style="color: maroon">asp</span><span
                        style="color: blue">:</span><span style="color: maroon">Label</span> <span style="color: red">
                            ID</span><span style="color: blue">="Label1"</span> <span style="color: red">runat</span><span
                                style="color: blue">="server"</span></span>
                  <br />
                 <span style=" font-family: 'Lucida Console'; ">
                    <span style="color: blue"></span><span style="color: red">Text</span><span style="color: blue">="Label"&gt;&lt;/</span><span
                        style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Label</span><span
                            style="color: blue">&gt;</span></span>
                  <br />
                 <span style=" font-family: 'Lucida Console'; ">
                    <span style="color: blue">&lt;</span><span style="color: maroon">asp</span><span
                        style="color: blue">:</span><span style="color: maroon">Button</span> <span style="color: red">
                            ID</span><span style="color: blue">="Button1"</span> <span style="color: red">runat</span><span
                                style="color: blue">="server"</span></span>
                  <br />
                  <span style=" font-family: 'Lucida Console'; ">
                    <span style="color: blue"></span><span style="color: red">Text</span><span style="color: blue">="Button"</span>
                    <span style="color: red">OnClick</span><span style="color: blue">="Button1_Click"</span>
                    <span style="color: blue">/&gt;</span></span>
                  <br />
                <span style=" color: blue; font-family: 'Lucida Console'; ">
                    
                </span><span style=" font-family: 'Lucida Console'; ">
                    <span style="color: blue">&lt;</span><span style="color: maroon">script</span> <span
                        style="color: red">type</span><span style="color: blue">="text/javascript"&gt;</span></span>
                  <br />
                <span style=" color: blue; font-family: 'Lucida Console'; ">
                    <span style=""></span></span>
                  <br />
                <span style=" color: blue; font-family: 'Lucida Console'; ">
                    <span style="">  </span></span><span style="
                        color: green; font-family: 'Lucida Console';  ">
                        // Define the test cases</span>
          <br />
                <span style=" color: green; font-family: 'Lucida Console'; 
                    ">
                    
                </span>
                  <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue">&lt;/</span><span
                        style="color: maroon">script</span><span style="color: blue">&gt;</span></span>
                  <br />
                <span style=" color: blue; font-family: 'Lucida Console'; ">
                    &lt;/</span><span style=" color: maroon; font-family: 'Lucida Console';
                        ">asp</span><span style=" color: blue; font-family: 'Lucida Console';
                            ">:</span><span style=" color: maroon; font-family: 'Lucida Console';
                                ">Content</span><span style=" color: blue; font-family: 'Lucida Console';
                                    ">&gt;</span>

        </code>
        <p>
            Now, in the JavaScript block, we declare an array of strings called <span class="codeReference">typeDependencies</span> that
            contains the fully qualified JavaScript names of the components used in your test suite.  The test harness will wait for all
            of these objects to have been defined before running any of your tests.  This is critical; without it the tests will
            intermittently fail based on how long it takes to load the behaviors.
        </p>
        <p></p>
        <p>
            For the <span class="codeReference">CascadingDropDown</span> test suite, we have: 
        </p>
        <code>
            
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: green">// Script objects that should
                        be loaded before we run</span></span>
                        <br />
                <span style=" font-family: 'Lucida Console'; "><span