Übung: eine chaotische Klasse, Schritt für Schritt aufgeräumt

Code in:JavaC#PythonJavaScript

Kurz gesagt: Eine Refactoring-Übung: Eine Scooter-Verleih-Klasse wird in fünf kleinen Schritten aufgeräumt (Namen, magische Zahlen, Geld, Abfrage getrennt vom Befehl, Tarife), während die Tests grün bleiben.

Problem

Die Scooter, die keiner anzufassen wagt

Ein Unternehmen, das E-Scooter vermietet, rechnet jede Fahrt mit der Klasse RideMgr ab. Sie läuft seit drei Jahren. Die Methode calc berechnet den Preis nach dem Tarif des Kunden (Pay-as-you-go, Student oder Monatskarte), lässt ab der vierten Fahrt des Tages die Entsperrgebühr weg, schlägt einen Nachtzuschlag auf, addiert den Umsatz und schickt einen Kassenbon:

export class RideMgr {
  constructor() {
    this.c = new Map();
    this.s = 0;
    this.out = [];
  }

  // Der Preis: 1 € zum Entsperren und 0,15 € pro Minute.
  // Nachts steigt der Preis um 50 %.
  calc(to, t, m, f) {
    this.c.set(to, (this.c.get(to) ?? 0) + 1);
    let p = 0;
    if (t === "payg") {
      p = 1 + m * 0.2;
    } else if (t === "student") {
      p = (1 + m * 0.2) * 0.8;
    } else if (t === "monthly") {
      if (m > 45) {
        p = (m - 45) * 0.2;
      }
    }
    if (this.c.get(to) > 3 && t !== "monthly") {
      p = p - 1;
    }
    if (f) {
      p = p + 0.5;
    }
    this.s = this.s + p;
    this.out.push(`${to}: ${m} Min., ${p.toFixed(2)} €`);
    return p;
  }
}

Nächsten Monat kommen zwei Änderungen:

• ein Firmentarif: keine Entsperrgebühr, 0,18 € pro Minute, kein Rabatt für die vierte Fahrt;
• der Preis vor dem Ende: Die App zeigt, was die Fahrt kosten wird, während sie noch läuft.

Die zweite Änderung geht mit dieser Klasse nicht. Das passiert, wenn die App calc aufruft, um den Preis zu zeigen, und dann noch einmal, um das Geld abzubuchen:

const rides = new RideMgr();
const shown = rides.calc("ana@example.com", "payg", 10, false);
console.log(`Preis vor dem Ende: ${shown.toFixed(2)} €`);
const charged = rides.calc("ana@example.com", "payg", 10, false);
console.log(`Abgebucht: ${charged.toFixed(2)} €`);
console.log(`Kassenbons: ${rides.out.length}`);
console.log(`Umsatz: ${rides.s.toFixed(2)} €`);

Ausgabe

Preis vor dem Ende: 3.00 €
Abgebucht: 3.00 €
Kassenbons: 2
Umsatz: 6.00 €

Eine Fahrt, zwei Kassenbons und 6 € Umsatz. calc klingt nach einer Frage, aber es zählt, addiert und verschickt.

In dieser Lektion gibt es keine neue Idee. Es ist eine Übung: Die Klasse geht in kleinen Schritten durch die Werkzeuge des Moduls, und nach jedem Schritt lässt du die Tests laufen.

Sieh es dir an

Schritt 0: das Sicherheitsnetz

Zuerst das Netz, wie in der Lektion über Tests. Neun Tests halten fest, was die Klasse heute tut: den Preis für jeden Tarif, die Nacht, die vierte Fahrt, den Kassenbon und den Umsatz.

import { test, beforeEach } from "node:test";
import assert from "node:assert/strict";
import { RideMgr } from "./rides.js";

const EMAIL = "ana@example.com";
let rides;

beforeEach(() => {
  rides = new RideMgr();
});

function ride(plan, minutes, night) {
  return money(rides.calc(EMAIL, plan, minutes, night));
}

function money(amount) {
  return amount.toFixed(2);
}

test("pro Minute", () => {
  assert.equal(ride("payg", 10, false), "3.00");
});

test("Student", () => {
  assert.equal(ride("student", 10, false), "2.40");
});

test("Monatskarte bis 45 Min.", () => {
  assert.equal(ride("monthly", 30, false), "0.00");
});

test("Monatskarte über 45 Min.", () => {
  assert.equal(ride("monthly", 60, false), "3.00");
});

test("nachts", () => {
  assert.equal(ride("payg", 10, true), "3.50");
});

test("vierte Fahrt ohne Entsperrgebühr", () => {
  ride("payg", 10, false);
  ride("payg", 10, false);
  ride("payg", 10, false);
  assert.equal(ride("payg", 10, false), "2.00");
});

