Как правилно да тествате полето за въвеждане на имейл…

Тестването на полето за въвеждане на имейл включва проверка на функционалността, валидирането, удобството за потребителя и сигурността.

Функционално тестване:

Въвеждане на валидни адреси:
- 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.демо (поддръжка на IDN)
Въвеждане на невалидни адреси:
- Липсващ @: testexample.com
- Повече @: test@@example.com
- Неправилен формат на домейна: test@example
- Липсващо потребителско име: @example.com
- Специални символи в потребителското име: te!st@example.com, te#st@example.com
- Специални символи в домейна: test@exa!mple.com
- Дълъг адрес (проверка на лимитите): a_very_long_email_address_that_exceeds_typical_limits@example.com
- Адрес с интервали: test @example.com
- Неправилна синтакса: test@.com, test.@example.com
- Адрес с IP вместо домейн (ако не се поддържа): test@[192.168.1.1]
- Адрес с кирилица (ако не се поддържа IDN): тест@пример.рф
Празно поле: изпращане на формата с празно поле.

Валидиране:

Проверка дали въведените данни съответстват на синтаксиса на имейла (регулярни изрази).
Показване на съобщения за грешка на потребителя при въвеждане на невалидни данни.
Проверка за точност и разбираемост на съобщенията за грешки.
Проверка, че формата не се изпраща при наличие на грешки във валидирането.

Удобство за потребителя & UI/UX:

Фокус върху полето при зареждане на страницата (ако е уместно).
Текст за placeholder с примерен формат (например, user@example.com).
Поддръжка на автоматично попълване от браузъра.
Наличие на етикет (<label>) за полето.
Потребителят не може да въвежда недопустими символи (ако има такава логика на фронтенда).
Ако има маска за въвеждане, да се провери нейната работа.

Сигурност:

Проверка за XSS уязвимости: въвеждане на скриптове, HTML тагове (<script>alert('XSS')</script>) в полето.
Проверка за инжекции (SQL/NoSQL): въвеждане на специални символи, които могат да повлияят на заявките към базата данни (' OR '1'='1).
Ограничение на броя опити (ако формата изпраща имейл или извършва ресурсоемки действия): ограничаване на броя опити от един IP или потребител.

Автоматизация:

Написване на юнит тестове за функциите за валидиране на имейл.
Написване на интеграционни тестове за проверка на работата на полето в контекста на формата.
Написване на E2E тестове за цялостния сценарий на използване на формата с полето за имейл.

Пример за код за юнит тест за валидиране:

// Предполага се, че имаме функция validateEmail
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Прост пример за регулярен израз
  return re.test(email);
}

// Юнит тестове с Jest
describe('validateEmail', () => {
  test('връща true за валиден имейл', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('връща false за невалиден имейл', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('връща false за празен низ', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Пример за E2E тест с Cypress:

// cypress/integration/email_field.spec.js
describe('Email Input Field', () => {
  it('правилно валидира и показва грешка за невалиден вход', () => {
    cy.visit('/your-form-page'); // URL на страницата с формата
    cy.get('#email-input').type('invalid-email'); // Въвеждане на невалиден email
    cy.get('button[type="submit"]').click(); // Натискане на бутона за изпращане
    cy.get('.error-message').should('be.visible').and('contain', 'Невалиден формат на имейл'); // Проверка на съобщението за грешка
  });

  it('позволява изпращане на формата с валиден имейл', () => {
    cy.visit('/your-form-page');
    cy.get('#email-input').type('valid@example.com');
    cy.get('button[type="submit"]').click();
    // Допълнителни проверки: пренасочване, съобщение за успех
    cy.url().should('include', '/успех'); // Проверка на URL след успешно изпращане
  });
});

Таблица с примерни тест кейсове:

ID	Действие на потребителя	Очакван резултат
TC_01	Въвеждане `test@example.com`	Полето се счита за валидно. Формата може да бъде изпратена.
TC_02	Въвеждане `invalid-email`	Полето се счита за невалидно. Показва се съобщение за грешка.
TC_03	Оставяне на полето празно и опит за изпращане	Полето се счита за невалидно (ако е задължително). Показва се грешка.
TC_04	Въвеждане `test@example.co.uk`	Полето се счита за валидно.
TC_05	Въвеждане `<script>alert('XSS')</script>`	Скриптът не трябва да се изпълнява. Полето трябва да е санитизирано или валидирано.

Трябва да се вземат предвид и специфичните изисквания на проекта (например поддръжка на определени домейни, чувствителност към големи и малки букви), както и тестове на различни устройства и браузъри.

Как правилно да тествате полето за въвеждане на имейл адрес?