Rääkige rakenduse kliendi osa testimisest.

Kliendi osa testimine (frontend-testimine) on suunatud kasutajaliidese ja sellega seotud interaktsiooni õigsuse kontrollile. Peamine eesmärk on veenduda, et rakendus näeb välja, käitub ja töötab õigesti lõppkasutaja vaatenurgast erinevatel seadmetel ja brauserites.

Kliendi osa testimise tüübid:

• Visuaalne testimine (Visual Testing): Kontrollitakse kasutajaliidese elementide välimust, vastavust kujundustele ja disainile, puuduvad kattumised, nihked ja muud visuaalsed vead.
• Funktsionaalne testimine (Functional Testing): Kontrollitakse kõigi interaktiivsete elementide (nupud, vormid, lingid jne) ja kliendi poole rakendatud äriloogika õigsust.
• Ristbrauseri testimine (Cross-browser Testing): Kontrollitakse rakenduse kuvamist ja funktsionaalsust erinevates brauserites (Chrome, Firefox, Safari, Edge jne) ja nende versioonides.
• Ristplatvormiline testimine (Cross-platform Testing): Kontrollitakse rakenduse tööd erinevatel operatsioonisüsteemidel (Windows, macOS, Linux) ja nende versioonides.
• Jõudluse testimine (Performance Testing): Hinnatakse lehtede laadimiskiirust, kasutajaliidese reageerimisvõimet, mälu ja protsessori kasutust kliendi poolel.
• Kasutusmugavuse testimine (Usability Testing): Hinnatakse kasutajale liidese lihtsust ja intuitiivsust, kontrollitakse vastavust üldtunnustatud UX/UI standarditele.
• Ligipääsetavuse testimine (Accessibility Testing): Kontrollitakse rakenduse vastavust ligipääsetavuse standarditele (näiteks WCAG) kasutajatele piirangutega.
• Reageeriva disaini testimine (Responsive Testing): Kontrollitakse rakenduse korrektset kuvamist ja tööd erineva ekraanisuurusega seadmetel (lauaarvutid, tahvelarvutid, mobiiltelefonid).
• Turvalisuse testimine (Security Testing): Kontrollitakse haavatavusi kliendi poolel, näiteks Cross-Site Scripting (XSS) või Cross-Site Request Forgery (CSRF), kasutaja autentimist ja autoriseerimist.

Automatiseerimisvahendid kliendi osa testimiseks:

• E2E (End-to-End) ja integratsioonitestide jaoks: Selenium, Cypress, Playwright.
• Mooduli- ja komponenditesti jaoks (sõltuvalt raamistikust): Jest, Mocha, Jasmine (JavaScript/TypeScript), Testing Library, Enzyme.
• Visuaalse testimise jaoks: Applitools, Percy.
• Jõudluse testimiseks: Lighthouse, WebPageTest.
• Ligipääsetavuse testimiseks: Axe DevTools, WAVE.

Näide Cypressi kasutamise testist:

// cypress/integration/example.spec.js
describe('Pealehe testimine', () => {
  beforeEach(() => {
    cy.visit('/'); // Mine pealehele
  });

  it('Lehe pealkirja kontroll', () => {
    cy.title().should('eq', 'Rakenduse nimi'); // Brauseri vahelehe pealkirja kontroll
  });

  it('Põhielemendi olemasolu kontroll', () => {
    cy.get('h1').should('contain', 'Tere tulemast'); // Kontroll, kas H1 element sisaldab teatud teksti
  });

  it('Nupu töö kontroll', () => {
    cy.get('button#myButton').click(); // Klõps nupule ID-ga 'myButton'
    cy.get('.success-message').should('be.visible'); // Edu sõnumi nähtavuse kontroll
  });
});

Jest ja React Testing Library näide React komponendi testimiseks:

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

describe('Nupu komponendi testimine', () => {
  it('Nupp kuvatakse õige tekstiga', () => {
    render(<Button text="Kliki mind" />);
    const buttonElement = screen.getByText(/Kliki mind/i);
    expect(buttonElement).toBeInTheDocument(); // Kontroll, kas element on dokumendis
  });

  it('Klõpsu käsitleja käivitatakse', () => {
    const handleClick = jest.fn(); // Moka funktsioon
    render(<Button text="Kliki mind" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Kliki mind/i);
    fireEvent.click(buttonElement); // Simuleeritud klõps
    expect(handleClick).toHaveBeenCalledTimes(1); // Kontroll, kas funktsioon kutsuti välja üks kord
  });
});