edele/beerjs

Доклад про тесты на BeerJS https://github.com/beerjs/chelyabinsk/issues/2

Доклад про тесты на BeerJS

Доклад произошёл 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 и реализовать сценарии:

1. Если в корзине от 5000 рублей, то доставка бесплатная
2. Если в корзине от 10000 рублей, то один самый дешёвый товар в корзине — бесплатный

Тесты падают как раз потому, что первый сценарий не выполняется. На второй сценарий теста нет, напишите его сами, пусть он упадёт, а потом допишите код так, чтобы тест прошёл.

Реакт тесты

Тестить приложение в первую очередь браузерными тестами — нормальная идея. Но в какой-то момент вы можете захотеть написать много-много тестов, которые быстро проходят и проверяют не приложение целиком, а только какой-то сложный реакт-компонент, который много где используется.

В каждом реакт проекте есть библиотека компонентов: кнопки, инпуты, вкладки. Также есть компоненты посложнее, например, корзина. Корзина в нашем примере умеет показывать список товаров и их общую стоимость. Посмотрите на тесты, которые проверяют адекватность корзины: src/Cart.test.js.

Эти тесты запускаются командой npm run test. Только есть нюанс: в зрелом проекте весь набор тестов может проходить минуту, десять или час. Поэтому все тесты сразу не запустятся, а будут ждать пока вы поменяете какие-то файлы, после чего запустятся только тесты, которые покрывали эти файлы, чтобы убедиться, что вы ничего не сломали. Но в этом примере тестов немного, поэтому просто нажмите клавишу A :)

Эти тесты тоже падают. Почините) И добавьте сценарий, которые проверяет промоакцию про >10000 рублей.

Запускаются с помощью https://jestjs.io. Для удобства ещё используется https://github.com/kentcdodds/react-testing-library.

Тесты чистых функций

Если у вас не получается прямо сейчас развернуть браузерные тесты и вы не используете реакт, то вы всё равно можете начать писать тесты. Самый простой вариант — выносить из своего кода чистые функции, которые принимают что-то и возвращают что-то. Вы импортите эту функцию в тест, пихаете в функцию разные штуки и проверяете, что функция ведёт себя ожидаемо.

В нашем примере такие тесты лежат в src/countTotalPrice.test.js.

Послесловие

Если бы мне запретили писать тесты — я бы всё равно их писал втихушку. Если вы не умеете писать тесты — начните их писать. Они сначала будут бесполезными, глупыми, сложными и дурацкими. Всё равно продолжайте их писать и ищите способы начать писать полезные тесты. Рано или поздно вы научитесь писать полезные тесты и это будет один из самых важных навыков, который вы освоите в роли программиста.

Всем желаю кайфа от программирования!