Article

MicrosoftTeams-image-30.png

Category: Expertise strategy

Snapshot testing w aplikacjach front-endowych - czy wiesz już wszystko?

Kontynuacja serii artykułów eksperckich o programowaniu front-endu.

Kamil Naja, Programista Front-end emagine, 26/07/2023

Jednym z największych wyzwań podczas tworzenia aplikacji frontendowych jest unikanie wprowadzania niechcianych zmian. Testowanie logiki biznesowej jest możliwe za pomocą testów jednostkowych, jednak nie sprawdzają one zwykle całej struktury HTML. Rozwiązaniem problemu regresji w plikach HTML może być właśnie snapshot testing.

Czym jest snapshot testing?

W największym uproszczeniu jest to rodzaj testowania, który opiera się na porównywaniu wygenerowanego kodu HTML komponentu ze stanem poprzednim.

Standardowy test jednostkowy działa w taki sposób, że inicjalizujemy dane, wykonujemy akcję oraz sprawdzamy wybrane wartości. W testach snapshotów 2 pierwsze kroki są takie same, natomiast 3 krok polega na sprawdzeniu, czy wyrenderowany HTML jest taki sam, jak ten, który był przy poprzednim teście. Framework do testowania generuje komponent w formie HTML i następnie sprawdza go. Jeśli zmiany się różnią w stosunku do poprzednich, programista może podjąć 2 akcje:

  • Gdy zmiany są oczekiwane, zatwierdza nowy snapshot jako aktualnie obowiązujący. Będzie on od teraz użyty podczas kolejnego sprawdzania.
  • Jeśli zmiany są nieoczekiwane, to oznacza, że wprowadziliśmy regresję. W takiej sytuacji należy zmienić nowo wprowadzony kod.

Przy pierwszym wykonaniu testu, snapshot jest po prostu dodawany, ponieważ nie mamy go do czego porównać.

Framework jest wyposażony w szereg poleceń konsolowych ułatwiających pracę ze snapshotami.

Pliki snapshotów powinny być przechowywane w systemie kontroli wersji i co się z tym wiąże, powinny być analizowane podczas code review. Przy odrobinie doświadczenia pliki snasphotów są łatwe do analizy - wyglądają one niemal tak samo jako kod HTML generowany przez aplikację. Generują się one w specjalnym folderze i posiadają własne rozszerzenie.

Podobnie jak w przypadku innych technik testowania, snapshot testing powinien być wykorzystywany przez wszystkich programistów uczestniczących przy zmienianiu GUI. Najlepszym rozwiązaniem jest dodanie wykonywania snapshot testów do flow związanego z zatwierdzania zmian, dzięki czemu nie trzeba będzie pamiętać o ich ręcznym uruchomieniu.

Middle-text-front-end-emagine

 

  Snapshot testing - W największym uproszczeniu jest to rodzaj testowania, który opiera się na porównywaniu wygenerowanego kodu HTML komponentu ze stanem poprzednim.

 


Jakie przypadki warto sprawdzać podczas testowania?

Dobrym rozwiązaniem jest sprawdzenie przynajmniej 3 przypadków - komponentu z danymi, z brakiem danych oraz wyświetlający błąd. Jeśli komponent przyjmuje kilka typów danych (na przykład posiada różne stany), warto sprawdzić wszystkie przypadki.

Można również sprawdzić stan aplikacji po wykonaniu jakiejś akcji. Przykładowo, możemy sprawdzić snapshot tabeli po zmianie strony na kolejną.

Snapshoty z różnymi danymi tworzy się mockując dane w plikach testowych. Jeśli piszemy równocześnie testy jednostkowe, wykonanie snapshotu nie wymaga dodatkowej konfiguracji.

Ten rodzaj testów zupełnie nie sprawdzi się, jeśli chcemy testować dane dynamiczne, jak na przykład generowanie danych losowych w aplikacji front-endowej. Należy zwrócić szczególną uwagę na mockowanie bieżącej daty, w przeciwnym przypadku, snapshot może przestać działać kolejnego dnia.


 

Jakie są ograniczenia testów snapshotów?

Według książki Micheala Feathersa 'Praca z zastanym kodem', testy jednostkowe powinny wykonywać się bardzo szybko. Snapshot testing to technika jest dość zasobożerna, testy wykonują się zwykle dłużej niż testy jednostkowe.

