M

MLOG

Čeština

Osvojte si vývoj řízený testy (TDD) v JavaScriptu. Tento komplexní průvodce pokrývá cyklus Red-Green-Refactor, praktickou implementaci pomocí Jest a osvědčené postupy pro moderní vývoj.

Vývoj řízený testy v JavaScriptu: Komplexní průvodce pro globální vývojáře

Představte si tento scénář: máte za úkol upravit kritickou část kódu ve velkém, zastaralém systému. Cítíte pocit hrůzy. Rozbije vaše změna něco jiného? Jak si můžete být jisti, že systém stále funguje tak, jak má? Tento strach ze změny je běžným neduhem ve vývoji softwaru, který často vede k pomalému pokroku a křehkým aplikacím. Ale co kdyby existoval způsob, jak budovat software s jistotou a vytvořit záchrannou síť, která zachytí chyby dříve, než se vůbec dostanou do produkce? To je příslib vývoje řízeného testy (Test-Driven Development, TDD).

TDD není pouhá technika testování; je to disciplinovaný přístup k návrhu a vývoji softwaru. Obrací tradiční model "napsat kód, pak testovat". S TDD napíšete test, který selže než napíšete produkční kód, který ho splní. Tato jednoduchá inverze má hluboké důsledky pro kvalitu, návrh a udržovatelnost kódu. Tento průvodce poskytne komplexní, praktický pohled na implementaci TDD v JavaScriptu, určený pro globální publikum profesionálních vývojářů.

Co je to vývoj řízený testy (TDD)?

Ve svém jádru je vývoj řízený testy vývojový proces, který se spoléhá na opakování velmi krátkého vývojového cyklu. Místo psaní funkcí a jejich následného testování TDD trvá na tom, že test je napsán jako první. Tento test nevyhnutelně selže, protože daná funkce ještě neexistuje. Úkolem vývojáře je poté napsat nejjednodušší možný kód, aby tento konkrétní test prošel. Jakmile projde, kód se vyčistí a vylepší. Tento základní cyklus je znám jako cyklus "Red-Green-Refactor".

Rytmus TDD: Red-Green-Refactor

Tento tříkrokový cyklus je tlukoucím srdcem TDD. Pochopení a procvičování tohoto rytmu je základem pro zvládnutí této techniky.

Jakmile je cyklus pro jednu malou část funkcionality dokončen, začnete znovu s novým neúspěšným testem pro další část.

Tři zákony TDD

Robert C. Martin (často známý jako "strýček Bob"), klíčová postava v agilním softwarovém hnutí, definoval tři jednoduchá pravidla, která kodifikují disciplínu TDD:

  1. Nesmíte psát žádný produkční kód, pokud to není proto, aby prošel selhávající unit test.
  2. Nesmíte psát více z unit testu, než je nutné k jeho selhání; a chyby při kompilaci jsou selháním.
  3. Nesmíte psát více produkčního kódu, než je nutné k tomu, aby prošel jeden selhávající unit test.

Dodržování těchto zákonů vás nutí do cyklu Red-Green-Refactor a zajišťuje, že 100 % vašeho produkčního kódu je napsáno tak, aby splňovalo konkrétní, otestovaný požadavek.

Proč byste měli přijmout TDD? Argumenty z globálního byznysu

Zatímco TDD nabízí obrovské výhody jednotlivým vývojářům, jeho skutečná síla se projevuje na úrovni týmu a byznysu, zejména v globálně distribuovaných prostředích.

Nastavení vašeho JavaScript TDD prostředí

Abyste mohli začít s TDD v JavaScriptu, potřebujete několik nástrojů. Moderní JavaScript ekosystém nabízí vynikající volby.

Základní komponenty testovacího stacku

Pro jeho jednoduchost a povahu "vše v jednom" budeme pro naše příklady používat Jest. Je to vynikající volba pro týmy, které hledají zážitek "s nulovou konfigurací".

Nastavení krok za krokem pomocí Jest

Pojďme si nastavit nový projekt pro TDD.

1. Inicializujte svůj projekt: Otevřete terminál a vytvořte nový adresář projektu.

mkdir js-tdd-project
cd js-tdd-project
npm init -y

2. Nainstalujte Jest: Přidejte Jest do svého projektu jako vývojovou závislost.

npm install --save-dev jest

3. Nakonfigurujte testovací skript: Otevřete soubor `package.json`. Najděte sekci `"scripts"` a upravte skript `"test"`. Je také velmi doporučeno přidat skript `"test:watch"`, který je neocenitelný pro TDD workflow.

"scripts": {
  "test": "jest",
  "test:watch": "jest --watchAll"
}

Příznak `--watchAll` říká Jestu, aby automaticky znovu spouštěl testy, kdykoli je soubor uložen. To poskytuje okamžitou zpětnou vazbu, což je ideální pro cyklus Red-Green-Refactor.

