Pokročilé techniky mockování dat v Storybooku pro GraphQL aplikace

Úvod do mockování dat v Storybooku

V dnešní době se vývoj aplikací neobejde bez efektivního testování a mockování. A co může být lepším pomocníkem než Storybook? Tento nástroj se stal fenoménem mezi front-end vývojáři a umožňuje nám vytvořit izolované prostředí pro vývoj komponentů. Ale co když pracujeme s GraphQL API? Jak můžeme zajistit, že naše komponenty budou reagovat na různorodé scénáře, které mohou nastat během interakce s backendem? Odpovědí na tuto otázku je pokročilé mockování dat!

Proč mockovat data?

Mockování dat je klíčové pro testování komponentů, protože nám umožňuje simulovat různé stavy API. Například si představte, že vyvíjíte uživatelské rozhraní pro aplikaci, která načítá data o uživatelích z GraphQL API. Chcete si ověřit, jak vaše komponenty vypadají, když:

• API vrací úspěšnou odpověď.
• API selže (např. 404 nebo 500).
• Odpověď obsahuje prázdná data.

Bez mockování byste museli spoléhat na skutečné API, což může být časově náročné a neefektivní. To je důvod, proč je důležité naučit se efektivně mockovat GraphQL API v Storybooku.

Jak začít s mockováním v Storybooku

Než se pustíme do pokročilých technik, pojďme si připomenout základní kroky pro mockování dat v Storybooku. Prvním krokem je nainstalovat potřebné závislosti:

npm install graphql graphql-tag apollo-client apollo-link-apollo-client storybook-addon-apollo

Tímto způsobem máme všechny potřebné balíčky pro komunikaci s naším GraphQL API a jeho mockování.

Dále vytvoříme mockedProvider, což je zjednodušeně řečeno náš testovací wrapper, který simuluje chování Apollo Clienta:

 import \{ MockedProvider \} from '@apollo/client/testing';
 import \{ YOUR_QUERY \} from './yourQueryFile';

const mocks = [
  \{
    request: \{ query: YOUR_QUERY \},
    result: \{ data: \{ /* vaše simulovaná data */ \} \},
  \},
];

Tento kód nám umožní definovat mockované odpovědi pro naše GraphQL dotazy. Nyní můžeme obalit naše komponenty pomocí MockedProvider:

\<MockedProvider mocks=\{mocks\} addTypename=\{false\}\>
  \<YourComponent /\>
\</MockedProvider\>

Tímto způsobem máme možnost testovat naši komponentu s předdefinovanými daty bez nutnosti skutečného API.

Pokročilé techniky mockování dat

Teď, když jsme si prošli základy mockování, pojďme se podívat na některé pokročilé techniky, které vám pomohou efektivně simulovat reálné scénáře:

1. Dynamické odpovědi: Místo statických odpovědí můžete generovat dynamické odpovědi na základě různých podmínek. Například můžete mít jeden scénář pro úspěšné načtení dat a jiný pro prázdné výsledky.
2. Simulace chyb: Vytvořte scénáře pro různé typy chyb (např. serverové chyby, síťové problémy) a otestujte, jak vaše komponenty reagují při těchto situacích.
3. Zpoždění odpovědi: Pomocí setTimeout můžete simulovat latenci sítě a zjistit, jak vaše UI reaguje na pomalé načítání dat. To je užitečné při testování loading stavů.
4. Použití fiktivních dat: Pokud máte velké množství datových struktur, můžete použít knihovny jako faker.js k generování realistických fiktivních dat pro vaše testy.
5. Více dotazů: V případě složitějších komponent můžete mít více dotazů najednou a každému z nich přiřadit své vlastní mockované odpovědi.

Příklady z praxe

Dynamické odpovědi

Představme si komponentu, která zobrazuje seznam uživatelů. Můžete definovat několik různých scénářů:

const mocks = [
  \{
    request: \{ query: GET_USERS_QUERY \},
    result: \{ data: \{ users: [\{ id: '1', name: 'Alice' \}, \{ id: '2', name: 'Bob' \}] \} \},
  \},
  \{
    request: \{ query: GET_USERS_QUERY \},
    result: \{ data: \{ users: [] \} \}, // prázdný seznam uživatelů
  \},
];

Tímto způsobem můžete otestovat, jak komponenta reaguje na různé stavy uživatelského seznamu.

Simulace chyb

Chcete-li otestovat chybovou odezvu API, můžete přidat další mock:

const mocks = [
  \{
    request: \{ query: GET_USERS_QUERY \},
    error: new Error('Nastala chyba při načítání'), // simulace chyby
  \},
];

V tomto případě můžete zjistit jak se UI zachová v případě selhání dotazu.

Závěr a doporučení

Pokročilé techniky mockování dat v Storybooku vám otevírají široké možnosti pro testování vašich komponentů v reálných scénářích. Od dynamických odpovědí po simulaci chyb - každá z těchto technik vám umožní lépe připravit vaše uživatelské rozhraní na případné komplikace v produkčním prostředí. Nezapomeňte také sledovat další články na GraphQL.cz, kde pokrýváme širokou škálu témat od základů GraphQL až po jeho integraci s moderními nástroji jako je Apollo Client nebo právě Storybook! Každým dalším článkem se stanete lepším vývojářem a vaša práce bude efektivnější.