Компонентные тесты: проверять как зритель, а не как разработчик

Ника · фронтенд, #qa-antrakt

У меня два вопроса, и оба про тесты корзины. Первый: на этой неделе я дважды переделала корзину под новый дизайн, сначала разметку, потом классы. Руками всё работает как раньше, а тесты корзины оба раза покраснели целиком, и я оба раза обновила снимки. Второй: Савва купил два билета на «Романсы при свечах», корзина показала 2 676 ₽, а заказ пришёл на 2 675 ₽. Тесты корзины при этом зелёные, покрытие 100%. Может, компонентные тесты нам вообще не нужны и хватит e2e?

Вера Ланская · лид QA, #qa-antrakt

Тест, который краснеет от переименования класса и молчит на неверной сумме, проверяет не корзину, а её вёрстку. Перепиши тесты корзины так, чтобы было наоборот.

В уроке 48 снимок письма пропустил время в UTC, потому что все обновляли его не глядя. С корзиной та же беда, только масштабнее: тесты Ники знают о корзине всё, кроме того, что видит зритель. В уроке 76 ты уже видел, где подменить сеть честно: в компонентном тесте. Сегодня разберём сам компонентный тест: что он проверяет, чем ищет и где ему место в наборе.

Тайный покупатель

Ресторанная сеть проверяет свои кафе двумя способами. Ревизор приходит на кухню со списком: кастрюли на третьей полке, соль в синей банке, повар режет лук по технологической карте. Тайный покупатель садится за столик, заказывает борщ и пробует.

Шеф переставил кухню: кастрюли теперь на второй полке, соль в белой банке. Борщ тот же. Ревизор пишет двадцать замечаний. Тайный покупатель ничего не замечает, и правильно. Через неделю повар пересолил борщ, а кастрюли стояли где положено. Ревизор ставит «отлично». Тайный покупатель морщится.

Тесты Ники это ревизор. Тест, который нужен Вере, это тайный покупатель. Компонентный тест рисует одну часть интерфейса, делает с ней то, что делал бы зритель, и проверяет то, что зритель увидит. Как она устроена внутри, тест не знает.