Мы все знаем, что писать хорошие тесты очень важно. Мы все знаем, что важно иметь высокое покрытие тестов. Иногда мы можем забыть, что написание хороших имен тестов тоже важно.
Представьте, что мы создаем форму для отправки настроек учетной записи пользователя. Эта форма включает контактную информацию, цвета брендинга и изображение логотипа.
Давайте на этом простом примере выделим три причины, по которым нам всем следует уделять больше времени написанию продуманных названий тестов:
1. Помогают рецензентам предоставлять более качественные отзывы
Осмысленные названия тестов помогают другим лучше понять замысел, стоящий за кодом. Затем рецензенты могут предложить возможные альтернативы для достижения этого замысла. Они также могут убедиться в том, что вы учитываете соответствующие крайние случаи.
В нашей форме мы хотим дать пользователям возможность настроить свой аккаунт, выбрав один из цветов. Чтобы упростить задачу, мы решили использовать в списке цветов все цвета по умолчанию, заданные css. Мы создали метод-помощник, чтобы превратить их в правильно отформатированные слова.
PASS src/util/convertToSpaceCase.test.js
convertToSpaceCase helper
✓ converts camel case string to space case string
Начальное описание теста описывает то, что должно произойти, но не обязательно намерение этой вспомогательной функции. Обратная связь, которую мы можем получить:
- Должен ли этот вспомогательный метод также быть способен обрабатывать другие случаи использования? Кебаб, паскаль, змея и т.д.?
Это хороший вопрос, но он не поможет нам создать лучшую форму для наших пользователей. Это может привести к напрасной трате времени и усилий. Если тест выявил намерение, это может породить другие вопросы.
PASS src/util/convertCssColorToDisplayString.test.js
convertCssColorToDisplayString helper
when provided a css color
✓ generates a displayable color name
Обратная связь, которую мы можем получить:
- Должны ли мы использовать эту хорошо поддерживаемую внешнюю библиотеку для отображения цветов css?
- Следуем ли мы нашему руководству по стилю контента с выводимыми названиями цветов?
Теперь обзор больше сосредоточен на намерениях того, что мы создаем. Это должно привести к лучшему опыту для наших пользователей. В отзыве все еще может содержаться просьба превратить его в многократно используемый общий компонент утилиты. Но мы знаем, что рецензент понимает замысел.
2. Позволить неинженерам предоставлять отзывы
Далее мы хотим создать компонент ввода номера телефона для нашей формы. Требования к этому вводу включают:
- Если введен действительный номер телефона, он должен отображать номер в формате телефонного номера (например: +X (XXX) XXX-XXXX).
- Если введен не действительный номер телефона, мы выводим сообщение об ошибке.
Тесты, которые мы напишем для этого компонента, сохраняя их как можно более читабельными, могут выглядеть следующим образом:
PASS src/components/PhoneNumberInput.test.js
PhoneNumberInput component
when provided string with phone number
✓ displays properly formatted phone number
when provided string without phone number
✓ displays an error message
Наш менеджер по продуктам может легко согласовать нашу работу с их критериями приемки. Наш дизайнер может увидеть рассмотренные крайние случаи. Это может вызвать дискуссию:
- Что произойдет, если номер телефона действителен, но отсутствует код страны?
- Что произойдет, если номер телефона скопирован в поле ввода и содержит специальные символы?
Итоговые обсуждения помогут убедиться, что ваша команда создает хорошее решение. Мы можем улучшить наш компонент ввода номера телефона и обновить наши тесты.
PASS src/components/PhoneNumberInput.test.js
PhoneNumberInput component
when provided string with phone number
with just numbers
✓ displays properly formatted phone number
with special characters
✓ displays properly formatted phone number
without a country code
✓ displays properly formatted phone number with North American country code
when provided string without phone number
✓ displays an error message
3. Экономия чужого времени
Наконец, мы хотим убедиться, что только администраторы могут получить доступ к этой форме настроек учетной записи.
PASS src/features/AccountSettingsForm.test.js
AccountSettingsForm page
when user is an admin
✓ form is displayed
when user is not an admin
✓ user is redirected and shown an error message
Это очень простой пример. Но этот тест (и все тесты выше) предоставит много информации для наших коллег-инженеров. Инженеры, работающие с этим кодом в будущем, смогут быстро узнать, как должна работать эта функция. Они могут даже поделиться со своим PM или дизайнером. Например:
- «А! Чтобы протестировать эту форму, сначала мне нужно убедиться, что я вошел в свой тестовый аккаунт как администратор».
- «Мы открываем счета для европейских стран. Я сообщу своему менеджеру по продуктам, что в настоящее время по умолчанию код страны нашего телефонного номера — Северная Америка».
Заключение
Надеюсь, эти примеры показали, какую дополнительную ценность могут обеспечить наши тесты. Четкие и описательные названия тестов — это отличный ресурс как для разработчиков, так и для тех, кто не занимается разработкой. Мы можем:
- лучше сосредоточиться на ценности, которую мы пытаемся предоставить нашим пользователям
- сотрудничать со всей командой для улучшения опыта наших пользователей
- помочь другим быстро понять ожидаемый пользовательский опыт
Надеюсь, эта статья побудит вас потратить несколько дополнительных минут на пересмотр названий ваших тестов в следующий раз, когда вы будете писать тест.