Доклад произошёл 9 августа 2018. Слайды: https://speakerdeck.com/edele/beer-js-number-2
Сначала поставьте зависимости через консоль: npm install
Вы готовы запускать тесты!
Эти тесты ожидают, что приложение уже запущено на локалхосте, поэтому сначала выполните npm start в отдельном окне консоли. И не закрывайте эту консоль, пока запускаете браузерные тесты.
Браузерные тесты запускаются командой npm run browser-test. Вы не увидите браузер, следите за результатами в консоли или идите заниматься своими делами. Сделано с помощью https://www.cypress.io/
О нет! Тесты упали! Об этом вам скажет вывод в консоли. Но как узнать что именно пошло не так? Прочитайте всё, что было в консоли и узнаете какой именно тест упал. Вам даже скажут что тест ожидал и что он получил в текущей версии нашей программы.
Ещё больше подробностей падении теста вы увидите в папках cypress/screenshots и в cypress/videos.
Вы можете найти упавший тест в cypress/integration.
Если вы считаете, что приложение ведёт себя нормально, но тесты ожидают неправильный результат, то можно тесты обновить. Для этого удобно запустить админку тестов командой npm run cypress. Помимо админки в этом режиме вы получите перезапуск всех тестов каждый раз, когда вы будете обновлять код тестов. Очень удобно просто запустить админку, менять код теста и нажимать Alt+Tab, проверяя, помогли ваши изменения или нет. Так ваш процесс разработки будет быстрее, чем если бы вы вручную сценарии протыкивали. Не говоря уже о том, что эти сценарии теперь автоматизированы и могут прогоняться без вашего участия на сборочном сервере!
На самом деле тесты падают потому что мы не доделали важную фичу: промоакции. Попробуйте разобраться в коде в папке src и реализовать сценарии:
- Если в корзине от 5000 рублей, то доставка бесплатная
- Если в корзине от 10000 рублей, то один самый дешёвый товар в корзине — бесплатный
Тесты падают как раз потому, что первый сценарий не выполняется. На второй сценарий теста нет, напишите его сами, пусть он упадёт, а потом допишите код так, чтобы тест прошёл.
Тестить приложение в первую очередь браузерными тестами — нормальная идея. Но в какой-то момент вы можете захотеть написать много-много тестов, которые быстро проходят и проверяют не приложение целиком, а только какой-то сложный реакт-компонент, который много где используется.
В каждом реакт проекте есть библиотека компонентов: кнопки, инпуты, вкладки. Также есть компоненты посложнее, например, корзина. Корзина в нашем примере умеет показывать список товаров и их общую стоимость. Посмотрите на тесты, которые проверяют адекватность корзины: src/Cart.test.js.
Эти тесты запускаются командой npm run test. Только есть нюанс: в зрелом проекте весь набор тестов может проходить минуту, десять или час. Поэтому все тесты сразу не запустятся, а будут ждать пока вы поменяете какие-то файлы, после чего запустятся только тесты, которые покрывали эти файлы, чтобы убедиться, что вы ничего не сломали. Но в этом примере тестов немного, поэтому просто нажмите клавишу A :)
Эти тесты тоже падают. Почините) И добавьте сценарий, которые проверяет промоакцию про >10000 рублей.
Запускаются с помощью https://jestjs.io. Для удобства ещё используется https://github.com/kentcdodds/react-testing-library.
Если у вас не получается прямо сейчас развернуть браузерные тесты и вы не используете реакт, то вы всё равно можете начать писать тесты. Самый простой вариант — выносить из своего кода чистые функции, которые принимают что-то и возвращают что-то. Вы импортите эту функцию в тест, пихаете в функцию разные штуки и проверяете, что функция ведёт себя ожидаемо.
В нашем примере такие тесты лежат в src/countTotalPrice.test.js.
Если бы мне запретили писать тесты — я бы всё равно их писал втихушку. Если вы не умеете писать тесты — начните их писать. Они сначала будут бесполезными, глупыми, сложными и дурацкими. Всё равно продолжайте их писать и ищите способы начать писать полезные тесты. Рано или поздно вы научитесь писать полезные тесты и это будет один из самых важных навыков, который вы освоите в роли программиста.
Всем желаю кайфа от программирования!