I translated an article "Sencha application UI test" yesterday, which contains a sample application, but I did not elaborate on how to write it, this article describes this example.
First, let's take a look at the qatest startup page index.html ui-tests \ app directory ):[Html]View plaincopy
- <! DOCTYPE html>
- <Html>
- <Head>
- <! -- Ext JS -->
- <Link rel = "stylesheet" type = "text/css" href = "http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css">
- <Script type = "text/javascript" src = ".../resources/extjs-4.1.0/ext-all-debug.js"> </script>
- <! -- Siesta -->
- <Link rel = "stylesheet" type = "text/css" href = ".../resources/siesta-1.1.5-lite/resources/css/siesta-all.css">
- <Script type = "text/javascript" src = ".../resources/siesta-1.1.5-lite/siesta-all.js"> </script>
- <! -- The test harness -->
- <Script type = "text/javascript" src = "index. js"> </script>
- </Head>
- <Body>
- </Body>
- </Html>
The Code contains references from Ext JS and Siesta. The actual execution file should be index. js. The Code is as follows:
[Javascript]View plaincopy
- Var Harness = Siesta. Harness. Browser;
- Harness. configure ({
- Title: 'sencha UI Test Demo-Application Tests ',
- HostPageUrl: '.../../index.html ',
- Preload :[
- '../.../Resources/sinon-1.5.2.js ',
- 'Api _ stub. js'
- ]
- });
- Harness. start (
- {
- Group: 'Basic application layout ',
- Items :[
- {
- Title: 'test tabs for data in grids ',
- Url: 'tests/01_tabs.js'
- },
- {
- Title: 'test double-click functionality ',
- Url: 'tests/02_rsvp00000000js'
- }
- ]
- }
- );
The code first points Harness to Siesta. Harness. Browser to facilitate code writing. Configure for startup ). In the configuration, the title should be the title. The next is the hostPageUrl, which can be known as the application startup page based on the address. Preload is the file to be preloaded. sinon is used to organize data. api_stub.js uses this to generate the returned data. The next step is to execute the start method and start running the test. Two items are set in the test. One is to call 01_tabs.js, the other is to call 02_rsvp;.js, and the two items on the left of the graph are displayed on the page. Next, let's take a look at the file 02_rsvp0000.js. The typical code is as follows:
[Javascript]View plaincopy
- StartTest (function (t ){
- Var tabPanel, upcomingEvents, pasteven ts;
- T. chain (
- {WaitFor: 500}, // Allow time for the application to render
- // Also try to give the Meetup.com API time to return... see note below
- Function (next ){
- // Set references after rendering
- TabPanel = Ext. ComponentQuery. query ('tabpanel ') [0];
- UpcomingEvents = tabPanel. items. getAt (0 );
- Pasteven Ts = tabPanel. items. getAt (1 );
- Next ();
- },
- Function (next ){
- T. diag ('test that the upcoming event grid displays an RSVP popup when a row is double-clicked .');
- T. doubleClick (upcomingEvents. el. down ('. x-grid-row'). dom, function (){
- Var win = Ext. ComponentQuery. query ('rsvpwindow') [0];
- T. is (win. isHidden (), false, 'rsvpwindow shocould be visible .');
- Win. close ();
- Next ();
- });
- },
- Function (next ){
- T. diag ('Switch tabs ');
- // Click on the past events tab
- T. click (tabPanel. el. query ('. x-tab') [1], next );
- },
- {WaitFor: 500}, // allow animation to complete
- Function (next ){
- T. diag ('test that the past event grid displays an RSVP popup when a row is double-clicked .');
- T. doubleClick (pasteven ts. el. down ('. x-grid-row'). dom, function (){
- Var win = Ext. ComponentQuery. query ('rsvpwindow') [0];
- T. is (win. isHidden (), false, 'rsvpwindow shocould be visible .');
- Win. close ();
- Next ();
- });
- }
- );
- });
I read two files in a fixed format, both of which start with "StartTest (function (t) {", and then write the test function in JSON format in t. chain. First, obtain the component to be tested. The doubleClick In the second function indicates that it is used to test the double-click operation of the Grid row. The key here is that the first parameter needs to find the HTML element to be tested. If the pop-up window shows correct, close can be executed correctly. The third function is switched to the test tab. The key is to know how to find elements. The 4th functions are also used to test the double-click operation of the Grid row.
In general, writing test code will not be too difficult. The key point is to master some methods of Siesta and to correctly obtain the elements of the components to be tested.
This article from the "yellow light bridge blog", please be sure to keep this source http://dqhuang.blog.51cto.com/2522725/1117986