test("Student bei der vierten Fahrt (so ist es heute)", () => {
  // So ist es heute: der Rabatt ist der ganze 1 €, nicht 0,80 €.
  ride("student", 10, false);
  ride("student", 10, false);
  ride("student", 10, false);
  assert.equal(ride("student", 10, false), "1.40");
});

test("der Kassenbon", () => {
  ride("payg", 10, false);
  assert.deepEqual(rides.out, ["ana@example.com: 10 Min., 3.00 €"]);
});

test("der Umsatz", () => {
  ride("payg", 10, false);
  ride("student", 10, false);
  assert.equal(money(rides.s), "5.40");
});

Ergebnis

OK    Monatskarte bis 45 Min.
OK    Monatskarte über 45 Min.
OK    Student
OK    Student bei der vierten Fahrt (so ist es heute)
OK    der Kassenbon
OK    der Umsatz
OK    nachts
OK    pro Minute
OK    vierte Fahrt ohne Entsperrgebühr
Tests: 9, bestanden: 9, fehlgeschlagen: 0

Die Tests rufen die Klasse nur über die Hilfsmethode ride auf. Wenn sich die Form der Klasse in den nächsten Schritten ändert, ändern sich die Hilfsmethode und die Aufrufe, aber nie die erwarteten Werte.

Einer der Tests ist merkwürdig. Ein Student zahlt 80 % des Preises, sein Entsperren kostet also 0,80 €. Bei der vierten Fahrt zieht die Klasse aber den vollen 1 € ab, und der Student zahlt 1,40 € statt 1,60 €. Ist das ein Fehler oder ein Geschenk? Das entscheidest nicht du, und nicht jetzt. Der Test hält fest, was heute passiert, mit einem Kommentar, und die Frage geht an den Product Owner. Beim Aufräumen ändert sich das Verhalten nicht, auch wenn es falsch aussieht.

Genauer, für Neugierige

Die Beträge werden als Text mit zwei Nachkommastellen verglichen ("2.40"), so wie der Kunde sie sieht. Ein Vergleich von Zahlen würde über die kleinen binären Fehler von number stolpern:

console.log((1 + 10 * 0.2) * 0.8);

Ausgabe

2.4000000000000004

Und in Schritt 3 ändert sich der Typ der Beträge. Der Text mit zwei Nachkommastellen ist davor und danach derselbe.

Sieh es dir an

Schritt 1: die Namen und das Flag

t, m, f, p, c und s werden zu Wörtern (Namen). Der wichtigste Name ist der der Methode: Sie berechnet nicht, sie beendet die Fahrt. Der ehrliche Name ist finishRide, und jetzt steht der Seiteneffekt im Namen. Die Klasse heißt jetzt RideBilling.

export class RideBilling {
  constructor() {
    this.ridesToday = new Map();
    this.revenue = 0;
    this.receipts = [];
  }

  // Der Preis: 1 € zum Entsperren und 0,15 € pro Minute.
  // Nachts steigt der Preis um 50 %.
  finishRide(email, plan, minutes, { night = false } = {}) {
    this.ridesToday.set(email, (this.ridesToday.get(email) ?? 0) + 1);
    let price = 0;
    if (plan === "payg") {
      price = 1 + minutes * 0.2;
    } else if (plan === "student") {
      price = (1 + minutes * 0.2) * 0.8;
    } else if (plan === "monthly") {
      if (minutes > 45) {
        price = (minutes - 45) * 0.2;
      }
    }
    if (this.ridesToday.get(email) > 3 && plan !== "monthly") {
      price = price - 1;
    }
    if (night) {
      price = price + 0.5;
    }
    this.revenue = this.revenue + price;
    this.receipts.push(`${email}: ${minutes} Min., ${price.toFixed(2)} €`);
    return price;
  }
}

Das Flag bleibt vorerst (Funktionen). Ein true im Aufruf sagt nichts. Nacht sind Daten über die Fahrt, nicht die Wahl einer anderen Aufgabe, deshalb werden daraus keine zwei Funktionen. Der Aufruf muss sagen, was er meint:

In JavaScript kommt die Nacht in einem Optionsobjekt, { night: true }, und der Tag geht ohne es.

Vorher

function ride(plan, minutes, night) {
  return money(rides.calc(EMAIL, plan, minutes, night));
}

test("nachts", () => {
  assert.equal(ride("payg", 10, true), "3.50");
});

Nachher

function ride(plan, minutes, options) {
  return money(billing.finishRide(EMAIL, plan, minutes, options));
}

test("nachts", () => {
  assert.equal(ride("payg", 10, { night: true }), "3.50");
});

Die Tests

OK    Monatskarte bis 45 Min.
OK    Monatskarte über 45 Min.
OK    Student
OK    Student bei der vierten Fahrt (so ist es heute)
OK    der Kassenbon
OK    der Umsatz
OK    nachts
OK    pro Minute
OK    vierte Fahrt ohne Entsperrgebühr
Tests: 9, bestanden: 9, fehlgeschlagen: 0

