Loading Ext.js Application in test project

Get help with testing, discuss unit testing strategies etc.
User avatar
shamona95
Posts: 13
Joined: Thu Mar 14, 2019 5:42 pm

Loading Ext.js Application in test project

Post by shamona95 » Tue Jul 02, 2019 11:28 am

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 ?

User avatar
mats
Core Developer
Core Developer
Posts: 15358
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Loading Ext.js Application in test project

Post by mats » Tue Jul 02, 2019 11:29 am

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.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
shamona95
Posts: 13
Joined: Thu Mar 14, 2019 5:42 pm

Re: Loading Ext.js Application in test project

Post by shamona95 » Tue Jul 02, 2019 11:34 am

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 ?

User avatar
mats
Core Developer
Core Developer
Posts: 15358
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Loading Ext.js Application in test project

Post by mats » Tue Jul 02, 2019 11:45 am

Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
shamona95
Posts: 13
Joined: Thu Mar 14, 2019 5:42 pm

Re: Loading Ext.js Application in test project

Post by shamona95 » Wed Jul 03, 2019 11:36 am

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 ?

User avatar
nickolay
Core Developer
Core Developer
Posts: 3383
Joined: Mon May 16, 2011 10:48 am

Re: Loading Ext.js Application in test project

Post by nickolay » Thu Jul 04, 2019 8:46 pm

Do you use Sencha Cmd in your project?
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
shamona95
Posts: 13
Joined: Thu Mar 14, 2019 5:42 pm

Re: Loading Ext.js Application in test project

Post by shamona95 » Fri Jul 05, 2019 8:56 am

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` .

User avatar
nickolay
Core Developer
Core Developer
Posts: 3383
Joined: Mon May 16, 2011 10:48 am

Re: Loading Ext.js Application in test project

Post by nickolay » Fri Jul 05, 2019 10:35 am

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.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
shamona95
Posts: 13
Joined: Thu Mar 14, 2019 5:42 pm

Re: Loading Ext.js Application in test project

Post by shamona95 » Fri Jul 05, 2019 12:50 pm

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

User avatar
nickolay
Core Developer
Core Developer
Posts: 3383
Joined: Mon May 16, 2011 10:48 am

Re: Loading Ext.js Application in test project

Post by nickolay » Fri Jul 05, 2019 2:11 pm

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.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

Post Reply