Page 1 of 2

Loading Ext.js Application in test project

Posted: Tue Jul 02, 2019 11:28 am
by shamona95
We have an extjs application and i'm implementing ui tests , i have faced with a problem when i wanted to use some classes which were created in app folders,
application is undefined in test project . so i can not use any of the them , i tried adding the directory of some classes in `test.html` , (like by adding script tags) , but it makes the code lines really long and also repetitive, also `test` folder is in app root dir.

i guess there should be a better way to load all the application files in test project without addressing them one by one .

i have tried these ways :
  • `preload` config , in project descriptor , but files weren't loaded .
  • `loaderPath` config , i gave app's path . still it was undefined .
  • put `test.html` wrapper near the index.html file of app .
how can i achieve my aim ?

Re: Loading Ext.js Application in test project

Posted: Tue Jul 02, 2019 11:29 am
by mats
You should make a build of your app, but that doesn't start the app so you get access to all the classes but not with application started. Then you can test UI components easily in isolation.

Re: Loading Ext.js Application in test project

Posted: Tue Jul 02, 2019 11:34 am
by shamona95
thanks for your response , that's the exact thing i want , getting access to all the classes .
but i got a bit confused , can u please explain where should i load the build file of app ?

Re: Loading Ext.js Application in test project

Posted: Tue Jul 02, 2019 11:45 am
by mats

Re: Loading Ext.js Application in test project

Posted: Wed Jul 03, 2019 11:36 am
by shamona95
I have read the guide completely, but the part about generating `build` version of app wasn't again that much clear for me , also i wanted to follow the images for every step but they had `404 error`.

https://www.evernote.com/l/ASK-XRo61fRNF4LNeSsabgyWnfMyLXPH5ZMB/image.png

Im new to test structure, can you please guide me through that? Siesta should run with build version ?

Re: Loading Ext.js Application in test project

Posted: Thu Jul 04, 2019 8:46 pm
by nickolay
Do you use Sencha Cmd in your project?

Re: Loading Ext.js Application in test project

Posted: Fri Jul 05, 2019 8:56 am
by shamona95
Yes we are using sencha cmd,
I read siesta documentation and followed all the steps but still application in undefined in tests . after running the ui tests i can see my application files in `source` tab but i can not access to any of them .
if i want to use any classes or objects in test files , throws error which is `undefined` .

Re: Loading Ext.js Application in test project

Posted: Fri Jul 05, 2019 10:35 am
by nickolay
I read siesta documentation and followed all the steps but still application in undefined in tests
Can you provide more details? Step by step to reproduce this?

What Siesta basically does, it opens your application in the iframe, the url of which can be specified with the `pageUrl` config. The first step will be to see your application running as the Siesta test, in the iframe.

Re: Loading Ext.js Application in test project

Posted: Fri Jul 05, 2019 12:50 pm
by shamona95
application runs correctly in siesta iframe after each test, and files of application are in sources tab , but when i try to use them in console it gives me `undefined` error.

about the details i will start with the directories , which as document says , i created a test folder in app root directory .

--MyApp
  • app
  • classic
  • modern
  • resources
  • sass
  • test
    • Siesta
      • ui-tests
      • index.js
      • test.html
here is test.html file :

Code: Select all

<!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>Test Runner | Siesta</title>

    <!-- Siesta CSS -->
    <link rel="stylesheet" type="text/css" href="resources/css/siesta-all.css">

    <!-- Siesta application -->
    <script type="text/javascript" src="resources/js/siesta-all.js"></script>

    <!-- Additional Siesta files, not required if you don't use code coverage feature -->
    <script type="text/javascript" src="resources/js/siesta-coverage-all.js"></script>

	<!-- these two scripts are commented because they throw error in console .-->
    <!--<script type="text/javascript" src="test/Siesta/resources/js/ext-all-debug.js"></script>-->
    <!--<script type="text/javascript" src="http://bryntum.com/examples/extjs-6.0.1/build/classic/theme-triton/resources/theme-triton-all.css"></script>-->

    <!-- Here i have defined test classes-->
    <script src="ui-tests/genericActions.js" type="text/javascript"></script>
    <script src="ui-tests/monkeyTestsClass.js" type="text/javascript"></script>

    <!-- here i have added the classes directly from MyApp itself-->
    <script src="../../app/globals/List.js" type="text/javascript"></script>
    <script src="../../app/mixins/DateTime.js" type="text/javascript"></script>
    <script src="../../app/mixins/Component.js" type="text/javascript"></script>

    <!-- The test project -->
    <script type="text/javascript" src="index.js"></script>


</head>
<body>
</body>
</html>
and i created index.js test descriptor in this way :

Code: Select all

let project  = new Siesta.Project.Browser.ExtJS();

project.configure(
    {
    title: 'Test Runner',
    viewDOM: true,
    enableCodeCoverage: true,
    autoScrollElementsIntoView: true,
    transparentEx: true,
    viewportHeight: 1150,
    viewportWidth: 900,
    coverageUnit: 'file',
    runCore: 'sequential',
    separateContext: true,
    testTimeout: 2000,
    waitForAppReady: true,
    performSetup: true,
    forceDOMVisible: false,
    defaultTimeout: 80000,
    subTestTimeout: 60000,
    recorderConfig: {
        recordMouseMoveOnIdle: true,
        recordPointsOfInterest: true,
        recordMouseMovePath: false,
        recordScroll: false,
        recordInitialWindowSize: false
    },
    overrideSetTimeout : false,
    
    MonkeyChains: function(submodule, ent, scope){

        scope.it(submodule + ' SubModule : Monkey Testing', function(scope){
            scope.chain(
                function(next){
                    scope.chain(
                        scope.chain({navigation: submodule}),
                        scope.chain({upperToolbar: submodule}),
                        scope.chain({grid: ent}),
                        scope.chain({CloseActiveTab: submodule}), next);
                });
        });
    }
});

project.start(
    {

        group: 'Application Monkey Tests',
        waitForAppReady: true,
        testClass: Siesta.Test.MonkeyTestsClass,
        isReadyTimeout: 80000,
        waitForTimeout: 80000,
        items: [
            RunTestCases('monkeyTest', null, testFolder),
        ]
    },
);
about `RunTestCases` , it's a function which returns the same thing as it should be in items config to run test files .
i don't know which part i did something wrong . I appreciate any help . thanks

Re: Loading Ext.js Application in test project

Posted: Fri Jul 05, 2019 2:11 pm
by nickolay
but when i try to use them in console it gives me `undefined` error.
In console, do you switch to the iframe of the test? Remember, Siesta creates one central iframe for project, but then application is loaded in different iframe, so its files will not be available in the main console. In the left-top corner of the Chrome debugger there's a combo-box for choosing the current iframe.