Wprowadzenie

Ten artykuł jest jedynie spisem bibliotek powstałych z myślą o testowaniu automatycznym wykorzystujących JavaScript + ich alternatyw (docelowo ten spis ma stać się punktem wyjścia do tworzenia dalszych artykułów na ich temat - tak jak to się stało np. w przypadku Cypressa).

Integracja/e2e

Playwright

Nightwatch

Cypress

Testy wydajnościowe (performance)

K6 …

Cypress Test studio

Cypress Test Studio - jest narzędziem (w wersji Beta w momencie pisania tego artykułu) pozwalającym na tworzenie testów w Cypressie (tryb Open) bez pisania kodu... Ponieważ ta funkcjonalność jest jedynie w wersji beta jest ograniczona do zaledwie paru funkcji (check, select,click,type,uncheck - ).

Po skonfigurowaniu właściwości Cypress …

Wprowadzenie stubbing vs mocking

Oba pojęcia odnoszą się do podstawiania danych w celu przeprowadzenia testów - mockowanie odnosi się jednak do podstawiania danych w celu testowania funkcjonalności, podczas gdy stubowanie w celu zmiany stanu komponentu/strony/aplikacji.

Mocks vs Stubs = Testowanie funkcjonalne vs testowanie stanu => oznacza to że może w teście …

Fixtures są plikami przechowującymi dane w ramach środowiska testowego - pozwala na jego modułową budowę. Przechowywanie danych po za plikiem testu a) pozwala na ich reużywalność (dostępność dla wielu testów) b) ma pozytywny wpływ na czytelność testów

Plik należy umieścić w folderze fixture a w testach należy odwołać się do niego …

Cypress i trawersowanie pomiędzy elementami drzewa DOM

children() - wydobywa dzieci wybranego elementu drzewa DOM / pozwala na przekazanie selektora w celu wybrania konkretnego dziecka np.

cy.get('#parent').children().should('have.length', 3)

cy.get('#parent').children('.active').should('have.class', 'child')

closest() - wydobywa najbliższego rodzica elementu DOM // również pozwala na …

Wprowadzenie

Cypress jako taki zawiera różnego rodzaju komendy odpowiadający za konkretne przeprowadzanie testów mających wpływ na zachowanie się aplikacji, pozwala również na dodanie własnych komend tzw. custom commands - które nie są niczym innym niż funkcją które w łatwy sposób można łączyć z obiektami cypressowymi - to pozwala na zamknięcie pewnej powtarzalnej …

Cypress i tworzenie ciągów

Cypress oparty jest o tworzenie ciągów (łączeniu ze sobą funkcji w celu stworzenia testu). Cypress sam zajmuje się Promisami.

cy.get('textarea.post-body')
    .type('{enter}')

cy.get('textarea.post-body')
    .contains('xyz')
    .click()

cy.get('textarea.post-body')
    .find('.productname')
    .eq(1)
    .click()

cy.find() - szuka dziecka w …

Cypress wprowadzenie

Cypress jest oparty o bibl. Mocha (struktura test) oraz Chai (asercje, funkcje, wywołania).

Mocha 🥤

describe - opis testu / grupowanie serii tekstu / przyjmuje 2 argumenty - nazwę testu i funkcję (call back function)

it - test / pojedynczy test / przyjmuje 2 argumenty - nazwę testu i funkcję (call back function)

.only - wyłącza wszystkie inne …

Instalacja:

    > brew install node      # get node.js
    > npm install -g appium  # get appium
    > npm install wd         # get appium client
    > appium &                # start appium
    > node your-appium-test.js # run your test

