Работа с приложением на Vue.js с TDD - подробное руководство для людей, у которых есть время - часть 1
Ведь научить монтировать приложение без тестов очень просто.
Это первая из серии статей:
- Часть 1. Настройка и первый тест
- Часть 2: Продолжение UserView
- Часть 3: Тестирование магазина и остальных компонентов презентации
- Часть 4: Тестирование службы запросов API
- Часть 5: Добавление и тестирование со сторонними зависимостями
- Часть 6. Обзор - 26/11
Если вы хотите прочитать его в pt-BR, загляните здесь.
Если вам интересно, перейдите прямо в репозиторий с окончательным кодом:
Если вы решили изучить все руководство, пошли! 🚀
Во время семинаров VueJS Summit 2018 я лично поговорил с Эддом Йербургом и показал ему, как я тестировал свои приложения, и после некоторой поддержки я пишу эту статью 😅
Я надеюсь показать, насколько легко тестировать на переднем плане, в основном насколько легко тестировать приложение с помощью Vue.js!
В этом руководстве много изображений и определенная плотность концепций, поэтому я рекомендую спокойно прочитать, если у вас нет базы для инструмента.
Что мы собираемся делать
Проект будет очень простым. Мы собираемся создать приложение, которое взаимодействует с Github API, ища пользователя по введенному имени пользователя.
Это может показаться небольшим проектом, но в нем мы увидим множество видов тестов, которые мы находим при разработке приложения Vue.js. Здесь мы собираемся протестировать:
- Компоненты
- Vuex
- Услуги
В этом проекте мы собираемся применить технику TDD!
Мы собираемся написать тест, который не удастся, а затем приложим минимум усилий, чтобы его пройти. Наконец, мы собираемся при необходимости реорганизовать его, повторяя это, пока не доработаем наше приложение.
Одним из преимуществ этого метода является то, что мы получаем гораздо более быструю обратную связь, что позволяет нам работать с гораздо меньшими циклами среди изменений во время разработки нашего проекта.
Вначале может показаться трудным применение TDD, потому что это требует изменения мышления, поскольку мы пишем тесты перед написанием производственного кода.
Я хочу напомнить вам здесь, что мы не должны строго следовать всему, что предлагается, но для этого проекта я хочу показать, что это может быть что-то простое.
Моделирование приложения
Прежде всего, давайте спланируем, как мы собираемся создавать наше приложение.
Мы собираемся разделить его на три компонента:
- UserView - «умный» компонент, отвечающий за взаимодействие с магазином и загрузку наших компонентов презентации.
- VUserSearchForm - «немые» компоненты, отвечающие за отображение формы, а также за передачу сообщения родительскому компоненту с термином исследования.
- VUserProfile - «тупой» компонент, отвечающий за предоставление исследуемой нами информации о пользователях.
Мы также собираемся использовать сервис для выполнения запросов к Github API.
Загрузите vue-cli и давайте создадим наш проект:
npm i -g @vue/cli
vue create tdd-app
Ниже представлены выбранные мной функции. Выбирайте наиболее удобный для вас. Я могу рассказать о тестах E2E в следующей статье, кто знает?
Давайте предложим задачу: мы будем запускать npm run serve только после того, как закончим наше приложение.
Давайте очистим проект
Проект через Vue CLI приводит к появлению некоторых исходных файлов. Давайте удалим все, что нам не нужно, в этот первый момент.
Удалять:
- src / store.js
- src / assets / logo.png
- SRC / компоненты / HelloWorld.vue
- src / views / About.vue
- src / views / Home.vue
- тесты / модуль / HelloWorld.spec.js
Чистый App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
Чистый router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: []
})
Создайте файл для размещения в нашем магазине:
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from '@/store/state'
import mutations from '@/store/mutations'
import actions from '@/store/actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions,
})
Мы создали файлы: src/store/state.js src/store/actions.js src/store/mutations.js, и все они имеют одинаковый фрагмент кода, указанный выше:
export default {}
Мы добавили скрипт npm для наблюдения за нашими тестами на package.json
... "test:unit": "vue-cli-service test:unit", "test:unit:watch": "vue-cli-service test:unit --watchAll"
И, наконец, мы собираемся установить некоторые зависимости, которые мы собираемся использовать в проекте.
npm i -d axios npm i -D flush-promises nock
Создание нашего первого теста
Теперь мы можем приступить к созданию наших тестов. Давайте начнем с нашего первого компонента, UserView, помня, что мы используем шутку как основу для наших тестов.
Это будет интеллектуальный компонент, отвечающий за перенос всех других компонентов экрана, и он будет поддерживать связь с магазином для выполнения поиска пользователем Github.
Давайте создадим файл: tests/unit/UserView.spec.js
describe('UserView', () => {
it('works', () => {})
})
И мы можем запустить тесты: npm run test:unit
Но что именно мы тестируем в наших компонентах?
Мы можем многое проверить, но мы можем опираться на следующие темы:
Если компонент отображает
Нам нужно гарантировать, что по крайней мере компонент отображается правильно.
Если он отображает правильные вещи
Если мы гарантируем, что компонент отрисовывается, то мы можем проверить, правильно ли он отрисовывается. У нашего компонента есть кнопка и ввод, либо он содержит кнопку и комментарий, в котором говорится: «Ввод будет реализован в версии 2».
Его связывает
Мы проверили все возможные привязки. Если наш компонент передает правильные свойства своим дочерним компонентам?
События
При нажатии кнопки или получении определенного события наш компонент ведет себя ожидаемо?
Крайние случаи
В случае списка мы должны гарантировать, как он будет вести себя с пустым списком, списком из 5 или 100 элементов.
Сейчас да
Зная это, мы, наконец, можем провести наш тест. Давайте посмотрим на первый случай, если наш компонент UserView отображается:
Мы используем jest в качестве нашей тестовой среды и vue-test-utils для облегчения работы с нашими компонентами.
В строке 7 мы делаем shallowMount нашего компонента. Это означает:
Давайте визуализируем только первый уровень его зависимостей
Vue-test-utils также предоставляет другой метод под названием mount, с помощью которого мы визуализируем полное дерево зависимостей.
Но shallowMount для нашего случая уже достаточно.
В строке 10 мы берем оболочку, представляющую наш компонент, созданную vue-test-utils, а затем «делаем снимок» html нашего компонента. Этот html существует благодаря vue-test-utils.
Запустив npm run test:unit, мы получаем нашу первую ошибку
Компонент по-прежнему не существует. Затем мы переходим к этапу TDD, где, наконец, можем создать наш файл.
Здесь мы написали минимальное представление нашего компонента, и благодаря этому у нас есть первое прохождение теста, а затем выполняется: npm run test:unit:watch
Но что, черт возьми, именно за этот снимок?
По сути, jest сделал «снимок» htm нашего компонента, и если мы проверим каталоги, внутри tests был создан файл __snapshots__.
Теперь у нас есть ссылка на наш компонент, и в случае каких-либо изменений в его html, наш тест завершится неудачно.
Сделайте тест, измените UserView.vue и посмотрите, как тест не проходит.
Теперь мы видим, что в случае каких-либо изменений в нашем HTML-коде нам необходимо исправить ошибку или вернуться к исходному состоянию.
В случае, если изменение сделано намеренно, мы можем обновить снимок, сказав, что эта версия будет нашей новой ссылкой.
Для этого вам нужно всего лишь нажать u на терминале, и снимок будет обновлен автоматически 😊. Чтобы увидеть больше параметров, вам нужно всего лишь нажать w на терминале, чтобы открыть список параметров шутки.
НИКОГДА не прикасайтесь к файлу снимка. Этот файл создан для вас!
Обзор
В этой первой статье мы сделали:
- Введение того, что мы будем делать
- Планирование нашего приложения
- Первоначальная настройка нашего проекта, оставляя только минимальные файлы для работы
- Объяснение того, что тестируется на лицевой стороне
- Создал наш первый тест
Следите за обновлениями, на следующей неделе мы будем углублять тесты нашего компонента, и в конечном итоге мы интегрируемся с магазином.
Спасибо за внимание, если вам понравилось, нажмите 💚, и любые вопросы, предложения или исправления, не стесняйтесь, присылайте мне сообщение, большое спасибо 😄.
Мой Twitter: @DKuroski
Увидимся на следующей неделе 😄
