Jak balancovat testy při růstu projektu
Když přijde na responzivní design, nejčastější chybou bývá spoléhat se na jednu techniku. CSS Grid a Flexbox nejsou konkurenty, ale nástroje pro různé situace. Grid je ideální pro celkovou strukturu stránky – sloupce, řádky, rozvržení sekcí. Flexbox zase perfektně funguje tam, kde potřebujete rozmístit prvky v jedné ose, třeba navigaci, tlačítka nebo karty v řadě. Pokud obě metody zkombinujete, získáte rychlý a čitelný kód, který se snadno udržuje.<br>
<br>
<br>
<br>
Destrukturalizace a template literals vám ušetří spoustu psaní. Místo const a = obj.a; const b = obj.b; zkuste const a, b = obj; – kód je čitelnější a méně náchylný k překlepům. Template literals (zpětné uvozovky) umožňují vkládat proměnné přímo do řetězce: `Ahoj, $jmeno!`. Pozor ale na escapování – pokud v řetězci potřebujete zpětnou uvozovku, musíte ji předescapovat, jinak dojde k syntax error.<br>
<br>
<br>
<br>
Co se týče chyb: lidé často zapomínají na min-width: 0 u flex dětí. Bez něj se obsah může přetékat, obzvlášť když máte dlouhé texty nebo obrázky. Stejně tak u Gridu může překvapit, že 1fr neznamená minimální šířku. Chcete-li, aby se sloupec zmenšil, použijte minmax(0, 1fr). Další pastí je grid-auto-flow – pokud necháte výchozí hodnotu row, prvky se řadí do řádků. Pro dynamické přidávání položek (např. galerie) zvažte grid-auto-flow: dense, které zaplní mezery.<br>
<br>
<br>
<br>
Začněte s Gridem pro hlavní layout. Definujte si mřížku pomocí grid-template-columns a grid-template-areas. Například pro klasickou stránku s hlavičkou, obsahem, sidebar a patičkou nastavíte tři sloupce – 1fr 2fr 1fr – a na mobilu je pomocí media query přepnete na jeden sloupec. Nezapomeňte, že Grid umí i implicitní řádky, takže nemusíte psát grid-template-rows, pokud nepotřebujete přesně řídit výšky. Tím ušetříte spoustu řádků CSS.<br>
<br>
<br>
<br>
Při psaní testů se držte pravidla AAA – Arrange, Act, Assert. Nejdříve připravte vstupní data a objekty, poté vyvolejte testovanou metodu, a nakonec ověřte očekávaný výsledek. Například při testování třídy Calculator s metodou Add nejprve vytvoříte instanci, zavoláte metodu s čísly 2 a 3, a poté ověříte, že je výsledek 5. Tento postup zajišťuje čitelnost a jednoznačnost testu.<br>
<br>
<br>
<br>
Časté chyby a jak se jim vyhnout Jednou z nejčastějších chyb je testovat více věcí najednou. Pokud test selže, nevíte přesně, která část kódu je rozbitá. Rozdělte testy na malé, jednotlivé případy. Dalším problémem je používání reálných závislostí, jako jsou databáze nebo souborový systém. Takové testy jsou pomalé a nedeterministické. Řešením je použít falešné objekty (mocking), ale pozor – nezacházejte do extrému. Příliš mnoho mocků může testy učinit nepřehlednými a křehkými.<br>
<br>
<br>
<br>
Asynchronní kód je dnes postaven na async/await, které je čitelnější než řetězení then(). Funkce označená jako async vždy vrací Promise, takže uvnitř můžete použít await pro čekání na výsledek. Důležité je obalit await do try/catch, protože chyby v asynchronní funkci se nepropagují automaticky. Mnoho začátečníků zapomíná na to, že await lze použít pouze uvnitř async funkce – mimo ni dostanete chybu.<br>
<br>
<br>
<br>
Na závěr si osvojte práci s nástrojem Test Explorer ve Visual Studiu nebo s příkazem dotnet test. Umožní vám spustit vybrané testy, filtrovat podle kategorií a zobrazit podrobné informace o selhání. S NUnit se vyplatí prozkoumat i pokročilé funkce, jako jsou parametrizované testy, setup a teardown, nebo asynchronní testy. Tyto nástroje vám dovolí psát testy efektivněji a s menším množstvím opakujícího se kódu.<br>
<br>
<br>
<br>
Častým oříškem je zarovnání karet nebo tlačítek. Představte si tři karty s různou délkou textu. Chcete, aby měly stejnou výšku a tlačítko bylo vždy dole. S Gridem to zvládnete snadno: align-items: stretch je výchozí, takže karty se roztáhnou na výšku nejvyššího sloupce. Flexbox na to potřebuje align-items: stretch na rodiči a margin-top: auto na tlačítku. Obojí funguje, ale s Gridem je to méně práce – proto používejte Grid pro celé řady karet.<br>
<br>
<br>
<br>
Velmi důležité je také pojmenování testů. Název by měl popisovat očekávané chování, ne interní implementaci. Místo Test1 použijte Add_TwoNumbers_ReturnsSum. Takový název usnadní orientaci v testovací sadě i při jejím procházení po měsících. Kromě toho si zvykněte spouštět testy po každé změně kódu, ideálně automaticky pomocí CI serveru. Čím častěji testy běží, tím rychleji odhalíte regrese.<br>
<br>
<br>
<br>
Nezapomínejte ani na testování okrajových případů. Mnozí vývojáři testují pouze šťastnou cestu (happy path), ale skutečná hodnota testů se projeví při zpracování prázdných vstupů, velkých čísel nebo neplatných argumentů. NUnit nabízí atribut [TestCase], který umožňuje předávat různé vstupy do jedné testovací metody. Tím se vyhnete kopírování kódu a snadno pokryjete více scénářů.