Правила сдачи задания:
- Важно: в рамках этого ДЗ можно использовать любой менеджер пакетов
- Важно: всё должно собираться через Webpack (включая картинки и стили) и выкладываться на Github Pages через Appveyor.
- Всё задание можно выполнить в виде одного Github-репозитория
- В README.md должен быть размещён бейджик сборки и ссылка на Github Pages
- В качестве результата присылайте проверяющему ссылки на ваши GitHub-проект(ы)
В качестве примера организации e2e-тестирования используйте код из каталога e2e.
Вам пришла задача: сделать виджет, позволяющий вводить номер карты (можете в качестве общего развития почитать про PCI DSS).
Общий вид виджета должен выглядеть следующим образом:
Скриншот взят с сайта http://www.validcreditcardnumber.com.
Вам нужно провести исследовательскую работу и выяснить - на базе чего определяется, какой платёжной системе принадлежит определённая карта (не забудьте про "Мир").
Используйте следующий алгоритм для проверки валидности номера карты.
Изображения для карт необходимо найти самостоятельно (помните, про авторские права и недопустимость нелегального использования). Обычно информацию об использованных изображениях размещают в файле licenses.txt и кладут в корень сайта (настройте для этого соответствующим образом Webpack).
Разделите логику проверки номера карты, выяснения принадлежности определённой платёжной системе и взаимодействия с DOM.
Напишите авто-тесты на функции проверки номера карты и принадлежности определённой платёжной системе.
В качестве источника номеров карт используйте сервис FreeFormatter.
Удостоверьтесь, что всё работает при прогоне тестов в Appveyor.
Подсказка
Для поиска изображений можете воспользоваться сервисом https://findicons.com**
Важно: эта задача не является обязательной. Её (не)выполнение не влияет на получение зачёта по ДЗ.
Подключите Puppeteer и проверьте взаимодействие для двух различных вариантов:
- Ввод валидного номера карты
- Ввод невалидного номера краты
Удостоверьтесь, что всё работает при прогоне тестов в Appveyor (не забудьте про headless-mode).
Важно: эта задача не является обязательной. Её (не)выполнение не влияет на получение зачёта по ДЗ.
К предыдущей задаче подключите JSDOM и реализуйте проверку с использованием jest.each (т.е. вам надо проверить взаимодействие с DOM).
Удостоверьтесь, что всё работает при прогоне тестов в Appveyor.