Cypress zamierza zrewolucjonizować testowanie frontendu - Frontend Weekly vol. 96

1. Cypress 10

Cypress to jedna z najpopularniejszych bibliotek do pisania testów E2E aplikacji webowych. Kilka dni temu doczekała się ona kolejnego dużego wydania. Oprócz gruntownego odświeżenia interfejsu użytkownika doczekaliśmy się wreszcie funkcjonalności testów komponentów.

Testowanie backendowych aplikacji to stosunkowo prosta sprawa. Przez lata wypracowane zostało sporo wzorców i praktyk, które jako społeczność przyjęliśmy za standard. Niestety jeśli chodzi o testy na frontendzie… no cóż, to skomplikowane.

Dobre wzorce wypracowane na backendzie nie znajdują zastosowania na frontendzie. Weźmy chociażby piramidkę testów. Zgodnie z jej założeniami większość testów powinny stanowić testy jednostkowe, czyli w rozważanym przypadku testy komponentów w izolacji. W teorii nic nie stoi na przeszkodzie aby realizować te założenia. Jeśli jednak kiedykolwiek pisaliście testy jednostkowe komponentów, to prawdopodobnie wiecie do jakiej konkluzji zmierzam. Testy te nie oddają sposobu w jaki użytkownicy interaktują z komponentami, rzadko poprawnie obsługują CSSy i nie dają programiście odpowiedniej, wizualnej informacji zwrotnej.

Na szczęście w ostatnich latach sytuacja testów na frontendzie stopniowo się poprawia. Nie tylko powstaje coraz więcej wzorców i praktyk, ale też pojawiają się coraz lepsze narzędzia do testowania. I mam tu na myśli nie tylko Cypressa, ale też Storybook’a, Lighthouse’a, czy Reassure.Wracając do tematu Cypressa. Cypress 10 wprowadza testy komponentów w formie bety. Nowy typ testów ma rozwiązać problemy występujące w Jest czy Karmie i zamienić pucharek testów (o nim więcej przeczytacie tutaj) z powrotem w piramidę.

Przez zastosowanie prawdziwej przeglądarki Cypress ładować będzie komponenty wraz z pełnymi CSS-ami. Zastosowane API umożliwia łatwe opakowanie komponentu, tak aby nadać mu odpowiednią szerokość i wysokość, lub też po prostu go wyśrodkować. Prawdziwa przeglądarka zapewnia rozsądną emulację interakcji użytkownika – koniec ze sztucznym wywoływaniem wydarzeń w DOMie. Wisienką na torcie jest możliwość podglądu testów w trakcie ich wykonywania oraz zapisywanie nagrań. Mamy więc do czynienia z pełnym pakietem potrzebnym zarówno do lokalnego developmentu jak i do odpalania testów na CI.

it('should NOT show validation messages', () => {
  cy.mount(<LoginForm />);

  cy.contains('Username').find('input').type('testuser');
  cy.contains('Password').find('input').type('testpassword');
  cy.get('button').contains('Login').click();

  cy.contains('span', 'Username is required')
    .should('not.be.visible');
  cy.contains('span', 'Password is required')
    .should('not.be.visible');
});

Na papierze wszystko wygląda obiecująco. W mojej głowie kołata się tylko jedno pytanie – czy Cypress jest wystarczająco szybki dla testów jednostkowych. To w końcu powinna być ich największa zaleta. Setki czy nawet tysiące testów powinny wykonywać się maksymalnie w ciągu kilku minut i dawać programiście natychmiastową informację zwrotną na temat tworzonego kodu. Jeśli chodzi o testy E2E, to Cypress jest nieporównywalnie szybszy od konkurencji. W przypadku testów jednostkowych może okazać się to niewystarczające. Mam szczerą nadzieję, że moje obawy okażą się nietrafione i Cypress poraz kolejny zrewolucjonizuje frontendowe testy.

Źródła:

