Get help with testing, discuss unit testing strategies etc.


Post 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 ?

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

Post 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 ?

Post by mats »


Post 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 ?

Post by nickolay »

Do you use Sencha Cmd in your project?

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

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

Post 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 :
<!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="https://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 :
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

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

Post Reply