Przykładowo, jeśli chcemy sprawdzić, czy aplikacja wyświetla określony tytuł, łatwiej i szybciej zrobimy to testem jednostkowym. Jeśli jednak na stronie znajduje się kilkanaście informacji, lepiej jest wykonać snapshot test. Należy pamiętać jednak o tym, że każdy test wiąże się z zajęciem pewnej ilości miejsca na dysku. Im obszerniejsze mamy dane testowe, tym więcej miejsca zajmą snapshoty.

W niektórych przypadkach wymagają one nieco dłuższej konfiguracji lub dokładniejszych danych testowych. Przykładem mogą być wspomniane wcześniej testy tabeli, w których musimy na przykład zamockować odpowiednią odpowiedź serwisu na żądanie 1 i 2 strony tabeli. Należy unikać duplikacji danych testowych, z uwagi na wspomnianą wcześniej przestrzeń zajmowaną przez pliki snapshotów.

Ograniczeniem tego rodzaju testów jest ich duża wrażliwość na zmiany. Każda najmniejsza zmiana w GUI wiąże się z koniecznością zatwierdzania nowych wersji. Nie używamy w nich asercji, nie mogą one działać w “przybliżeniu”, tak jak testy jednostkowe. Oczekują zawsze, że wygenerowany HTML będzie taki sam, jak był poprzednio.

Podsumowując - testy z użyciem snapshotów to przydatna technika, która pozwala na zachowanie spójności aplikacji. Należy jednak pamiętać o jej ograniczeniach i kosztach.

Kamil

Kamil Naja

Programista front-end
Specjalista realizujący projekty dla klientów emagine. Programista Front-end od początków kariery w IT, którą rozpoczynał w 2016 r. Blogger i propagator wiedzy w swojej dziedzinie.

Przeczytaj także:
Kluczowe kompetencje pracownika Help Desk

Chcesz wiedzieć więcej?

Pomożemy Ci odnieść sukces w roli niezależnego konsultanta IT.

Blog

Więcej wpisów na blogu

Expert stories

Microsoft Dev Box – nowoczesna maszyna robocza

Microsoft Dev Box to zwirtualizowane rozwiązanie, które umożliwia inżynierom IT szybkie uruchamianie samoobsługowych stacji roboczych wstępnie skonfigurowanych do ich zadań, przy jednoczesnym zachowaniu scentralizowanego zarządzania w celu maksymalizacji bezpieczeństwa i zgodności ze standardami w organizacji. Czy już je znasz?

Expert stories

Wymagania niefunkcjonalne w procesie tworzenia aplikacji

Podczas rozwijania aplikacji webowej zwykle odkrywamy szereg specyficznych funkcjonalności, wedle których ma ona działać. Niektóre z nich mogą wydawać się oczywiste dla części członków zespołu IT pracującego nad rozwiązaniem, jednak inni wolą mieć je spisane w szczegółowej formie, aby móc je wszystkie zaimplementować lub testować.

Expert stories

Najlepsze praktyki w zakresie bezpieczeństwa łańcucha dostaw oprogramowania

Łańcuch dostaw oprogramowania to „proces dostarczania produktu do klienta” w domenie IT, odnosi się do procesu projektowania, budowania, dostarczania i utrzymania. Jego bezpieczeństwo jest nie tylko ważnym, ale wręcz kluczowym aspektem współczesnego świata IT.

Expert stories
Webinar

Obejrzyj zapis webinaru “AI: Nowa fala przyszłości”

Szansa cywilizacyjna, czy też zagrożenie? Algorytmy sztucznej inteligencji od wielu lat stanowią jeden z centralnych punktów dyskusji o przyszłości technologii. Rozwiązania oparte na AI, niezależnie od poziomu organizacji na którym zostaną wykorzystane, pomogą stworzyć nowatorskie modele biznesowe. Sprawdźcie zatem, czy Wasza organizacja jest do tego dobrze przygotowana. Czego się spodziewać? Jak wykorzystać AI, aby tworzyć przewagę konkurencyjną na rynku?

Expert stories

Snapshot testing w aplikacjach front-endowych – czy wiesz już wszystko?

Jednym z największych wyzwań podczas tworzenia aplikacji front-endowych jest unikanie wprowadzania niechcianych zmian. Testowanie logiki biznesowej jest możliwe za pomocą testów jednostkowych, jednak nie sprawdzają one zwykle całej struktury HTML. Rozwiązaniem problemu regresji w plikach HTML może być snapshot testing.

Expert stories

Przyszłość sztucznej inteligencji – jakie wyzwania i możliwości stoją przed światem IT?

