Это третья публикация в серии, посвященной модульным тестам в рамках базы кода VueJS, чтобы получить более глубокое понимание того, как работают элементы в экосистеме Vue. Я рекомендую проверить первый пост на v-show и второй пост на v-if, прежде чем углубляться в эту статью.

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

Документация VueJS великолепна, но недавно я решил копнуть еще глубже и начать изучение исходного кода Vue! Первым фрагментом кодовой базы, который я посетил, был каталог тестов. Большинство из вас наверняка слышали о Разработка через тестирование (TDD). Что ж, в этой серии я хотел бы познакомить вас с обучением через тестирование (TDL). Идея состоит в том, чтобы начать чтение модульных тестов фреймворка или библиотеки, которые вы используете, на ранней стадии, чтобы получить более глубокое понимание того, как работают отдельные функции. TDL также имеет полезный побочный эффект, поскольку он усиливает преимущества написания модульных тестов в ваших собственных проектах и ​​раскрывает надежные шаблоны тестирования.

Модульные тесты v-for

В этом третьем посте серии мы рассмотрим директиву v-for. Полностью модульные тесты можно найти здесь, но ниже мы рассмотрим их по частям. Ниже приведено начало спецификации v-for теста.

Этот первый набор тестов показывает, что v-for работает во многом как метод forEach JavaScript. В этих тестах мы видим, что массив повторяется и значение каждого item в массиве отображается как span. К массиву применяются такие операции, как push и splice, и обработанный HTML реагирует так, как мы и ожидали.

Последний блок тестов в этом первом разделе учит нас новому синтаксису. Похоже, что второй аргумент может использоваться в v-for, и это index из item, который в настоящее время перебирается. Мы видим, что этот index правильно отображается и обновляется по мере работы с соответствующим массивом.

Следующий набор тестов очень похож на первый, но показывает, что v-for работает с объектами так же, как с примитивами. Ссылаясь на item.value в интерполяции, мы можем отобразить свойство value в каждом span.

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

Мы начинаем ценить гибкость v-for, когда читаем следующий набор модульных тестов. Не только v-for работает с массивами как примитивов, так и объектов, но также работает с отдельными свойствами объекта. Используя базовый синтаксис val in obj, мы можем отображать каждое значение в объекте.

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

Вы можете спросить: можем ли мы каким-то образом получить доступ к индексу? Да мы можем! Следующий блок тестов показывает, что третий аргумент - это индекс при переборе свойств объекта.

Последний блок тестов в этом разделе показывает, что мы также можем перебирать каждое из свойств самого data. Если мы применим v-for к $data, мы сможем получить доступ к ключу и значению каждого свойства на верхнем уровне data. Хороший!

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

Этот простой тест подчеркивает тот факт, что v-for можно использовать для перебора диапазона чисел. Так, например, если мы хотим отрендерить определенный элемент пользовательского интерфейса десять раз, мы могли бы использовать v-for=”n in 10” вместо того, чтобы добавлять тот же элемент в нашу разметку десять раз.

В следующем наборе тестов мы узнаем, как можно использовать ключ. Если привязка клавиш не используется, элементы DOM повторно используются на месте. Мы видим, что, хотя msg в первом дочернем элементе изменяется, элемент DOM просто использовался повторно. Красиво и оперативно!

Однако, когда используется привязка ключа и ему передается уникальный идентификатор, в данном случае item.id, элемент DOM фактически перемещается по мере изменения данных, к которым он привязан.

Двигаясь дальше, мы обнаруживаем, что v-fors могут быть вложенными и будут работать точно так, как ожидалось. Мы можем получить доступ к любому уровню наших данных, который нам нужен, вложив v-fors. Массив массивов, массив объектов, массив объектов со свойствами, которые являются массивами? Без проблем!

Следующий набор тестов показывает, что нам не нужно полагаться на собственные элементы DOM, такие как div и span. Мы можем заключить целый блок HTML-разметки в тег template и добавить v-for к этому шаблону. Затем весь этот блок HTML будет отображаться для каждой итерации.

Итак, теперь мы знаем, что v-for можно применять к элементам HTML, таким как divs и templates. Однако мы жаждем чего-то еще более мощного. Может ли v-for применяться к компонентам? Почему да, это возможно!

Здесь мы видим, что v-for может применяться к компоненту, а данные могут передаваться через props. Но пока не беспокойтесь о props и slot. Мы расскажем о них подробно в следующих статьях. Важная вещь, которую следует вынести из этого первого блока тестов, заключается в том, что v-for действительно может применяться к компоненту.

Далее в этом разделе тестов мы видим тесты для v-for с «динамическими компонентами». Привязка :is используется для определения того, какой компонент нужно визуализировать. Опять же, подробнее об этом в следующих статьях. «Ключевым» моментом, который следует здесь понять (каламбур), является то, что мы должны предоставить :key привязку при использовании v-for с динамическими компонентами. В противном случае мы можем ожидать появления сообщения об ошибке «списки компонентов, отображаемые с помощью v-for, должны иметь явные ключи».

Следующий небольшой блок тестов просто подчеркивает реактивность v-for. Изменения глубоко вложенных данных внутри вложенного v-for действительно будут отражены в DOM благодаря реактивному характеру v-for!

В этом заключительном блоке тестов обнаруживается еще один интересный факт. v-for может использоваться в строках и будет перебирать каждый символ в переданной ему строке. Небольшая, но интересная особенность v-for.

Документы v-for

Раздел v-for API docs section должен иметь для нас полный смысл теперь, когда мы изучили модульные тесты:

Как я упоминал ранее, документы VueJS превосходны, но я бы сказал, что чтение модульных тестов, лежащих в основе v-for, научило нас всему, что раскрывают документы, и многому другому всего за пару минут чтения! Кроме того, как я уже упоминал, чтение тестов научило нас, как следует писать модульные тесты и насколько они должны быть тщательными. Написание аналогичных тестов для функций в ваших собственных приложениях должно стать приоритетом для вас и вашей команды!

Следующий

В следующем посте, который скоро будет опубликован, мы сравним v-text и v-html с помощью их модульных тестов!

Предыдущие сообщения

Если вам понравился этот пост, нажмите немного 💚 ниже, чтобы сообщить мне, что вы хотите больше этого материала! Спасибо! 🤓

Заинтересованы в построении будущего денег в Круге? Мы нанимаем!