Pierwsze uruchomienie być może będzie wymagało -> Edit configurations -> podanie Android_Home (u mnie: /Users/user_name/Library/Android/sdk) + Java_Home (wpisz w terminal: /usr …

Niedawno odbyła się zdalna konferencja prowadzona przez Applitools oraz Cypress nazwana Front-End Test Fest 2021. Jedeno z wystąpień było poświęcone dobrym praktykom pisania testów (link w źródłach) i dzisiejszy wpis jest ekstraktem z tego wystąpienia

Główna zasada: testy powinny być proste - "flat test desing"

Pisanie testów nie powinno być realizowane …

Bilbioteka RxJS

Programowani reaktywne - paradygmat programowani oparty na zdarzeniach (strumieniach danych oraz zmianach zachodzących w tych strumieniach - min. wymiana danych przy pomocy równoległych strumieni).

RxJs - biblioteka do reaktywnego programowania, w Angularze wykorzystywana (domyślnie) w kontekście routingu, zapytań do bazy danych (HTTP), formularzy. Pełni istotną funkcję w kontekście obsługi asynchroniczności oraz …

Angular serwisy

Wstęp

Klasa TyperScriptowa - stworzona do centralizacji danych/zarządzania danymi (a docelowo stanem aplikacji). Jej zadaniem jest - dostarczania danych na potrzeby komponentów (np. poprzez komunikacja z API, komunikacja pomiędzy komponentami, przechowywanie stanu aplikacji).

Serwis posiada swój dekorator @Injectable - ten wskazuje na to, że dana klasa jest serwisem i jej …

W trakcie tworzenia strony/motywu w Wordpressie aby wykorzystać podgląd zmian na żywo można skorzystać np. z Webpacka, skonfigurowanego pod to zadanie, ale prostszym sposobem jest wykorzystanie wtyczki Live server z VSC marketplace + wtyczki o tej samej nazwie z np. chrome webstore.

Wykorzystanie obu jest dość proste:

1) serwujemy php …

Client-side rendering - bez zapytania do serwera (wymaga konfiguracji serwera tak aby zwracał index.html skąd angular przejmuje tworzenie ścieżki)

app.component.html - wykorzystanie <router-outlet></router-outlet> dyrektywy w celu wskazania, w którym miejscu powinien pojawić sie komponent związany z routingiem

<div class="container">
    [...]
    <div class="row">
        <div class="col-xs-12">
            <!-- load router …

Podejrzenie ustawień użytkowanego w danym momencie motywu:

VSC -> Commend pallet (ctrl/shift/p) -> run command -> Developer: Generate Color Theme From Current Settings

Tworzenie własnego motywu

Instalacja narzędzia

npm i -g yo generator-code

Uruchomienie narzędzia

yo code

Stworzenie plików dla nowego motywy => Wybranie opcji: New Color Theme -> No, start fresh -> name …

Tabela przedstawiająca life cycle hooki (wg kolejności ich życia)

*Uruchamiane wielokrotnie

Dyrektywy podobnie jak komponenty mogą korzystać z haków cykli …

Podstawowe komendy

Proste generowanie komponentu

ng generate component nazwaKomponentu

np. ng generate component menu
> informacja o wygenerowanych plikach oraz o aktualizacji app.module.ts

--skiTests true // generowanie bez pliku testów

Zapis tej komendy można wykorzystać również w skróconej wersji

ng g c nazwaKomponentu

ng g c navbar --skipTests true
CREATE …

Mały projekt - cytaty z Gwiezdnych Wojen

Zainiscjowanie projekty przy pomocy Angular-CLI

ng new star-wars-quotes-app

dodanie frameworku css-owego materialize-css do zależności

npm install materialize-css@1.0.0

Konfigurowanie zależności stylowej w angular.json // wskazanie zarówno na styl css oraz na jego plik js

"styles": [
    "src/styles.css",
    "./node_modules/materialize-css/dist …

Przy pomocy ng-content można przekazywać treść oraz różne komponenty

ng-content jest swego rodzaju wskaźnikiem/selektorem pozwalającym na opakowanie elementu komponentem, innymi słowy na zagnieżdżenie innego komponentu, fragmentu kodu html lub treści (stringa) w ramach innego komponentu.

<button class="btn-floating teal add-button" (click)="clickButton.emit()">
  <ng-content></ng-content>
</button>

zastosowanie

<app-button (clickButton …

Angular i model MVC

Angular działa wg modelu MVC (Model/View/Controler)

Model - logiczna struktura danych w aplikacji (struktura kodu reprezentująca dane)

View - struktura kodu, która reprezentuje Interface aplikacji, z którym styka się użytkownik (wygląda aplikacji)

Controller - pośredniczy pomiędzy widokiem a modelem (reprezentuje logię działania aplikacji)

Inne pojęcia zw. z …