Nuxt.js bylo velmi zábavné používat v produkčních webových aplikacích a vedlejších projektech. Je to jednoduché, rychlé a zdá se velmi v souladu s webovými standardy, pokud jde o vytváření komponent, import pluginů atd. Stejně vzrušující byl vzestup Storybooku. Za poslední rok si získal poměrně velké příznivce pro své snadné použití při vytváření knihoven komponent/vzorů a pro jeho schopnost provádět samostatné testování snímků na základě komponent.
Nedávno jsem chtěl založit nový vedlejší projekt a chtěl jsem použít Storybook s Nuxtem. Byl jsem nadšený, když jsem viděl jejich dokumentaci o používání Storybook s Vue (ačkoli React, React Native a Angular jsou také podporovány), ale když jsem začínal, našel jsem na cestě nějaké hrboly. Po vytažení all nighter a několika žádostech o stažení jsem vše zprovoznil! Toto je repozitář konečného produktu a toto je příběh mé cesty té noci.
Pozadí
Pro ty, kteří neznají Storybook (jako já minulý týden) nebo Nuxt, bych se o nich rád podělil. Nuxt je objektivně skvělý framework pro sestavování aplikací. Je řízená komunitou, snadno se učí a dobře se hraje se stávajícími projekty, které používají Node.js. Existuje spousta skvělých projektů využívajících Nuxt a několik klíčových vývojářů, které bych pro více informací doporučil sledovat, by byli Sarah Drasner, Evan You a Rachel Nabors. Storybook se za poslední rok rychle rozrostl a stal se nezbytnou součástí testovací sady mnoha týmů a skvělým způsobem sledování uživatelského rozhraní komponent. Hlavním předpokladem je, že po vytvoření komponenty vytvoříte její „příběh“. Příběh bude obsahovat různé stavy komponenty, která poskytuje vizuální reprezentaci. Když napíšete více příběhů, máte svou Pohádkovou knihu.
Instalace a nastavení
Tohle bylo přímočaré. Používám vue-cli k vytvoření nového projektu Nuxt (konkrétně variantu Express) a poté jsem použil dokumentaci Storybook pro instalaci jejich balíčku s Vue. Ve své dokumentaci ukazují příklad konfiguračního souboru pro Storybook. Diskutovalo se o použití Vuexu jako pluginu, ale to není nutné, aby věci fungovaly. Pokud chcete prozatím začít bez pluginů, můžete se podívat na konfigurační soubor v repozitáři mé cesty.
Storybook má zabudované „doplňky“, které balíčku přidávají velkou hodnotu. Měl jsem zájem o zprovoznění doplňků Action a Storyshot. Akce umožňují Storybooku zobrazovat data z obslužných programů událostí na panelu. Je to zvláště užitečné, když chcete vidět, jaká data jsou předávána při kliknutí na tlačítko nebo při spuštění jiného typu události prostřednictvím interakce s uživatelským rozhraním. Storyshots vytvoří snímek komponenty v izolaci, takže při provádění aktualizací můžete spustit srovnávací test komponent, abyste zajistili, že nedojde k neočekávaným změnám v uživatelském rozhraní. Pokud mám být upřímný, testování snímků bylo pro mě před týdnem nový termín, ale opravdu se ukázalo, že je užitečné. Pod kapotou Storyshots používá Jest k testování. Za chvíli se dostaneme k mému neštěstí s Storyshots a Jest. Pokud máte zájem, na jejich webových stránkách najdete úplný seznam doplňků, nativních i komunitních.
Akce
Jediná věc, se kterou jsem při nastavování tohoto doplňku měl problémy, bylo správné spuštění balíčku, když jsem spustil npm run storybook . Tento příkaz spouští server localhost pro uživatelské rozhraní Storybook. Zpočátku jsem při tom viděl příběhy, ale žádný akční panel, přestože jsem si instaloval akce s příběhy/doplňky prostřednictvím NPM. Ukázalo se, že jsem postrádal soubor addons.js z adresáře .storybook. Tento soubor by měl vypadat takto, chcete-li importovat doplňky, které chcete použít v uživatelském rozhraní Storybook:
import '@storybook/addon-actions/register' import '@storybook/addon-links/register'
Po přidání tohoto souboru se panel objevil, ale stále se mi nezobrazovaly akce, když jsem kliknul na tlačítko v příběhu Tlačítko/šablona + metody. Pokusem a omylem jsem zjistil, že změna @click v šabloně tlačítka na :handle-click by poskytla výsledek, který jsem očekával. Hádám, že je to proto, že testujeme komponentu izolovaně, takže panel akcí sleduje změny v datech a naslouchá obslužným rutinám událostí uvnitř této konkrétní komponenty. Ještě jsem to nepotvrdil s komunitou, ale věřím, že to dává smysl.
Storyshots:1. kolo
Tady se naše cesta mění v kamenitou. Abych nainstaloval ty správné balíčky, musel jsem jít trochu mimo to, co je uvedeno v dokumentech. Zde je úplný příkaz k použití pro všechny správné balíčky:npm install --save-dev @storybook/addon-storyshots jest react-test-renderer jest-vue-preprocessor . Stále si nejsem jistý, proč je potřeba vykreslovací nástroj pro reakce. Věřím, že je to chyba, ale stále to potvrzuji. V tomto okamžiku došlo k několika chybám a odeslal jsem několik problémů. Zatímco jsem čekal na tyto odpovědi, místo toho, abych šel spát jako zdravý člověk, rozhodl jsem se trochu pohrát s Jestem, abych provedl nějaké komplexní testování.
Jdeme dolů králičí dírou
Předtím jsem Jest nepoužíval a chtěl jsem se trochu ponořit pod kapotu, abych viděl, jak to funguje. Začal jsem vytvořením adresáře test/unit, který obsahuje adresář specs a některé konfigurační soubory. Při hledání kolem jsem našel repo od Branta Willise na GitHubu, který skutečně pomohl vyřešit, jak by měl soubor jest.config.js vypadat při práci s Nuxtem. Ukázalo se, že tento soubor bude později použit také Storyshots. (Takže to možná nebylo rozhodnutí úplně mimo téma!)
Po vyřešení konfigurace jsem byl schopen projít testy! Kvůli testům jsem neudělal nic šíleného. Na internetu je spousta výukových programů pro vytváření testů s Jest. Vytvořil jsem jednoduchý test pro každou komponentu, výchozí rozložení v Nuxtu a každou stránku v Nuxtu. Když jsem se pokusil spustit test na Footer.vue, zobrazila se chyba. Skončilo to tak, že Footer.vue neměl v souboru oblast skriptu.
Storyshots:2. kolo
Po zjištění Jest jsem stále neměl odpověď na předložené problémy. V klasické 3am logice jsem se rozhodl jít znovu hledat a narazil jsem na zakopaný soubor v oficiálním repozitáři Storybook. Toto je soubor potřebný k tomu, abyste příběhům řekli, kde najít konfigurační soubor, jaký rámec použít s Storybook a některé další periferní možnosti. Nakonfiguroval jsem to pro Vue, ale stále jsem narážel na chyby. Říkalo to, že příběhová kniha/reakce nebyly nalezeny, i když jsem jako rámec nastavil Vue. Po použití npm install --save-dev storybook/react všechno bylo v pořádku. (Ano, velmi zvláštní.) Při pokusu o spuštění npm test poskytlo mi to unexpected token chyba. Něco, co nebylo dobře zdokumentováno, byla potřeba mít soubor .babelrc. Ukázalo se, že před spuštěním testů nedošlo k transpilaci kódu s Babelem. Skončil jsem s tímto souborem .babelrc poté, co jsem viděl tento problém v balíčku jest-vue-preprocessor.
Další půlhodina odtud byla rozmazaná. Když jsem z něj vypadl, opravdu jsem zpackal repo a rozhodl se vrátit zpět k potvrzení, o kterém jsem věděl, že funguje. Také moje žena se probudila a řekla mi, že píšu příliš nahlas a že se musím přesunout do své kanceláře. #truLove (Kdo si myslel, že je to dobrý nápad?)
Po nějakém caffine jsem si uvědomil, že jsem do .storybook přidal soubor webpack.config.js, který přepsal spoustu nastavení v konfiguračním souboru Nuxt. Složil jsem humpty dumpty zase dohromady a věděl jsem, že se blížím. Po spuštění npm test a zkouším několik různých věcí, stále se mi zobrazuje chyba storyshots is intended only to be used with storybook . Ukázalo se, že Storyshots je k dispozici od Storybook 3.4.0-alpha.5. Pro aktualizaci na tuto verzi jsem musel nastavit verzi pro storybook-vue, storybook/addon-action a storybook/addon-storyshots. Také jsem zjistil, že @storybook/addon je nutný k tomu, aby doplňky fungovaly. Zdá se, že jde o novější způsob zprovoznění doplňků v nadcházející aktualizaci.
Když jsem spustil npm test opět mám následující:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
^
SyntaxError: Unexpected token <
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
at Object.<anonymous> (node_modules/@storybook/vue/dist/client/preview/render.js:24:21)
at Object.<anonymous> (node_modules/@storybook/vue/dist/client/preview/index.js:32:15)
Díky komunitě ve Storybook jsem zjistil, že existuje řešení této chyby přidáním následujícího do jest.conf.js
transformIgnorePatterns: [
'/node_modules/(?!(@storybook/.*\\.vue$))',
],
A TA-DA!!! Funguje to!
Jak slunce začalo vycházet...
Byl jsem opravdu nadšený, že to funguje. Ukázalo se, že mé testy Jest vytvářely snímky pro mé specifikace a Storyshots vytvářely snímky příběhů. Dodává se také se statistikami pokrytí, což bylo pěkné velikonoční vajíčko. I když si nejsem jistý, proč mám pouze 50% pokrytí na mém souboru Button.vue. (Ví někdo proč? Zanechte komentář!) Cestou jsem našel skvělý zdroj pro specifikace Jest s Vue. Jsem nadšený, že se více ponořím do specifikací a pohraji si s několika dalšími doplňky pro Storybook.
Cítím se neporazitelný a extrémně opotřebovaný, rozhodl jsem se zavřít notebook a lehnout si na odpočinek. A v tu chvíli jsem to slyšela... pláč mé 2leté dcery, kňučení mrzutého 4letého chlapečka a hlasitý štěkot štěněte, které potřebuje ven. Vážně... čí to byl nápad?!