Apollo Client z React.js: Testowanie mutacji
w Praktyce
3 godz. 17 min · ReactJS · Full-stack i Programowanie
Przemysław NowakSoftware EngineerCzego się nauczysz
- Wyjaśnienie czym jest Apollo
- Skonfigurowanie aplikacji React z Apollo Client
- Przedstawienie useQuery, useMutation oraz useSubscription
- Wyjaśnienie jak działa najważniejszy feature Apollo Client czyli Cache
- Stworzenie w pełni działającej aplikacji React z Apollo
- Praktyczne rozwiązanie dotyczące testowania
Jedna warstwa komunikacji
Jeżeli masz już doświadczenie w tworzeniu aplikacji komunikujących się z backendem to z pewnością wiesz czym jest ból niespójnego API oraz wielu sposobów wykonywania requestu po dane. Apollo rozwiązuje ten problem udostępniając jedno proste API do obsługi komunikacji z serwerem GraphQL. Nie musisz się martwić o to jak otworzyć kanał WebSocket dla subskrypcji czy o to jak napisać poprawny Query Document - to wszystko i jeszcze więcej dostarcza dla nas Apollo Client.
Server state + local state w jednym
Apollo 3 posiada niesamowity mechanizm cache, który pozwala zaoszczędzić czas na wykonywanie zapytań oraz setup bibliotek do przechowywania stanu serwera. Wszystkie request trafiają do warstwy pamięci podręcznej, którą zarządza dla nas Apollo - wybiera, dodaje oraz łączy odpowiednie podzbiory tak aby jak najmniej komunikować się z serwerem, a mimo to wiedzieć jaki jest jego stan. Dodatkową cechą mechanizmu Cache jest to, że może być łatwo użyty jako stan lokalny - bez potrzeby instalowania bibliotek takich jak Redux, jesteśmy w stanie stworzyć aplikację stateful w niesamowitym tempie!
Poprawne Unit Testy
Być może spotkałeś się już kiedyś z problemem Unit Testów, które działają - są na "zielono" ale mimo wszystko aplikacji jest zepsuta - to przykład źle napisanych jednostek. Komunikacja z serwerem i odbieranie danych to kluczowy element każdej aplikacji - dlatego ważne jest aby stworzyć poprawne unit testy, które będą nas chronić przed zepsutą aplikacją na produkcji. W kursie tym poznasz poprawny sposób na testowanie klienta Apollo, tak aby testy były stabilne i spełniały swoją rolę.
Błyskawiczne aplikacje
Z pewnością wyobrażasz sobie magiczne aplikację, które działają szybko bez potrzeby czekania na odpowiedzi z serwera oraz posiadające poprawne dane. Skoro tak, wiesz również, że stworzenie takich aplikacji wymaga wiele pracy, dodatkowych bibliotek oraz rozpisania każdego przypadku, tak aby wiedzieć kiedy dane są poprawne a kiedy trzeba zapytać serwer o nie jeszcze raz... A co jeżeli Ci powiem, że Apollo zrobi to za nas? Podejście Cache-First, o które oparta jest biblioteka klienta apollo dostarcza nam te wszystkie w/w cechy, a kurs ten pokaże Ci jak sprawnie posługiwać się tymi narzędziami.
Poważny Gracz w wielu stackach technologicznych
Apollo to poważny gracz w wielu stackach technologicznych. Jeżeli firma decyduje się używać GraphQL - który jest coraz bardziej popularny - to przeważnie w parze idzie Apollo. Dlatego w wielu ofertach pracy możesz spotkać tą technologię jako wymaganą. Zresztą, nie bez przyczyny, Apollo pozwala na sprawne, spójne oraz szybkie budowanie aplikacji czy to z Reactem, czy to z Angularem, Vue, Svelte oraz z Androidem czy iOS - mając jeden wspólny interfejs pracy, firmy są wstanie tworzyć aplikację w różnych technologiach komunikujących się z warstwą Apollo w jeden określony sposób.
Dla kogo jest ten kurs?
Kurs ten jest stworzony z myślą o FrontEnd developerach znających ReactJS oraz podstawy GraphQL, którzy chcą dodać do swojego arsenału technologicznego poważną broń jaką jest Apollo.
Cześć!
W tej lekcji zajmiemy się testowaniem mutacji.
Tak jak wspomniałem w poprzedniej lekcji, jest to bardzo podobne do testowania query
i właśnie jesteśmy na stronie dokumentacji.
Jest tutaj w tym pierwszym paragrafie opis, że jest to bardzo podobne, że
testowanie mutacji jest bardzo podobne do testowania query.
Jedyna różnica jest taka, że musimy
wywołać funkcję budującą i to w zasadzie tyle, więc nie będziemy
tutaj więcej przechodzić przez dokumentację.
Przejdźmy do kodu.
Ja tutaj przygotowałem dla Order Form plik Order Form Spec.
Jeżeli przyłączysz się na obręczach, które jest do tej lekcji to będziesz
również miał taki setup, bo ja tutaj zrobiłem kilka zmian.
W zasadzie główną zmianą jest to, że dodałem w Order Random ID.
To dlatego, że chcemy wywoływać mutację i
naszego mocka dokładnie z takim Order ID jaki będzie w naszym teście.
Gdybyśmy wywoływali ten Generate random ID
tutaj, to on by był inny w naszym kodzie i inny w naszym teście.
Dlatego nie bylibyśmy w stanie tego zweryfikować,
więc musimy tutaj mieć zawsze ten sam order ID, który mamy w blokach.
Dlatego ja tutaj mu dodałem generate random jako domyślną wartość, ale
również możemy mu tutaj przekazać tą wartość poprzez propsy.
I to chyba tyle jeżeli chodzi o zmiany w samym w samym kodzie Order Form.
I również przygotowałem cały template,
żebyśmy nie pisali tego od zera, ponieważ już umiesz robić na podstawie poprzedniej
lekcji cały template testu i w teście dodałem właśnie tak samo mocka
i jest to właśnie ten request i ten request.
Tutaj woła nasze query create order, czyli dokładnie tak jak robiliśmy to wcześniej.
No i właśnie te variable.
Ja tutaj wygenerowałem właśnie ten random ID, który będzie tutaj przekazany i
również renderuje komponent właśnie z tym random ID.
Czyli tu będziemy mieć tą samą mutację
wywołaną przez nasz komponent co tutaj będziemy właśnie się spodziewać.
No i teraz tutaj to co widzisz Variable tu
również mamy kod pocztowy, ulicę, kraj oraz miasto.
No i właśnie będziemy musieli sobie wypełnić nasz formularz.
Ja tutaj przygotowałem również
miejsce na asercji i w tym miejscu będziemy chcieli wypełnić formularz.
Pokażę Ci jak to robić z z jak Testing Library.
Nie jest to trudne, więc zaraz się tym zajmiemy.
Nie chciałem tutaj pisać od zera
wszystkiego, więc mamy taki setup zrobiony.
A więc zacznijmy tutaj pisać ten test.
W zasadzie to co nas interesuje to
wypełnić formularz do tych wartości i wykonać submit.
Możemy sobie tutaj Order Form tutaj.
Jeżeli zerkniemy sobie na nasze importy to możemy je
zidentyfikować za pomocą holdera, więc po prostu użyjemy funkcji get folder text i
pobierzemy te input, a następnie dodamy im wartość.
I tutaj nasz Submit baton możemy również sobie znaleźć za pomocą tekstu submit
OK i będziemy potem chcieli jeszcze przetestować czy wszystko się wykonało,
więc będziemy chcieli znaleźć ten tekst po wykonaniu, czy wszystko jest okej.
Dobra, więc to będzie dosyć szybkie.
Przejdźmy sobie tutaj i tutaj będziemy chcieli sobie z tej funkcji render przyjąć
właśnie te dwie funkcje, czyli Get bay, las holder text oraz Get bay text.
Będziemy używać tej funkcji i teraz tutaj będę chciał użyć first.
Jest to również
helper o jak Testing library, który pomaga wykonywać jakieś eventy, czyli np.
on change na płycie.
Ja tutaj właśnie będę chciał taki event
change wykonać na tym imporcie i tutaj ten input sobie znajdę za pomocą get
bps holder text i ten pierwszy place holder to będzie strict.
Ja bym tutaj chciał mu przekazać z czym go wykonuje, czyli
tutaj będzie target value w tym miejscu value i to które wykonam przekażę mu.
To będzie właśnie próba, a nie jakiś błąd.
Teraz wygląda to w porządku.
Czyli jeszcze raz Event Change wykonuje funkcję 4, czyli tak jakbym pisał na
klawiaturze na tym bucie i chcę ustawić mu target value na sosnowa.
Czyli generalnie nic tutaj strasznego i
nowego i to samo będę chciał zrobić dla wszystkich importów,
czyli będę chciał to zrobić dla Cape Website tej ustawimy Kraków.
Generalnie muszą się te wartości zgadzać z tym czego oczekujemy w Variable Z,
ponieważ tak wykonamy właśnie z tymi wartościami wykonamy naszą notację.
Tutaj będzie Country Polska i również te prostokąty.
To będzie ten sam prostokąt, który mamy tutaj.
Zgadza się.
No dobra, i teraz jeszcze jeden event musimy sobie wykonać, czyli first
i tutaj musimy wykonać event click, czyli na tym betonie submit.
I tak jak mówiłem możemy sobie ten button
pobrać za pomocą tekstu, czyli kiedy text submit.
OK, i teraz w zasadzie powinno być ok.
Tutaj wypełniliśmy formularz, tutaj klikamy na submit i to czego oczekujemy w
tym miejscu to jest nasz tekst Greater order do what ok se expekt.
I tutaj zrobimy sobie Get back text.
Ja bym tutaj chciał znaleźć ten tekst i oczekuje, że on będzie dokumencie.
No dobra, w zasadzie to 11cm wystarczy, więc myślę, że to powinno działać.
Zapiszmy to sobie i zróbmy npm test.
Forum. Poczekajmy.
OK. No i działa.
Jeszcze żeby pokazać, że to działa to
spróbujmy to wydać jakieś inny tekst i wtedy zobaczysz, że to nie działa i
będziesz mógł zobaczyć jak ten dom wygląda w renderowane przez rejestr.
Widzisz, że tutaj mamy błąd, że nie znaleźliśmy takiego tekstu i
teraz jeżeli sobie zerkniesz to mam tutaj graty i sandałki.
Czyli to jest to co mam, że jest wyrenderować potem po kliknięciu.
A więc wszystko
działa jak należy, nasz komponent zachowuje się jak należy i to wszystko.
Ja myślę, że nie ma sensu tutaj dalej iść w te testy.
To działa dokładnie tak samo jak
jak test dla query, czyli używamy mock providera, dostarczamy oki.
Jedyna rzecz jest taka, czyli to co jest również opisane w dokumentacji, że musimy
tutaj wykonać sobie ten click ten event manualnie aby ta mutacja się wykonała,
więc musimy te funkcje w jakiś sposób wyegzekwować.
No ale potem już robimy ta sesję tak jak robiliśmy wcześniej.
Czyli jeżeli byśmy tutaj również opierali
się na jakiś danych to możemy to zrobić na horrorach również itd.
Itd. Natomiast cała
idea jest dokładnie taka sama, więc myślę, że to wszystko już wiesz.
Jak pisać dobre testy dla notacji dla
query więc jest to najważniejsze i to wszystko.