In VS Code ist Umbenennen F2. Bei den Feldern des Objekts (this.s) weiß der Editor nicht immer, welches Objekt welches ist, deshalb sagen dir hier die Tests mehr als in Java oder C#.

Sieh es dir an

Schritt 2: die Zahlen und der Kommentar, der lügt

1.0, 0.2, 0.8, 45, 3 und 0.5 werden zu Konstanten mit Namen (magische Zahl → Konstante).

Der Kommentar über der Methode sagt 0,15 € pro Minute und 50 % Nachtzuschlag. Der Code berechnet 0,20 € und schlägt 0,50 € auf. Was stimmt? Die Tests halten fest, was der Code tut, und die Kunden zahlen seit Jahren danach. Der Kommentar lügt (Kommentare) und wird gelöscht. Die Konstanten sagen dasselbe und können nicht von allein veralten.

const UNLOCK_FEE = 1;
const PER_MINUTE = 0.2;
const STUDENT_SHARE = 0.8;
const MONTHLY_FREE_MINUTES = 45;
const PAID_UNLOCKS_PER_DAY = 3;
const NIGHT_SURCHARGE = 0.5;

export class RideBilling {
  constructor() {
    this.ridesToday = new Map();
    this.revenue = 0;
    this.receipts = [];
  }

  finishRide(email, plan, minutes, { night = false } = {}) {
    this.ridesToday.set(email, (this.ridesToday.get(email) ?? 0) + 1);
    let price = 0;
    if (plan === "payg") {
      price = UNLOCK_FEE + minutes * PER_MINUTE;
    } else if (plan === "student") {
      price = (UNLOCK_FEE + minutes * PER_MINUTE) * STUDENT_SHARE;
    } else if (plan === "monthly") {
      if (minutes > MONTHLY_FREE_MINUTES) {
        price = (minutes - MONTHLY_FREE_MINUTES) * PER_MINUTE;
      }
    }
    if (this.ridesToday.get(email) > PAID_UNLOCKS_PER_DAY && plan !== "monthly") {
      price = price - UNLOCK_FEE;
    }
    if (night) {
      price = price + NIGHT_SURCHARGE;
    }
    this.revenue = this.revenue + price;
    this.receipts.push(`${email}: ${minutes} Min., ${price.toFixed(2)} €`);
    return price;
  }
}

Die Tests

OK    Monatskarte bis 45 Min.
OK    Monatskarte über 45 Min.
OK    Student
OK    Student bei der vierten Fahrt (so ist es heute)
OK    der Kassenbon
OK    der Umsatz
OK    nachts
OK    pro Minute
OK    vierte Fahrt ohne Entsperrgebühr
Tests: 9, bestanden: 9, fehlgeschlagen: 0

Die Tests bleiben unberührt: Weder der Name noch die Aufrufe haben sich geändert.

Die Konstanten stehen auf Modulebene, über der Klasse: So sieht sie jeder andere Code in der Datei, und in Schritt 5 auch die Tarife.

Probier es aus

Finde den Fehler

Ein Kollege macht denselben Schritt, vertraut aber dem Kommentar und behält ihn:

Wähle die Zeile mit dem Fehler.

1// Der Preis: 1 € zum Entsperren und 0,15 € pro Minute.2// Nachts steigt der Preis um 50 %.3const UNLOCK_FEE = 1;4const PER_MINUTE = 0.15;5const STUDENT_SHARE = 0.8;6const MONTHLY_FREE_MINUTES = 45;7const PAID_UNLOCKS_PER_DAY = 3;8const NIGHT_SURCHARGE = 0.5;

Prüfen

Genauer, für Neugierige

Die Tests

FEHLERMonatskarte über 45 Min.
FEHLERStudent
FEHLERStudent bei der vierten Fahrt (so ist es heute)
FEHLERder Kassenbon
FEHLERder Umsatz
FEHLERnachts
FEHLERpro Minute
FEHLERvierte Fahrt ohne Entsperrgebühr
OK    Monatskarte bis 45 Min.
Tests: 9, bestanden: 1, fehlgeschlagen: 8

Sieh es dir an

Schritt 3: das Geld

Geld in einer Kommazahl ist Primitive Obsession (Code-Smells). Heute ergibt es in keinem Test einen falschen Cent, weil jeder Betrag erst beim Ausgeben gerundet wird. Deshalb ist der Schritt ein Refactoring: Die Ausgabe ist dieselbe. Aber der Umsatz ist eine Summe aus Tausenden solcher Beträge, und dort häufen sich die kleinen Fehler.

JavaScript hat keinen Dezimaltyp, deshalb wird das Geld zu ganzen Cent. Die Namen nennen die Einheit (_CENTS), der Preis für Studenten sind 80 Prozent der Cent, mit Math.round gerundet, und die Funktion euros macht erst beim Ausgeben aus Cent Euro.

