# apiway-report > A Gorgeous HTML/CSS Reporter for Mocha.js Latest version **0.0.5** (published 2017-06-06) · MIT license · 0 weekly downloads ## Install ```sh npm install apiway-report pnpm add apiway-report yarn add apiway-report bun add apiway-report ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.5 | | Published | 2017-06-06 | | First published | 2017-06-06 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 7 | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | bluehackmaster | | Maintainers | bluehackmaster | | Keywords | mocha, reporter, json, html, apiway, tdd, unit test | ## Links - npm: https://www.npmjs.com/package/apiway-report - Repository: https://github.com/apiway/apiway-report - Homepage: https://github.com/apiway/apiway-report#readme - Issues: https://github.com/apiway/apiway-report/issues - npm.io page: https://npm.io/package/apiway-report ## Dependencies (7) - [diff](https://npm.io/package/diff.md) ^3.0.0 - [uuid](https://npm.io/package/uuid.md) ^3.0.1 - [chalk](https://npm.io/package/chalk.md) ^1.1.3 - [lodash](https://npm.io/package/lodash.md) ^4.17.3 - [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.20.0 - [json-stringify-safe](https://npm.io/package/json-stringify-safe.md) ^5.0.1 - [apiway-report-generator](https://npm.io/package/apiway-report-generator.md) latest ## Alternatives - [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads - [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads - [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads - [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads - [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads ## Recent versions - 0.0.5 (latest) — 2017-06-06 - 0.0.4 — 2017-06-06 - 0.0.3 — 2017-06-06 - 0.0.2 — 2017-06-06 - 0.0.1 — 2017-06-06 ## README mochawesome =========== [![npm](https://img.shields.io/npm/v/mochawesome.svg?style=flat-square)](http://www.npmjs.com/package/mochawesome) [![Build Status](https://img.shields.io/travis/adamgruber/mochawesome/master.svg?style=flat-square)](https://travis-ci.org/adamgruber/mochawesome) [![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg?style=flat-square)](https://gitter.im/mochawesome/general) [![Code Climate](https://img.shields.io/codeclimate/github/adamgruber/mochawesome.svg?style=flat-square)](https://codeclimate.com/github/adamgruber/mochawesome) Mochawesome is a custom reporter for use with the Javascript testing framework, [mocha][]. It runs on Node.js (>=4) and generates a full fledged HTML/CSS report that helps visualize your test suites. ## :tada: Latest Changes - Use `addContext` in `beforeEach` and `afterEach` test hooks - New [options](#options): `overwrite` and `timestamp` See the [CHANGELOG][] for up-to-date changes. ### apiway-report-generator (marge) To start, the actual report generation has been moved out into its own package, [apiway-report-generator][]. This will make it easier to implement changes to the report as well as allow for future integration with other test libraries. ### New Features - Every bit of the report has been redesigned for a cleaner, more streamlined look - Built using React and mobx - Supports displaying [additional test context](#adding-test-context) including images! - Supports displaying inline diffs for failed tests - New [options](#options) including hiding test code and/or charts - Enhanced navigation menu with clearer filtering options - New option to disable console messages ### Plus... - At-a-glance stats including pass percentage - Beautiful charts - Supports nested `describe`s - Supports pending tests - Review test code inline - Stack trace for failed tests - Responsive and mobile-friendly - Saves JSON output for further processing - Offline viewing ### Sample Report Mochawesome Report Mochawesome Report Menu ### Browser Support The generated report has been tested to work in Chrome. It *should* work in any modern web browser, including IE9+. It is also fully self-contained for offline viewing. ## Usage 1. Add Mochawesome to your project: `npm install --save-dev mochawesome` 2. Tell mocha to use the Mochawesome reporter: `mocha testfile.js --reporter mochawesome` 3. If using mocha programatically: ```js var mocha = new Mocha({ reporter: 'mochawesome' }); ``` ## Output Mochawesome generates the following inside your project directory: ``` mochawesome-report/ ├── assets │   ├── app.css │   ├── app.js │   ├── MaterialIcons-Regular.woff │   ├── MaterialIcons-Regular.woff2 │   ├── roboto-light-webfont.woff │   ├── roboto-light-webfont.woff2 │   ├── roboto-medium-webfont.woff │   ├── roboto-medium-webfont.woff2 │   ├── roboto-regular-webfont.woff │   └── roboto-regular-webfont.woff2 ├── 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 directly to mocha. Option Name | Type | Default | Description :---------- | :--- | :------ | :---------- `reportDir` | string | [cwd]/mochawesome-report | Path to save report `reportFilename` | string | mochawesome | Filename of saved report *(prior to version 2.0.0 this was called `reportName`)* `reportTitle` | string | mochawesome | Report title `reportPageTitle` | string | mochawesome-report | Browser title `inlineAssets` | boolean | false | Inline report assets (scripts, styles) `enableCharts` | boolean | true | Display Suite charts `enableCode` | boolean | true | Display test code `enableTestCode` | boolean | true | Same as `enableCode` *deprecated* `autoOpen` | boolean | false | Open the report after running tests `overwrite` | boolean | true | Overwrite existing report files `timestamp` | string | | Append timestamp in specified format to report filename. *See [notes][1].* `quiet` | boolean | false | Silence console messages *Setting a custom filename will change both the report html and json files.* **Options passed in will take precedence over environment variables.** #### Environment variables Options can be set via environment variable. To do this you must prefix the variable with `MOCHAWESOME_` and then uppercase the variable name. ```bash $ export MOCHAWESOME_REPORTDIR=customReportDir $ export MOCHAWESOME_INLINEASSETS=true $ export MOCHAWESOME_AUTOOPEN=true ``` #### Mocha options You can pass comma-separated options to the reporter via mocha's `--reporter-options` flag. ```bash $ mocha test.js --reporter mochawesome --reporter-options reportDir=customReportDir,reportFilename=customReportFilename ``` Options can be passed in programatically as well: ```js var mocha = new Mocha({ reporter: 'mochawesome', reporterOptions: { reportDir: 'customReportDir', reportFilename: 'customReportFilename', enableCharts: false } }); ``` ## Adding Test Context One of the more request features has been the ability to display additional information about a test within the report. As of version 2.0.0 this is now possible with the `addContext` helper method. This method will add extra information to the test object that will then be displayed inside the report. ### `addContext(testObj, context)` param | type | description :---- | :--- | :---------- testObj | object | The test object context | string\|object | The context to be added to the test **Context as a string** Simple strings will be displayed as is. If you pass a URL, the reporter will attempt to turn it into a link. If the URL links to an image, it will be shown inline. **Context as an object** Context passed as an object must adhere to the following shape: ```js { title: 'some title' // must be a string value: {} // can be anything } ``` #### Example *When using the `addContext` helper, you cannot use an arrow function in your `it` statement because your `this` value will not be the test object.* ```js const addContext = require('mochawesome/addContext'); describe('test suite', function () { it('should add context', function () { // context can be a simple string addContext(this, 'simple string'); // context can be a url and the report will create a link addContext(this, 'http://www.url.com/pathname'); // context can be an image url and the report will show it inline addContext(this, 'http://www.url.com/screenshot-maybe.jpg'); // context can be an object with title and value properties addContext(this, { title: 'expected output', value: { a: 1, b: '2', c: 'd' } }); }) }); ``` As of version 2.2.0 it is possible to use `addContext` from within a `beforeEach` or `afterEach` test hook. ```js describe('test suite', () => { beforeEach(function () { addContext(this, 'some context') }); afterEach(function () { addContext(this, { title: 'afterEach context', value: { a: 1 } }); }); it('should display with beforeEach and afterEach context', () => { // assert something }); }); ``` ## v1.x Documentation for version 1.x can be found [here](https://github.com/adamgruber/mochawesome/tree/v1.X). [mocha]: https://mochajs.org/ [apiway-report-generator]: https://github.com/adamgruber/apiway-report-generator [CHANGELOG]: CHANGELOG.md [1]: https://github.com/adamgruber/apiway-report-generator/blob/master/README.md#timestamp --- _Source: https://npm.io/package/apiway-report · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._