Back to blog

Зачем программисту писать тесты?


#TDD


Зачем вообще нужно тестирование? Почему #TDD?


Первый вопрос который отделяет программиста от написания тестов - это вопрос “Зачем?”. И действительно. Ведь тесты - это лишний код и лишнее затраченное время. Зачем писать тесты, когда можно написать программу, запустить её(открыть сайт в браузере) и убедиться что все работает как надо. Это резонный вопрос, если у тебя landing page, где только html или программа, которая всего лишь складывает два числа. В таком случае тесты не нужны.


Если же у тебя мало-мальски сложная архитектура или командная разработка, то тесты нужны. Ниже я постараюсь тезисно описать плюсы и минусы написания тестов и TDD.


Кстати…

Самый любопытный читатель уже, наверное, давно загуглил, что же такое Test-Driven Development (TDD), а может и вовсе знал и без меня.

Я на определении и идеологии остановлюсь позже.

Если коротко, разработка через тестирование(именно так переводят Test-Driven Development на русский язык) предполагает, что сначала пишется тест, а только после реализация.

К примеру, мы хотим запрограммировать функцию деления двух чисел `div`. Сначала мы пишем тест, во котором проверяем что результат `div(4,2)` - это 2. Тест, разумеется сломан, потому что такой функции нет. 

Затем мы пишем эту функцию и тест чинится, а мы можем писать тесты на какие-то особые случаи, например, какой результат мы ожидаем, когда второй аргумент(делитель) равен нулю.

Подробнее мы вернемся ко всему этому позже. На данном этапе на достаточно такого общего представления. Нам же пока нужно понять “зачем”?


Плюсы написания тестов


Стабильность и легкость отладки


Это самое главное, но на начальном этапе самое незаметное. 

У тебя написаны тесты на твой функционал, ты дописываешь что-то новое и твои тесты ломаются. Это плохо? Это хорошо. Если бы у тебя не было тестов, сломалось бы оно продакшене и узнал бы ты это от пользователей.

Осталось только выяснить, это твой новый код ломает что-то старое и надо исправлять его или изменилась бизнес-логика и надо менять то, что написано раньше. В любом случае, ты знаешь, где оно сломалось и почему. И самое главное все это на этапе разработки.


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


Задокументированность кода


Тесты - это, своего рода, документация поведения программы для разработчиков. Тебе достаточно взглянуть на тесты, чтобы понять как работает определенная часть кода. Нет нужды компилировать этот код у себя в голове, пролистывая код реализации. По тестам ты видишь, что `эта` функция делает `это`. Это ускоряет и упрощает внесение изменений, отладку, отлавливание багов и введение новых разработчиков в проект.


Код становиться красивее


Когда ты пишешь тесты, ты пишешь код так, чтобы его можно было тестировать. Из твоего кода исчезают высокая связанность, скрытые зависимости , антипаттерны и неявные участки кода просто, потому что их невозможно тестировать. В какой-то момент при написании кода ты начинаешь думать “А как я буду это тестировать”, что избавляет тебя от спорных решений. Ты стараешься упростить код. Через некоторое время, вернувшись к этому коду, тебе не требуется много времени, чтобы понять, что здесь происходит.

А следовательно…


Инвестиции в будущее.


Всегда неприятно, когда вылезает баг в уже написанном и, казалось бы, завершенном коде. Однако так бывает, и бывает часто.

Ты уже работаешь над другой задачей, а может уже полгода прошло, или вообще это не твой код. Ты открываешь код и, какое, счастье, что код понятный, а глядя на тесты, становиться понятно что он делает. Это экономит много времени. 


Не пишешь лишнего кода.

Это относиться именно к TDD(сначала тест, потом реализация)

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

Когда ты пишешь сразу функционал, то есть вероятность, что ты напишешь что-то “впрок”, может потом и пригодится, а может и нет!

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


Ну, а минусы есть?


Можно попробовать найти и привести контраргументы