const UNLOCK_FEE_CENTS = 100;
const PER_MINUTE_CENTS = 20;
const STUDENT_PERCENT = 80;
const MONTHLY_FREE_MINUTES = 45;
const PAID_UNLOCKS_PER_DAY = 3;
const NIGHT_SURCHARGE_CENTS = 50;

function euros(cents) {
  return (cents / 100).toFixed(2);
}

export class RideBilling {
  constructor() {
    this.ridesToday = new Map();
    this.revenue = 0;
    this.receipts = [];
  }

  finishRide(email, plan, minutes, { night = false } = {}) {
    this.ridesToday.set(email, (this.ridesToday.get(email) ?? 0) + 1);
    let price = 0;
    if (plan === "payg") {
      price = UNLOCK_FEE_CENTS + minutes * PER_MINUTE_CENTS;
    } else if (plan === "student") {
      price = Math.round(((UNLOCK_FEE_CENTS + minutes * PER_MINUTE_CENTS) * STUDENT_PERCENT) / 100);
    } else if (plan === "monthly") {
      if (minutes > MONTHLY_FREE_MINUTES) {
        price = (minutes - MONTHLY_FREE_MINUTES) * PER_MINUTE_CENTS;
      }
    }
    if (this.ridesToday.get(email) > PAID_UNLOCKS_PER_DAY && plan !== "monthly") {
      price = price - UNLOCK_FEE_CENTS;
    }
    if (night) {
      price = price + NIGHT_SURCHARGE_CENTS;
    }
    this.revenue = this.revenue + price;
    this.receipts.push(`${email}: ${minutes} Min., ${euros(price)} €`);
    return price;
  }
}

In den Tests ändert sich nur die Hilfsmethode, die den Betrag in Text verwandelt:

function money(cents) {
  return (cents / 100).toFixed(2);
}

Die Tests

OK    Monatskarte bis 45 Min.
OK    Monatskarte über 45 Min.
OK    Student
OK    Student bei der vierten Fahrt (so ist es heute)
OK    der Kassenbon
OK    der Umsatz
OK    nachts
OK    pro Minute
OK    vierte Fahrt ohne Entsperrgebühr
Tests: 9, bestanden: 9, fehlgeschlagen: 0

Probier es aus

Ergänze

Der Preis pro Minute im Geldtyp der Sprache:

const PER_MINUTE_CENTS = ;

Prüfen

Sieh es dir an

Schritt 4: die Abfrage getrennt vom Befehl

Jetzt die Änderung, die schon wartete: Der Preis vor dem Ende muss eine Abfrage sein, die nichts ändert (Befehl oder Abfrage). Die Berechnung wird in eine Methode price ausgelagert (Extract Method aus der Refactoring-Lektion). finishRide bleibt ein Befehl: Er fragt nach dem Preis, dann zählt er, addiert und verschickt.

Ein Kollege macht es so. Der Zähler wandert hinter den Preis, weil eine Fahrt erst zählt, wenn sie beendet ist:

Was sagen die neun Tests?

price(email, plan, minutes, { night = false } = {}) {
  let price = 0;
  if (plan === "payg") {
    price = UNLOCK_FEE_CENTS + minutes * PER_MINUTE_CENTS;
  } else if (plan === "student") {
    price = Math.round(((UNLOCK_FEE_CENTS + minutes * PER_MINUTE_CENTS) * STUDENT_PERCENT) / 100);
  } else if (plan === "monthly") {
    if (minutes > MONTHLY_FREE_MINUTES) {
      price = (minutes - MONTHLY_FREE_MINUTES) * PER_MINUTE_CENTS;
    }
  }
  if ((this.ridesToday.get(email) ?? 0) > PAID_UNLOCKS_PER_DAY && plan !== "monthly") {
    price = price - UNLOCK_FEE_CENTS;
  }
  if (night) {
    price = price + NIGHT_SURCHARGE_CENTS;
  }
  return price;
}

finishRide(email, plan, minutes, { night = false } = {}) {
  const price = this.price(email, plan, minutes, { night });
  this.ridesToday.set(email, (this.ridesToday.get(email) ?? 0) + 1);
  this.revenue = this.revenue + price;
  this.receipts.push(`${email}: ${minutes} Min., ${euros(price)} €`);
  return price;
}

Antwort

Alle neun bestehen: Der Zähler ist derselbe, er steht nur woanders

"vierte Fahrt ohne Entsperrgebühr" und "Student bei der vierten Fahrt (so ist es heute)" schlagen fehl

Nur "vierte Fahrt ohne Entsperrgebühr" schlägt fehl

Prüfen

Genauer, für Neugierige

Die Tests

FEHLERStudent bei der vierten Fahrt (so ist es heute): 2.40 !== 1.40
FEHLERvierte Fahrt ohne Entsperrgebühr: 3.00 !== 2.00
OK    Monatskarte bis 45 Min.
OK    Monatskarte über 45 Min.
OK    Student
OK    der Kassenbon
OK    der Umsatz
OK    nachts
OK    pro Minute
Tests: 9, bestanden: 7, fehlgeschlagen: 2

