Get help with testing, discuss unit testing strategies etc.


Post by Hakim »

Hi all,
I have started to use your tool for unit testing an extjs app. The problem is about how to generate Code Coverage Report.
Here is the command I am using to generate that report:
siesta-5.3.1-standard/bin/webdriver localhost:1841/myApp/test/Siesta/coverage/index.html --coverage-report-format=HTML --report-file Dev/webex/myApp/test/Siesta/coverage/report.html
I have this error:
The project page you are targeting contains Siesta Lite distribution. To use automation facilities, 
make sure project page uses `siesta-all.js` from Standard or Trial packages
Here are the configurations I have:
test.js
const project = new Siesta.Project.Browser.ExtJS();
const t = Siesta.Test;

project.configure( {
        title: 'Test Runner',
        viewDOM: true,
        enableCodeCoverage: true,
        preload: [
            {
                type: 'js',  // optional if file ends with ".js"
                instrument: true
            }
        ],
        //...
        })
        project.plan(
    {
        group: 'My App Tests',
        collapsed: true,
        items: [
            {
                group: 'Integration Tests',
                testClass: //myClassName
                items[]
            },
           {
                group: 'Unit Tests',
                testClass: //className,
                items:[]
                }
                
                {
                group: 'UI Test'
                testClass: //className,
                items:[]
                }
                //...
                );
                project.start();

test.htm
<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <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/siesta-all.js"></script>

    <!--<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.7/build/classic/theme-triton/resources/theme-triton-all.css"></script>-->
    

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


</head>
<body>
</body>
</html>
The error is pointing siesta-all.js, but I have it. And the report blinks once and disappears back. Am I missing something?
Last edited by Hakim on Wed Mar 11, 2020 5:11 pm, edited 1 time in total.

Post by nickolay »

Hi,

The error message indicates, that the `siesta-all.js` file, that is loaded by the project page (localhost:1841/myApp/test/Siesta/coverage/index.html) is from the Siesta-lite package. Make sure it loads the "siesta-all.js" from the "siesta-5.3.1-standard" folder.

Post by Hakim »

hi,
Thanks for the quick reply. That's really strange. I have upgraded the siesta version recently(less than a week). And `siesta-all.js` comes from `siesta-5.3.1-standard`

Post by Hakim »

here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>UNIT CODE COVERAGE</title>
    <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">

    <link rel="stylesheet" type="text/css" href="css/siesta-coverage-report.css">

    <script type="text/javascript" src="siesta-coverage-report.js"></script>

    <script type="text/javascript">
        Ext.onReady(function () {
            new Ext.Viewport({
                layout : 'fit',
                items  : {
                    xtype      : 'coveragereport',
                    standalone : true,
                    dataUrl    : 'coverage-data.json'
                }
            });
        });

    </script>
</head>
<body>
</body>
</html>
Really, I reviewed everything back but couldn't find a way to fix the error.

Post by nickolay »

Ah, it seems you are pointing the webdriver launcher (the /bin/webdriver executable) to the "index.html" file of the coverage report. Should point instead to the project file

Post by Hakim »

you mean by project file, the index.html of the main app?

Post by nickolay »

No, the index.html of the siesta project. If I'm correct in your setup its named "test.html"

Post by Hakim »

In fact, I have tried that before. It loads the app and executes tests one by one but doesn't give any report similar to this
Image

Post by nickolay »

To clarify, to generate a coverage report for your test suite, you need to launch the test suite, with additional options: `--coverage-report-format` and `--coverage-report-dir`. The latter option has a default value of "./coverage/", which means, that, after you've launched a test suite, a coverage report will be saved in the "coverage" directory in the current working directory.
siesta-5.3.1-standard/bin/webdriver localhost:1841/myApp/test/PATH_TO_MY_TEST_SUITE_PROJECT/test.html --coverage-report-format=HTML --coverage-report-dir PATH_TO_RESULT_COVERAGE_REPORT_DIR
The coverage report contains its own "index.html" file, which should not be confused with the siesta test suite project file, which is also often called "index.html".

As a first step, make sure you can launch a test suite and receive an output from it in the console. As a 2nd step, add the `--coverage-report-format` option. See also the guide about code coverage in Siesta: https://www.bryntum.com/docs/siesta/#!/guide/code_coverage

Post by Hakim »

Thanks a lot Mr Nickolay. That works out fine :).

One more question: I could see this from the generated index.htmlImage.

However, I need to see my files's names, something similar to the image I sent previously.
Am I missing something?
Last edited by Hakim on Thu Mar 12, 2020 3:18 pm, edited 1 time in total.

Post Reply