meteor/packages/test-in-browser/driver.html

<template name="testInBrowserBody">
  {{> styles }}
  <div class="test-in-browser">
  {{> navBar}}
  <div class="test-results">
    {{> uncaughtErrors}}
    {{> failedTests}}
    {{> testTable}}
  </div>
  {{> groupNav}}
  </div>
</template>

<template name="navBar">
  <nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
        {{#if running}}
          Testing in progress...
        {{else}}
          {{#if passed}}
            All tests pass!
          {{else}}
            There are failures.
          {{/if}}
        {{/if}}
    </a>
    {{#unless running}}
      <span class="navbar-text">{{total_test_time}} ms</span>
    {{/unless}}
    {{> progressBar}}
  </nav>
</template>

<template name="progressBar">
  <div id="testProgressBar" class="progress {{barOuterClass}}">
    <span class="in-progress">Passed {{passedCount}} of {{totalCount}}</span>
    <div class="progress-bar bg-danger" role="progressbar" style="width: {{percentFail}}%;" aria-valuenow="{{percentFail}}" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar {{barInnerClass}}" role="progressbar" style="width: {{percentPass}}%;" aria-valuenow="{{percentPass}}" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</template>

<template name="groupNav">
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <ul class="navbar-nav mr-auto">
      {{#each groupPaths}}
        <li class="nav-item"><span class="nav-link">&nbsp;-&nbsp;</span></li>
        <li class="nav-item"><a class="nav-link" href="#">{{name}}</a></li>
      {{/each}}
    </ul>

    <form class="navbar-form pull-right">
      <span id="current-client-test"></span>
      <button class="btn btn-primary rerun">
        {{#if rerunScheduled}}
        Rerun scheduled...
        {{else}}
        Rerun
        {{/if}}
      </button>
    </form>
  </nav>
</template>

<template name="uncaughtErrors">
  {{#if uncaughtErrors}}
    <div class="container-fluid">
        <div class="alert alert-danger">
          <p>
            <strong>WARNING:</strong> The following uncaught errors might be
            preventing some client tests from running.
          </p>
          <ul>
            {{#each uncaughtErrors}}
              <li>{{this}}</li>
            {{/each}}
          </ul>
      </div>
    </div>
  {{/if}}
</template>

<template name="failedTests">
  {{#if failedTests}}
    <div class="container-fluid">
      <ul class="failedTests">
        {{#each failedTests}}
          <li>{{this}}</li>
        {{/each}}
      </ul>
    </div>
  {{/if}}
</template>

<template name="testTable">
  <div class="container-fluid">
  <div class="test_table">
    {{#each testdata}}
      {{> test_group thisWithDep}}
    {{/each}}
  </div>
  </div>
</template>

<template name="test_group">
  <div class="group">
    <div class="groupname"><a>{{name}}</a></div>
    {{#each tests}}
      {{> test thisWithDep}}
    {{/each}}
    {{#each groups}}
      {{> test_group thisWithDep}}
    {{/each}}
  </div>
</template>

<template name="test">
  <div class="test {{test_class}}">
    <div class="testrow">
      <div class="teststatus">
        {{test_status_display}}
      </div>
      <div class="testtime">
        {{test_time_display}}
      </div>
      <div class="testname">
        {{#if server}}S:{{else}}C:{{/if}}
        {{name}}
      </div>
    </div>
    {{#if expanded}}
      {{#each eventsArray}}
        {{> event}}
      {{else}}
        <div class="event"><div class="nodata">(no data)</div></div>
      {{/each}}
    {{/if}}
  </div>
</template>

<template name="event">
  <div class="event">
    <div class="{{type}}">
      <span>
      - {{type}}
      {{#if times}}
        <span class="xtimes">({{times}} times)</span>
      {{/if}}
      {{#with get_details}}
        {{#if this}}
          {{!
            `type` can be any of the following or a
            custom assertion type

            * assert_equal
            * instanceOf
            * throws
            * true
            * null
            * undefined
            * NaN
            * include
            * length
          }}
          {{#if type}}&mdash; {{type}}{{/if}}
          {{#each details}}
            - <span class="failkey">{{key}}</span> {{val}}
          {{/each}}
        {{/if}}
        {{#if stack}}<pre>{{stack}}</pre>{{/if}}
      {{/with}}
      {{#if is_debuggable}}
        <span class="debug">[Debug]</span>
      {{/if}}
      </span>
    </div>
  </div>
</template>
<template name="styles">
  <!--
	  TODO FIBERS:
	  TODO Remove this before 3.0 release
	  TODO This is a workaround, brought the styles from driver.css until
		TODO I can figure out how to get them to load.
	 -->
  <style>
    * {
      /* Variables */
      /* for reference: https://tailwindcss.com/docs/customizing-colors */

      --bg-black: #18181b;
      --neutral-black: #262626;
      --primary-white: #F9FAFB;
      --red-50: #fef2f2;
      --red-200: #fecaca;
      --red-600: #dc2626;
      --red-900: #7f1d1d;
      --gray-300: #d6d3d1;
      --gray-500: #737373;


      --blue-500: #6366f1;
      --blue-50: #eef2ff;

      --yellow-400: #facc15;

      --green-600: #16a34a;
    }

    body {
      height: 100vh;
      width: 100vw;
      background-color: #18181b !important;
      background-color: var(--bg-black) !important;
      color: #F9FAFB !important;
      color: var(--primary-white) !important;

    }

    .test-in-browser {
      display: flex;
      height: 100%;
      flex-direction: column;
    }

    .test-results {
      flex: 1;
      overflow: auto;
    }

    #testProgressBar {
      flex: 1;
      max-width: 400px;
      position: relative;
    }

    .header {
      font-family: Arial, sans-serif;
      font-size: 24px;
      padding-bottom: 4px;
    }

    .header.in-progress {
      color: #fef2f2;
      color: var(--red-50);
    }

    .header.pass {
      color: #16a34a; /* green */
      color: var(--green-600); /* green */
    }

    .header.fail {
      color: #7f1d1d; /* red */
      color: var(--red-900); /* red */
      font-weight: bold;
    }

    .header .time {
      color: var(--gray-500);
      color: #737373;
      font-size: 14px;
    }

    .test_table {
      font-family: Arial, sans-serif;
      font-size: 16px;
    }

    .test_table .group {
      border-left: 1px solid #fef2f2;
      border-left: 1px solid var(--red-50);
    }

    .test_table .group .group {
      margin-left: 20px;
    }

    .test_table .test {
      margin-left: 20px;
    }

    .test_table .testname {
      margin-left: 200px;
      line-height: 24px;
      vertical-align: middle;
      text-decoration: underline;
      cursor: pointer;
    }

    .test_table .groupname {
      font-weight: bold;
      background: var(--neutral-black);
      background: #262626;
      padding-left: 5px;
      line-height: 24px;
      vertical-align: middle;
      font-size: 16px;
      color: var(--primary-white);
      color: #F9FAFB;
    }

    .test_table .event {
      margin-left: 20px;
      font-size: 14px;
      border-left: 2px solid var(--blue-50);
      border-left: 2px solid #eef2ff;
      padding: 4px;
      position: relative;
    }

    .test_table .test .testrow {
      position: relative;
      overflow: hidden; /*hasLayout*/
    }

    .test_table .running .testname {
      color: var(--blue-500);
      color: #6366f1;
    }

    .test_table .failed .testname {
      color: var(--red-900);
      color: #7f1d1d;
    }

    .test_table .succeeded .testname {
      color: var(--green-600);
      color: #16a34a;
    }

    .test_table .teststatus {
      position: absolute;
      height: 100%;
      width: 100px;
      left: 0px;
      top: 0;
      text-align: center;
      line-height: 24px;
      vertical-align: middle;
    }

    .test_table .testtime {
      position: absolute;
      height: 100%;
      width: 75px;
      margin-right: 5px;
      left: 100px;
      top: 0;
      text-align: right;
      line-height: 24px;
      vertical-align: middle;
      font-size: 14px;
      color: var(--gray-500);
      color: #737373;
    }

    .test_table .succeeded .teststatus {
      color: var(--green-600);
      background: var(--bg-black);
      color: #16a34a;
      background: #18181b;
    }

    .test_table .failed .teststatus {
      color: var(--red-900); /* red */
      background: var(--bg-black);
      color:  #7F1D1D; /* red */
      background: #18181b;
    }

    .test_table .running .teststatus {
      color: var(--red-50);
      color: #fef2f2;
    }

    .test_table .event .expected_fail {
      color: var(--red-900);
      color: #7f1d1d;
    }

    .test_table .event .fail {
      color: var(--red-600);
      color: #dc2626;
    }

    .test_table .event .exception {
      color: var(--red-600);
      color: #dc2626;
    }

    .exception pre {
      color: var(--primary-white);
      color: #F9FAFB;
    }

    .test_table .event .nodata {
      color: var(--red-50);
      color: #fef2f2;
      font-style: italic;
    }

    .test_table .event .xtimes, .test_table .event .failkey {
      font-weight: bold;
    }

    .test_table .event .debug {
      display: none;
    }

    .test_table .event:hover .debug {
      display: inline;
      color: var(--gray-500);
      color: #737373;
      text-decoration: underline;
      cursor: pointer;
    }

    .in-progress {
      position: absolute;
      left: 10px;
      z-index: 2;
    }

    .string_equal {
      line-height: 1.2;
      margin-left: 30px;
    }

    .string_equal ins {
      text-decoration: none;
    }

    .string_equal_expected ins {
      background: var(--yellow-400);
      background: #f59e0b;
    }

    .string_equal_actual ins {
      color: var(--red-600);
      background: var(--red-200);
      color: #dc2626;
      background: #fecaca;
    }

    #current-client-test {
      color: var(--gray-300);
      color: #d6d3d1;
      margin-right: 15px;
    }

    .failedTests {
      color: var(--red-900);
      color: #7f1d1d;
    }
  </style>
</template>