@mythoskop/svelte-user-testing

Dieses Paket ermöglich übersichtliches Durchführen von Nutzertests und automatischen Tests von Svelte-Anwendungen.

Nutzung

Wenn die Suite richtig eingebunden ist, wird sie im Entwicklungs-Modus am linken Seitenrand sehr schmal angezeigt. Wenn man den Cursor darauf bewegt wird oder sie auf einem Touchscreen antipp, fährt die Suite sich auf die Hälfte des Bildschirms aus. Die Bearbeitenden des Testberichts sollten ihre Namen in das Autor-Feld eintragen.

Testberichte

Wenn ein Testbericht bearbeitet wird, wird jede Änderung lokal im Browser gespeichert, sodass die Arbeit zwischenzeitlich unterbrochen und die Seite geschlossen werden kann. Wenn man einen Testdurchlauf hinreichend bearbeitet hat, kann man den Bericht über eine Schaltfläche am Kopf der Seite herunterladen und verschicken. Abgeschlossene Berichtdateien können außerdem hochgeladen und analysiert werden.

Manuelle Tests

Manuelle Tests sind in der Suite definiert, müssen aber vom Nutzer selbst auf der Seite durchgeführt werden. Die Auswertung erfolgt dann in der Suite. Dabei kann der Status des Tests manuell ausgewählt werden. Insofern er nicht erfolgreich ist, sollte in das Feld Anmerkungen der Grund dafür geschrieben werden. Dieses Feld steht aber auch erfolgreichen Tests offen.

Automatische Tests

Automatische Tests werden beim Erstellen eines neuen Testberichts automatisch ausgeführt und im Testbericht vermerkt.

API

Test-Module aus Tests erstellen

// $lib/my-module/tests.ts
import { TestModule } from "@mythoskop/svelte-user-testing";
// create module
const MY_MODULE = new TestModule("module-name", "module-description");
// export module for use in suite
export { MY_MODULE };

Manuelle Tests schreiben

// $lib/my-module/tests.ts
import { ManualTest } from "@mythoskop/svelte-user-testing";
// add manual tests to module
MY_MODULE.manual.push(new ManualTest("manual-test-name", "test-description"));

Manuelle Tests mit Links schreiben

Damit eine Testperson schnell zu den betreffenden Seite navigieren kann, kann man einem manuellen Test noch Links als Parameter übergeben.

// $lib/my-module/tests.ts
// add manual tests to module
MY_MODULE.manual.push(new ManualTest("manual-test-name", "test-description", ["/about"]));

Automatische Tests schreiben

// $lib/my-module/tests.ts
import { AutomatedTest, AssertionRunner } from "@mythoskop/svelte-user-testing";
// add automated tests to module
MY_MODULE.automated.push(
  new AutomatedTest("automated-test-name", "test-description", (runner: AssertionRunner) => {
    runner.assert(true, "true should be true");
    runner.assertEquals("", false, "fail if not strictly equal");
    runner.assertUnequals("", "", "fail if strictly equal");
    runner.warnIfNot("", "strings should not be falsy (imho)");
    runner.warnIfNotEquals("", false, "warn if not strictly equal");
    runner.warnIfEquals("", "", "warn if strictly equal");
  })
);

Test-Suite erstellen

// $lib/tests.ts
// create test suite
import { TestSuite } from "@mythoskop/svelte-user-testing";
const SUITE = new TestSuite("my-name", "my-description");
// add modules to test suite
import { MY_MODULE } from "$lib/my-module/tests";
SUITE.modules.push(MY_MODULE);
// export test suite
export { SUITE };

Test-Suite integrieren

<script>
  // routes/__layout.svelte
  import { SUITE } from "$lib/tests";

  import Overlay from "@mythoskop/svelte-user-testing";
</script>

<!-- Auskommentieren für den Production-Build -->
<Overlay suite={TEST_SUITE} />

Upcoming Features

• Anzeige, wieviele Tests welchen Status haben