# mocha-grommet-reporter

> Mocha Web UI built in React/Grommet

Latest version **1.12.0** (published 2017-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install mocha-grommet-reporter
pnpm add mocha-grommet-reporter
yarn add mocha-grommet-reporter
bun add mocha-grommet-reporter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.12.0 |
| Published | 2017-08-24 |
| First published | 2017-06-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Michael Plazek |
| Maintainers | michael-plazek |

## Links

- npm: https://www.npmjs.com/package/mocha-grommet-reporter
- Repository: https://github.com/michaelplazek/mocha-grommet-reporter
- Homepage: https://github.com/michaelplazek/mocha-grommet-reporter#readme
- Issues: https://github.com/michaelplazek/mocha-grommet-reporter/issues
- npm.io page: https://npm.io/package/mocha-grommet-reporter

## Dependencies (13)

- [jsdom](https://npm.io/package/jsdom.md) ^11.0.0
- [react](https://npm.io/package/react.md) ^15.6.0
- [moment](https://npm.io/package/moment.md) ^2.18.1
- [grommet](https://npm.io/package/grommet.md) ^1.4.1
- [cross-env](https://npm.io/package/cross-env.md) ^5.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.5.4
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [lodash.chunk](https://npm.io/package/lodash.chunk.md) ^4.2.0
- [lodash.split](https://npm.io/package/lodash.split.md) ^4.4.2
- [grommet-addons](https://npm.io/package/grommet-addons.md) *
- [lodash.flatten](https://npm.io/package/lodash.flatten.md) ^4.4.0
- [lodash.replace](https://npm.io/package/lodash.replace.md) ^4.1.4
- [lodash.findindex](https://npm.io/package/lodash.findindex.md) ^4.6.0

## Recent versions

- 1.12.0 (latest) — 2017-08-24
- 1.11.4 — 2017-08-07
- 1.11.2 — 2017-08-03
- 1.11.1 — 2017-08-03
- 1.11.0 — 2017-08-03
- 1.10.8 — 2017-08-01
- 1.10.7 — 2017-07-27
- 1.10.6 — 2017-07-25
- 1.10.5 — 2017-07-24
- 1.10.4 — 2017-07-24
- 1.10.3 — 2017-07-24
- 1.10.2 — 2017-07-24
- 1.10.0 — 2017-07-22
- 1.9.10 — 2017-07-22
- 1.9.9 — 2017-07-20
- … 41 more at https://npm.io/package/mocha-grommet-reporter/versions

## README

# Mocha Grommet Reporter

This is a custom reporter for the Mocha test framework written in React/[Grommet](https://grommet.github.io/). The two current views are the Dashboard and Details View, which include: <br />
1. total pass/fail ratio for all suites/tests
1. time of last completed test
1. sorted test results
1. alert for timed out/slow tests <br />
1. duration of each test
1. errors/stack trace from from failed tests
1. timeout information
1. visually appealing widgets

This reporter was designed mainly to be displayed as a status board over a respective workspace. The Details View is included to provide and expand on the functionality of any standard mocha reporter.

## Screenshots:

![Overhead Dashboard](http://i.imgur.com/BsOGR5V.png)

![Developer Dashboard](http://i.imgur.com/dmsxmgZ.png)

`npm install mocha-grommet-reporter`

Place `<div id='mocha'></div>` where you want the application to run. <br />NOTE: div MUST have `id='mocha'`

```
   <!DOCTYPE html>
   <html lang="en">
     <head>
       <title>Mocha API Checker</title>
     </head>
     <body>
   
       <div id='mocha'></div>
       <script src='/bundle.js'></script>
   
     </body>
   </html>
```

Create index.js in the source directory and place the following code inside:

```
   import mochaGrommetReporter from 'mocha-grommet-reporter';
   import { Mocha } from 'mocha/mocha.js';

   mocha.setup({
     ui: 'bdd',
     slow: 1500,
     timeout: 10000,
     reporter: mochaGrommetReporter
   });

   // place test files here
   require('./index.test.js');

   mocha.run();
```

## To test:

Use the [mocha-grommet-reporter-example](https://github.com/michaelplazek/mocha-grommet-reporter-example.git) to test

### Special Thanks to [Tyr Johanson](https://github.com/tyrjo) for his wisdom, insight and guidance throughout with this project.

---
_Source: https://npm.io/package/mocha-grommet-reporter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._