Sieh es dir an

Schritt 4, zweiter Versuch

Das Rot zeigt auf den letzten Schritt. Du suchst den Fehler nicht in der ganzen Klasse: Du machst den Schritt rückgängig und machst ihn neu. Die Reihenfolge der Seiteneffekte war ein versteckter Teil des Verhaltens, und nur die Tests wussten davon.

price rechnet aus, die wievielte Fahrt des Tages das wird:

price(email, plan, minutes, { night = false } = {}) {
  const rideOfDay = (this.ridesToday.get(email) ?? 0) + 1;
  let price = 0;
  if (plan === "payg") {
    price = UNLOCK_FEE_CENTS + minutes * PER_MINUTE_CENTS;
  } else if (plan === "student") {
    price = Math.round(((UNLOCK_FEE_CENTS + minutes * PER_MINUTE_CENTS) * STUDENT_PERCENT) / 100);
  } else if (plan === "monthly") {
    if (minutes > MONTHLY_FREE_MINUTES) {
      price = (minutes - MONTHLY_FREE_MINUTES) * PER_MINUTE_CENTS;
    }
  }
  if (rideOfDay > PAID_UNLOCKS_PER_DAY && plan !== "monthly") {
    price = price - UNLOCK_FEE_CENTS;
  }
  if (night) {
    price = price + NIGHT_SURCHARGE_CENTS;
  }
  return price;
}

finishRide(email, plan, minutes, { night = false } = {}) {
  const price = this.price(email, plan, minutes, { night });
  this.ridesToday.set(email, (this.ridesToday.get(email) ?? 0) + 1);
  this.revenue = this.revenue + price;
  this.receipts.push(`${email}: ${minutes} Min., ${euros(price)} €`);
  return price;
}

Die Tests

OK    Monatskarte bis 45 Min.
OK    Monatskarte über 45 Min.
OK    Student
OK    Student bei der vierten Fahrt (so ist es heute)
OK    der Kassenbon
OK    der Umsatz
OK    nachts
OK    pro Minute
OK    vierte Fahrt ohne Entsperrgebühr
Tests: 9, bestanden: 9, fehlgeschlagen: 0

Die Tests bleiben wieder unberührt: Sie rufen finishRide auf, und das tut dasselbe wie vorher.

Die ganze Klasse nach Schritt 4

const UNLOCK_FEE_CENTS = 100;
const PER_MINUTE_CENTS = 20;
const STUDENT_PERCENT = 80;
const MONTHLY_FREE_MINUTES = 45;
const PAID_UNLOCKS_PER_DAY = 3;
const NIGHT_SURCHARGE_CENTS = 50;

function euros(cents) {
  return (cents / 100).toFixed(2);
}

export class RideBilling {
  constructor() {
    this.ridesToday = new Map();
    this.revenue = 0;
    this.receipts = [];
  }

  price(email, plan, minutes, { night = false } = {}) {
    const rideOfDay = (this.ridesToday.get(email) ?? 0) + 1;
    let price = 0;
    if (plan === "payg") {
      price = UNLOCK_FEE_CENTS + minutes * PER_MINUTE_CENTS;
    } else if (plan === "student") {
      price = Math.round(((UNLOCK_FEE_CENTS + minutes * PER_MINUTE_CENTS) * STUDENT_PERCENT) / 100);
    } else if (plan === "monthly") {
      if (minutes > MONTHLY_FREE_MINUTES) {
        price = (minutes - MONTHLY_FREE_MINUTES) * PER_MINUTE_CENTS;
      }
    }
    if (rideOfDay > PAID_UNLOCKS_PER_DAY && plan !== "monthly") {
      price = price - UNLOCK_FEE_CENTS;
    }
    if (night) {
      price = price + NIGHT_SURCHARGE_CENTS;
    }
    return price;
  }

  finishRide(email, plan, minutes, { night = false } = {}) {
    const price = this.price(email, plan, minutes, { night });
    this.ridesToday.set(email, (this.ridesToday.get(email) ?? 0) + 1);
    this.revenue = this.revenue + price;
    this.receipts.push(`${email}: ${minutes} Min., ${euros(price)} €`);
    return price;
  }
}

Sieh es dir an

Schritt 5: die Tarife

Übrig bleibt die Kette von if auf dem Text des Tarifs (lange if-Kette). Jeder neue Tarif ist ein neuer Zweig, und "monthly" wird an zwei Stellen geprüft. Jeder Tarif wird zu einer Klasse, die ihren Preis und ihren Rabatt für die vierte Fahrt kennt. Das ist Replace Conditional with Polymorphism aus der Refactoring-Lektion:

export class PayAsYouGo {
  price(minutes) {
    return UNLOCK_FEE_CENTS + minutes * PER_MINUTE_CENTS;
  }