To je vše! Vaše prostředí je připraveno. Jest automaticky najde testovací soubory, které se jmenují `*.test.js`, `*.spec.js` nebo se nacházejí v adresáři `__tests__`.

TDD v praxi: Tvorba modulu `CurrencyConverter`

Aplikujme cyklus TDD na praktický, globálně srozumitelný problém: převod peněz mezi měnami. Postupně si vytvoříme modul `CurrencyConverter`.

Iterace 1: Jednoduchá konverze s pevným kurzem

🔴 ČERVENÁ: Napište první neúspěšný test

Naším prvním požadavkem je převést konkrétní částku z jedné měny na druhou pomocí pevného kurzu. Vytvořte nový soubor s názvem `CurrencyConverter.test.js`.

// CurrencyConverter.test.js
const CurrencyConverter = require('./CurrencyConverter');

describe('CurrencyConverter', () => {
  it('should convert an amount from USD to EUR correctly', () => {
    // Arrange
    const amount = 10; // 10 USD
    const expected = 9.2; // Assuming a fixed rate of 1 USD = 0.92 EUR

    // Act
    const result = CurrencyConverter.convert(amount, 'USD', 'EUR');

    // Assert
    expect(result).toBe(expected);
  });
});

Nyní spusťte sledování testů z vašeho terminálu:

npm run test:watch

Test velkolepě selže. Jest nahlásí něco jako `TypeError: Cannot read properties of undefined (reading 'convert')`. Toto je náš ČERVENÝ stav. Test selže, protože `CurrencyConverter` neexistuje.

🟢 ZELENÁ: Napište nejjednodušší kód pro splnění testu

Nyní zařiďme, aby test prošel. Vytvořte `CurrencyConverter.js`.

// CurrencyConverter.js
const rates = {
  USD: {
    EUR: 0.92
  }
};

const CurrencyConverter = {
  convert(amount, from, to) {
    return amount * rates[from][to];
  }
};

module.exports = CurrencyConverter;

Jakmile tento soubor uložíte, Jest znovu spustí test a ten se změní na ZELENÝ. Napsali jsme absolutní minimum kódu k uspokojení požadavku testu.

🔵 REFAKTOROVAT: Vylepšete kód

Kód je jednoduchý, ale už můžeme přemýšlet o vylepšeních. Vnořený objekt `rates` je trochu rigidní. Prozatím je dostatečně čistý. Nejdůležitější je, že máme funkční vlastnost chráněnou testem. Pojďme se posunout k dalšímu požadavku.

Iterace 2: Zpracování neznámých měn

🔴 ČERVENÁ: Napište test pro neplatnou měnu

Co by se mělo stát, pokud se pokusíme provést konverzi na měnu, kterou neznáme? Pravděpodobně by měla být vyhozena chyba. Definujme toto chování v novém testu v `CurrencyConverter.test.js`.

// In CurrencyConverter.test.js, inside the describe block

it('should throw an error for unknown currencies', () => {
  // Arrange
  const amount = 10;

  // Act & Assert
  // We wrap the function call in an arrow function for Jest's toThrow to work.
  expect(() => {
    CurrencyConverter.convert(amount, 'USD', 'XYZ');
  }).toThrow('Unknown currency: XYZ');
});

Uložte soubor. Spouštěč testů okamžitě ukáže nové selhání. Je ČERVENÉ, protože náš kód nevyhazuje chybu; snaží se přistoupit k `rates['USD']['XYZ']`, což vede k `TypeError`. Náš nový test správně identifikoval tuto chybu.

🟢 ZELENÁ: Zajistěte, aby nový test prošel

Upravme `CurrencyConverter.js` a přidejme validaci.

// CurrencyConverter.js
const rates = {
  USD: {
    EUR: 0.92,
    GBP: 0.80
  },
  EUR: {
    USD: 1.08
  }
};

const CurrencyConverter = {
  convert(amount, from, to) {
    if (!rates[from] || !rates[from][to]) {
      // Determine which currency is unknown for a better error message
      const unknownCurrency = !rates[from] ? from : to;
      throw new Error(`Unknown currency: ${unknownCurrency}`);
    }
    return amount * rates[from][to];
  }
};

module.exports = CurrencyConverter;

Uložte soubor. Oba testy nyní projdou. Jsme zpět v ZELENÉ.

🔵 REFAKTOROVAT: Vyčistěte to

Naše funkce `convert` se rozrůstá. Validační logika je smíchána s výpočtem. Mohli bychom extrahovat validaci do samostatné soukromé funkce pro zlepšení čitelnosti, ale prozatím je to stále zvládnutelné. Klíčové je, že máme svobodu provádět tyto změny, protože naše testy nám řeknou, pokud něco rozbijeme.

Iterace 3: Asynchronní načítání kurzů

Zapisování kurzů napevno není realistické. Refaktorujme náš modul tak, aby načítal kurzy z (mockovaného) externího API.

