fix: add documentation for LH viewer usage

push-based · Apr 10, 2022 · 5709160 · 5709160
2 parents 771d335 + 3e8d865
commit 5709160
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -199,13 +199,31 @@ This command executes a set of user-flow definitions against the target URL and
 
 |  Option                            |  Type     | Default                |  Description                                                                                               |  
 | ---------------------------------- | --------- | ---------------------- |----------------------------------------------------------------------------------------------------------- |  
-| **`--url`**, **`-t`**              | `string`  | `.user-flowrc` setting | URL to analyze                                                                                             |  
-| **`--ufPath`**, **`-f`**           | `string`  | `.user-flowrc` setting | folder containing user-flow files to run. (`*.uf.ts` or`*.uf.js`)                                          |  
-| **`--outPath`**, **`-o`**          | `string`  | `.user-flowrc` setting | output folder for the user-flow reports                                                                    |  
+| **`--url`**, **`-t`**              | `string`  | n/a                    | URL to analyze                                                                                             |  
+| **`--ufPath`**, **`-u`**           | `string`  | `./user-flows`         | folder containing user-flow files to run. (`*.uf.ts` or`*.uf.js`)                                          |  
+| **`--outPath`**, **`-o`**          | `string`  | `./measures`           | output folder for the user-flow reports                                                                    |  
 | **`--open`**, **`-e`**             | `boolean` | `true`                 | Opens browser automatically after the user-flow is captured                                                |  
-| **`--serveCommand`**, **`-s`**     | `string ` | `.user-flowrc` setting | Runs a npm script to serve the target app. This has to be used in combination with `--awaitServeStdout`    |  
-| **`--awaitServeStdout`**, **`-a`** | `string ` | `.user-flowrc` setting | Waits for stdout from the serve command to start collecting user-flows                                     |  
+| **`--serveCommand`**, **`-s`**     | `string`  | n/a                    | Runs a npm script to serve the target app. This has to be used in combination with `--awaitServeStdout`    |  
+| **`--awaitServeStdout`**, **`-a`** | `string`  | `.user-flowrc` setting | Waits for stdout from the serve command to start collecting user-flows                                     |  
+| **`--format`**, **`-f`**           | `string`  | `html`, `json` setting | Format of the creates reports                                                                              |  
 
+## Report Formats and Viewer
+
+@push-based/user-flow supports 2 different formats and aligns with the official viewer.
+- `html`
+- `json`
+
+Use the `.user-flowrc.json` propertiy `persist.format` and give an array as value. e.g. `['html']` or `['html', 'json']`.
+
+You can also use use the CLI option `--format` to choose a format.
+For a single format run: `@push-based/user-flow collect --format html` and  
+for multiple formats `@push-based/user-flow collect --format html --format json`.
+
+You can either export the report as `HTML` or `JSON` format. The html file can be opened in any browser.
+The json file can be drag & dropped into the [lighthouse viewer](https://googlechrome.github.io/lighthouse/viewer/). 
+This format is very good for programmatic processing and foundation for most of the features of this lib. 
+
+[![Lighhouse Viewer - FiledDrop area]()]
 
 ## Debugging
 

diff --git a/packages/cli/tests/fixtures/setup-sandbox.ts b/packages/cli/tests/fixtures/setup-sandbox.ts
@@ -9,7 +9,7 @@ export const SETUP_SANDBOX_NAME = 'sandbox-setup';
 export const SETUP_SANDBOX_PATH = path.join(__dirname, '..', '..', '..', SETUP_SANDBOX_NAME);
 export const SETUP_SANDBOX_PACKAGE_JSON_PATH = path.join(SETUP_SANDBOX_PATH, 'package.json');
 
-export const STATIC_USER_FLOW_SERVE_PORT = '5029';
+export const STATIC_USER_FLOW_SERVE_PORT = '5032';
 export const STATIC_USER_FLOW_SERVE_COMMAND = `cd dist && npx http-server --port ${STATIC_USER_FLOW_SERVE_PORT}`;
 
 export const SETUP_SANDBOX_DEFAULT_RC_NAME = '.user-flowrc.json';

diff --git a/packages/sandbox-setup/package.json b/packages/sandbox-setup/package.json
@@ -1 +1,11 @@
-{"name":"sendbox-setup","version":"0.0.0","main":"dist/index.html","license":"MIT","scripts":{"start":"cd dist && npx http-server --port 5029","@push-based/user-flow":"npx ../../dist/packages/cli/src/cli.js -v","@push-based/user-flow:static":"npx ../../dist/packages/cli/src/cli.js collect -v -p .user-flowrc.static-dist.json"}}
+{
+  "name": "sendbox-setup",
+  "version": "0.0.0",
+  "main": "dist/index.html",
+  "license": "MIT",
+  "scripts": {
+    "start": "cd dist && npx http-server --port 5032",
+    "@push-based/user-flow": "npx ../../dist/packages/cli/src/cli.js -v",
+    "@push-based/user-flow:static": "npx ../../dist/packages/cli/src/cli.js collect -v -p .user-flowrc.static-dist.json"
+  }
+}