Mochaterial

Mochaterial ist ein browserbasierter Reporter für mocha.js, ein erstklassiges JavaScript-Testframework. Es ist als natives ES6-Modul geschrieben, so dass Sie Ihre Testpakete ohne Installation und außerhalb einer node.js-Umgebung ausführen können. Mit jedem beliebigen Webserver können Sie jetzt Testsuiten für Ihre Infrastruktur, Integrations- und Support-Teams mit einer umfassenden, einfach zu bedienenden Benutzeroberfläche bereitstellen.

Warum Mochaterial?

Es gibt viele großartige Mocha-Reporter da draußen (Mochawesome ist unser Favorit), also warum braucht man noch ein weiters? Die Mehrheit der verfügbaren Reporter läuft über node.js, was in vielen Fällen in Ordnung ist, aber die folgenden Probleme mit sich bringt:

  • Sie benötigen natürlich node.js; ideal für Entwickler, aber andere Teams könnten Probleme bekommen
  • Wenn Ihr Paket Browserabhängigkeiten aufweist, müssen Sie nun einen Headless-Browser anhängen
  • Die Auslieferung Ihrer Tests als Produkt selbst ist schwieriger

Mochaterial ermöglicht es Ihnen, Tests schnell in jedem von Ihnen gewählten Browser auszuführen und zu überprüfen, ob Ihre Module richtig geladen sind. Anschließend können Sie Ihre Testpakete einfach versenden.

Demo

Mochaterial wird in drei Geschmacksrichtungen geliefert: Standardmäßig wird das Baseline Theme von Material Design verwendet, Coffee, welches das Theme der Mocha API aufgreift und noch eine Dark-Variante. Die Designs sind sehr einfach anzupassen, so dass Sie den Look erstellen können, der zu Ihrem Produkt passt, wie Sie unten sehen können.

Setup

Mochaterial erfordert keine Installation für den einfachen Gebrauch. Kopieren Sie einfach das erforderliche Markup in ein HTML-Dokument, fügen Sie Ihre Tests hinzu und veröffentlichen Sie es auf einem Webserver Ihrer Wahl. Dieses Setup ist sehr ähnlich zu dem Standard HTML-Reporter, den mocha.js anbietet. Alle benötigten Ressourcen sind über die UNPKG cdn verfügbar, so dass Sie von dort aus auf sie verweisen können (obwohl Sie sie natürlich herunterladen und lokal bedient werden können, wenn Sie es wünschen). Grundlegende Optionen werden über reporterOptions festgelegt, und einfache Designänderungen können über Inline-Stiles vorgenommen werden. Für eine weitergehende Anpassung können Sie das Repository von github herunterladen.

Interne Komponenten

Mochaterial verwendet die folgenden Pakete für das HTML-Rendering:

Optionen

Sie können Mochaterial konfigurieren, indem Sie das gut geformte reporterOptions Objekt in mocha.setup bereitstellen:

<script type="module">

  import { Mochaterial } from "./mochaterial.mjs";

  mocha.setup({
    ui: "bdd",
    reporter: Mochaterial,
    // Konfigurieren Sie hier Optionen, Standardwerte werden als Referenz angezeigt
    reporterOptions: { 
      title: "document.title",
      titlePath: "window.location",
      showHooksDefault: true,
      rootSuiteTitle: "Isolated Tests",
      indentSuites: "tablet-up",
      codeBackground: "surface",
      codeDefaultText: "on-surface",
      diffFormat: "side-by-side"
    }       
  });
      
</script>

title

Der Titel der Seite in der Kopfzeile. Standardmäßig wird das Element <title> im Abschnitt <head> oder nur "Mochaterial" verwendet, wenn es nicht gefunden werden kann.

titlePath

Das Ziel des Titels, wenn auf ihn geklickt wird. Standardmäßig wird die aktuelle Seitenposition (Reload) verwendet, wenn sie nicht angegeben ist.

showHooksDefault

Zeigt standardmäßig durchgehende hooks an. Dadurch wird der Anfangszustand des Schalters im Navigationsmenü umgeschaltet. Standardmäßig ist der Wert "true".

rootSuiteTitle

Tests, die außerhalb einer Suite erscheinen, werden automatisch der "root"-Suite zugewiesen, diese Option setzt den Titel. Standardmäßig ist der Wert "Isolated Tests" voreingestellt.

