Marble testing – wszystko o testowaniu RxJS

RxJS observables

RxJS to biblioteka do tworzenia asynchronicznych strumieni danych, zarządzania nimi oraz obsługiwania zdarzeń w aplikacjach JavaScript. Kluczowym elementem RxJS są observable, które reprezentują strumienie danych emitowane w czasie.

Observable opierają się na wzorcu projektowym Obserwator, w którym obserwator „subskrybuje” obserwowany obiekt i oczekuje na emitowane przez niego dane. RxJS oferuje różnorodne operatory, takie jak map, filter czy merge, które pozwalają na przekształcanie, filtrowanie i łączenie strumieni danych.

Szerzej koncepcja biblioteki RxJS została opisana w artykule Programowanie reaktywne z JavaScript w RxJS.

Czym jest testowanie RxJS (marble testing w RxJS)?

RxJS umożliwia reaktywne programowanie w JavaScript, dzięki czemu można obsługiwać asynchroniczne strumienie danych oraz manipulować nimi za pomocą różnych operacji, takich jak mapowanie, filtrowanie czy łączenie. Testowanie RxJS ma na celu zapewnienie, że kod działający na tych strumieniach jest poprawny, wolny od błędów i spełnia oczekiwania. 

Marble testing 

W kontekście testowania RxJS warto wspomnieć o marble testing, które jest jednym z popularnych narzędzi do testowania strumieni danych w tej bibliotece. Marble testing to nic innego jak wizualizacja strumieni danych za pomocą tzw. marble diagrams. W marble strumienie danych reprezentowane są jako ciągi znaków, gdzie każdy znak symbolizuje wartość w strumieniu lub specjalne zdarzenie, takie jak zakończenie strumienia czy wystąpienie błędu. Testowanie z użyciem diagramów marble pozwala na definiowanie oczekiwanych wyników oraz porównywanie ich z rzeczywistymi wynikami testowania, co jest szczególnie przydatne w przypadku złożonych operacji asynchronicznych. 

Rodzaje testów

Testowanie RxJS, zwłaszcza z wykorzystaniem diagramów marble, pozwala na weryfikację poprawności działania funkcji i operatorów reaktywnych w kontekście testów jednostkowych. Testy jednostkowe koncentrują się na ocenie pojedynczych funkcji, operatorów oraz strumieni danych. Ich celem jest izolowanie poszczególnych elementów kodu i sprawdzenie, czy zachowują się zgodnie z oczekiwaniami.

Przeczytaj także: Narzędzia automatyzacji testów czy dobre praktyki? Jak przyspieszyć testowanie?

Narzędzia testowania RxJS 

W celu ułatwienia testowania z użyciem diagramów marble biblioteka RxJS udostępnia takie narzędzia jak TestScheduler, który pozwala na kontrolowanie czasu w wirtualny sposób – bez wpływu na rzeczywisty czas wykonywania testów. TestScheduler umożliwia definiowanie wartości wejściowych i oczekiwanych wartości wyjściowych za pomocą marble diagrams, a następnie symuluje przepływ danych w strumieniach reaktywnych. 

Jak pisać przypadki testowe RxJS?  

Pisanie przypadków testowych RxJS wymaga starannego planowania, zrozumienia kodu źródłowego oraz wykorzystania odpowiednich narzędzi do testowania. Marble testing to jedno z podejść, które pomaga w tworzeniu przejrzystych testów dla strumieni danych. Oto kilka wskazówek, jak napisać testy dla kodu opartego na bibliotece RxJS: 

1. Zapoznaj się z kodem źródłowym 

Przed przystąpieniem do pisania przypadków testowych dokładnie zapoznaj się z kodem źródłowym, który będzie testowany. Zrozumienie struktury kodu oraz celu poszczególnych funkcji i operatorów pozwoli na opracowanie skutecznych i kompleksowych testów. 

2. Wybierz odpowiedni framework do testowania 

Wybierz framework do testowania kodu JavaScript, taki jak Jasmine, Mocha czy Jest, który najlepiej odpowiada twoim potrzebom i preferencjom. Upewnij się, że wybrany framework współpracuje z RxJS i pozwala na wykorzystanie marble testing, jeśli planujesz korzystać z tego podejścia. 

3. Utwórz strukturę testów 

Testy jednostkowe zwykle są organizowane w blokach describe (lub podobnych, w zależności od używanego frameworka), które służą do grupowania testów dotyczących określonej funkcji, operatora lub komponentu. Wewnątrz bloków describe umieszczamy poszczególne przypadki testowe, zdefiniowane za pomocą funkcji it (lub odpowiednika w wybranym frameworku). 

