mochawesome

What is mochawesome?

The mochawesome npm package is a custom reporter for use with the testing framework, Mocha. It generates a full-fledged HTML/CSS report that helps visualize test runs. It also supports JSON output for additional report processing and integration with other tools.

What are mochawesome's main functionalities?

Beautiful Test Reports

This feature allows you to generate a standalone HTML document that visually displays the results of your Mocha tests. The command above runs Mocha tests using mochawesome as the reporter.

mocha test --reporter mochawesome

Custom Report Options

Mochawesome provides several options to customize the report. You can specify the directory and filename for the report, among other options. The code sample demonstrates how to set a custom directory and filename for the report.

mocha test --reporter mochawesome --reporter-options reportDir=customReport,reportFilename=report

Support for Mocha Hooks

Mochawesome supports Mocha's hooks such as before, after, beforeEach, and afterEach. These hooks can be used to set up preconditions and clean up after tests. The code sample shows a test suite with before and after hooks.

describe('My Suite', () => { before(() => { // setup code }); it('does something', () => { // test code }); after(() => { // teardown code }); });

Screenshots on Test Failure

Mochawesome allows you to add context to the test reports, such as screenshots, especially useful when a test fails. The code sample demonstrates adding a screenshot to the report context if a condition is met.

it('should capture a screenshot on failure', function () { browser.url('https://example.com'); if (browser.isExisting('.should-not-exist')) { this.addContext('Screenshot on failure', browser.saveScreenshot()); } expect(browser.isExisting('.should-not-exist')).to.be.false; });

Other packages similar to mochawesome

mocha-junit-reporter

This package is similar to mochawesome in that it is also a reporter for Mocha. It generates reports in JUnit format, which is useful for integration with systems like Jenkins. Unlike mochawesome's rich HTML reports, mocha-junit-reporter focuses on XML output for CI servers.

mocha-multi-reporters

mocha-multi-reporters allows you to use multiple Mocha reporters simultaneously. This is useful if you need to generate different types of reports from a single test run. It provides more flexibility compared to mochawesome, which is a single-reporter solution.

allure-mocha

allure-mocha is a reporter that integrates with the Allure reporting framework. It provides detailed reports with features like test categorization, rich test data visualization, and history trends. Allure-mocha offers a more comprehensive reporting solution compared to mochawesome's straightforward HTML reports.

README

mochawesome

Mochawesome is a custom reporter for use with the Javascript testing framework, mocha. It generates a full fledged HTML/CSS report that helps visualize your test suites.

##New in 1.3.0

• Changes to support mocha v2.4.0 and later

##Features

• At-a-glance stats including pass percentage
• Beautiful charts
• Support for nested describes
• Supports pending tests
• Filter view by test type
• Review test code inline
• Stack trace for failed tests
• Responsive and mobile-friendly
• Saves JSON output for further processing
• Custom report options
• Offline viewing

##Browser Support Tested to work in Chrome. Should work in any modern web browser including IE9+. Mochawesome generates a self-contained report that can be viewed offline.

##Sample Report

##Usage

1. Add Mochawesome to your project:

npm install --save-dev mochawesome

1. Tell mocha to use the Mochawesome reporter:

mocha testfile.js --reporter mochawesome

1. If using mocha programatically:

var mocha = new Mocha({
    reporter: 'mochawesome'
});

##Output Mochawesome generates the following inside your project directory:

mochawesome-reports/
├── css
│   └── mochawesome.css
├── fonts
│   ├── Roboto+Condensed_300_normal.ttf
│   ├── Roboto+Condensed_300_normal.woff
│   ├── Roboto+Condensed_400_normal.svg
│   ├── Roboto+Condensed_400_normal.ttf
│   ├── Roboto+Condensed_400_normal.woff
│   ├── Roboto+Condensed_700_normal.ttf
│   ├── Roboto+Condensed_700_normal.woff
│   ├── Roboto+Slab_400_normal.svg
│   ├── Roboto+Slab_400_normal.ttf
│   ├── Roboto+Slab_400_normal.woff
│   ├── mochawesome.eot
│   ├── mochawesome.svg
│   ├── mochawesome.ttf
│   └── mochawesome.woff
├── js
│   ├── mochawesome.js
│   └── vendor.js
├── mochawesome.html
└── mochawesome.json

The two main files to be aware of are:

mochawesome.html - The rendered report file

mochawesome.json - The raw json output used to render the report

##Options Mochawesome supports options via environment variables or passed in to mocha via --reporter-options.

• reportDir: {String} - changes the name of the report directory
• reportName: {String} - changes the name of the report file
• reportTitle: {Sring} - changes the title of the report
• inlineAssets: {Boolean} - when true inlines all report assets into a self-contained report file

Setting a custom filename will change both the report html and json files.

Options passed in will take precedence over environment variables.

####Environment variables

$ export MOCHAWESOME_REPORTDIR=customReportDir
$ export MOCHAWESOME_REPORTNAME=customReportName
$ export MOCHAWESOME_REPORTTITLE=customReportTitle
$ export MOCHAWESOME_INLINEASSETS=true

####Mocha options

$ mocha test.js --reporter mochawesome --reporter-options reportDir=customReportDir,reportName=customReportName,reportTitle=customReportTitle,inlineAssets=true

var mocha = new Mocha({
    reporter: 'mochawesome',
    reporterOptions: {
      reportDir: 'customReportDir',
      reportName: 'customReportName',
      reportTitle: 'customReportTitle',
      inlineAssets: true
    }
});

##Development If you wish to make changes to the reporter you will need to clone the repo and build locally. Building requires you to have gulp installed.

###Installation

$ git clone https://github.dowjones.net/grubera/mochawesome

###Modifying Reporter files are found in /lib directory. Templates, styles, and client-side scripts are in the /src directory.

###Building There are several gulp tasks available but the main ones to be aware of are:

####gulp build - Full Build Runs jshint, parses LESS, compiles templates, concatenates and minifies scripts. Note: This task will fail if linting fails.

####gulp watch - Watch Files Watches for changes to JS, LESS, and MU and builds when a change is detected. If a change is detected in a JS file this will run jshint first before building and will fail on any lint errors.

####gulp lint - Lint JS This will run jshint only, no building will occur.

####gulp test - Run Test After building you can run this to test the reporter and see the output. Note: The default gulp task will run this task.

####gulp testOpts - Run Test with Options After building you can run this to test the reporter and see the output.

Changelog

[1.3.5]

Fixed

• Removed extra slash in @font-path LESS variable. See #53