10 Erste Schritte mit Quiz und Übungen

In den meisten Kapiteln gibt es Quizze und Übungen. Dies ist eine kostenpflichtige Funktion, aber eine umfassende Vorschau ist verfügbar. Dieses Kapitel erklärt, wie Sie damit beginnen.

10.1 Quizze

Installation

• Laden Sie impatient-js-quiz.zip herunter und entpacken Sie es.

Ausführen der Quiz-App

• Öffnen Sie impatient-js-quiz/index.html in einem Webbrowser.
• Sie sehen ein Inhaltsverzeichnis aller Quizze.

10.2 Übungen

10.2.1 Installation der Übungen

Um die Übungen zu installieren:

• Laden Sie impatient-js-code.zip herunter und entpacken Sie es.
• Befolgen Sie die Anweisungen in README.txt.

10.2.2 Ausführen von Übungen

• Übungen werden in diesem Buch über ihren Pfad referenziert.
  • Zum Beispiel: exercises/quizzes-exercises/first_module_test.mjs
• Innerhalb jeder Datei
  • Die erste Zeile enthält den Befehl zum Ausführen der Übung.
  • Die folgenden Zeilen beschreiben, was Sie tun müssen.

10.3 Unit-Tests in JavaScript

Alle Übungen in diesem Buch sind Tests, die über das Test-Framework Mocha ausgeführt werden. Dieser Abschnitt gibt eine kurze Einführung.

10.3.1 Ein typischer Test

Typischer Testcode ist in zwei Teile aufgeteilt:

• Teil 1: Der zu testende Code.
• Teil 2: Die Tests für den Code.

Nehmen Sie zum Beispiel die folgenden beiden Dateien:

• id.mjs (zu testender Code)
• id_test.mjs (Tests)

10.3.1.1 Teil 1: Der Code

Der Code selbst befindet sich in id.mjs.

export function id(x) {
  return x;
}

Das Wichtigste hier ist: Alles, was wir testen wollen, muss exportiert werden. Andernfalls kann der Testcode nicht darauf zugreifen.

10.3.1.2 Teil 2: Die Tests

Die Tests für den Code befinden sich in id_test.mjs.

// npm t demos/quizzes-exercises/id_test.mjs
suite('id_test.mjs');

import * as assert from 'assert/strict'; // (A)
import {id} from './id.mjs'; // (B)

test('My test', () => { // (C)
  assert.equal(id('abc'), 'abc'); // (D)
});

Der Kern dieser Testdatei ist Zeile D – eine Assertion: assert.equal() gibt an, dass das erwartete Ergebnis von id('abc') 'abc' ist.

Was die anderen Zeilen betrifft:

• Der Kommentar ganz am Anfang zeigt den Shell-Befehl zum Ausführen des Tests.
• Zeile A: Wir importieren die Node.js-Assertionsbibliothek (im strict assertion mode).
• Zeile B: Wir importieren die zu testende Funktion.
• Zeile C: Wir definieren einen Test. Dies geschieht durch Aufruf der Funktion test().
  • Erster Parameter: Der Name des Tests.
  • Zweiter Parameter: Der Testcode, der über eine Pfeilfunktion übergeben wird. Der Parameter t gibt uns Zugriff auf die Test-API von AVA (Assertions usw.).

Um den Test auszuführen, führen wir in der Befehlszeile Folgendes aus:

npm t demos/quizzes-exercises/id_test.mjs

Das t ist eine Abkürzung für test. Das heißt, die lange Version dieses Befehls lautet:

npm test demos/quizzes-exercises/id_test.mjs

10.3.2 Asynchrone Tests in Mocha

Das Schreiben von Tests für asynchronen Code erfordert zusätzliche Arbeit: Der Test erhält seine Ergebnisse später und muss Mocha signalisieren, dass er noch nicht fertig ist, wenn er zurückkehrt. Die folgenden Unterabschnitte untersuchen drei Möglichkeiten, dies zu tun.

10.3.2.1 Asynchronität über Callbacks

Wenn der Callback, den wir an test() übergeben, einen Parameter hat (z. B. done), wechselt Mocha zur Callback-basierten Asynchronität. Wenn wir mit unserer asynchronen Arbeit fertig sind, müssen wir done aufrufen.

test('divideCallback', (done) => {
  divideCallback(8, 4, (error, result) => {
    if (error) {
      done(error);
    } else {
      assert.strictEqual(result, 2);
      done();
    }
  });
});

So sieht divideCallback() aus:

function divideCallback(x, y, callback) {
  if (y === 0) {
    callback(new Error('Division by zero'));
  } else {
    callback(null, x / y);
  }
}

10.3.2.2 Asynchronität über Promises

Wenn ein Test ein Promise zurückgibt, wechselt Mocha zur Promise-basierten Asynchronität. Ein Test gilt als erfolgreich, wenn das Promise erfüllt ist, und als fehlgeschlagen, wenn das Promise abgelehnt wird oder wenn die Abwicklung länger als ein Timeout dauert.

test('dividePromise 1', () => {
  return dividePromise(8, 4)
  .then(result => {
    assert.strictEqual(result, 2);
  });
});

dividePromise() wird wie folgt implementiert:

function dividePromise(x, y) {
  return new Promise((resolve, reject) => {
    if (y === 0) {
      reject(new Error('Division by zero'));
    } else {
      resolve(x / y);
    }
  });
}

10.3.2.3 Async-Funktionen als Test-"Körper"

Async-Funktionen geben immer Promises zurück. Daher ist eine Async-Funktion eine bequeme Möglichkeit, einen asynchronen Test zu implementieren. Der folgende Code ist äquivalent zum vorherigen Beispiel.

test('dividePromise 2', async () => {
  const result = await dividePromise(8, 4);
  assert.strictEqual(result, 2);
  // No explicit return necessary!
});

Wir müssen nichts explizit zurückgeben: Das implizit zurückgegebene undefined wird verwendet, um das von dieser Async-Funktion zurückgegebene Promise zu erfüllen. Und wenn der Testcode eine Ausnahme auslöst, kümmert sich die Async-Funktion darum, das zurückgegebene Promise abzulehnen.