https://www.cypress.io/blog/2022/06/01/cypress-10-release/
https://www.youtube.com/watch?v=vJ0rDP4CG-w

2. NestJS 9

NestJS to framework, który powinien być naszą mała narodową dumą. W końcu jego autor to Kamil Myśliwiec, a sam framework sukcesywnie zajmuje bardzo wysokie miejsca w deweloperskich ankietach satysfakcji.

Sporo osób określa NestJS, jako Angulara na backendzie. Rzeczywiście oba narzędzia mają wiele wspólnego. Uwierzcie mi jednak, że sporo znienawidzonych mechanizmów Angulara sprawdza się świetnie w backendowym środowisku.

NestJS świetnie broni się jako samodzielny framework backendowy. Trzeba przyznać natomiast, że przez podobny model mentalny obu rozwzwiązań, dla Angularowych Fullstack Developerów jest to narzędzie wręcz idealne.

Nie wspominam jednak o NestJS, aby podbudować Wasze patriotyczne serca, ale dlatego, że właśnie ukazała się kolejna wersja tego frameworku. Znajdziemy w niej sporo usprawnień Dependecy Injection, ale największą rewolucją jest wprowadzenie REPLa.

REPL, czyli Read–eval–print loop, to w sporym uproszczeniu konsola w której wykonywać można kod. Najlepszym przykładem REPLa dla JavaScript jest konsola, którą znajdziecie w DevTools Chrome i z której na pewno korzystaliście niejednokrotnie.

Za pomocą REPLa dostarczanego przez NestJS możliwe będzie wywoływanie dowolnych metod serwisów czy repozytoriów. To oznacza, że uciążliwe debugowanie za pomocą Postmana możemy już uznać za przeszłość. Przyznam szczerze, że patrzę na tą funkcjonalność z zazdrością… Panie Spring, proszę mi to zaimplementować!

Nowy NestJS, to również kilka usprawnień w Dependecy Injection. Przykładowo, nowa funkcjonalność Durable Providers pozwoli nam zastąpić dynamicznie tworzone drzewa zależności, statyczną, skończoną ilością drzew zależności. Znajdzie to zastosowanie między innymi wtedy, gdy w zależności od zapytania wstrzykiwane powinno być inne repozytorium komunikujące się z inną instancją bazy danych. Do tej pory NestJS za dla każdego zapytania tworzył nowe drzewo zależności. Od teraz jeśli liczba dostępnych repozytoriów jest skończona to i liczba drzew zależności będzie mogła być skończona i wykorzystywana ponownie przez kolejne zapytania.

Podobnych usprawnień Dependency Injection jest więcej i jeśli jesteście nimi zainteresowani to odsyłam Was do oryginalnego blogposta Kamila Myśliwca.

Źródła:

https://trilon.io/blog/nestjs-9-is-now-available

3. Vite 3

Vue poświęciliśmy całą poprzednią edycję naszego przeglądu, dlatego w tym tygodniu o Vite będzie w telegraficznym skrócie. W minionym tygodniu premierę miała trzecia wersja narzędzia do budowania aplikacji od Evana You. Jak chwalą się jego autorzy, z ich rozwiązania korzysta już między innymi Nuxt 3, SvelteKit, Astro, Hydrogen, SolidStart, Cypress czy Storybook. Spokojnie możemy powiedzieć więc, że Vite powoli przebija się do pierwszej ligi frontendowego toolingu.

Nowy Vite to nie rewolucja, a raczej stabilna ewolucja. Wśród zmian znajdziemy między innymi nową dokumentację, szybszy cold start, czy mniejszy bundle size. W pojedynkę, żadna z nowych funkcjonalności nie robi większego wrażenia. Sumując je wszystkie w jedno wydanie, mamy jednak do czynienia z naprawdę solidną aktualizacją. Jeśli interesują Was szczegóły, to w źródłach znajdziecie pełną notatkę towarzyszącą wydaniu.