Xunit Viewer

Takes all your XUnit and JUnit XML files and makes them readable

!Icon


Have a look at the demo

Features

* Generate an HTML single file with the ability to search, filter
* Render results out to the console, this comes with the ability to search and filter
* Re-run the above when a file changes
* Start a server with WebSockets to keep the browser in sync with the data
* Add files to the web app without having to re-run xunit viewer
* Adds the metadata to the header so you can share the URL in places such as slack, for example
* Use the query parameter to filter tests

!Example

Xunit Viewer supports node LTS version but should work on node 10+

URL filtering

You can filter by test status to save time on refreshes, and update the query params

FILE|ROUTE/?passed=true&error=false&failure=false&skipped=true&unknown=false

Usage, CLI

``sh
npm i -g xunit-viewer
xunit-viewer --help
`

$3

`text
xunit-viewer [command]

Commands:
xunit-viewer Renders Xunit style xml results

Options:
--version Show version number [boolean]
-r, --results File/Folder of results [string] [required]
-i, --ignore Ignore patterns [array]
-o, --output Output filename [string]
-t, --title HTML title e.g. "My Tests" [string]
-b, --brand Provide a URL with your own logo [string]
-f, --favicon Provide a URL with your own favicon [string]
-c, --console Render in console [boolean]
-C, --clear Clears the console [boolean] [default: true]
-s, --server Start a server and sockets for live updates
[boolean] [default: false]
-n, --no-color No color in the console [boolean]
-w, --watch Re-run when a file changes [boolean]
-p, --port Starts a server with sockets on that port, if no port is
provided then it will run on port 3000 (or next available)
[number]
--help Show help [boolean]

Examples:
xunit-viewer -r file.xml a file
xunit-viewer -r folder a folder
xunit-viewer -r folder -i *-broke.xml ignore
xunit-viewer -r folder -o my-tests.html rename output
xunit-viewer -r folder -t "My Tests" change HTML title
xunit-viewer -r folder -b https://image.png change the image
xunit-viewer -r folder -f https://image.favico change the favicon
xunit-viewer -r folder -c render in console
xunit-viewer -r folder -c -s false render in console and do not save
xunit-viewer -r folder -c -n no color in console
xunit-viewer -r folder -w start watch
xunit-viewer -r folder -w -p 5050 watch at 5050
`

Usage, Node

Xunit Viewer is asynchronous so you may need to wrap it up like so. NOTE The script parameter which will skip all Xunit Viewer's exit codes.

`js
import xunitViewer from 'xunit-viewer'

const main = async () => {
await xunitViewer({
server: false,
results: 'data',
ignore: ['_thingy', 'invalid'],
title: 'Xunit View Sample Tests',
output: 'output.html',
script: true
})
}
main()
`

If you are going to run it from a script with no other code

`js
import xunitViewer from 'xunit-viewer'

xunitViewer({
server: false,
results: 'data',
ignore: ['_thingy', 'invalid'],
title: 'Xunit View Sample Tests',
output: 'output.html',
script: true
})
`

Usage, React

not available

Contributing

A list of available commands

`sh
npm i
npm start # this starts the dev app
npm release # this updates the code in the cli folder
npm run demo # this generates the demo
./bin/xunit-viewer # to run the local command line tool

npm test # runs the tests
npm run test:ci # runs without watch and also generates a html output
npm run lint # runs eslint
npm run update # updates the expected files for you
npm run build:cli # builds the js and copies it to the cli
`

Make sure your tests are running and passing, and the linter is passing as well

DO NOT commit the src/cli/static folder or the junit.xml file as part of your PR as these are auto-generated and just clutters up the PR, future work will be done to not make them part of the repo but they currently need to be included for the tags

A suggested workflow for UI changes

1. npm i to install the project
2. npm start to start the dev application then you can make your changes quickly
3. npm test to run the tests, run npm run updated to quickly update expected values
4. npm run lint to make sure all the files and nice and linted
5. npm build:cli in order to update the CLI with your UI changes
6. ./bin/xunit-viewer -r data -o test-output.html in order to make sure the commands work as expected

If your work does not include any UI work then a suggestion is

1. npm i to install the project
2. ./bin/xunit-viewer ... in order to make sure the commands work as expected
3. npm test to run the tests, run npm run updated to quickly update expected values
4. npm run lint` to make sure all the files and nice and linted

Help Wanted

I am always looking for sample data. If you have some results which you think are "interesting" then please raise an issue or pull request and we can add this to our sample data.

Issues

Raise any issues using GitHub and provide sample data where possible.

To help debug any issues please provide the following info

* node and npm version, refer to Node for LTS
* xunit viewer version
* browser
* sample xml

TODO

1. Fix CLI filtering
2. Release v11
3. Refactorings
* Split components into files
* Split reducer into files
* Test all the things