Время уходит на написание тестов, а не на программирование. Вместо того, чтобы реализовать следующие задачи, пишешь тесты.


Это, наверное, самый популярный и кажущийся очевидным аргумент. 


Что ж…


Во-первых, на написание самого теста уходит не так уж и много времени. Даже мало. Чаще всего это несколько строчек с вызовом функции и сравнением результата ожидаемым поведением.

Во-вторых, ты не тратишь времени, чтобы увидеть промежуточные результаты в браузере/консоли. Тест - это индикатор того, что код работает как и задумано.

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


Лишний код.


Написание тестов влечет за собой создание дополнительных файлов и увеличения кодовой базы.

На самом деле, проекты с тестами хорошо структурированы. Тесты лежат в отдельной директории с говорящим названием(например tests). В этой директории повторяется структура папок проекта, следовательно найти тесты к определенной части функционала довольно просто. 

Да, файлов и, соответсвенно, кода больше, однако тесты лежат отдельно и служат своего рода документацией работы определенной части программы. Мы в любой момент можем открыть тест и посмотреть, что делает конкретная часть программы, вместо того, чтобы интерпретировать код этой части в голове или вставлять в код дебажные console.log или print_r


Итак, написание тестов это хорошо потому что:


  • Легко внести изменений без страха что-то сломать
  • Тесты - это документация
  • Сам код программы проще для понимания
  • Простота дебага или введения нового сотрудника в будущем


В следующий раз поговорим уже наконец-то о Test-Driven Development

© 2019 shogenov.com


Тэг label

Я, действительно, был уверен, что все это знают, но многие удивляются тому факту, что тэг label можно связать с input и нажатие на label будет ставить фокус или активировать/деактивировать input

Эту особенность очень удобно использовать для стилизации чекбоксов и радиокнопок, а также для создания интересных эффектов при фокусировании на input.


Атрибут contentEditable

Этот атрибут позволяет делать содержимое блока изменяемым.

Тэг optgroup для select

Меня удивляет, что многие вообще не в курсе про optgrup. Этот тэг позволяет группировать options внутри

Апельсиновый
Лимонный
Персиковый
Светлый
Нормальный
Темный


Тэг base

Тэг base определяется внутри head и говорит о базовом пути.

Если мы на странице site.com/articles поставим ссылку

контакты

, то эта ссылка будет вести на site.com/articles/contacts

А если же мы в head добавим

, то та же самая ссылка будет вести уже на site.com/contacts

У этого элемента есть атрибут target. И если установить его в target=\"_blank\", то все ссылки будут открываться в новой вкладке.


Событие Onerror для тэга img

Onerror срабатывает перед тем как браузер покажет ваше изображение как битое. Можно на это событие повесить \"самоуничножение\" картинки из DOM. Для замены битой картинки на какую-то стандартную(noimage) или сообщение о \"битости\" всё же изящнее использовать :before и :after, но про это события я должен был упомянуть.


Тэг kbd

Этот тэг используется, в основном, для выделения названия компьютерных клавиш в тексте. Текст внутри такого тэга выделяется моноширным шрифтом.


Выделение удалённых частей текста

Для выделения части текста, которая со временем была удалена, используются тэги и . У них есть атрибуты cite и datetime. В первом указывается ссылка на причину удаления, а во втором дата удаления.

Полезно для изменяющихся с течением времени текстах. Например вышел закон, который делает недействительным какой-то из пунктов просматриваемого документа. Можно \"завернуть\" этот пункт в один из этих тегов и дать ссылку на закон и указать дату его принятия.


Гиперссылка для отправки e-mail

Я уверен, что все знают про

Написать мне

Если кто не знает, то эта ссылка открывает почтовый клиент по умолчанию, в котором открыто окно отправки нового письма и в поле \"кому\" уже вбит адрес, который указан после \"mailto:\" .

Но далеко не все знают, что можно пойти дальше:

href=\"malito:mail{at}yandex.ru?subject=Feedback&body=Тело20письма&cc=copy{at}yandex.ru&bcc=hiddencopy{at}yandex.ru\" title=\"Ссылка на какой-то сайт\">Сайт

Параметр subject - это тема письма,

body - текст письма,

cc - адрес, на который пойдёт копия

bc - адрес, на который пойдёт скрытая копия.

Зачем? Таким образом можно сформировать шаблон письма для обращения пользователей с сайта по email.


\">

В html5 появилось много разных типов для input, однако мало кто использует тип search. Как можно догадаться, он используется для создания поля поиска. Правда единственное его отличие от обычного input type='text' лишь в том, что при наличии текста внутри в правой части появляется крестик для очистки содержимого поля.


_

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


Если есть дополнения, возражения или комментарии, то можно обсудить в клубе программистов.

Если не подписан на \"Я - программист!\", то подписывайся, а если подписан, то расскажи другу!

","alias":"interesnye-osobennosti-html-kotorye-ty-vozmozhno-i-ne-znal","created":"2018-02-09 10:46:31","tags":null,"active":1,"excludeFromBlog":0},{"id":10,"title":"Вариативные шрифты","description":"Дизайн сайта, как правило, включает в себя несколько начертаний одного шрифта, а зачастую и несколько разных шрифтов. И на каждый шрифт и на каждое начертание шрифта приходится грузить свой шрифтовой...","header":"Вариативные шрифты","content":"

Дизайн сайта, как правило, включает в себя несколько начертаний одного шрифта, а зачастую и несколько разных шрифтов. И на каждый шрифт и на каждое начертание шрифта приходится грузить свой шрифтовой файл.

Вариативный шрифт - это куча начертаний в одном файле. Сколько конкретно? Бесконечно много!!!

Файл один, вариаций масса: насыщенность, пропорции, контраст, изменение размера строчных/выносных, анимация и т.п.

В спецификации OpenType Font Variations самые популярные вариации заложены в тэги из четырёх букв: насыщенность — wght, пропорция — wdth, курсив — ital, наклон — slnt и оптические размеры — opsz. Они включаются с помощью font-weight-, font-stretch- и font-style-свойств. CSS4 также обновился в соответствии с новыми значениями для поддержки OpenType Font Variations:

— font-weight — это любое целое число в диапазоне от 1 до 999 (вместо 100 в стандарте CSS3).

— font-stretch использует процент, где 100% — это нормальная пропорция, 50% — узкие начертания, а 200% — сверхширокие.

— font-style использует угол наклона между oblique –90deg и oblique 90deg.

— font-optical-sizing — новая опция, с синтаксисом либо auto, либо none,включающая ось оптических компенсаций, если она заложена в шрифте.

Шрифтовики могут использовать и свои собственные тэги — это позволяет им закладывать в шрифт бесконечную вариативность: контраст, размер строчных и выносных элементов, форму засечек, фактуры...

h1 { font-variation-settings: “wdth” 600, “wght” 200, “opsz” 48; }

Казалось бы вот оно будущее! И не надо больше тянуть кучу файлов. Получил один файл шрифта от дизайнера и радуешься жизни.

Но как всегда встает вопрос о поддержке данной технологии браузерами.

Оптимизм внушает тот факт, что разработка ведётся в том числе компаниями Apple, Google, Microsoft, Adobe. То есть в популярные браузеры, ОС, и программы, вероятно, скоро вариативные шрифты будут внедрены.

Останется только понять, насколько это быстро начнёт применяться в разработке.

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

____________________________________

Больше полезного на канале Я - программист

Общайся в чате Клуб программистов

Шутеечки и байки Дневник программиста

","alias":"variativnye-shrifty","created":"2018-02-09 10:45:45","tags":null,"active":1,"excludeFromBlog":0}],"loading":false,"error":null},"application":{"meta":{"title":"Для чего программисту писать тесты и нужно ли","description":"Почему полезно писать тесты плюсы и минусы"},"messages":[]},"user":{"loading":false,"error":null}}