Wondering what’s next for npm?Check out our public roadmap! »

    karma-material-reporter
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/karma-material-reporter package

    1.1.2 • Public • Published

    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

    Install

    npm i karma-material-reporter

    DownloadsWeekly Downloads

    119

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    1.75 MB

    Total Files

    24

    Last publish

    Collaborators

    • avatar