Unit Test Coverage Report

Get help with testing, discuss unit testing strategies etc.


User avatar
Hakim
Posts: 58
Joined: Fri Apr 26, 2019 3:00 pm

Unit Test Coverage Report

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:

Code: Select all

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:

Code: Select all

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

Code: Select all

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

Code: Select all

<!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="http://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.

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

Re: Unit Test Coverage Report

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

User avatar
Hakim
Posts: 58
Joined: Fri Apr 26, 2019 3:00 pm

Re: Unit Test Coverage Report

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`

User avatar
Hakim
Posts: 58
Joined: Fri Apr 26, 2019 3:00 pm

Re: Unit Test Coverage Report

Post by Hakim »

here is my index.html:

Code: Select all

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

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

Re: Unit Test Coverage Report

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

User avatar
Hakim
Posts: 58
Joined: Fri Apr 26, 2019 3:00 pm

Re: Unit Test Coverage Report

Post by Hakim »

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

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

Re: Unit Test Coverage Report

Post by nickolay »

No, the index.html of the siesta project. If I'm correct in your setup its named "test.html"
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
Hakim
Posts: 58
Joined: Fri Apr 26, 2019 3:00 pm

Re: Unit Test Coverage Report

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

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

Re: Unit Test Coverage Report

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.

Code: Select all

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

User avatar
Hakim
Posts: 58
Joined: Fri Apr 26, 2019 3:00 pm

Re: Unit Test Coverage Report

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