Ako správne otestovať pole pre zadanie e-mailovej…

Testovanie poľa pre zadanie emailu zahŕňa kontrolu funkčnosti, validácie, používateľského komfortu a bezpečnosti.

Funkčné testovanie:

Vkladanie platných adries:
- test@example.com
- firstname.lastname@example.com
- email@subdomain.example.com
- firstname+lastname@example.com
- email@example.co.uk
- email@example.museum
- email@example.name
- email@example.демо (podpora IDN)
Vkladanie neplatných adries:
- Chýbajúci @: testexample.com
- Viac @: test@@example.com
- Nesprávny formát domény: test@example
- Chýbajúce používateľské meno: @example.com
- Špeciálne znaky v používateľskom mene: te!st@example.com, te#st@example.com
- Špeciálne znaky v doméne: test@exa!mple.com
- Dlhá adresa (kontrola limitov): a_very_long_email_address_that_exceeds_typical_limits@example.com
- Adresa s medzerami: test @example.com
- Nesprávna syntax: test@.com, test.@example.com
- Adresa s IP namiesto domény (ak nie je podporované): test@[192.168.1.1]
- Adresa s cyrilicou (ak nie je podporované IDN): тест@пример.рф
Prázdne pole: odoslanie formulára s prázdnym poľom.

Validácia:

Kontrola, či zadané údaje zodpovedajú syntaxe emailu (regulárne výrazy).
Zobrazenie chybových hlásení používateľovi pri zadávaní neplatných údajov.
Kontrola presnosti a zrozumiteľnosti chybových hlásení.
Kontrola, že formulár sa neodosiela pri chybách validácie.

Použiteľnosť & UI/UX:

Zameranie na pole pri načítaní stránky (ak je vhodné).
Text s príkladom formátu (napríklad, user@example.com).
Podpora automatického dopĺňania prehliadačom.
Prítomnosť štítku (<label>) pre pole.
Používateľ nemôže zadávať nepovolené znaky (ak je taká logika na frontende).
Ak je vstupná maska, overiť jej funkčnosť.

Bezpečnosť:

Kontrola na XSS zraniteľnosti: vkladanie skriptov, HTML tagov (<script>alert('XSS')</script>) do poľa.
Kontrola na injekcie (SQL/NoSQL): vkladanie špeciálnych znakov, ktoré môžu ovplyvniť požiadavky na databázu (' OR '1'='1).
Obmedzenie počtu pokusov (ak formulár odosiela email alebo vykonáva náročné operácie): obmedzenie počtu pokusov z jednej IP alebo používateľa.

Automatizácia:

Písanie jednotkových testov pre validačné funkcie emailu.
Písanie integračných testov na kontrolu funkčnosti poľa v rámci formulára.
Písanie E2E testov pre kompletný scenár použitia formulára s poľom email.

Príklad kódu pre jednotkový test validácie:

// Predpokladáme, že máme funkciu validateEmail
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Jednoduchý príklad regulárneho výrazu
  return re.test(email);
}

// Jednotkové testy s Jest
describe('validateEmail', () => {
  test('vráti true pre platný email', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('vráti false pre neplatný email', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('vráti false pre prázdny reťazec', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Príklad E2E testu s Cypress:

// cypress/integration/email_field.spec.js
describe('Email Input Field', () => {
  it('správne validuje a zobrazuje chybu pre neplatný vstup', () => {
    cy.visit('/your-form-page'); // URL stránky s formulárom
    cy.get('#email-input').type('invalid-email'); // Zadanie neplatného emailu
    cy.get('button[type="submit"]').click(); // Kliknutie na tlačidlo odoslania
    cy.get('.error-message').should('be.visible').and('contain', 'Neplatný formát emailu'); // Kontrola správy o chybe
  });

  it('umožňuje odoslať formulár s platným emailom', () => {
    cy.visit('/your-form-page');
    cy.get('#email-input').type('valid@example.com');
    cy.get('button[type="submit"]').click();
    // Ďalšie kontroly: presmerovanie, správa o úspechu
    cy.url().should('include', '/úspech'); // Kontrola URL po odoslaní
  });
});

Tabuľka s príkladmi testovacích prípadov:

ID	Akcia používateľa	Očakávaný výsledok
TC_01	Zadanie `test@example.com`	Pole je považované za platné. Formulár je možné odoslať.
TC_02	Zadanie `invalid-email`	Pole je považované za neplatné. Zobrazí sa chybové hlásenie.
TC_03	Ostať pole prázdne a pokúsiť sa odoslať formulár	Pole je považované za neplatné (ak je povinné). Zobrazí sa hlásenie o chybe.
TC_04	Zadanie `test@example.co.uk`	Pole je považované za platné.
TC_05	Zadanie `<script>alert('XSS')</script>`	Skript nesmie byť vykonaný. Pole by malo byť sanitizované alebo validované.

Je potrebné tiež zohľadniť špecifické požiadavky projektu (napríklad podpora určitých domén, citlivosť na veľké a malé písmená), testovanie na rôznych zariadeniach a prehliadačoch.

Ako správne otestovať pole pre zadanie e-mailovej adresy?