Challenge Overview
Challenge Objectives
- Update the Karma vscode extension to use Karma binary instead of Karma public API
- Update the Karma vscode extension to support Angular 6+ Projects
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. Technology Stack
- vscode extension
- Karma
- Angular 6+
Code access
The latest codebase will be provided in the forum. Individual requirements
We have run multiple challenges to build the vscode extension to run Karma tests:- http://www.topcoder.com/challenge-details/30069929/?type=develop&noncache=true
- http://www.topcoder.com/challenge-details/30070440/?type=develop&noncache=true
- http://www.topcoder.com/challenge-details/30070660/?type=develop&noncache=true
We have done some research (thanks to the original winner: Marur Joshi):
The angular cli starts and manages the karma server internally.This is the issue https://github.com/angular/angular-cli/issues/10703. Webstorm issue: https://youtrack.jetbrains.com/issue/WEB-32653Webstorm solves this by calling "ng test" instead of "karma start" if it is angular. Relevant code https://github.com/JetBrains/intellij-plugins/blob/master/js-karma/src/com/intellij/javascript/karma/server/KarmaServer.javaKarma vscode on the other hand uses the public api of karma and not the binary inside karma/bin. This led to significant simplification as we have full control of the server and can listen to events such as "browser start" / "exit" and take appropriate actions.At the moment we cannot use "ng test". We would need to change the entire implementation to use karma binary instead of karma public api. I initially had tried to use the karma binary to run "karma start" but this caused big problems when stopping and restarting karma server as there is no way to detect browser ready event. So say you're in coverage mode and you click on run suite. Server needs to be restarted in non coverage mode and suite needs to be run. But the tests need to run after the browser is ready, but this event cannot be detected. I had tried using a retry until failure but this was very unreliable.Webstorm solves this by parsing the terminal output from the karma server. They check for "socket connecting established" in the terminal output and then run tests. But VSCode integrated terminal however does not provide any way to receive output from terminal.
So in this challenge, you should change the existing codebase to run Karma using Karma binary instead of Karma public API, and all the functionalities created in previous challenges should still work as before. Similarly the extension should work for running tests in Angular 6+ project.
Note that to capture the Karma binary or "ng test" outputs, you can use child-process npm package to run the command and monitor the output for analysis, and you should send the output to a karma-cli or angular-cli output panel as well. (We use this workaround until vscode supports retrieving texts from the integrated terminal).
Note that to capture the Karma binary or "ng test" outputs, you can use child-process npm package to run the command and monitor the output for analysis, and you should send the output to a karma-cli or angular-cli output panel as well. (We use this workaround until vscode supports retrieving texts from the integrated terminal).
We need to make the tool work primarily for Angular (CLI), but we need to retain the functionality for AngularJs (no CLI) as both frameworks are in use on different projects. And other than find the karma.conf file in the default (root directory and the default place for angular 6 project), please prompt to allow user to select the file if it cannot be found.
Final Submission Guidelines
Submission Deliverable- Updated Source Code
- Detailed Deployment Guide and Verification Guide
- Test Angular 6+ project with Karma tests for verification (The Angular 6+ project should use TypeScript).