4. Zastosuj marble testing 

Marble testing to podejście, które pozwala na wizualizację strumieni danych za pomocą tzw. marble diagrams. W marble testing strumienie danych reprezentowane są jako ciągi znaków, gdzie każdy znak symbolizuje wartość w strumieniu lub specjalne zdarzenie, takie jak zakończenie strumienia czy wystąpienie błędu. 

W przypadku testowania RxJS z wykorzystaniem marble testing użyj narzędzi dostarczanych przez bibliotekę, takich jak TestScheduler. TestScheduler pozwala na kontrolowanie czasu w sposób wirtualny oraz definiowanie wartości wejściowych i oczekiwanych wartości wyjściowych za pomocą marble diagrams.  

5. Zdefiniuj przypadki testowe 

Przypadki testowe powinny być zdefiniowane w sposób czytelny i zrozumiały, opisując oczekiwane zachowanie funkcji, operatora lub strumienia danych. Wykorzystując marble testing, możesz precyzyjnie i czytelnie opisać oczekiwane zachowanie strumieni danych oraz porównać rzeczywiste wyniki z oczekiwanymi. 

6. Testuj różne przypadki i scenariusze 

Podczas pisania przypadków testowych warto przetestować różne scenariusze, takie jak: 

• Przepływ danych o różnych wartościach 
• Przepływ danych z opóźnieniami lub interwałami 
• Zachowanie kodu w przypadku wystąpienia błędów 
• Zakończenie strumieni danych 
• Właściwe przekazywanie wartości do kolejnych operatorów 

• Spróbuj także uwzględnić przypadki brzegowe, aby upewnić się, że testowany kod jest odporny na różne sytuacje. 

7. Przeglądaj i ulepszaj przypadki testowe 

Regularnie przeglądaj swoje przypadki testowe, aby upewnić się, że są aktualne i nadal spełniają swoje zadanie. Spróbuj zoptymalizować testy, eliminując powtarzalne lub zbędne fragmenty kodu, a także ułatwiając jego czytanie i zrozumienie. Dzięki temu utrzymanie i rozwój testów będą łatwiejsze w miarę wprowadzania zmian w kodzie źródłowym. 

Pisanie przypadków testowych RxJS, zwłaszcza z wykorzystaniem marble testing, wymaga zrozumienia struktury kodu, wyboru odpowiedniego frameworka do testowania, tworzenia struktury testów oraz definiowania przypadków testowych, które precyzyjnie opisują oczekiwane zachowanie strumieni danych. Dzięki stosowaniu tych wskazówek będziesz w stanie tworzyć czytelne i skuteczne testy jednostkowe dla swojego kodu opartego na bibliotece RxJS. 

Czym jest marble diagram w RxJS? 

Diagramy marble to wizualne reprezentacje strumieni danych w bibliotece RxJS, które pomagają zrozumieć przepływ danych oraz interakcje między operacjami na strumieniach. Wprowadzenie diagramów marble do procesu wytwarzania oprogramowania z RxJS może poprawić czytelność kodu, ułatwić komunikację między programistami oraz przyspieszyć proces wdrażania testów. 

Jak odczytywać diagramy marble w RxJS? 

Diagramy marble używają znaków do przedstawienia wartości emitowanych przez strumień, zakończenia strumienia, wystąpienia błędu oraz subskrypcji i jej anulowania. Oto kilka dodatkowych wskazówek, jak odczytywać diagramy: 

Czas: każdy myślnik (–) oznacza jednostkę czasu, zwaną również „ramką”. W testach marble długość ramki czasowej jest zdefiniowana w narzędziu TestScheduler, co pozwala na kontrolowanie upływu czasu w teście. 

Wartości: znaki alfanumeryczne (np. a, b, c) reprezentują wartości emitowane przez strumień danych. Wartości te są zazwyczaj zdefiniowane w obiekcie wartości przekazywanym do metody toBe(), który mapuje te znaki na rzeczywiste wartości. 

Subskrypcja i anulowanie subskrypcji: w Marble możemy użyć symbolu ^ do oznaczenia momentu, w którym subskrypcja się rozpoczyna, oraz ! do oznaczenia momentu, w którym zostaje anulowana. 

Przykładowy diagram marble dla RxJS może wyglądać tak:

---a---b---c---| 
 

Ten diagram reprezentuje strumień danych, który emituje trzy wartości: a, b, c, każda z nich emitowana w równych odstępach czasu. Ostatni symbol, |, oznacza, że strumień został zakończony po emisji c.

---a---b---c---| 

        map(x => x.toUpperCase()) 

---A---B---C---| 

