Ispričajte o testiranju klijentskog dela aplikacije…

Testiranje klijentskog dela aplikacije (front-end testiranje) usmereno je na proveru ispravnosti korisničkog interfejsa i interakcije sa njim. Glavni cilj je da se uverimo da aplikacija izgleda, ponaša se i funkcioniše ispravno sa stanovišta krajnjeg korisnika na različitim uređajima i u različitim pregledačima.

Vrste testiranja klijentskog dela:

Vizuелno testiranje (Visual Testing): Provera izgleda elemenata interfejsa, usklađenosti sa maketama i dizajnom, odsustva preklapanja, pomeranja i drugih vizuelnih nedostataka.
Funkcionalno testiranje (Functional Testing): Provera ispravnosti rada svih interaktivnih elemenata (dugmića, formi, linkova itd.) i poslovne logike, implementirane na strani klijenta.
Kros-brauzersko testiranje (Cross-browser Testing): Provera prikaza i funkcionalnosti aplikacije u različitim veb pregledačima (Chrome, Firefox, Safari, Edge itd.) i njihovim verzijama.
Kros-platformsko testiranje (Cross-platform Testing): Provera rada aplikacije na različitim operativnim sistemima (Windows, macOS, Linux) i njihovim verzijama.
Testiranje performansi (Performance Testing): Procena brzine učitavanja stranica, odzivnosti interfejsa, korišćenja memorije i procesora na strani klijenta.
Testiranje upotrebljivosti (Usability Testing): Procena lakoće i intuitivnosti interfejsa za korisnika, provera usklađenosti sa opšteprihvaćenim standardima UX/UI.
Testiranje pristupačnosti (Accessibility Testing): Provera usklađenosti sa standardima pristupačnosti (npr. WCAG) za korisnike sa ograničenim mogućnostima.
Ažurabilno testiranje (Responsive Testing): Provera ispravnog prikaza i rada aplikacije na uređajima sa različitim veličinama ekrana (desktop, tableti, mobilni telefoni).
Testiranje bezbednosti (Security Testing): Provera na prisustvo ranjivosti na strani klijenta, kao što su Cross-Site Scripting (XSS) ili Cross-Site Request Forgery (CSRF), autentikacija i autorizacija korisnika.

Alati za automatizaciju testiranja klijentskog dela:

Za E2E (End-to-End) i integraciono testiranje: Selenium, Cypress, Playwright.
Za modularno i komponentno testiranje (zavisno od okvira): Jest, Mocha, Jasmine (za JavaScript/TypeScript), Testing Library, Enzyme.
Za vizuelno testiranje: Applitools, Percy.
Za testiranje performansi: Lighthouse, WebPageTest.
Za testiranje pristupačnosti: Axe DevTools, WAVE.

Primer testa koristeći Cypress:

// cypress/integration/example.spec.js
describe('Testiranje glavne stranice', () => {
  preEach(() => {
    cy.visit('/'); // Navigacija na glavnu stranicu
  });

  it('Provera naslova stranice', () => {
    cy.title().should('eq', 'Naziv aplikacije'); // Provera naslova taba u pretraživaču
  });

  it('Provera prisustva ključnog elementa na stranici', () => {
    cy.get('h1').should('contain', 'Dobrodošli'); // Provera prisustva elementa h1 sa određenim tekstom
  });

  it('Provera rada dugmeta', () => {
    cy.get('button#myButton').click(); // Klik na dugme sa id 'myButton'
    cy.get('.success-message').should('be.visible'); // Provera vidljivosti poruke o uspehu
  });
});

Primer testa koristeći Jest i React Testing Library za React komponentu:

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

describe('Testiranje komponente Button', () => {
  it('Dugme se prikazuje sa tačnim tekstom', () => {
    render(<Button text="Klikni me" />);
    const buttonElement = screen.getByText(/Klikni me/i);
    expect(buttonElement).toBeInTheDocument(); // Provera prisustva elementa dugmeta u dokumentu
  });

  it('Handler klika se poziva pri kliku na dugme', () => {
    const handleClick = jest.fn(); // Moka funkcija
    render(<Button text="Klikni me" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Klikni me/i);
    fireEvent.click(buttonElement); // Simulacija klika
    expect(handleClick).toHaveBeenCalledTimes(1); // Provera da li je mok funkcija pozvana jednom
  });
});

Strategija testiranja klijentskog dela zavisi od arhitekture aplikacije, korišćenih tehnologija i zahteva. Obično se primenjuje piramida testova: više jedinica testova, manje integracionih i E2E testova. Ručno testiranje ostaje važno za proveru jednostavnosti korišćenja i vizuelnih aspekata koje je teško u potpunosti automatizovati.

Ispričajte o testiranju klijentskog dela aplikacije.