Opowiedz o testowaniu części klienta aplikacji.

Testy części klienta aplikacji (testy frontendowe) mają na celu sprawdzenie poprawności działania interfejsu użytkownika i jego interakcji. Głównym celem jest upewnienie się, że aplikacja wygląda, zachowuje się i działa poprawnie z punktu widzenia końcowego użytkownika na różnych urządzeniach i w różnych przeglądarkach.

Rodzaje testów części klienta:

• Test wizualny (Visual Testing): Sprawdzenie wyglądu elementów interfejsu, zgodności z makietami i projektami, brak nakładania się, przesunięć i innych defektów wizualnych.
• Test funkcjonalny (Functional Testing): Sprawdzenie poprawności działania wszystkich elementów interaktywnych (przyciski, formularze, linki itp.) oraz logiki biznesowej zaimplementowanej po stronie klienta.
• Test międzyprzeglądarkowy (Cross-browser Testing): Sprawdzenie wyświetlania i funkcjonalności aplikacji w różnych przeglądarkach internetowych (Chrome, Firefox, Safari, Edge itp.) i ich wersjach.
• Test wieloplatformowy (Cross-platform Testing): Sprawdzenie działania aplikacji na różnych systemach operacyjnych (Windows, macOS, Linux) i ich wersjach.
• Test wydajności (Performance Testing): Ocena szybkości ładowania stron, reaktywności interfejsu, zużycia pamięci i procesora po stronie klienta.
• Test użyteczności (Usability Testing): Ocena łatwości i intuicyjności interfejsu dla użytkownika, sprawdzenie zgodności z powszechnie przyjętymi standardami UX/UI.
• Test dostępności (Accessibility Testing): Sprawdzenie zgodności aplikacji z normami dostępności (np. WCAG) dla użytkowników z ograniczonymi możliwościami.
• Test responsywności (Responsive Testing): Sprawdzenie poprawnego wyświetlania i działania aplikacji na urządzeniach o różnych rozmiarach ekranów (komputery, tablety, telefony komórkowe).
• Test bezpieczeństwa (Security Testing): Sprawdzenie podatności po stronie klienta, takich jak Cross-Site Scripting (XSS) czy Cross-Site Request Forgery (CSRF), uwierzytelniania i autoryzacji użytkownika po stronie klienta.

Narzędzia do automatyzacji testów części klienta:

• Do testów E2E (End-to-End) i integracyjnych: Selenium, Cypress, Playwright.
• Do testów jednostkowych i komponentów (w zależności od frameworka): Jest, Mocha, Jasmine (dla JavaScript/TypeScript), Testing Library, Enzyme.
• Do testów wizualnych: Applitools, Percy.
• Do testów wydajności: Lighthouse, WebPageTest.
• Do testów dostępności: Axe DevTools, WAVE.

Przykład testu z użyciem Cypress:

// cypress/integration/example.spec.js
describe('Test głównej strony', () => {
  beforeEach(() => {
    cy.visit('/'); // Odwiedzenie głównej strony
  });

  it('Sprawdzenie tytułu strony', () => {
    cy.title().should('eq', 'Nazwa aplikacji'); // Sprawdzenie tytułu zakładki przeglądarki
  });

  it('Sprawdzenie obecności kluczowego elementu na stronie', () => {
    cy.get('h1').should('contain', 'Witamy'); // Sprawdzenie obecności elementu h1 z określonym tekstem
  });

  it('Sprawdzenie działania przycisku', () => {
    cy.get('button#myButton').click(); // Kliknięcie przycisku z id 'myButton'
    cy.get('.success-message').should('be.visible'); // Sprawdzenie, czy komunikat o sukcesie jest widoczny
  });
});

Przykład testu z użyciem Jest i React Testing Library dla komponentu React:

// src/components/Button/Button.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Test komponentu Button', () => {
  it('Przycisk wyświetla się z poprawnym tekstem', () => {
    render(<Button text="Kliknij mnie" />);
    const buttonElement = screen.getByText(/Kliknij mnie/i);
    expect(buttonElement).toBeInTheDocument(); // Sprawdzenie, czy element przycisku jest w dokumencie
  });

  it('Obsługa kliknięcia jest wywoływana po kliknięciu', () => {
    const handleClick = jest.fn(); // Funkcja mock
    render(<Button text="Kliknij mnie" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Kliknij mnie/i);
    fireEvent.click(buttonElement); // Symulacja kliknięcia
    expect(handleClick).toHaveBeenCalledTimes(1); // Sprawdzenie, czy funkcja mock została wywołana raz
  });
});

Strategia testowania części klienta zależy od architektury aplikacji, używanych technologii i wymagań. Zazwyczaj stosuje się piramidę testów: więcej testów jednostkowych, mniej testów integracyjnych i E2E. Testy ręczne pozostają ważne dla sprawdzania użyteczności i aspektów wizualnych, które trudno w pełni objąć automatyzacją.