Ostatnia część serii! Tym razem zrobimy naszą stronę responsywną dla urządzeń mobilnych, a także przeprowadzimy testy z naszym front-endem React przy użyciu Enzyme & Jest.

Przegapiłeś część trzecią? Upewnij się, aby przeczytać, że przed przejściem do przodu.

Responsywne projektowanie witryn internetowych

Wszystkie urządzenia zostały stworzone inaczej. Od kwietnia 2021 roku najczęściej używanym ekranem komputera jest 1920 x 1080. W zeszłym roku udział w ruchu podczas pandemii został wydany na urządzenia mobilne, które zazwyczaj mają mały rozmiar wyświetlacza i rozdzielczość. Niedawno na rynek weszły również smartfony z możliwością obsługi dwóch ekranów. Musimy być świadomi używanych urządzeń i tego, jak mogą one wpłynąć na sposób, w jaki użytkownik przegląda naszą witrynę. Na szczęście TailwindCSS ma do tego narzędzie.

Możemy ustawić punkty przerwania na podstawie rozmiarów wyświetlacza, aby zaspokoić wszystkie urządzenia. Najpierw musisz skonfigurować plik tailwind.config.js, aby dodać określone rozmiary ekranu. Obecnie mam to ustawione tak:

Dołączyłem rozdzielczości od 640 pikseli szerokości Pixel 2 do monitora o szerokości 1920 pikseli. Będziemy mogli używać tych punktów przerwania do kontrolowania wyglądu naszego interfejsu użytkownika na urządzeniach mobilnych.

Obecnie używamy siatki w naszej sekcji Informacje. W tej chwili nie kontrolujemy, jak to wygląda na mniejszych urządzeniach. Jeśli tego nie zmienimy, nasze pola siatki będą się na siebie nakładać i wyglądać mniej więcej tak:

Możemy zmienić to, jak to wygląda, określając, jak ma wyglądać siatka w każdym punkcie przerwania. Tak będzie wyglądał nasz kod:

W większych rzutniach będziemy mieć poziomy widok siatki przy użyciu grid-cols-3. Na mniejszych wyświetlaczach przełączymy to na widok siatki pionowej za pomocą grid-cols-1.

Enzym z testowaniem Jest

Będziemy używać Enzyme i Jest, aby przetestować nasz front-end. Zainstalujemy zależności Enzyme (jeśli jeszcze tego nie zrobiłeś) za pomocą tego wiersza:

npm i --save-dev enzyme enzyme-adapter-react-16

Następnie skonfigurujemy nasz adapter z biblioteki Enzyme w naszym pliku setupTests.js.

Nasz plik App.test.js będzie zawierał nasze testy. Zaimportujemy naszą bibliotekę testową z React i Enzyme, a następnie komponenty, których będziemy używać do testów. Przetestujmy renderowanie komponentów, zaczynając od App i Nav.

Sprawdzamy, czy wyrenderuje się komponent aplikacji i nawigacji. Testy przeprowadzimy przy użyciu:

npm run test

Przetestujmy renderowanie komponentu Nav i spodziewajmy się, że wyrenderuje również linki paska nawigacji. Przetestujemy również nasz komponent Hero, aby zobaczyć, czy renderuje się zawierający nasz obraz src.

Jeśli zrobisz to poprawnie, wszystkie testy powinny przejść pomyślnie!

To samo można zrobić dla kilku następnych komponentów, które wymagają testowania, więc ostateczny kod powinien wyglądać następująco:

Jeśli chcesz dodać więcej testów, jest to zdecydowanie możliwe. Ponieważ obejmuje to głównie testy renderowania komponentów, jest dość proste do rozwiązania. Kiedy już przejdziesz do logiki komponentu testowego, testy będą wyglądać bardziej złożone.

To kończy moją serię poświęconą tworzeniu aplikacji React.js i nadaniu jej stylu za pomocą TailwindCSS! Zamieszczę poniżej kilka linków do zasobów oraz łącze do repozytorium, które będzie zawierało wersję demonstracyjną.

Linki do projektów

• Git Repo

• LinkedIn
• GitHub
• Świergot
• Instagram
• Youtube

Zasoby

• Dokumentacja TailwindCSS
• Dokumentacja enzymatyczna
• Jest Dokumentacja
• Dokumentacja React.js.