indentSuites

Legt fest, wann Child Suites eingerückt werden sollen. Gültige Werte sind "no-indent", d.h. Einrückung wird ausgeschlossen, "indent" wird immer eingrückt, oder "tablet-up", um Einrückungen auf Tablets oder größeren Geräten zu ermöglichen. Standardmäßig ist "tablet-up" voreingestellt.

codeBackground

Styles aus highlight.js stellen einen Hintergrund für Codeblöcke dar. Diese Option steuert, ob es über "hljs" oder den "surface" Hintergrund von Materialkomponenten genutzt werden soll. Standardmäßig ist "surface" voreingestellt.

codeDefaultText

In ähnlicher Weise erhält der Standardtext innerhalb eines highlight.js-Blocks eine Standardfarbe. Sie können es mit "hljs" oder der "on-surface"-Farbe aus Materialkomponenten verwenden. Standardwert ist "on-surface".

diffFormat

Spezifiziert, ob die Unterschiede der Behauptungen im Format "line-by-line" oder "side-by-side" angezeigt werden sollen. Die Standardeinstellung ist "side-by-side".

Anpassung

Mochaterial nutzt und erweitert die Themes-Engine von Material Web Components, so dass Sie Farben und Symbole austauschen können, indem Sie die :root css-Variablen mit Inline-Stiles überschreiben. So können Sie schnell einen neuen Look erstellen, ohne eine Reihe von CSS-Klassen durchsuchen zu müssen. Wenn Sie es vorziehen, können Sie auch Ihr eigenes Design erstellen, indem Sie das Repository herunterladen und ein neues Design mit sass erstellen.

Direkt in Ihrer HTML-Markup-Seite:

<!-- Laden Sie das Standard-Stylesheet oder ein Design, von dem aus Sie beginnen möchten -->
<link rel="stylesheet" href="./mochaterial.css">
<style>
  /* Überschreiben Sie nun mdc-theme & mocha-Farben und setzen Sie Material-Icons nach Wunsch*/
  :root {
    --mdc-theme-primary: #5d3b1e;
    --mdc-theme-secondary: #e8c89e;
    --mdc-theme-surface: #8c6546;
    --mdc-theme-text-primary-on-background: #5d3b1e;
    --mdc-theme-text-hint-on-background: #8c6546;

    --mocha-passed: #76ff03;
    --mocha-failed: #ffa4a2;
    --mocha-fast: #76ff03;
    --mocha-slow: #ffa4a2;
    --mocha-replay: #e8c89e;

    --icon-blocked: "error";
    --icon-passed-count: "check_circle_outline";
    --icon-failed-count: "highlight_off";
    --icon-pending-count: "pause_circle_outline";
    --icon-blocked-count: "error_outline"; 
  } 
</style>

In einer neuen Sass-Themendatei, wie mochaterial.coffee.scss:

// Setzen Sie die Sass-Variablen auf Übersteuerung
$mdc-theme-primary: #5d3b1e;
$mdc-theme-secondary: #e8c89e;
$mdc-theme-surface: #8c6546;
$mdc-theme-on-surface: #FFFFFF;
$mdc-theme-text-primary-on-background: #5d3b1e;
$mdc-theme-text-hint-on-background: #8c6546;

$mocha-passed: #76ff03;
$mocha-failed: #ffa4a2;
// Hinweis: Fast, Slow, Replay werden vererbt, so dass sie fallen gelassen werden können 

$icon-blocked: "error";
$icon-passed-count: "check_circle_outline";
$icon-failed-count: "highlight_off";
$icon-pending-count: "pause_circle_outline";
$icon-blocked-count: "error_outline"; 

// Importieren Sie nun die Basis scss
@import "mochaterial";

Bauen Sie mit "gulp styles", und fügen Sie in Ihrem HTML-Markup das neue Design hinzu:

<link rel="stylesheet" href="./mochaterial.coffee.css">

Lizenz

Mochaterial ist MIT-lizenziert.

Gehen Sie weiter und testen Sie!

Wir hoffen, dass Sie Mochaterial als nützliches Werkzeug in Ihrem JavaScript-Test-Werkzeuggürtel hinzufügen. Wenn Sie Hilfe benötigen, um Ihre Testsuiten auf den Markt zu bringen, lassen Sie es uns wissen, wir können Ihnen dabei helfen!