  loyaltyDiscount() {
    return UNLOCK_FEE_CENTS;
  }
}

export class Student {
  price(minutes) {
    return Math.round((new PayAsYouGo().price(minutes) * STUDENT_PERCENT) / 100);
  }

  loyaltyDiscount() {
    // So ist es heute: der ganze 1 €, obwohl das Entsperren für Studierende 0,80 € kostet.
    return UNLOCK_FEE_CENTS;
  }
}

export class Monthly {
  price(minutes) {
    return Math.max(0, minutes - MONTHLY_FREE_MINUTES) * PER_MINUTE_CENTS;
  }

  loyaltyDiscount() {
    return 0;
  }
}

Die Prüfung für die Monatskarte verschwindet: Sie liefert einfach einen Rabatt von 0. Das merkwürdige Verhalten beim Studenten steht jetzt in einer Zeile, mit einem Kommentar, der sagt, warum es so ist (der gute Kommentar aus der Lektion über Kommentare).

const UNLOCK_FEE_CENTS = 100;
const PER_MINUTE_CENTS = 20;
const STUDENT_PERCENT = 80;
const MONTHLY_FREE_MINUTES = 45;
const PAID_UNLOCKS_PER_DAY = 3;
const NIGHT_SURCHARGE_CENTS = 50;

function euros(cents) {
  return (cents / 100).toFixed(2);
}

export class RideBilling {
  constructor() {
    this.ridesToday = new Map();
    this.revenue = 0;
    this.receipts = [];
  }

  price(email, plan, minutes, { night = false } = {}) {
    const rideOfDay = (this.ridesToday.get(email) ?? 0) + 1;
    let price = plan.price(minutes);
    if (rideOfDay > PAID_UNLOCKS_PER_DAY) {
      price = price - plan.loyaltyDiscount();
    }
    if (night) {
      price = price + NIGHT_SURCHARGE_CENTS;
    }
    return price;
  }

  finishRide(email, plan, minutes, { night = false } = {}) {
    const price = this.price(email, plan, minutes, { night });
    this.ridesToday.set(email, (this.ridesToday.get(email) ?? 0) + 1);
    this.revenue = this.revenue + price;
    this.receipts.push(`${email}: ${minutes} Min., ${euros(price)} €`);
    return price;
  }
}

Hier gibt es kein Interface: Jeder Tarif hat einfach die Methoden price und loyaltyDiscount, und die Abrechnungsklasse ruft sie auf (Duck Typing). Die Konstanten bleiben auf Modulebene.

In den Tests übergeben die Aufrufe ein Objekt statt Text:

assert.equal(ride("payg", 10, { night: true }), "3.50");
assert.equal(ride(new PayAsYouGo(), 10, { night: true }), "3.50");

Die Tests

OK    Monatskarte bis 45 Min.
OK    Monatskarte über 45 Min.
OK    Student
OK    Student bei der vierten Fahrt (so ist es heute)
OK    der Kassenbon
OK    der Umsatz
OK    nachts
OK    pro Minute
OK    vierte Fahrt ohne Entsperrgebühr
Tests: 9, bestanden: 9, fehlgeschlagen: 0

Das ist Strategy aus dem Modul Entwurfsmuster: Die Regel ist ein eigenes Objekt, und die Abrechnung fragt nur.

Sieh es dir an

Die beiden Änderungen jetzt

Der Firmentarif ist eine neue Klasse. Die Abrechnungsklasse bleibt unberührt (offen für Erweiterung):

const BUSINESS_PER_MINUTE_CENTS = 18;

export class Business {
  price(minutes) {
    return minutes * BUSINESS_PER_MINUTE_CENTS;
  }

  loyaltyDiscount() {
    return 0;
  }
}

Der Preis vor dem Ende ist die Abfrage price. Wie oft du sie auch aufrufst, nichts wird gezählt, und kein Kassenbon geht raus:

const billing = new RideBilling();
const payg = new PayAsYouGo();
billing.finishRide("ana@example.com", payg, 10);
billing.finishRide("ana@example.com", payg, 5);
billing.finishRide("ana@example.com", payg, 12, { night: true });
console.log(`Preis vor dem Ende: ${(billing.price("ana@example.com", payg, 8) / 100).toFixed(2)} €`);
console.log(`Preis vor dem Ende: ${(billing.price("ana@example.com", payg, 8) / 100).toFixed(2)} €`);
console.log(`Abgebucht: ${(billing.finishRide("ana@example.com", payg, 8) / 100).toFixed(2)} €`);
console.log(`Firma, 12 Min.: ${(billing.finishRide("office@example.com", new Business(), 12) / 100).toFixed(2)} €`);
console.log(`Kassenbons: ${billing.receipts.length}`);

Ausgabe

Preis vor dem Ende: 1.60 €
Preis vor dem Ende: 1.60 €
Abgebucht: 1.60 €
Firma, 12 Min.: 2.16 €
Kassenbons: 5

