Porozprávajte o testovaní klientskej časti aplikácie…

Testovanie klientskej časti aplikácie (front-end testovanie) je zamerané na kontrolu správnosti používateľského rozhrania a jeho interakcie. Hlavným cieľom je zabezpečiť, že aplikácia vyzerá, správa sa a funguje správne z pohľadu koncového používateľa na rôznych zariadeniach a v rôznych prehliadačoch.

Druhy testovania klientskej časti:

Vizuálne testovanie (Visual Testing): Kontrola vzhľadu prvkov rozhrania, zhody s maketami a dizajnom, absencia prekryvov, posunov a iných vizuálnych chýb.
Funkčné testovanie (Functional Testing): Kontrola správnosti práce všetkých interaktívnych prvkov (tlačidiel, formulárov, odkazov a pod.) a biznis logiky, implementovanej na strane klienta.
Kros-prehliadačové testovanie (Cross-browser Testing): Kontrola zobrazenia a funkčnosti aplikácie v rôznych webových prehliadačoch (Chrome, Firefox, Safari, Edge a pod.) a ich verziách.
Kros-platformové testovanie (Cross-platform Testing): Kontrola práce aplikácie na rôznych operačných systémoch (Windows, macOS, Linux) a ich verziách.
Testovanie výkonu (Performance Testing): Hodnotenie rýchlosti načítania stránok, odozvy rozhrania, využitia pamäte a procesora na strane klienta.
Testovanie použiteľnosti (Usability Testing): Hodnotenie ľahkosti a intuitívnosti rozhrania pre používateľa, kontrola zhody s bežne akceptovanými štandardmi UX/UI.
Testovanie dostupnosti (Accessibility Testing): Kontrola zhody s normami dostupnosti (napríklad WCAG) pre používateľov s obmedzenými možnosťami.
Responsívne testovanie (Responsive Testing): Kontrola správneho zobrazenia a fungovania aplikácie na zariadeniach s rôznymi veľkosťami obrazovky (desktop, tablety, mobilné telefóny).
Testovanie bezpečnosti (Security Testing): Kontrola na prítomnosť zraniteľností na strane klienta, ako sú Cross-Site Scripting (XSS) alebo Cross-Site Request Forgery (CSRF), autentifikácia a autorizácia používateľa.

Nástroje na automatizáciu testovania klientskej časti:

Pre E2E (End-to-End) a integračné testovanie: Selenium, Cypress, Playwright.
Pre modulové a komponentové testovanie (závisí od frameworku): Jest, Mocha, Jasmine (pre JavaScript/TypeScript), Testing Library, Enzyme.
Pre vizuálne testovanie: Applitools, Percy.
Pre testovanie výkonu: Lighthouse, WebPageTest.
Pre testovanie dostupnosti: Axe DevTools, WAVE.

Príklad testu s Cypress:

// cypress/integration/example.spec.js
describe('Testovanie hlavnej stránky', () => {
  beforeEach(() => {
    cy.visit('/'); // Navigácia na hlavnú stránku
  });

  it('Kontrola nadpisu stránky', () => {
    cy.title().should('eq', 'Názov aplikácie'); // Kontrola nadpisu záložky v prehliadači
  });

  it('Kontrola prítomnosti kľúčového prvku na stránke', () => {
    cy.get('h1').should('contain', 'Vitajte'); // Kontrola prítomnosti prvku h1 s určitým textom
  });

  it('Kontrola funkcie tlačidla', () => {
    cy.get('button#myButton').click(); // Kliknutie na tlačidlo s id 'myButton'
    cy.get('.success-message').should('be.visible'); // Kontrola viditeľnosti správy o úspechu
  });
});

Príklad testu s Jest a React Testing Library pre React komponent:

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

describe('Testovanie komponentu Button', () => {
  it('Tlačidlo sa zobrazuje s správnym textom', () => {
    render(<Button text="Klikni ma" />);
    const buttonElement = screen.getByText(/Klikni ma/i);
    expect(buttonElement).toBeInTheDocument(); // Kontrola prítomnosti tlačidla v dokumente
  });

  it('Spracovateľ kliknutia sa volá pri kliknutí na tlačidlo', () => {
    const handleClick = jest.fn(); // Mock funkcia
    render(<Button text="Klikni ma" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Klikni ma/i);
    fireEvent.click(buttonElement); // Simulácia kliknutia
    expect(handleClick).toHaveBeenCalledTimes(1); // Kontrola, že mock funkcia bola volaná raz
  });
});

Stratégia testovania klientskej časti závisí od architektúry aplikácie, použitých technológií a požiadaviek. Zvyčajne sa aplikuje pyramída testov: viac jednotkových testov, menej integračných a E2E testov. Ručné testovanie zostáva dôležité na overenie použiteľnosti a vizuálnych aspektov, ktoré je ťažké úplne automatizovať.

Porozprávajte o testovaní klientskej časti aplikácie.