Tap-that-html NPM

tap-that-html

TAP to HTML formatter.

Installation

$ yarn global add tap-that-html

Usage

$ ava --tap | tap-that-html

Example

TAP Output:

TAP version 13

ok 1 Dog has a name.
ok 2 Dog can bark.
not ok 3 Dog can meow.
  ---
    operator: ===
    expected: true
    actual: false
  ...
ok 4 Dog can fetch.
not ok 5 Dog can fly.
  ---
    operator: ===
    expected: true
    actual: false
  ...

1..5
# tests 5
# pass  3
# fail  2

HTML Output:

<html>
	<head>
		<title>Tap That HTML</title>
		<link rel="stylesheet" href=".../normalize.min.css">
		<style>
			html {
				font-size: 16px;
				font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
			}

			body {
				padding: 24px 48px;
			}

			.summary h4 {
				margin: 0;
			}

			.summary h4:nth-child(n + 2) {
				margin-top: 8px;
			}

			.section:nth-child(n + 2) {
				margin-top: 12px;
			}

			.result {
				color: #495057;
				padding-top: 12px;
			}

			.result .number {
				color: #adb5bd;
			}

			.result .status {
				font-weight: bold;
			}

			.result.pass .status {
				color: #94d82d;
			}

			.result.fail .status {
				color: #ff8787;
			}

			.fail .description {
				color: #ff6b6b;
			}

			.description {
				padding: 12px 16px 0;
			}

			.description .error-detail:nth-child(n + 2) {
				padding-top: 4px;
			}
		</style>
  </head>
  <body>
		<div class="section summary">
			<h4> Tests: 5 </h4>
			<h4> Passed: 3 </h4>
			<h4> Failed: 2 </h4>
		</div>
    <div class="section report">
			<div class="result pass">
				<span class="number">1:</span> <span class="status"> OK </span> - Dog has a name.
			</div> 
			<div class="result pass">
				<span class="number">2:</span> <span class="status"> OK </span> - Dog can bark.
			</div> 
			<div class="result fail">
				<span class="number">3:</span> <span class="status"> FAIL </span> - Dog can meow.
				<div class="description">
					<div class="error-detail"> - operator: === </div>
					<div class="error-detail"> - expected: true </div>
					<div class="error-detail"> - actual: false </div>
				</div>
			</div>
			<div class="result pass">
				<span class="number">4:</span> <span class="status"> OK </span> - Dog can fetch.
			</div> 
			<div class="result fail">
				<span class="number">5:</span> <span class="status"> FAIL </span> - Dog can fly.
				<div class="description">
					<div class="error-detail"> - operator: === </div>
					<div class="error-detail"> - expected: true </div>
					<div class="error-detail"> - actual: false </div>
				</div>
			</div>
    </div>
	</body>
</html>

In Browser: npm.io

License

get-stdin string-to-stream strip-ansi tap-out

@infinitebrahmanuniverse/nolb-tap @everything-registry/sub-chunk-2877 runkit-tap

1.0.1

7 years ago

1.0.0

7 years ago