automatedtesting.aspx

AJAX 应用 实现页面的无刷新

                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>testValuesAfterFirstSelected);</span>
        </code>
        <p>
            To add a postback step, simply call <span class="codeReference">test.addPostBack(element);</span> where the
            <span class="codeReference">element</span> is a link, button, form, etc., that will cause a postback when
            clicked or submitted.  When the test case is run and a postback occurs, the test harness will automatically
            resume processing the test on the <i>next step after the postback</i> when the page has reloaded.  The
            following test case from the <span class="codeReference">CascadingDropDown</span> test suite shows an example
            of using a postback step:
        </p>
        <code>
            
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: green">// Values preserved on postback</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue">var</span> test = testHarness.addTest(<span
                        style="color: maroon">'Values preserved on PostBack'</span>);</span>
            
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>test.addStep(function() {},</span>
            <br />
                 <span style=" font-family: 'Lucida Console'; ">
                    checkLoaded(drop1, drop4, drop5, drop6));</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>test.addStep(testInitialState);</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>test.addStep(setSelectedIndex(drop1, 3),</span>
            <br />
                 <span style=" font-family: 'Lucida Console'; ">
                    checkLoaded(drop1, drop2),
                    
                </span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>testValuesAfterFirstSelected);</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>test.addPostBack(btn);</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>test.addStep(empty,</span>
            <br />
                 <span style=" font-family: 'Lucida Console'; ">
                    checkLoaded(drop1, drop2, drop4, drop5, drop6));</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>test.addStep(testValuesAfterFirstSelected);</span><span
                        style="font-size: 10pt; font-family: 'Verdana','sans-serif'; "></span>
        </code>
        <p>
            To define the test cases, we will need to provide the test steps with functions that actually operate on the component.
            It is very important to note that the test steps <i>can only take functions with no parameters</i>, so if we have a function
            that needs parameters, wrap it in a parameterless function (for an example, see <span class="codeReference">setSelectedIndex</span>
            below).  These functions can use the utility functions of the test harness to make them easier to write.  
        </p>
        <p></p>
        <p>
            The utility functions will be familiar to those using TDD and include:
        </p>
            <ul>
                <li><span class="codeReference">assertTrue(condition, 'message')</span></li><li><span class="codeReference">assertFalse(condition, 'message')</span></li><li><span class="codeReference">assertEqual(objA, objB, 'message')</span></li><li><span class="codeReference">assertNotEqual(objA, objB, 'message')</span></li><li><span class="codeReference">assertNull(obj, 'message')</span></li><li><span class="codeReference">assertNotNull(obj, 'message')</span></li><li><span class="codeReference">fireEvent(element, 'eventName')</span></li></ul>
        <p>
            For the <span class="codeReference">CascadingDropDown</span> test suite, we could add the following test functions:
        </p>
        <code>
            
                <span style=" color: green; font-family: 'Lucida Console'; ">
                    // Check if the drop down elements passed as arguments</span>
            <br />
                <span style="font-size: 10pt; font-family: Consolas; "><span style="">
                </span></span><span style=" color: green; font-family: 'Lucida Console';
                    ">// are loaded by seeing if they have been enabled</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue">function</span> checkLoaded()
                    {</span>
            <br />
                <span style=" color: green; font-family: 'Lucida Console'; ">
                    <span style=""> </span>// ...</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>}</span>
            <br />
                <span style=" font-family: 'Lucida Console'; ">
                    
                </span>
            <br />
            
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: green">// Ensure the dropdown is
                        properly enabled</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue">function</span> checkEnabled(dropdown)
                    {</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span>testHarness.assertTrue(!dropdown.disabled,</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span><span style="color: maroon">"Drop down
                        '"</span> + dropdown.id + <span style="color: maroon">"' should be enabled"</span>);</span>
            <br />
                <span style=" font-family: 'Lucida Console'; ">}</span>
            <br />
                <span style=" font-family: 'Lucida Console'; ">
                    
                </span>
            <br />
                <span style=" color: green; font-family: 'Lucida Console'; ">
                    <span style=""></span>// ...</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">    </span>
                    <br />
                    <span style=""></span><span style="color: green">// Set the selected
                        index of a drop down and</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: green">// force the onChange event
                        to be fired</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue">function</span> setSelectedIndex(dropdown,
                    index) {</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue"> return</span>
                    <span style="color: blue">function</span>() {</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span>dropdown.selectedIndex = index;</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="">  </span>testHarness.fireEvent(dropdown, <span
                        style="color: maroon">'onchange'</span>);</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span>};</span>
            <br />
                <span style=" font-family: 'Lucida Console'; ">}</span>
            <br />
                <span style=" font-family: 'Lucida Console'; ">
                    
                </span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: green">// Test the initial state</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue">function</span> testInitialState()
                    {</span>
            <br />
                <span style=" color: green; font-family: 'Lucida Console'; ">
                    <span style=""></span> // ...</span>
            <br />
                <span style=" font-family: 'Lucida Console'; ">}</span>
            <br />
                <span style=" font-family: 'Lucida Console'; ">
                    
                </span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: green">// Ensure the last dropdowns
                        respond after a selection</span></span>
            <br />
                // <span style=" font-family: 'Lucida Console'; "><span
                    style="color: green">in the first</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue">function</span> testValuesAfterFirstSelected()
                    {
                    
                </span>
            <br />
                <span style=" color: green; font-family: 'Lucida Console'; ">
                    <span style=""> </span>// ...</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>}</span>
            <br />
                <span style=" font-family: 'Lucida Console'; ">
                    
                </span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: green">// Ensure the last dropdown
                        responds after a selection</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style="color: green">// in the second</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span><span style="color: blue">function</span> testValuesAfterSecondSelected()
                    {</span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""> </span><span style="color: green">// ...</span></span>
            <br />
                <span style=" font-family: 'Lucida Console'; "><span
                    style=""></span>}</span><span style=" font-family: 'Lucida Console'"></span>
        </code>
        <p>
            We can now start the test harness by viewing <span class="codeReference">Default.aspx</span> of the
            <span class="codeReference">ToolkitTests</span> project and select our test suite to run.
            For the automated <span class="codeReference">CascadingDropDown.aspx</span> test suite and tests for the rest 
            of the toolkit controls, see the <span class="codeReference">ToolkitTests</span> project.
        </p>
    </div>
</asp:Content>