Key Information

Register
Submit
The challenge is finished.

Challenge Overview

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. 

The UI of the Karma vscode extension should resemble the Mocha Sidebar vscode extension (https://github.com/maty21/mocha-sidebar). 
This challenge is responsible for implementing the test explorer, which shows a tree view of all tests. 


The test explorer should cover the following requirements:
  • There should be buttons on the header bar of test explorer to: run all tests, run failed tests, stop test,collapse/expand tests, filter passed or failed tests.  Only "run all tests" button is in scope for this challenge. But your implemention should make the other buttons easy to implement later. 
  • The tests should be displayed in a tree view (like Webstorm Karma plugin) in test explorer
  • All tree items should have an icon indicating the corresponding test(s) pass or fail
  • All tree items should have badge showing the duration of the corresponding test(s) in milli-seconds (ms)
  • Click on the tree item, navigate to the corresponding test in the source test file
  • The karma-server terminal should be attached to VSCode when tests start running, logs should be generated in output panel too in Karma channel.
Note that for the time duration, we expect it to be displayed on the right side in the same way as the Webstorm Karma Plugin. Please do necessary research to make it work, and here are some ideas:
  • https://github.com/Microsoft/vscode/issues/47502#issuecomment-407394409 - maybe we can get it working using resource uri
  • Can the tree item be an html element ?  If so then you can make a wrapped div with 2 columns, the left column hides content as it shrinks, the right column is fixed
The following items are not in scope, but your implementation of test explorer should make them easy to implement:
  • Right click on the tree item, a pop-up menu is displayed with a ‘run’ menu button, user can click to run the corresponding test(s).
  • Click the tree item for specific test, the test result for this particular test is displayed in output panel. The error should also displayed in corresponding line of the source test file as inline-error (just like the Mocha sidebar)


Final Submission Guidelines

Submission Deliverable
- Source Code
- Detailed Deployment Guide and Verification Guide
- Test nodejs code with Karma unit-tests for verification

ELIGIBLE EVENTS:

Topcoder Open 2019

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30069929