Przyszłość sztucznej inteligencji (SI) niesie ze sobą zarówno wyzwania, jak i ogromne możliwości rewolucji technologicznej. Zewsząd słyszymy, że SI przejmie we wszystkim kontrolę i my jako ludzie będziemy już mniej potrzebni lub wręcz zbędni – czy aby na pewno?

Expert stories

Efektywne sposoby na pracę z back-endem

Aby tworzyć rozwiązania front-endowe, zwykle pobieramy dane z aplikacji back-endowej. W tym artykule chciałbym przedstawić, w jaki sposób możemy udoskonalić i przyspieszyć tę pracę. Podstawowe czynniki, które wziąłem pod uwagę podczas analizy, to elastyczność pracy oraz to, czy programista używający API, może edytować dane zwracane przez back-end.

Expert stories

Neo4j: Grafowa baza danych rewolucjonizuje zarządzanie informacjami

Wraz z gwałtownym wzrostem ilości danych na znaczeniu zyskują nowoczesne rozwiązania bazodanowe. Jednym z najciekawszych i najbardziej innowacyjnych rozwiązań jest neo4j – grafowa baza danych, która rewolucjonizuje sposób przechowywania i analizy informacji. W tym artykule przyjrzymy się bliżej temu fascynującemu narzędziu, poznamy jego zalety, funkcje oraz praktyczne zastosowanie.

Expert stories

Jak AI wspiera pracę Front-end developerów – praktyczny poradnik

Z perspektywy front-endowca w ostatnim roku zauważyłem jak bardzo zastosowanie nowoczesnych narzędzi pomaga w szybszym tworzeniu aplikacji i sprawia, że pozbawione są one błędów. W artykule opisuję zastosowanie ChatGPT, Github Copilot oraz Github Copilot Chat, określając je skrótowo mianem AI.

Expert stories

Wypalenie zawodowe specjalistów IT – jak je przewidzieć i jak mu zapobiec?

Na pewno każdy z nas chociaż raz czuł, że w jego pracy coś idzie inaczej, niż by chciał. Dochodzi to tego zmęczenie, stres, spadek motywacji i nagle cały zawodowy świat się wali – zaczynamy myśleć, czy to, co robimy ma sens, czemu dotychczasowe działania nie przynoszą pożądanych efektów. Innymi słowy, wpadamy w rozmyślania nad tym, jak jest ciężko. Najczęściej to tylko zmęczenie, brak odpoczynku, stres, natomiast kiedy warto zadbać o siebie bardziej i przekonać się, czy to nie jest wypalenie zawodowe?

Expert stories

Jak skutecznie zbudować i utrzymać relację z kandydatem podczas procesu rekrutacyjnego w IT

Branża IT od dawna  jest  jedną z najbardziej dynamicznie rozwijających się dziedzin rynku, niezależnie od szerokości geograficznej. Tym bardziej, znalezienie odpowiedniego kandydata do realizacji projektów IT, który spełniałby wszystkie wymagania zarówno pod względem wiedzy i umiejętności technicznych, jak i kompetencji miękkich nigdy nie było czymś prostym.

Expert stories

Poznaj kompetencje miękkie przyszłości w obszarze sprzedaży

Inwestycja w kompetencje miękkie może szczególnie opłacić się w zawodach przyszłości. W przeciwieństwie do twardych, kapitałem nie jest wykształcenie czy fachowa wiedza. Soft skills pozwolą tym, którzy je wdrożą i oswoją, z lekkością adaptować się do zmian jakie czekają rynek pracy.

Paweł Pancerz
Expert stories

Rozwój Chmury – co czeka nas w najbliższej przyszłości?

W ciągu ostatnich lat rozwój technologii chmurowych zmienił się bardzo dynamicznie. Wymogi rynkowe oraz coraz większa świadomość w zakresie potencjału technologii chmurowych sprawiają, że obawy przed tą technologią IT są coraz mniejsze.

Marcin Kosiński
Expert stories

Efektywna praca zdalna w innej strefie czasowej

Zdalna praca w innej strefie czasowej  jest możliwa, gdy w zespole panuje odpowiednia dyscyplina.

ichał Mrozowski, Starszy Analityk Biznesowy, Scrum Master
Expert stories

10 cech dobrego Scrum Mastera

Czy każdy nadaje się na Scrum Mastera? Jeśli zespół poszukuje Scrum Mastera, który wniesie wartość dodaną i będzie dla niego wsparciem – a nie tylko prowadzącym ceremonie – powinien szukać osoby posiadającej konkretne cechy.