Skip to content

ameerthehacker/karma-material-reporter

Repository files navigation

Karma Material Reporter

CircleCI code style: prettier Join the chat at https://gitter.im/Karma-material-reporter/Lobby codecov semantic-release codacy

Visualize karma test results in real time with material designed reporter

Karma Material Reporter

Features

📑 Test results from each browser are separated out into tabs

📁 Specs are grouped under suite as expandable menu

🕙 See the time it took to run individual suite and spec

🔍 No more clutter between specs and error logs

Log Error

🎉 No more browser reload whenever you tweak a test

Async Test

❌ Browser errors are reported in a tidy way

Browser Error

Installation

  1. Install karma-material-reporter as dev dependency
npm install karma-material-reporter --save-dev
  1. Update karma.conf.js to use karma-material-reporter
module.exports = function(config) {
 config.set({
   ...
   plugins: [
     ...
     require('karma-material-reporter')
   ],
   ...
   reporters: ['progress', 'material'],
 });
};

Voila! power up your tests with karma and you should see the reporter opeing up in your default browser.

Availble Configurations

Option Description Default
serverPort port in which the reporter startes a express server 3000
autoOpen whether to open the reporter UI automatically in the default browser true
expandSuites expand all the expandable suite menus true

You can change the above options by updating karma.conf.js as showm below

module.exports = function(config) {
 config.set({
   ...
   plugins: [
     ...
     require('karma-material-reporter')
   ],
   materialReporter: {
     serverPort: 3000,
     autoOpen: true,
     expandSuites: true
   },
   ...
   reporters: ['progress', 'material'],
 });
};

How to Contribute?

Project Structure

  • The UI is built with angular and angular material which is located in the ui directory
  • The express server files are located in the server directory

Local Setup

  1. Clone the repo using
git clone https://github.com/ameerthehacker/karma-material-reporter.git
  1. Install npm dependencies
npm install
  1. Run the tests
npm run test

Running karma-material-reporter in Development

  1. Build the angular UI
npm run build-ui:watch
  1. Start the reporter with few sample tests
npm run dev

❗ If you have any ideas or suggestions please feel free to create an issue before jumping into development

Show your support by ⭐ the repo

License

MIT © Ameer Jhan