Cum se testează corect câmpul pentru introducerea adresei de email?

Testarea câmpului de introducere a emailului include verificarea funcționalității, validării, ușurinței în utilizare și securității.

Testare funcțională:

• Introducerea adreselor valide:
  • 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.демо (pentru suportul numelor de domenii internaționale - IDN)
• Introducerea adreselor invalide:
  • Lipsa @: testexample.com
  • Mai multe @: test@@example.com
  • Format incorect al domeniului: test@example
  • Lipsa numelui de utilizator: @example.com
  • Caractere speciale în numele de utilizator: te!st@example.com, te#st@example.com
  • Caractere speciale în domeniu: test@exa!mple.com
  • Adresă lungă (verificarea limitelor): a_very_long_email_address_that_exceeds_typical_limits@example.com (verificați limitele conform specificației sau bunului simț)
  • Adresă cu spații: test @example.com
  • Adresă cu sintaxă incorectă: test@.com, test.@example.com
  • Adresă cu adresă IP în loc de domeniu (dacă nu este suportată): test@[192.168.1.1]
  • Adresă cu caractere cirilice (dacă nu este suportată IDN): тест@пример.рф
• Câmp gol: Trimiterea formularului cu câmpul gol.

Validare:

• Verificarea conformității datelor introduse cu sintaxa emailului (expresii regulate).
• Afișarea mesajelor de eroare pentru utilizator la introducerea datelor invalide.
• Verificarea acurateței și clarității mesajelor de eroare.
• Asigurarea că formularul nu se trimite dacă există erori de validare.

Usability & UI/UX:

• Focus pe câmp la încărcarea paginii (dacă este cazul).
• Text de placeholder cu un exemplu de format (de exemplu, user@example.com).
• Suport pentru completarea automată de către browser.
• Etichetă (<label>) pentru câmp.
• Utilizatorul nu poate introduce caractere nepermise (dacă există această logică pe frontend).
• Dacă există o mască de introducere, verificarea funcționării acesteia.

Securitate:

• Verificarea vulnerabilităților XSS: introducerea de scripturi, tag-uri HTML (<script>alert('XSS')</script>) în câmp.
• Verificarea injecțiilor (SQL/NoSQL): introducerea de caractere speciale care pot afecta interogările către bazele de date (' OR '1'='1).
• Limitarea ratei (dacă formularul trimite email sau efectuează acțiuni consumatoare de resurse): verificarea limitării numărului de încercări de trimitere de la un IP sau utilizator.

Automatizare:

• Scrierea de teste unitare pentru funcțiile de validare a emailului.
• Scrierea de teste de integrare pentru verificarea funcționării câmpului în contextul formularului.
• Scrierea de teste E2E pentru verificarea scenariului complet de utilizare a formularului cu câmpul email.

Exemplu de cod pentru testul unitar de validare:

// Presupunem că avem o funcție validateEmail
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Exemplu simplu de expresie regulată
  return re.test(email);
}

// Teste unitare cu Jest
describe('validateEmail', () => {
  test('ar trebui să returneze true pentru un email valid', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('ar trebui să returneze false pentru un email invalid', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('ar trebui să returneze false pentru șir gol', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Exemplu de test E2E cu Cypress:

// cypress/integration/email_field.spec.js
describe('Câmpul email', () => {
  it('validează corect și afișează eroare pentru intrare invalidă', () => {
    cy.visit('/your-form-page'); // URL-ul paginii cu formularul
    cy.get('#email-input').type('invalid-email'); // Introducere email invalid
    cy.get('button[type="submit"]').click(); // Apăsarea butonului de trimitere
    cy.get('.error-message').should('be.visible').and('contain', 'Format email incorect'); // Verificarea mesajului de eroare
  });

  it('permite trimiterea formularului cu un email valid', () => {
    cy.visit('/your-form-page');
    cy.get('#email-input').type('valid@example.com');
    cy.get('button[type="submit"]').click();
    // Verificări suplimentare: redirecționare, mesaj de succes
    cy.url().should('include', '/success'); // Verificarea URL-ului după trimitere cu succes
  });
});

Tabel cu exemple de cazuri de test:

ID	Acțiunea utilizatorului	Rezultatul așteptat
TC_01	Introdu test@example.com	Câmpul este considerat valid. Formularul se trimite (dacă toate câmpurile sunt completate).
TC_02	Introdu invalid-email	Câmpul este considerat invalid. Se afișează mesaj de eroare.
TC_03	Lăsa câmpul gol și încerca să trimiți formularul	Câmpul este considerat invalid (dacă este obligatoriu). Se afișează mesaj de eroare.
TC_04	Introdu test@example.co.uk	Câmpul este considerat valid.
TC_05	Introdu <script>alert('XSS')</script>	Scriptul nu trebuie executat. Câmpul trebuie să fie sanitizat sau validat.

Este important să se țină cont și de cerințele specifice ale proiectului (de exemplu, suportul pentru anumite domenii, sensibilitatea la majuscule/minuscule), precum și de testarea pe diferite dispozitive și browsere.