Jak správně otestovat pole pro zadání e-mailové…

Testování pole pro zadání emailu zahrnuje kontrolu funkčnosti, validace, uživatelské přívětivosti a bezpečnosti.

Funkční testování:

Vkládání platných adres:
- 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)
Vkládání neplatných adres:
- Chybějící @: testexample.com
- Více @: test@@example.com
- Nesprávný formát domény: test@example
- Chybějící uživatelské jméno: @example.com
- Speciální znaky v uživatelském jménu: te!st@example.com, te#st@example.com
- Speciální znaky v doméně: test@exa!mple.com
- Dlouhá adresa (kontrola limitů): a_very_long_email_address_that_exceeds_typical_limits@example.com
- Adresa s mezerami: test @example.com
- Nesprávná syntaxe adresy: test@.com, test.@example.com
- Adresa s IP místo domény (pokud není podporováno): test@[192.168.1.1]
- S cyrilicí (pokud není podporováno IDN): тест@пример.рф
Prázdné pole: odeslání formuláře s prázdným polem.

Validace:

Kontrola shody zadaných dat se syntaxí emailu (regulární výrazy).
Zobrazení chybových hlášení uživateli při zadání neplatných dat.
Kontrola přesnosti a srozumitelnosti chybových hlášení.
Kontrola, že formulář se neodesílá při chybách validace.

Použitelnost & UI/UX:

Zaměření na pole při načtení stránky (pokud je vhodné).
Placeholder text s příkladem formátu (například, user@example.com).
Podpora automatického doplňování prohlížečem.
Přítomnost štítku (<label>) pro pole.
Uživatel nemůže zadat nepovolené znaky (pokud je taková logika na frontendu).
Pokud je vstupní maska, ověřit její funkčnost.

Bezpečnost:

Kontrola na XSS zranitelnosti: vkládání skriptů, HTML tagů (<script>alert('XSS')</script>) do pole.
Kontrola na injekce (SQL/NoSQL): vkládání speciálních znaků, které mohou ovlivnit dotazy do databáze (' OR '1'='1).
Omezení počtu pokusů (pokud formulář odesílá email nebo provádí náročné operace): omezení počtu pokusů z jedné IP nebo uživatele.

Automatizace:

Psání jednotkových testů pro validační funkce emailu.
Psání integračních testů pro kontrolu funkčnosti pole v rámci formuláře.
Psání E2E testů pro kompletní scénář použití formuláře s polem email.

Příklad kódu pro jednotkový test validace:

// Předpokládáme, že máme funkci validateEmail
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Jednoduchý příklad regulárního výrazu
  return re.test(email);
}

// Jednotkové testy s použitím Jest
describe('validateEmail', () => {
  test('vrátí true pro platný email', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

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

  test('vrátí false pro prázdný řetězec', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Příklad E2E testu s použitím Cypress:

// cypress/integration/email_field.spec.js
describe('Email Input Field', () => {
  it('správně validuje a zobrazuje chybu pro neplatný vstup', () => {
    cy.visit('/your-form-page'); // URL stránky s formulářem
    cy.get('#email-input').type('invalid-email'); // Zadání neplatného emailu
    cy.get('button[type="submit"]').click(); // Kliknutí na tlačítko odeslání
    cy.get('.error-message').should('be.visible').and('contain', 'Neplatný formát emailu'); // Kontrola chybové zprávy
  });

  it('umožňuje odeslání formuláře s platným emailem', () => {
    cy.visit('/your-form-page');
    cy.get('#email-input').type('valid@example.com');
    cy.get('button[type="submit"]').click();
    // Další kontroly: například přesměrování, zpráva o úspěchu
    cy.url().should('include', '/success'); // Kontrola URL po úspěšném odeslání
  });
});

Tabulka s příklady testovacích případů:

ID	Akce uživatele	Očekávaný výsledek
TC_01	Zadání `test@example.com`	Pole je považováno za platné. Formulář lze odeslat (pokud jsou vyplněna i ostatní pole).
TC_02	Zadání `invalid-email`	Pole je považováno za neplatné. Zobrazí se chybová zpráva.
TC_03	Odeslání formuláře s prázdným polem	Pole je považováno za neplatné (pokud je povinné). Zobrazí se chybová zpráva.
TC_04	Zadání `test@example.co.uk`	Pole je považováno za platné.
TC_05	Zadání `<script>alert('XSS')</script>`	Skript nesmí být spuštěn. Pole by mělo být sanitizováno nebo validováno.

Je třeba také vzít v úvahu specifické požadavky projektu (například podpora určitých doménových zón, citlivost na velikost písmen), testování na různých zařízeních a prohlížečích.

Jak správně otestovat pole pro zadání e-mailové adresy?