2

I have one weird scenario. I create a html page, add script tags to it. The script tags contain the UI component's js files, the component is fully developed using react js.

My html: enter image description here I use a local webserver to launch this page and able to see my component, in this case it is a 'modal'.

Modal: enter image description here

I write java selenium tests in a maven env to test this modal, and it tests it without any issues.

My requirement is now to get code coverage for this component by running my java selenium tests (or even test it manually).

Is this possible, doable. I did a lot of googling, couldn't find anything proper.

Any help is most appreciated.

4
  • 1
    It's possible if you're using a node application, see here: medium.com/@the1mills/… I think it would a huge effort if you're not using node/express as middleware. Because if using express you could use istanbul-middleware You could try to utilize your dev preview of frontend for your coverage, e.g. lkrnac.net/blog/2014/04/measuring-code-coverage-by-protractor Commented Aug 27, 2017 at 13:48
  • The first link u shared seems to be interesting, addressing my problem. I'm going to give it a try and keep u posted. Thanks again. Commented Aug 28, 2017 at 23:43
  • @hypery2k - This problem is solved. I followed the article,and it worked awesome!! Thank you so much!! Commented Sep 4, 2017 at 4:34
  • Just a summary of the steps: Commented Sep 4, 2017 at 22:30

1 Answer 1

4

Summary,inspired from the link posted above, but in bullets for some to simply follow.

  1. Add the istanbul dependency to your package.json

  2. Manually instrument the js file, by running this command

        istanbul instrument test.js >> test-instumented.js
    
  3. Allow your files to access this instrumented file instead of the original js file.

  4. Run a test run to see your page loads without any issues.
  5. Now for the actual run, add this coverage information script in your @AfterClass or after all your tests are run and before you close and quit your webdriver. enter image description here

  6. Now the coverage.json file is dumped with all the coverage information.

  7. It's time to generate the html report out of it. Go to your coverage.json directory and run the below command, and hit enter:

    istanbul report
    
  8. This would generate a directory called coverage, and in it you would find lcov.info files which you can pass it to sonarqube or open the html file to see the results.

Happy code coverage.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.