🔴 ČERVENÁ: Napište asynchronní test, který mockuje volání API

Nejprve musíme restrukturalizovat náš převodník. Nyní to bude muset být třída, kterou můžeme instancovat, možná s API klientem. Budeme také muset mockovat `fetch` API. Jest to usnadňuje.

Přepišme náš testovací soubor, aby vyhovoval této nové, asynchronní realitě. Začneme opět testováním úspěšného scénáře.

// CurrencyConverter.test.js
const CurrencyConverter = require('./CurrencyConverter');

// Mock the external dependency
global.fetch = jest.fn();

beforeEach(() => {
  // Clear mock history before each test
  fetch.mockClear();
});

describe('CurrencyConverter', () => {
  it('should fetch rates and convert correctly', async () => {
    // Arrange
    // Mock the successful API response
    fetch.mockResolvedValueOnce({
      json: () => Promise.resolve({ rates: { EUR: 0.92 } })
    });

    const converter = new CurrencyConverter('https://api.exchangerates.com');
    const amount = 10; // 10 USD

    // Act
    const result = await converter.convert(amount, 'USD', 'EUR');

    // Assert
    expect(result).toBe(9.2);
    expect(fetch).toHaveBeenCalledTimes(1);
    expect(fetch).toHaveBeenCalledWith('https://api.exchangerates.com/latest?base=USD');
  });

  // We'd also add tests for API failures, etc.
});

Spuštění tohoto kódu povede k moři ČERVENÉ. Náš starý `CurrencyConverter` není třída, nemá `async` metodu a nepoužívá `fetch`.

🟢 ZELENÁ: Implementujte asynchronní logiku

Nyní přepišme `CurrencyConverter.js` tak, aby splňoval požadavky testu.

// CurrencyConverter.js
class CurrencyConverter {
  constructor(apiUrl) {
    this.apiUrl = apiUrl;
  }

  async convert(amount, from, to) {
    const response = await fetch(`${this.apiUrl}/latest?base=${from}`);
    if (!response.ok) {
      throw new Error('Failed to fetch exchange rates.');
    }

    const data = await response.json();
    const rate = data.rates[to];

    if (!rate) {
      throw new Error(`Unknown currency: ${to}`);
    }

    // Simple rounding to avoid floating point issues in tests
    const convertedAmount = amount * rate;
    return parseFloat(convertedAmount.toFixed(2));
  }
}

module.exports = CurrencyConverter;

Když soubor uložíte, test by se měl změnit na ZELENÝ. Všimněte si, že jsme také přidali logiku zaokrouhlování pro řešení nepřesností s plovoucí desetinnou čárkou, což je běžný problém ve finančních výpočtech.

🔵 REFAKTOROVAT: Vylepšete asynchronní kód

Metoda `convert` dělá hodně: načítání, zpracování chyb, parsování a výpočet. Mohli bychom to refaktorovat vytvořením samostatné třídy `RateFetcher` odpovědné pouze za komunikaci s API. Náš `CurrencyConverter` by pak tento fetcher používal. To odpovídá principu jediné odpovědnosti (Single Responsibility Principle) a usnadňuje testování a údržbu obou tříd. TDD nás vede k tomuto čistšímu návrhu.

Běžné vzory a antivzory v TDD

Jak budete TDD praktikovat, objevíte vzory, které fungují dobře, a antivzory, které způsobují potíže.

Dobré vzory, kterých se držet

Antivzory, kterým se vyhnout

TDD v širším životním cyklu vývoje

TDD neexistuje ve vakuu. Skvěle se integruje s moderními agilními a DevOps postupy, zejména pro globální týmy.

Závěr: Vaše cesta s TDD

Vývoj řízený testy je více než jen strategie testování – je to změna paradigmatu v tom, jak přistupujeme k vývoji softwaru. Podporuje kulturu kvality, důvěry a spolupráce. Cyklus Red-Green-Refactor poskytuje stálý rytmus, který vás vede k čistému, robustnímu a udržovatelnému kódu. Výsledná sada testů se stává záchrannou sítí, která chrání váš tým před regresemi, a živou dokumentací, která zaučuje nové členy.

Učební křivka se může zdát strmá a počáteční tempo se může jevit pomalejší. Ale dlouhodobé přínosy v podobě sníženého času na ladění, vylepšeného návrhu softwaru a zvýšené důvěry vývojářů jsou nesmírné. Cesta ke zvládnutí TDD je cestou disciplíny a praxe.

Začněte dnes. Vyberte si jednu malou, nekritickou funkci ve svém příštím projektu a odhodlejte se k tomuto procesu. Napište test jako první. Sledujte, jak selže. Zajistěte, aby prošel. A pak, co je nejdůležitější, refaktorujte. Zažijte jistotu, která pramení ze zelené sady testů, a brzy se budete divit, jak jste kdy mohli vyvíjet software jakýmkoli jiným způsobem.