W tym przypadku mamy strumień wejściowy, który emituje wartości a, b, c. Następnie zastosowaliśmy operator map, który przekształca każdą emitowaną wartość na jej odpowiednik z dużą literą. Wynikowy strumień emituje więc wartości A, B, C. 

Diagramy marble mogą być znacznie bardziej skomplikowane, z wieloma operatorami i zdarzeniami. Kluczowe jest zrozumienie podstawowej notacji, aby móc interpretować i tworzyć takie diagramy. 

Jakie są rodzaje testów marble w RxJS?

Testy marble w RxJS dzielimy na dwa główne rodzaje: testy jednostkowe i testy integracyjne.

Testy jednostkowe

Skupiają się na izolowaniu i testowaniu indywidualnych komponentów, operatorów lub funkcji. Marble testing jest bardzo przydatne w testach jednostkowych, ponieważ pozwala na precyzyjne sprawdzanie sekwencji zdarzeń oraz efektów poszczególnych operatorów na strumieniach danych. W testach jednostkowych korzystamy z TestScheduler, który pozwala kontrolować upływ czasu oraz weryfikować oczekiwane wyniki testów.

Testy integracyjne

Testują interakcje między różnymi komponentami, operatorami lub funkcjami w systemie. Marble testing może być również używane w testach integracyjnych, aby zbadać, jak różne części kodu współpracują ze sobą. W testach integracyjnych sprawdzamy, czy przepływ danych między różnymi komponentami jest zgodny z oczekiwaniami. Testowanie marble w kontekście testów integracyjnych jest bardziej złożone niż w przypadku testów jednostkowych, ale może dostarczyć cenne informacje na temat zachowania systemu jako całości. 

W testowaniu z wykorzystaniem diagramów marble  istotne jest również zrozumienie operatorów „hot” i „cold”. W kontekście strumieni danych operator „hot” to taki, który emituje wartości niezależnie od tego, czy istnieje obecnie jakakolwiek subskrypcja. Z kolei operator „cold” zaczyna emitować wartości dopiero po subskrypcji. W testach marble operator „cold” jest zazwyczaj reprezentowany przez strumienie oznaczone jako source. Najlepiej będzie spojrzeć na przykład:  

import { TestScheduler } from 'rxjs/testing'; 

import { of, Subject } from 'rxjs'; 

import { map, takeUntil } from 'rxjs/operators'; 
 

it('should demonstrate hot and cold observables', () => { 

  const testScheduler = new TestScheduler((actual, expected) => { 

    expect(actual).toEqual(expected); 

  }); 

 

  testScheduler.run(({ cold, hot, expectObservable }) => { 

    const sourceCold$ = cold(' --a--b--c--|'); 

    const sourceHot$ = hot('  --d--e--f--|'); 

    const stop$ = cold('      -----s--|'); 

    const expectedMarble = '  --x--y--(z|)'; 

 

    const resultCold$ = sourceCold$.pipe( 

      takeUntil(stop$), 

      map((value) => value.toUpperCase()) 

    ); 

    const resultHot$ = sourceHot$.pipe( 

      takeUntil(stop$), 

      map((value) => value.toUpperCase()) 

    ); 

    expectObservable(resultCold$).toBe(expectedMarble, { 

      x: 'A', 

      y: 'B', 

      z: 'C' 

    }); 

    expectObservable(resultHot$).toBe(expectedMarble, { 

      x: 'D', 

      y: 'E', 

      z: 'F' 

    }); 

  }); 

}); 

W powyższym przykładzie widzimy dwa strumienie danych: „cold” i „hot”. Strumień „cold” zaczyna emitować wartości tylko po subskrypcji, podczas gdy strumień „hot” emituje wartości niezależnie od subskrypcji. W teście używamy operatora „takeUntil” do zakończenia obserwacji strumieni danych w odpowiednim momencie. 

Podsumowując, marble diagrams w RxJS są niezwykle pomocne w zrozumieniu przepływu danych oraz zachowań poszczególnych operatorów w strumieniach danych. Testowanie marble ułatwia tworzenie testów jednostkowych oraz integracyjnych, które są niezbędne dla poprawnego działania aplikacji opartej na RxJS. Wiedza na temat diagramów marble oraz umiejętność pisania skutecznych testów marble są ważnymi kompetencjami każdego programisty korzystającego z biblioteki RxJS. 

W przypadku pracy z marble warto pamiętać o kilku dodatkowych zasadach i wskazówkach, które mogą ułatwić proces testowania:

