karma-material-reporter
A good looking UI for displaying karma test results
Last updated 9 months ago by ameerthehacker .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install karma-material-reporter 
SYNC missed versions from official npm registry.

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

:bookmark_tabs: Test results from each browser are separated out into tabs

:file_folder: Specs are grouped under suite as expandable menu

:clock10: See the time it took to run individual suite and spec

:mag: No more clutter between specs and error logs

Log Error

:tada: No more browser reload whenever you tweak a test

Async Test

:x: 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

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

Show your support by :star: the repo

License

MIT © Ameer Jhan

Current Tags

  • 1.1.2                                ...           latest (9 months ago)

7 Versions

  • 1.1.2                                ...           9 months ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 3
Last Month 2
Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |