March 17, 2020
Estimated Post Reading Time ~

Overview on Karma Test Runner used to cover jasmine unit test code for JavaScript.

Karma Test Runner
Karma Test Runner Introduction
Karma is a test runner for JavaScript that runs on Node.js.  By default, Karma will execute our Jasmine unit tests in a headless browser (PhantomJS) but can be configured (via a command-line option) to run in any browser of choice (for instance in Chrome, to allow developers to debug test scripts).  

Karma can be run once or in continuous mode, which will watch all the files specified within the configuration file, and whenever any file changes, send a signal to the testing server to inform all of the captured browsers to run the test code again. Karma also integrates into our continuous integration (CI) builds via executions configured in the ui.apps pom.xml.

When Karma runs, the results of each test against each browser are logged to the command window, or console, in the case of execution during CI builds.  Coverage reports are also generated.
Karma Test Runner Files
Description
Location
Executions for Node.js, npm, dependency package installations, and Karma CI execution
<path-to-git>/your-project/ui.apps/pom.xml
(see artifactId “frontend-maven-plugin”)
npm dependency package installation information for Jasmine plugins and our Karma implementation
<path-to-git>/your-project/ui.apps/packages.json
Node.js installation folder *
<path-to-git>/your-project/ui.apps/node
npm and dependency packages installation folder *
<path-to-git>/your-project/ui.apps/node_modules
Karma configuration file
<path-to-git>/your-project/ui.apps/karma.conf.js
Karma CI configuration file (used only during build process)
<path-to-git>/your-project/ui.apps/karma.conf.ci.js
Karma helper script (Windows)
<path-to-git>/your-project/ui.apps/karma.cmd
Karma helper script (OS X)
<path-to-git>/your-project/ui.apps/karma
Jasmine test specs root folder
<path-to-git>/your-project/ui.apps/src/test/javascript
*excluded from source control via ui.apps .gitignore
Executing Jasmine Tests with Karma Test Runner - Developers
Karma will be executed from a command/terminal window and can be run once or in continuous mode (default) to watch all the files specified within the configuration file, and whenever any file changes, send a signal to the testing server to inform all of the captured browsers to run the test code again.  Each time the Karma runner is executed, the following will happen:
·       A summary of each test (success or failure) will be displayed in the command/terminal window, along with the reason(s) for any failures
·       A test summary HTML report will be generated (see Generated Reports section)
·       A code coverage HTML report will be generated (see Generated Reports section)
Prerequisites
·       Before running Karma in your local development environment, you must first do a maven build locally so that node.js, npm, and dependencies can be installed (as defined in the ui.apps pom.xml and package.json files). 
·       OS X Users will want to ensure the Karma command file is executable.  In the terminal window:
o   Enter cd  <path-to-git>/your-project/ui.apps
o   Enter chmod +x karma
To run Karma once (Single-run mode)
1.    In terminal window:
a.    Enter cd <path-to-git>/your-project/ui.apps
b.    Enter sh karma start karma.conf.js --single-run
To run Karma and continuously watch for changes to js or spec files while developing (Continuous mode)
1.    In the terminal window:
a.    Enter cd <path-to-git>/your-project/ui.apps
b.    Enter sh karma start karma.conf.js
2.    Karma will watch all the files specified within its configuration file.  If any of the files change, Karma will re-trigger the running of tests.
3.    Ctrl-C in the terminal window at any time to stop Karma
To run Karma continuously and debug tests in Chrome browser (Debug mode)
When running Karma in Debug mode, no coverage reports will be generated.  To generate/update coverage reports, you’ll have to stop Karma and run in either Single-run or Continuous mode (see above).
1.    In the terminal window:
a.    Enter cd <path-to-git>/your-project/ui.apps
b.    Enter sh karma start karma.conf.js --browsers Chrome --debug
2.    When Chrome browser opens, click the DEBUG button
3.    Open Chrome Developer Tools
4.    On the Sources tab:
a.    Locate any test or app source you want to debug under localhost:9876/base/src
b.    Set any breakpoints, watches, etc.
5.    Refresh the page to restart execution of the test scripts
6.    Note that the summary of each test (success or failure), along with the reason(s) for any failures, will be output to the Console tab of Chrome Developer Tools
7.    Ctrl-C in the terminal window at any time to stop Karma
Executing Jasmine Tests with Karma Test Runner – CI Environment
The ui.apps pom.xml file contains an execution entry to run Karma using the Karma CI configuration file (as well as execution entries for installing node.js, npm, and dependencies).  Each time the Karma runner is automatically executed as part of the build process, the following will happen:
· A summary of each test (success or failure) will be displayed in the console log, along with the reason(s) for any failures
· A test summary HTML report will be generated (see Generated Reports section) and automatically uploaded to the Jenkins dashboard of your-project profile.
· A code coverage LCOV and HTML report will be generated (see Generated Reports section) and automatically uploaded to the Jenkins dashboard of the your-project profile.
Generated Reports
Karma Test Runner Jasmine test summary
<path-to-git>/your-project/ui.apps/target/reports/coverage/karma-summary/index.html
Code coverage report for Developers
<path-to-git>/your-project/ui.apps/target/reports/coverage/html/index.html
Code coverage report for Jenkins & SonarQube
<path-to-git>/your-project/ui.apps/target/reports/coverage/lcov-report/lcov.info
<path-to-git>/your-project/ui.apps/target/reports/coverage/lcov-report/index.html
Adding New Unit Test Spec Files for Execution
New unit test specs will automatically be executed when Karma runs since we use a wildcard to load them via the Karma configuration file.
// test scripts
'src/test/javascript/**/*Spec.js'
Adding Application Source Files to the Coverage Reports
To include a new file in the Karma coverage reports, add it alphabetically to the preprocessors section of the Karma configuration file, using an existing entry as a template.
Adding External Plugins Required by Jasmine Tests
To add additional necessary external plugins to be used by Jasmine tests or the Karma runner, add the package information to the <path-to-git>/your-project/ui.apps/packages.json file.  This way the plugin will automatically be fetched and installed locally (into the <path-to-git>/your-project/ui.apps/node_modules folder) when developers do a build.  DO NOT add the plugins to our codebase.
Adding Core Library Files Required by Jasmine Tests
To include a new core library file so that it’s loaded in the browser before Karma executes tests, add it alphabetically to the files section of the Karma configuration file, using an existing entry as a template.
Reference
· https://karma-runner.github.io/1.0/index.html
· https://myshittycode.com/2014/11/11/jenkins-getting-karma-generated-test-results-to-appear-in-maven-project-job/
· https://blog.akquinet.de/2014/11/25/js-test-coverage/
· http://www.methodsandtools.com/tools/karma.php
· https://docs.npmjs.com/files/package.json
· https://glebbahmutov.com/blog/debugging-karma-unit-tests/


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.