Papaskokite apie kliento dalies testavimą programoje…

Kliento dalies testavimas (frontend testavimas) yra skirtas patikrinti naudotojo sąsajos ir sąveikos su ja teisingumą. Pagrindinis tikslas - įsitikinti, kad programa atrodo, elgiasi ir veikia teisingai iš galutinio naudotojo perspektyvos įvairiuose įrenginiuose ir naršyklėse.

Kliento dalies testavimo rūšys:

Vaizdinis testavimas (Visual Testing): Patikrinama sąsajos elementų išvaizda, atitiktis maketams ir dizainui, nėra sluoksniavimosi, pasislinkimų ir kitų vizualinių trūkumų.
Funkcinis testavimas (Functional Testing): Patikrinama visų interaktyvių elementų (mygtukų, formų, nuorodų ir kt.) ir verslo logikos, įgyvendintos kliento pusėje, teisingumas.
Naršyklių suderinamumo testavimas (Cross-browser Testing): Patikrinama programos atvaizdavimas ir funkcionalumas skirtingose naršyklėse (Chrome, Firefox, Safari, Edge ir kt.) ir jų versijose.
Kryžminis platformų testavimas (Cross-platform Testing): Patikrinama programos veikimas skirtingose operacinėse sistemose (Windows, macOS, Linux) ir jų versijose.
Veikimo testavimas (Performance Testing): Vertinama įkėlimo greitis, sąsajos reakcija, atminties ir procesoriaus naudojimas kliento pusėje.
Naudojimo patogumo testavimas (Usability Testing): Vertinama sąsajos lengvumas ir intuityvumas naudotojui, patikrinama atitiktis bendriems UX/UI standartams.
Prieinamumo testavimas (Accessibility Testing): Patikrinama programos atitiktis prieinamumo standartams (pvz., WCAG) naudotojams su ribotomis galimybėmis.
Reaguojančio dizaino testavimas (Responsive Testing): Patikrinama programos teisingas atvaizdavimas ir veikimas skirtingo dydžio ekranuose (darbalaukiai, planšetės, mobilieji telefonai).
Saugumo testavimas (Security Testing): Patikrinama, ar nėra pažeidžiamumų kliento pusėje, tokių kaip Cross-Site Scripting (XSS) ar Cross-Site Request Forgery (CSRF), naudotojo autentifikacija ir autorizacija.

Automatizavimo įrankiai kliento dalies testavimui:

E2E (End-to-End) ir integraciniam testavimui: Selenium, Cypress, Playwright.
Modulinio ir komponentinio testavimo įrankiai (priklausomai nuo framework'o): Jest, Mocha, Jasmine (JavaScript/TypeScript), Testing Library, Enzyme.
Vaizdinio testavimo įrankiai: Applitools, Percy.
Veikimo testavimui: Lighthouse, WebPageTest.
Prieinamumo testavimui: Axe DevTools, WAVE.

Pavyzdys Cypress naudojimo testui:

// cypress/integration/example.spec.js
describe('Pagrindinės puslapio testavimas', () => {
  beforeEach(() => {
    cy.visit('/'); // Perėjimas į pagrindinį puslapį
  });

  it('Puslapio antraštės patikrinimas', () => {
    cy.title().should('eq', 'Programėlės pavadinimas'); // Naršyklės skirtuko antraštės patikrinimas
  });

  it('Pagrindinio elemento buvimo patikrinimas', () => {
    cy.get('h1').should('contain', 'Sveiki atvykę'); // H1 elemento su tam tikru tekstu patikrinimas
  });

  it('Mygtuko veikimo patikrinimas', () => {
    cy.get('button#myButton').click(); // Paspaudimas mygtuku su ID 'myButton'
    cy.get('.success-message').should('be.visible'); // Sėkmės pranešimo matomumo patikrinimas
  });
});

Jest ir React Testing Library naudojimo pavyzdys React komponentui:

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

describe('Button komponento testavimas', () => {
  it('Mygtukas rodomas su teisingu tekstu', () => {
    render(<Button text="Spausk mane" />);
    const buttonElement = screen.getByText(/Spausk mane/i);
    expect(buttonElement).toBeInTheDocument(); // Elemento buvimo patikrinimas dokumente
  });

  it('Paspaudimo įvykis iškviečia funkciją', () => {
    const handleClick = jest.fn(); // Mokinė funkcija
    render(<Button text="Spausk mane" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Spausk mane/i);
    fireEvent.click(buttonElement); // Simuliuojamas paspaudimas
    expect(handleClick).toHaveBeenCalledTimes(1); // Patikrinimas, ar funkcija iškviesta vieną kartą
  });
});

Kliento dalies testavimo strategija priklauso nuo programėlės architektūros, naudojamų technologijų ir reikalavimų. Paprastai taikoma testavimo piramidė: daugiau vienetinių testų, mažiau integracinių ir E2E testų. Rankinis testavimas išlieka svarbus naudotojo patogumo ir vizualinių aspektų patikrinimui, kuriuos sunku visiškai padengti automatizacija.

Papaskokite apie kliento dalies testavimą programoje.