Giter Club home page Giter Club logo

xunit-viewer's Introduction

Junit Viewer

npm version Join the chat at https://gitter.im/lukejpreston/junit_viewer Build Status Dependency Status Downloads on npm

Junit Viewer is a very simple yet powerful way of viewing your xunit results

Features

Reads a file or folder (and all sub folders) of XML results Hence you don't need to run this on separate files

Has it's own API Now you can embed it in your own test runners in order to save the results in a quick and nice viewer

Single Page Results You don't need to have a whole folder of files in order to view your results (trke all other junit viewers)

Shows HTML output This tool will show HTML in your test messages, meaning it is a great test snapshot tool to show images

Using Express to start a server Means you can just hit refresh and you have your latest tests instead of re-running Junit Viewer

Search It comes with a search box so you can search your suites and tests and test messages but also properties, it uses matching similar to Sublime e.g 'HW' would match against 'HelloWorld' (so would 'hw') and you can also search using regex e.g. 'h(.*)' would match against 'HelloWorld' or you can use a glob search e.g. '*world' would match against 'hello world'

Skeleton It uses Skeleton so it is pretty, responsive and quick

Quick It uses mustache and has no jquery as such it is quicker than any other junit test viewer

Independent It is independent of any testing tool, so it can work with anything which can produce junit results

Contracted View It provides a contracted default view for all suits at startup

Install It

npm install junit-viewer -g

Find the project on NPM

Run It

If you just want to log to the terminal

junit-viewer --results=file_or_folder_location

By default it will just set the results folder to the current directory so you could just run

junit-viewer

If you want to save it to a file

junit-viewer --results=file_or_folder_location --save=file_location.html

If you want to start a server

junit-viewer --results=file_or_folder_location --port=port_number

By default it is minified but if you don't want it minified

junit-viewer --results=file_or_folder_location --minify=false

By default it displays expanded view of suits

junit-viewer --results=file_or_folder_location --contracted

Using the API

npm install --save-dev junit-viewer
var jv = require('junit-viewer')
var parsedData = jv.parse('fileOrFolderLocation')
// var parsedData = jv.parseXML('xml data')
var renderedData = jv.render(parsedData)
var parsedAndRenderedData = jv.junit_viewer('fileOrFolderLocation')

Code Documentation

Using Junit Viewer's very own unit tests (using a single file result)

Junit Viewer

Demos

Using Junit Viewer's very own unit tests (using a folder of results)

A mix of all kinds of tests

Running in Browser

You can also run junit_viewer in the browser. To make this work, you need to bundle the junit_viewer API using a suitable tool. In this example, I am using browserify but webpack etc. should work just fine as well.

Create a file for setting up the bundle:

bundle_setup.js

var viewer = require('./junit_viewer');
window.JUnitViewer = viewer;

Install some dependancies:

npm install -g browserify
npm install brfs --save

Make the bundle:

browserify bundle_setup.js -o junit-viewer-bundle.js -t brfs

Now you can use the bundle in HTML. In this example, I am putting the rendered output into an iframe. Replace with the content of the xml for the test output:

index.html

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>JUnit test results</title>
	<script src="junit-viewer-bundle.js"></script>

	<style>
		* {
			box-sizing: border-box;
			margin: 0;
		}

		html,
		body,
		#results {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<iframe id="results"></iframe>
	<script>
		try {
			var xmlResults = "<!--XMLString-->";
			var parsedResults = JUnitViewer.parseXML(xmlResults);
			var renderedData = JUnitViewer.render(parsedResults);
			document.getElementById('results').contentWindow.document.write(renderedData);
		} catch (e) {
			alert('Error: ' + e.toString() + ' - ' + e.stack);
		}
	</script>
</body>

</html>

Contributions

If you wish to contribute then you can either create an issue or fork it and create a PR

When developing all you need to do is

npm i

And to run the tests

npm test

The testing strategy is an integration test and not a conventional unit test

xunit-viewer's People

Contributors

szikszail avatar anthraxn8b avatar lukejpreston avatar matthiasbalke avatar roydahan avatar gwynjudd avatar gitter-badger avatar ananyasaxena avatar dreadpirateshawn avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.