Povězte mi o testování klientské části aplikace.

Testování klientské části (front-end testování) je zaměřeno na ověření správnosti fungování uživatelského rozhraní a jeho interakce s ním. Hlavním cílem je zajistit, že aplikace vypadá, chová se a funguje správně z pohledu koncového uživatele na různých zařízeních a v různých prohlížečích.

Druhy testování klientské části:

• Vizuální testování: Kontrola vzhledu prvků rozhraní, shody s návrhy a designem, absence překryvů, posunů a dalších vizuálních vad.
• Funkční testování: Ověření správného fungování všech interaktivních prvků (tlačítka, formuláře, odkazy atd.) a obchodní logiky implementované na straně klienta.
• Křížové testování prohlížečů: Zajištění zobrazení a funkčnosti aplikace v různých webových prohlížečích (Chrome, Firefox, Safari, Edge atd.) a jejich verzích.
• Křížové platformové testování: Kontrola fungování aplikace na různých operačních systémech (Windows, macOS, Linux) a jejich verzích.
• Výkonnostní testování: Hodnocení rychlosti načítání stránek, odezvy rozhraní, využití paměti a procesoru na straně klienta.
• Testování použitelnosti: Hodnocení snadnosti a intuitivnosti rozhraní pro uživatele, shoda s obecně uznávanými standardy UX/UI.
• Testování přístupnosti: Kontrola shody aplikace s normami přístupnosti (například WCAG) pro uživatele s omezenými schopnostmi.
• Responzivní testování: Kontrola správného zobrazení a fungování aplikace na zařízeních s různými velikostmi obrazovky (desktopy, tablety, mobilní telefony).
• Bezpečnostní testování: Kontrola zranitelností jako Cross-Site Scripting (XSS) nebo Cross-Site Request Forgery (CSRF), autentifikace a autorizace uživatele na straně klienta.

Nástroje pro automatizaci testování klientské části:

• Pro E2E (End-to-End) a integrační testování: Selenium, Cypress, Playwright.
• Pro modulové a komponentové testování (v závislosti na frameworku): Jest, Mocha, Jasmine, Testing Library, Enzyme.
• Pro vizuální testování: Applitools, Percy.
• Pro testování výkonu: Lighthouse, WebPageTest.
• Pro testování přístupnosti: Axe DevTools, WAVE.

Příklad testu s použitím Cypress:

// cypress/integration/example.spec.js
describe('Testování hlavní stránky', () => {
  beforeEach(() => {
    cy.visit('/'); // Přechod na hlavní stránku
  });

  it('Kontrola titulku stránky', () => {
    cy.title().should('eq', 'Název aplikace'); // Titulek záložky prohlížeče
  });

  it('Kontrola přítomnosti klíčového prvku', () => {
    cy.get('h1').should('contain', 'Vítejte'); // Kontrola existence elementu h1 s určitým textem
  });

  it('Testování funkčnosti tlačítka', () => {
    cy.get('button#myButton').click(); // Kliknutí na tlačítko s ID 'myButton'
    cy.get('.success-message').should('be.visible'); // Kontrola viditelnosti zprávy o úspěchu
  });
});

Příklad testu s použitím Jest a React Testing Library pro React komponentu:

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

describe('Testování komponenty Button', () => {
  it('Tlačítko se zobrazuje s správným textem', () => {
    render(<Button text="Klikni mě" />);
    const buttonElement = screen.getByText(/Klikni mě/i);
    expect(buttonElement).toBeInTheDocument(); // Kontrola přítomnosti elementu
  });

  it('Handler kliknutí je volán při kliknutí', () => {
    const handleClick = jest.fn(); // Mock funkce
    render(<Button text="Klikni mě" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Klikni mě/i);
    fireEvent.click(buttonElement); // Simulace kliknutí
    expect(handleClick).toHaveBeenCalledTimes(1); // Kontrola volání
  });
});

Strategie testování klientské části závisí na architektuře aplikace, používaných technologiích a požadavcích. Obvykle se používá testovací pyramida: více jednotkových testů, méně integračních a E2E testů. Ruční testování zůstává důležité pro ověření použitelnosti a vizuálních aspektů, které je obtížné plně automatizovat.