3.0 (#72)

* Feature/trim data (#43)

* types: remove properties to match new trim data structure

* components: derive properties from update suite data structure

* lib: nicely stringify json data for saving to file

* Feature/flexbox (#46)

* nav menu: update to use flexbox

* suite: update to use flexbox

* test: update to use flexbox

* navbar/report: use flexbox, remove unnecessary width props

* quick-summary: update to use flexbox

* store: remove unused props

* update tests

* Fix lint (#49)

* Fix ESLint violations

* Fix stylelint deprecation warning

* Feature/perf (#51)

* Duration: extend from PureComponent

* Icon: convert to class and extend from PureComponent

* Test: extend from PureComponent / only render body when in expanded state

* Suite: convert to class / implement shouldComponentUpdate

* eslint: update react rules for PureComponents

* enable transform-react-constant-elements for production

* remove unnecessary looping and lodash dependency from reportStore

* Feature/functional tests (#52)

* add functional tests

* remove babel-runtime from functional tests

* add info about development

* Feature/improve options handling (#59)

* export yargs options directly

* Add saveJson option

* Replace getBaseConfig method with getMergedOptions

This incorporates options handling which was previously part of the reporter.

* Update tests

* Feature/react16 (#62)

* Update react/enzyme deps

* Simplify test scripts

* Configure adapter for Enzyme

* Update failing tests

* Feature/loader (#54)

* 2.2.2 [ci skip]

* Add ReportBody and Loader components

* Add isLoading prop and toggleIsLoading method to store

* Wire up new ReportBody component

* Fix broken test

* Feature/html option (#63)

* options: add saveHtml

* lib: implement saveHtml option

* Feature/long text (#67)

* Add test case for long suite/test title

* Fix CSS issue with test icon and long test title

* Fix test lint

* Feature/render perf (#64)

* Separate Loader into its own component

* Loader: make an observer of reportStore.isLoading

* Replace computed suites property with observable filteredSuites

- Remove the computed suites property
- Add new filteredSuites observable array
- Add updateFilteredSuites method

* ReportBody: remove loader; add reaction function; call updateFilteredSuites on mount

* Report: add Loader component

* Update deps (#68)

* Update webpack and loader deps

* Add string replace loader and add VERSION property to store

* Update postcss plugins and fix style calculations

* Update stylelint deps and rules

* Update deps

* Update cross-env and fix npm scripts

* Update test deps

* Eslint: Update deps and fix new lint issues

* Update normalize.css and remove opinionate.css

* jsdom: bump minor version

* Footer version (#69)

* Footer: display package version

* Bump version to 3.0.0

* Update documentation (#70)

* changelog: change links from releases to compare

* Update README

* changelog: update with release notes for 3.0

* Create global reference to store as marge (#71)

.babelrc

@@ -7,9 +7,10 @@
   "plugins": ["transform-decorators-legacy"],
   "env": {
     "test": {
-      "plugins": [
-        "istanbul"
-      ]
+      "plugins": ["istanbul"]
+    },
+    "production": {
+      "plugins": ["transform-react-constant-elements"]
     }
   }
 }

.eslintrc.json

@@ -13,6 +13,7 @@
     "sinon": true
   },
   "rules": {
+    "react/default-props-match-prop-types": [2, { "allowRequiredDefaults": true }],
     "react/jsx-curly-spacing": [2, "always"],
     "react/jsx-no-duplicate-props": 2,
     "react/jsx-no-undef": 2,
@@ -31,14 +32,18 @@
     "react/sort-comp": 0,
     "react/jsx-no-bind": 1,
     "react/require-default-props": 0,
+    "react/prefer-stateless-function": [2, { "ignorePureComponents": true }],
 
+    "jsx-a11y/anchor-is-valid": 1,
+    "jsx-a11y/click-events-have-key-events": 1,
     "jsx-a11y/no-static-element-interactions": 0,
 
     "arrow-parens": [2, "as-needed"],
     "quotes": [2, "single", "avoid-escape"],
     "jsx-quotes": [2, "prefer-single"],
     "comma-dangle": [2, "never"],
     "indent": [2, 2],
+    "object-curly-newline": 0,
     "object-curly-spacing": [2, "always"],
     "array-bracket-spacing": [2, "always"],
     "no-undef": 2,

.stylelintrc

@@ -9,16 +9,18 @@
     "declaration-block-no-duplicate-properties": true,
     "declaration-no-important": true,
     "font-family-name-quotes": "always-unless-keyword",
+    "font-family-no-missing-generic-family-keyword": null,
     "font-weight-notation": "named-where-possible",
     "max-empty-lines": 2,
     "max-nesting-depth": 3,
+    "no-descending-specificity": null,
     "no-duplicate-selectors": true,
     "no-unknown-animations": true,
     "number-max-precision": 3,
     "order/properties-order": [["composes", "content", "display", "position"], { unspecified: "bottom" }],
     "property-no-vendor-prefix": true,
     "selector-max-compound-selectors": 3,
-    "selector-no-id": true,
+    "selector-max-id": 0,
     "selector-no-vendor-prefix": true,
     "selector-pseudo-class-no-unknown": [ true, { ignorePseudoClasses: ["global"] } ],
     "selector-pseudo-element-colon-notation": "single",
@@ -29,4 +31,4 @@
     "unit-whitelist": ["px", "rem", "em", "%", "deg", "s"],
     "value-no-vendor-prefix": true
   }
-}
+}

CHANGELOG.md

@@ -1,4 +1,24 @@
-# Changelog
+# mochawesome-report-generator changelog
+
+## [3.0.0] / 2017-11-30
+### Added
+- The report now displays a loading animation when loading and when toggling filters.
+- The report version is now shown in the footer.
+- Functional tests to make development a little easier
+
+### Changed
+- **BREAKING:** mochawesome v3.0.0 introduces changes to its JSON output that are not backwards-compatible. As such, the report generator will not work with data created in older versions of mochawesome.
+
+- Options handling and file saving that was previously done in the reporter is now handled here where it makes more sense. In addition, support was added for the `saveJson` and `saveHtml` options.
+
+- Improved perceived rendering. The report no longer shows just a blank screen when loading a large number of tests. Instead, the navbar stats and footer will be rendered along with a nice loading animation. In addition, the filter toggles are now more responsive when filtering over a large number of suites/tests.
+
+- Nearly all components have been updated to use flexbox layout.
+
+- Unnecessary component renders have been significantly reduced.
+
+- Most dependencies have been updated to their latest versions.
+
 
 ### [2.3.2] / 2017-11-13
 - Fix an issue where long test titles are truncated with no way to see the full title [#65](https://github.com/adamgruber/mochawesome-report-generator/issues/65)
@@ -95,30 +115,30 @@ You can still use the `--reportFilename` flag to set the filename of the generat
 ### [1.0.1] / 2016-12-26
 - Better url handling in context
 
-## [1.0.0] / 2016-12-18
+## 1.0.0 / 2016-12-18
 - Initial release
 
-[2.3.2]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.3.2
-[2.3.1]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.3.1
-[2.3.0]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.3.0
-[2.2.2]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.2.2
-[2.2.1]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.2.1
-[2.2.0]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.2.0
-[2.1.1]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.1.1
-[2.1.0]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.1.0
-[2.0.3]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.0.3
-[2.0.2]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.0.2
-[2.0.1]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.0.1
-[2.0.0]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/2.0.0
-[1.1.2]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.1.2
-[1.1.1]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.1.1
-[1.1.0]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.1.0
-[1.0.8]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.0.8
-[1.0.7]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.0.7
-[1.0.6]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.0.6
-[1.0.5]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.0.5
-[1.0.4]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.0.4
-[1.0.3]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.0.3
-[1.0.2]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.0.2
-[1.0.1]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.0.1
-[1.0.0]: https://github.com/adamgruber/mochawesome-report-generator/releases/tag/1.0.0
+[3.0.0]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.3.2...3.0.0
+[2.3.2]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.3.1...2.3.2
+[2.3.1]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.3.0...2.3.1
+[2.3.0]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.2.2...2.3.0
+[2.2.2]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.2.1...2.2.2
+[2.2.1]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.2.0...2.2.1
+[2.2.0]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.1.1...2.2.0
+[2.1.1]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.1.0...2.1.1
+[2.1.0]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.0.3...2.1.0
+[2.0.3]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.0.2...2.0.3
+[2.0.2]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.0.1...2.0.2
+[2.0.1]: https://github.com/adamgruber/mochawesome-report-generator/compare/2.0.0...2.0.1
+[2.0.0]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.1.2...2.0.0
+[1.1.2]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.1.1...1.1.2
+[1.1.1]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.1.0...1.1.1
+[1.1.0]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.0.8...1.1.0
+[1.0.8]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.0.7...1.0.8
+[1.0.7]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.0.6...1.0.7
+[1.0.6]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.0.5...1.0.6
+[1.0.5]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.0.5...1.0.5
+[1.0.4]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.0.3...1.0.4
+[1.0.3]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.0.2...1.0.3
+[1.0.2]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.0.1...1.0.2
+[1.0.1]: https://github.com/adamgruber/mochawesome-report-generator/compare/1.0.0...1.0.1

README.md

@@ -4,43 +4,42 @@ mochawesome-report-generator (marge)
 
 **marge** (**m**och**a**wesome-**r**eport-**ge**nerator) is the counterpart to [mochawesome][2], a custom reporter for use with the Javascript testing framework, [mocha][1]. Marge takes the JSON output from [mochawesome][2] and generates a full fledged HTML/CSS report that helps visualize your test suites.
 
-## :tada: Latest Changes
-- Support for mocha's `--inline-diffs` option
-- Show before and after hooks alongside your tests
-- New menu option for fine-tuning how hooks display
+## Features
 
-See the [CHANGELOG][] for up-to-date changes.
+<img align="right" src="./docs/marge-report-1.0.1.png" alt="Mochawesome Report" width="55%" />
 
-## Features
-- All-new redesigned and streamlined report
-- At-a-glance stats including pass percentage
-- Beautiful charts
-- Support for nested `describe`s
-- Supports pending tests
-- Filter view by test type
-- Quick navigation menu
+- Simple, clean, and modern design
+- Beautiful charts (via ChartJS)
+- Support for test and suite nesting
+- Displays before and after hooks
 - Review test code inline
 - Stack trace for failed tests
-- Inline diffs for actual vs expected results
+- Support for adding context information to tests
+- Filters to display only the tests you want
 - Responsive and mobile-friendly
-- Supports displaying additional test context
-- Custom report [options](#cli-options)
 - Offline viewing
+- Support for IE9+
 - CLI for generating reports independent of [mochawesome][2]
 
-## Browser Support
-Tested to work in Chrome. *Should* work in any modern web browser including IE9+.
-**marge** generates a self-contained report that can be viewed offline. 
+## Usage with mochawesome
+
+1. Add Mochawesome to your project:
+
+  `npm install --save-dev mochawesome`
 
-## Sample Report
+2. Tell mocha to use the Mochawesome reporter:
 
-<img src="./docs/marge-report-1.0.1.png" alt="Mochawesome Report" width="75%" />
-<img src="./docs/marge-report-menu-1.0.1.png" alt="Mochawesome Report Menu" width="75%" />
+  `mocha testfile.js --reporter mochawesome`
 
+3. If using mocha programatically:
 
-## Usage
+  ```js
+  var mocha = new Mocha({
+    reporter: 'mochawesome'
+  });
+  ```
 
-**via CLI**
+## CLI Usage
 
 Install mochawesome-report-generator package
 ```bash
@@ -52,10 +51,6 @@ Run the command
 marge [options] data_file [data_file2 ...]
 ```
 
-**via Mochawesome reporter**
-
-See mochawesome [docs][2].
-
 ## Output
 **marge** generates the following inside your project directory:
 ```
@@ -91,6 +86,8 @@ Flag | Type | Default | Description
 --overwrite | boolean | true | Overwrite existing report files. *See [notes](#overwrite).*
 --timestamp, --ts | string | | Append timestamp in specified format to report filename. *See [notes](#timestamp).*
 --showHooks | string | failed | Set the default display mode for hooks
+--saveJson | boolean | false |Should report data be saved to JSON file
+--saveHtml | boolean | true | Should report be saved to HTML file
 --dev | boolean | false | Enable dev mode (requires local webpack dev server)
 -h, --help | | | Show CLI help
 
@@ -113,6 +110,29 @@ colons | null | 17:46:21 | 174621
 
 Further, if you pass the flag with no format string, it will default to `isoDateTime`.
 
+## Development
+
+To develop locally, clone the repo and install dependencies. In order to test end-to-end you must also clone [mochawesome][2] into a directory at the same level as this repo.
+
+You can start the dev server with `npm run devserver`. If you are working on the CLI, use `npm run dev:cli` to watch for changes and rebuild.
+
+### Running Tests
+
+#### Unit Tests
+To run unit tests, simply use `npm run test`. You can also run a single unit test with `npm run test:single path/to/test.js`.
+
+#### Functional Tests
+Functional tests allow you to run real-world test cases in order to debug the output report. First, start up the dev server in one terminal window with `npm run devserver`. Then, in another window, run the tests with `npm run test:functional`. This will generate a report that you can open in the browser and debug.
+
+If you want to run a specific folder of functional tests:
+`npm run test:functional path/to/tests`
+
+Or if you want to run a single test:
+`npm run test:functional path/to/test.js`
+
+Or mix and match:
+`npm run test:functional path/to/some/tests path/to/another/test.js`
+
 [1]: https://mochajs.org/
 [2]: https://github.com/adamgruber/mochawesome
 [dateformat]: https://github.com/felixge/node-dateformat

bin/src/cli-main.js

@@ -108,8 +108,7 @@ function handleResolved(resolvedValues) {
     logger.info(chalk.red('\n✘ Some files could not be processed:'));
     logger.info(errors
       .map(e => `${chalk.underline(e.filename)}\n${chalk.dim(e.err)}`)
-      .join('\n\n')
-    );
+      .join('\n\n'));
     process.exitCode = 1;
   }
   return resolvedValues;

bin/src/cli.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
 const yargs = require('yargs');
-const options = require('../lib/options');
+const { yargsOptions } = require('../lib/options');
 const marge = require('./cli-main');
 
 // Setup yargs
 yargs
   .usage('Usage: $0 [options] data_file [data_file2 ...]')
   .demand(1)
-  .options(options.getYargsOptions())
+  .options(yargsOptions)
   .help('help')
   .alias('h', 'help')
   .version()

bin/src/types.js

@@ -32,30 +32,17 @@ Suite.define(t.struct({
   title: t.String,
   suites: t.list(Suite),
   tests: t.list(Test),
-  pending: t.list(Test),
   root: t.Boolean,
   _timeout: t.Integer,
   file: t.String,
   uuid: Uuid,
   fullFile: t.String,
   beforeHooks: t.list(Test),
   afterHooks: t.list(Test),
-  passes: t.list(Test),
-  failures: t.list(Test),
-  skipped: t.list(Test),
-  totalTests: t.Integer,
-  totalPasses: t.Integer,
-  totalFailures: t.Integer,
-  totalPending: t.Integer,
-  totalSkipped: t.Integer,
-  hasBeforeHooks: t.Boolean,
-  hasAfterHooks: t.Boolean,
-  hasTests: t.Boolean,
-  hasSuites: t.Boolean,
-  hasPasses: t.Boolean,
-  hasFailures: t.Boolean,
-  hasPending: t.Boolean,
-  hasSkipped: t.Boolean,
+  passes: t.list(Uuid),
+  failures: t.list(Uuid),
+  pending: t.list(Uuid),
+  skipped: t.list(Uuid),
   duration: t.Integer,
   rootEmpty: t.maybe(t.Boolean)
 }));
@@ -82,10 +69,6 @@ const TestReport = t.struct({
     context: t.maybe(t.String)
   }),
   suites: Suite,
-  allTests: t.list(Test),
-  allPending: t.list(Test),
-  allPasses: t.list(Test),
-  allFailures: t.list(Test),
   copyrightYear: t.Integer
 });