Introduction
-----------

For the general information about using Siesta in browser environment, please refer to this 
guide <a href="#!/guide/getting_started_browser">Getting started with Siesta in browser environment</a>

This guide describes the Siesta extensions, targeting the environment for testing [Sencha](https://www.sencha.com/) code.


Specialized classes
-------------------

The only difference with plain browsers setup, is that you need to use {@link Siesta.Project.Browser.ExtJS} class for project creation:  

    const project = new Siesta.Project.Browser.ExtJS();
    
    project.configure({
        title       : 'ExtJS test suite',
        
        preload     : [
            '../../ext-6.5.2/build/classic/theme-triton/resources/theme-triton-all.css',
            '../../ext-6.5.2/build/ext-all-debug.js',
            '../../ext-6.5.2/build/classic/theme-triton/theme-triton.js'
        ]
    });
    
    project.plan(
        '010_sanity.t.js',
        '020_basic.t.js'
    );
    
    project.start();

The HTML wrapper file for the project does not change. There are several Sencha-specific configuration option, most important are: 
{@link Siesta.Project.Browser.ExtJS#waitForAppReady waitForAppReady}, {@link Siesta.Project.Browser.ExtJS#requires requires}, 
{@link Siesta.Project.Browser.ExtJS#loaderPath loaderPath}.

The `StartTest` wrapper in the test file will receive an instance of the {@link Siesta.Test.ExtJS} class. This class contains various
ExtJS specific assertions.

    StartTest(t => {
    
        t.it("Sanity", t => {
        
            t.waitForCompositeQuery('mypanel => .x-body', () => {
            })
            
            t.matchGridCellContent(panel, 1, 3, "cell text", "Correct text in the grid cell row = 1, column = 3") 
        });
    })    

Please refer to the documentation for the full list of supported assertions / helper methods.



ActionTarget extensions
--------------------

When using {@link Siesta.Test.ExtJS} class, methods, that accepts target element / CSS query for user action simulation (like `click, type` etc), 
also accept composite query - Siesta's extension for targeting DOM elements. Please refer to the {@link Siesta.Test.ExtJS#compositeQuery compositeQuery}
method and {@link Siesta.Test.ActionTarget} for more information. 


Sencha Touch support
--------------------

Sencha Touch framework is superseded by the Modern toolkit in the ExtJS, however testing Sencha Touch code is still supported.
Use the {@link Siesta.Project.Browser.SenchaTouch} for the project class. The test class will be {@link Siesta.Test.SenchaTouch}. 


Advanced setup
---------

For own user interface, which is loaded on the project page, Siesta uses an optimized build of ExtJS, compiled with Sencha Cmd.
Only the classes, actually used in the Siesta UI, are included in the "siesta-all.js" file. If you found that you need
some extra ExtJS class in your project file, you can use alternative setup, as shown below. 
Note, that Siesta UI requires ExtJS version 6.0.1 precisely.   

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
            
            <title>Sample project</title>
            
            <link rel="stylesheet" type="text/css" href="__SIESTA_FOLDER__/resources/css/siesta-all.css">
            
            <script type="text/javascript" src="__EXTJS_6.0.1_FOLDER__/build/ext-all-debug.js'"></script>
            <script type="text/javascript" src="__EXTJS_6.0.1_FOLDER__/build/classic/theme-triton/theme-triton.js"></script>
            <script type="text/javascript" src="__SIESTA_FOLDER__/siesta-no-ext-all.js"></script>
            
            <script type="text/javascript" src="index.js"></script>
        </head>
        
        <body>
        </body>
    </html>




Buy this product
---------

Visit our store: <https://bryntum.com/store/siesta>


Support
---------

Ask question in our community forum: <https://www.bryntum.com/forum/viewforum.php?f=20>

Subscribers can post expedited questions in Premium Forum: <https://www.bryntum.com/forum/viewforum.php?f=21>

Please report any bugs through the web interface at <https://www.assembla.com/spaces/bryntum/support/tickets>


See also
---------

Siesta web-page: <https://bryntum.com/products/siesta>

Other Bryntum products: <https://bryntum.com/products>



Attribution
---------

This software contains icons from the following icon packs (licensed under Creative Common 2.5/3.0 Attribution licenses)

- <http://www.famfamfam.com/lab/icons/silk/>
- <http://led24.de/iconset/>
- <http://p.yusukekamiyamane.com/>
- <http://rrze-icon-set.berlios.de/index.html>
- <http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/>
- <http://www.doublejdesign.co.uk/products-page/icons/super-mono-icons/>
- <http://pixel-mixer.com/>

Thanks a lot to the authors of the respective icons packs.


COPYRIGHT AND LICENSE
---------

Copyright (c) 2009-2018, Bryntum & Nickolay Platonov

All rights reserved.