Fünf Kassenbons: drei Fahrten vor der Vorschau, die vierte und die der Firma. Die zwei Vorschauen hinterlassen keine Spur, und sie zeigen genau, was danach abgebucht wird.

Die Idee

Vorher und nachher

Smell	Schritt	Lektion
nichts schützt das Verhalten	0: Tests, die das heutige Verhalten festhalten	das Sicherheitsnetz
Namen aus einem Buchstaben, calc, das nicht sagt, dass es verschickt	1: Rename	Namen
true im Aufruf	1: ein Argument, das sagt, was es meint	Funktionen
magische Zahlen	2: Konstanten mit Namen	Namen
ein Kommentar, der lügt	2: gelöscht	Kommentare
Geld in einer Kommazahl	3: ein Typ für Geld	Code-Smells
eine Abfrage mit versteckten Seiteneffekten, eine lange Methode	4: Extract Method, Befehl und Abfrage	Funktionen, Refactoring
eine Kette von if auf dem Tarif als Text	5: Replace Conditional with Polymorphism	Code-Smells, Refactoring, SOLID

Die Klasse ist länger geworden, nicht kürzer. Aber jede Regel steht an einer Stelle und hat einen Namen, und jede Änderung vom Anfang ist eine Klasse.

Der Tag mit den Fahrten, gelaufen mit der Klasse vor Schritt 1 und mit der Klasse nach Schritt 5, gibt Zeile für Zeile dasselbe aus. Hier laufen beide Programme bei jeder Prüfung der Seite.

Vorher

const rides = new RideMgr();
rides.calc("ana@example.com", "payg", 10, false);
rides.calc("ivan@example.com", "student", 25, false);
rides.calc("ana@example.com", "payg", 5, false);
rides.calc("maria@example.com", "monthly", 60, true);
rides.calc("ana@example.com", "payg", 12, true);
rides.calc("ana@example.com", "payg", 8, false);

for (const receipt of rides.out) {
  console.log(receipt);
}
console.log(`Umsatz: ${rides.s.toFixed(2)} €`);

Nachher

const billing = new RideBilling();
const payg = new PayAsYouGo();
billing.finishRide("ana@example.com", payg, 10);
billing.finishRide("ivan@example.com", new Student(), 25);
billing.finishRide("ana@example.com", payg, 5);
billing.finishRide("maria@example.com", new Monthly(), 60, { night: true });
billing.finishRide("ana@example.com", payg, 12, { night: true });
billing.finishRide("ana@example.com", payg, 8);

for (const receipt of billing.receipts) {
  console.log(receipt);
}
console.log(`Umsatz: ${(billing.revenue / 100).toFixed(2)} €`);

Ausgabe

ana@example.com: 10 Min., 3.00 €
ivan@example.com: 25 Min., 4.80 €
ana@example.com: 5 Min., 2.00 €
maria@example.com: 60 Min., 3.50 €
ana@example.com: 12 Min., 3.90 €
ana@example.com: 8 Min., 1.60 €
Umsatz: 18.80 €

Die Idee

Wo du aufhörst

Du hörst auf, wenn die kommenden Änderungen leicht werden. Hier sind die beiden Änderungen eine Klasse und eine Zeile. Deshalb sind manche Schritte bewusst nicht gemacht:

• der Kassenbon in einer eigenen Klasse. Der Text des Kassenbons ist ein zweiter Grund, die Klasse zu ändern (ein Grund zur Änderung). Heute ändert er sich nicht. Sobald das Marketing ihn jeden Monat bearbeitet, wird er zu einer eigenen Klasse (Aufgabe 1);
• das Versenden hinter einem Interface. Die Kassenbons sind eine Liste, keine echte E-Mail. Wenn die echte E-Mail kommt, darf der Test sie nicht verschicken, und dann kommt die Abstraktion (von einer Abstraktion abhängen);
• das Verhalten beim Studenten. Das ist eine Änderung des Verhaltens, kein Aufräumen. Sie wird getrennt gemacht, mit einem eigenen Test, wenn das Produkt entscheidet.

Und die Regel aus der Refactoring-Lektion: Du änderst entweder die Form oder das Verhalten, nie beides in einem Schritt.

Übung

Mach selbst weiter

Löse die Aufgaben in deinem Editor, ausgehend von der Klasse nach Schritt 5. Lass nach jedem Schritt die neun Tests laufen.

1. Der Kassenbon in einer eigenen Klasse. Verschiebe den Text des Kassenbons und die Liste der verschickten Kassenbons in eine Klasse ReceiptBook. Die Abrechnungsklasse sagt ihr nur „send“. Die Tests bleiben unberührt.

Eine mögliche Lösung

class ReceiptBook {
  constructor() {
    this.sent = [];
  }

  send(email, minutes, price) {
    this.sent.push(`${email}: ${minutes} Min., ${euros(price)} €`);
  }
}