• Konwencje nazewnictwa: kiedy tworzysz strumienie danych za pomocą diagramów marble, warto utrzymywać konwencje nazewnictwa i używać nazw związanych z funkcjonalnością strumieni. Dzięki temu możemy łatwo zrozumieć, jakie dane przepływają przez strumienie, co ułatwia analizowanie wyników testów. 

• Korzystanie z helperów: w wielu przypadkach testowania marble możemy skorzystać z funkcji pomocniczych dostarczanych przez bibliotekę RxJS, takich jak TestScheduler, hot, cold, time, expectObservable i expectSubscriptions. Te funkcje ułatwiają tworzenie diagramów marble oraz zarządzanie nimi i testowanie przepływu danych między różnymi strumieniami. 
• Weryfikacja wyników testów: podczas pisania testów marble warto zwracać uwagę na wyniki testów i błędy zgłaszane przez narzędzia do testowania, takie jak Jasmine lub Mocha. Dzięki temu możemy szybko zidentyfikować i naprawić błędy w naszym kodzie. 
• Dokładność testów: testowanie marble pozwala na precyzyjne śledzenie sekwencji zdarzeń w strumieniach danych. Jednak ważne jest, aby pamiętać, że testowanie marble nie zastępuje innych rodzajów testowania, takich jak testy jednostkowe czy integracyjne. Warto korzystać z różnych technik testowania w zależności od kontekstu i potrzeb aplikacji. 
• Praktyka: testowanie marble może być na początku trudne do zrozumienia, ale z biegiem czasu i nabieranym doświadczeniem staje się coraz łatwiejsze. Praca z różnymi przykładami i scenariuszami pomoże zrozumieć, jak najlepiej wykorzystać diagramy marble w testach RxJS. 

Używając marble w RxJS, można skutecznie testować strumienie danych oraz interakcje między operacjami. Diagramy marble ułatwiają zrozumienie przepływu danych oraz oczekiwanych wyników testów, co prowadzi do budowania bardziej niezawodnych i wydajnych aplikacji. Praktyka i doświadczenie są kluczowe w opanowaniu testowania marble, ale korzyści płynące z jego zastosowania są nieocenione dla każdego programisty Front-End.

Przeczytaj także: Test regresji – strata czasu czy must have w projekcie?

Jakie są korzyści z testowania RxJS?

• Działanie kodu zgodne z oczekiwaniami – testowanie kodu RxJS jest niezwykle ważne, gdyż pozwala na zwiększenie pewności, że kod działa zgodnie z oczekiwaniami. Dzięki testom programiści mogą być pewni, że ich aplikacje rzeczywiście spełniają założone wymagania biznesowe, co przekłada się na mniejsze ryzyko wystąpienia błędów czy niezgodności. 
• Wykrywanie błędów – jednocześnie testowanie ułatwia wykrywanie błędów, ponieważ sprawdza indywidualne funkcje, operatory oraz interakcje między nimi. Dzięki temu możliwe jest szybsze zidentyfikowanie i naprawienie problemów w kodzie. To wpływa również na skrócenie czasu debugowania, gdyż testy pomagają programistom szybko zlokalizować źródło błędu. 
• Łatwiejsze wprowadzanie zmian – testy RxJS wspierają także wprowadzanie zmian w kodzie, gdyż automatycznie sprawdzają funkcjonalność po każdej modyfikacji. Dzięki temu programista może szybciej wykryć i naprawić ewentualne problemy wynikające z wprowadzonych zmian. Ponadto testy ułatwiają refaktoryzację, gdyż programista może być pewny, że jego zmiany nie wprowadzą regresji. 
• Dokumentacja kodu – warto również zauważyć, że testy RxJS często służą jako dokumentacja dla kodu, dostarczając informacji o tym, jak korzystać z poszczególnych funkcji i jakie są ich oczekiwane wyniki. Taka dokumentacja jest nieoceniona dla innych programistów, którzy chcą zrozumieć czyjś kod i wiedzieć, jak go używać. 

• Większe zaufanie do oprogramowania – wreszcie testowanie zwiększa zaufanie do kodu zarówno wśród programistów, jak i interesariuszy projektu. Wszyscy mogą być pewni, że aplikacja rzeczywiście działa poprawnie i spełnia wymagania. Testy są kluczowe dla utrzymania wysokiej jakości aplikacji opartych na strumieniach danych i reaktywnym programowaniu. 
• Lepszy kod – w efekcie testowanie kodu RxJS przyczynia się do lepszej jakości kodu, szybszego wykrywania i naprawiania błędów, łatwiejszego wprowadzania zmian oraz wzrostu zaufania do kodu. Jako ekspert od RxJS, zdecydowanie polecam stosowanie testów we wszelkich projektach opartych na tej bibliotece. 

FAQ