Karate: Improving JUnit HTML Report

[athityakumar]

Hey @ptrthomas.

I found this issue listed in the "Challenge 2018" sheet and would like to try contributing to this. Being a beginner to Java, the Karate repository seems quite huge to self-read from. If you don't mind, can you please refer me to what'd be the 'important" files/snippets to change?

[ptrthomas]

@athityakumar sure. you should be able to do this by changing one single file, this one: https://github.com/intuit/karate/blob/master/karate-core/src/main/java/com/intuit/karate/cucumber/KarateHtmlReporter.java

It uses a home-grown approach to emit HTML, which actually uses the Karate XML support behind the scenes. The reason for this is to reduce the library "footprint" of Karate. Finally it is nothing but assembling a bunch of XML (HTML) nodes with the right children, text-content and attributes.

I hope you were able to build the project from the command-line at least ref #304 - then all you need to do is run any of the tests from the command line and keep tweaking.

[athityakumar]

@ptrthomas - Yes, I've been able to build the project from command line. I'm currently working on the tweaking part. I am able to consider 2 ways of doing this task of sidebar + collapsible accordions:

1. Purely Java and org.w3c.dom Nodes : Inserting more XML nodes with repetitive data / color-codes, and saving it all into the HTML file.
2. Javascript: Using Javascript to generate the sidebar on-the-fly (while viewing the HTML files), from the existing XML node set. In fact, collapsible accordions would have to be done with Javascript for "interactivity".

IMO, it'd also be DRYier to implement (2) rather than (1). But I just wanted to know your opinion before proceeding further. 😄

[ptrthomas]

@athityakumar (2) is A-OK :) if you want to use a lib - to start with you can use a CDN like this example (JQuery here, but feel free to pick whatever works for you) https://github.com/intuit/karate/blob/develop/karate-demo/src/test/java/mock/web/cats.html

does that help ?

[athityakumar]

Thanks for assigning this issue to me, @ptrthomas. 😄

I definitely considered using a CDN like JQuery, but making a request to JQuery each time while opening the report seemed a bit unnecessary to me - especially when the functionality could be delivered by a few more lines of CSS & JS. So, I've opened PR #316 (WIP) that adds support to the left sidebar for navigating across different test cases. Next, I'll try to get "accordion"-like view for the raw logs, so that they can be disclosed when required.

Please have a look at the above PR when you're free and let me know if any changes (regarding color, ordering of data, etc.) are required in the sidebar part.

[ptrthomas]

@athityakumar

especially when the functionality could be delivered by a few more lines of CSS & JS

couldn't agree more !

so you will see my commit that has just gone in, I think these should be self explanatory:
https://github.com/intuit/karate/blob/19d2b7d44042dd085daecfd18815bd4b40f569b1/karate-core/src/main/resources/report-template.html
https://github.com/intuit/karate/blob/19d2b7d44042dd085daecfd18815bd4b40f569b1/karate-core/src/main/resources/report-template.js

This is great, please proceed.

[athityakumar]

Thanks a lot for refactoring the CSS & JS codes into separate files - Yes, they were quite self-explanatory and much more easier to write too!

I've submitted PR #317 to handle the accordion-view of raw logs. Please review when you're free. 😄