const UNLOCK_FEE_CENTS = 100;
const PER_MINUTE_CENTS = 20;
const STUDENT_PERCENT = 80;
const MONTHLY_FREE_MINUTES = 45;
const PAID_UNLOCKS_PER_DAY = 3;
const NIGHT_SURCHARGE_CENTS = 50;

function euros(cents) {
  return (cents / 100).toFixed(2);
}

export class RideBilling {
  constructor() {
    this.ridesToday = new Map();
    this.revenue = 0;
    this.receiptBook = new ReceiptBook();
  }

  price(email, plan, minutes, { night = false } = {}) {
    const rideOfDay = (this.ridesToday.get(email) ?? 0) + 1;
    let price = plan.price(minutes);
    if (rideOfDay > PAID_UNLOCKS_PER_DAY) {
      price = price - plan.loyaltyDiscount();
    }
    if (night) {
      price = price + NIGHT_SURCHARGE_CENTS;
    }
    return price;
  }

  finishRide(email, plan, minutes, { night = false } = {}) {
    const price = this.price(email, plan, minutes, { night });
    this.ridesToday.set(email, (this.ridesToday.get(email) ?? 0) + 1);
    this.revenue = this.revenue + price;
    this.receiptBook.send(email, minutes, price);
    return price;
  }

  get receipts() {
    return this.receiptBook.sent;
  }
}

Die Tests

OK    Monatskarte bis 45 Min.
OK    Monatskarte über 45 Min.
OK    Student
OK    Student bei der vierten Fahrt (so ist es heute)
OK    der Kassenbon
OK    der Umsatz
OK    nachts
OK    pro Minute
OK    vierte Fahrt ohne Entsperrgebühr
Tests: 9, bestanden: 9, fehlgeschlagen: 0

Das Programm für den Tag aus der Karte „Vorher und nachher“ gibt mit dieser Klasse dieselbe Ausgabe aus.

2. Der Tarif aus Text. Der Tarif kommt als Text ("payg") aus der Datenbank. Schreib die Tabelle, die ihn in ein Objekt verwandelt. Was hat die alte Klasse mit einem unbekannten Tarif gemacht? Halte es mit einem Test auf der alten Klasse fest, bevor du entscheidest, was die neue tun soll.

3. Nacht aus der Uhrzeit. Die App weiß nicht mehr, wann Nacht ist; sie übergibt die Startzeit. Die Regel „von 22:00 bis 6:00 Uhr“ muss an einer Stelle stehen. Schreib zuerst die Tests für 21:59, 22:00, 5:59 und 6:00.

4. Der Student. Das Produkt hat entschieden: Bei der vierten Fahrt bekommt ein Student 0,80 €, nicht 1 €. Das ist eine Änderung des Verhaltens: Ändere zuerst den erwarteten Wert im Test und sieh ihn rot, dann ändere eine Zeile im Tarif.

Test

Teste dich

1. Der Test für einen Studenten bei der vierten Fahrt erwartet 1,40 €, und die „richtige“ Antwort wäre wohl 1,60 €. Was machst du, während du die Klasse aufräumst?

Den Test löschen, weil er einen Fehler festhältDen erwarteten Wert auf 1,60 ändern und den Code im selben Schritt anpassenDen Test so lassen, mit einem Kommentar, und den Product Owner fragen. Entscheidet er anders, ist das eine eigene Änderung mit eigenem Test

2. Im Kommentar steht 0,15 € pro Minute, und der Code berechnet 0,20 €. Wem vertraust du?

Dem Kommentar: Er ist die DokumentationDem, was neuer istDem Code: Die Tests halten fest, was er tut, und die Kunden zahlen seit Jahren danach

3. Warum rufen die Tests die Klasse über eine Hilfsmethode auf und nicht direkt?

Weil das Test-Framework es verlangtDas macht sie schnellerWenn sich die Form der Klasse ändert, ändert sich eine einzige Stelle, und die erwarteten Werte bleiben gleich

4. Der erste Versuch bei Schritt 4 hat zwei Tests rot gemacht. Was machst du?

Den Schritt rückgängig machen und neu machen: Das Rot zeigt auf ihn, denn davor war alles grünDen Fehler in der ganzen Klasse suchenDie erwarteten Werte in den beiden Tests ändern

5. Nach dem Aufräumen ist der Firmentarif eine neue Klasse, und die Abrechnungsklasse bleibt unberührt. Welches Prinzip ist das?

Von einer Abstraktion abhängenEin Grund zur ÄnderungOffen für Erweiterung, geschlossen für Änderung

Prüfen

Lektion von vorn beginnen

Verwandte Lektionen

• Baut auf: Code-Smells: lange Methode, große Klasse, Duplikate, Primitive statt Typen, lange if-Ketten · Tests als Sicherheitsnetz · Refactoring in kleinen Schritten · SOLID ohne Dogma
• Aufgaben zum Thema: Sauberer Code und Refactoring