Karma VSCode Extension - Create User Guide

Challenge Objectives

• Create a detailed user guide for the Karma VSCode Extension

Project Background

Karma is a Javascript test runner, you can use Karma to run your tests by choosing either Jasmine or Mocha as the testing framework. They are an essential part of modern software development because they allow the developer to write tests before the actual code for the feature or defects under development.  The tests are committed to the repo along with the project source files.  These tests are executed by the CI/ CD system to verify that the integrated code works as designed (or at least as far as it is tested). Other developers run these tests while they are coding and before deployment.  If any of these checks fail during development,  work halts and the focus switches to fixing the failed test.  This new approach has lead to the continuous integration of software on a daily or even hourly basis. For this reason, it is imperative that the testing experience is integrated into the developer's process. Microsoft's VS code is a lightweight developer IDE that is free and has a robust ecosystem of extensions. The goal of this challenge is to create a Karma vscode extension with similar functionality as the Karma Webstorm plugin. 

We have run many challenges to create this VSCode extension:

• Create Test Explorer: http://www.topcoder.com/challenge-details/30069929/?type=develop&noncache=true
• Create Test Explorer Part 2: http://www.topcoder.com/challenge-details/30070440/?type=develop&noncache=true
• Implement Coverage: http://www.topcoder.com/challenge-details/30070660/?type=develop&noncache=true
• Support Angular Projects: http://www.topcoder.com/challenge-details/30072384/?type=develop&noncache=true
• We also run many f2f tasks to make the extension support the NX Angular projects as well. 

Technology Stack

• VSCode extension
• Karma
• Angular 4+
• Nx: https://nrwl.io/nx/

Code access

Please request the gitlab repo access in the forum. 
 

Individual requirements

Please update the README.md to create a user guide similar as the one for Mocha-Sidebar VSCode Extension:  https://github.com/maty21/mocha-sidebar. 

The followings are required:

• Overview
• GIFs to demonstrate the major features of the Karma VSCode Extension, and a video if it's more helpful. 
• List of features supported by this extension
• Known issues - other than the similar Coverage issue as the Mocha-Sidebar, it also has the following issue: 
  • When I click ‘debug’ the first time for specific test, the breakpoint is just skipped, but then if click it a 2nd time, the breakpoint works.
    This is because breakpoints set before the debugger launches are not hit.
    VSCode actually fixes this here <a>https://code.visualstudio.com/blogs/2017/12/20/chrome-debugging#_breakpoints-set-before-your-app-runs</a> but it only works if Chrome is launched by VSCode Debugger. It allows a breakOnLoad option inside launch.json for the chrome config with “launch”
    But for the extension, karma launches chrome so launch.json has chrome config with “attach” which does not allow a breakOnLoad option.
• FAQ
• Configuration
• Usage
• How it works

Note that this extension depends upon the debugger-for-chrome and the vscode-coverage-gutters vscode extension, this should be mentioned. 
And it should make clear that it supports Karma, Angular, and NX projects.

You can also be creative to add useful items in the user guide. 
We will review all submissions and select a winner. 

Final Submission Guidelines

- Updated README with detailed guide