От автора: зачастую, самая сложная часть при использовании тестовой разработки или TDD – это начало. Вам нужно скачать пакеты со странными зависимостями, заставить тест сьют работать с билд системой, а также понять, как вообще писать тесты! Не удивительно, что множество разработчиков бросают это дело. Но вы не обычный разработчик. TDD разработка может сочетаться с Vue – и вы можете быть уверены, что ваш код будет работать ровно так, как ожидается. Вместе мы заставим тесты работать в новом проекте Vue, пробежимся по тестам по умолчанию и напишем свои.
Настройка
Самый легкий способ начать работу с TDD – использовать инструмент vue-cli. vue-cli создает Vue проект через командную строку.
При создании проекта через vue-cli от вас требуется лишь следовать подсказкам, после чего автоматически будут созданы тесты. Насколько это легко? Давайте пройдемся по всему процессу, чтобы точно выяснить это.
Первый шаг – установка vue-cli, если он еще не установлен. С помощью NPM можно открыть терминал и запустить команду установки npm install -g vue-cli.
Перед созданием проекта необходимо подобрать шаблон. В vue-cli представлены разные варианты шаблонов, такие как webpack, browserify, pwa и simple. У всех свои уникальные настройки. Оставлю выбор вам. Однако учтите, что в версиях simple нет тестов. Для этого урока я возьму шаблон webpack.
Теперь перейдите в паку, где хотите создать новый проект Vue. Запустите здесь команду vue init <template-name> <project-name>, чтобы создать проект. vue-cli задаст вам несколько вопросов о проекте:
Как видите, я принял большую часть стандартных настроек, но отключил vue-router. Мне он не нужен. Выберите необходимые вам настройки, но не забудьте включить юнит тесты! При активации юнит тестов вас попросят выбрать тест раннер.
Я выберу Karma и Mocha, потому что я их знаю. Однако я слышал много положительного о Jest, обязательно попробую его.
В конце vue-cli попросит вас настроить end-to-end тестирование с Nightwatch. Это слегка выбивается за рамки темы «начало работы», поэтому скажем пока что нет. Выберите, что должен запустить vue-cli после установки, npm или yarn, после чего сгенерируется проект.
Немного магии и мы создали проект Vue с уже настроенными тестами! Если выполнить cd в проект и запустить npm run test, можно увидеть, что в vue-cli есть пара тестов, и они успешно пройдены.
Обзор
Давайте оглядимся после установки, посмотрим на наш проект. Структура файлов выглядит следующим образом:
vue-cli проделал огромную работу для нас! Здесь много файлов и папок, но в этом уроке мы рассмотрим только папки test и src.
Внутри src лежит 2 Vue компонента и файл main.js. В папке test расположены файлы с настройками тестов и папка specs. В этой папке мы будем писать тесты. Давайте откроем HelloWorld.spec.js.
Разберем файл по кусочкам. Вверху мы импортируем Vue и наш компонент HelloWorld, чтобы их можно было использовать в тесте. Далее идет функция describe(), в которой сосредоточены проверки. Проверки записаны внутри функции it(). Это и есть тест нашего компонента.
Новичкам в тестировании, возможно, будет сложно понять концепцию. Я представляю тесты приложения в виде большого стандартизированного теста из начальной школы. Каждая функция describe() – это предмет, а функции it() – это вопросы в тесте. По мере вашего знакомства с тестированием я уверен, что вы найдете свою метафору для написания тестов.
Вернемся к HelloWorld.spec.js. Теперь мы знаем, что наш «предмет» это HelloWorld.vue, а вопрос — should render correct contents. Как же ответить на этот вопрос?
Во-первых, мы используем Vue.extend(HelloWorld) для создания подкласса от базового конструктора Vue с опциями HelloWorld. Затем определяем объект HelloWorld, чтобы с ним можно было работать. В тестировании это можно отнести к настройке или «созданию мира». Мы инициализируем окружение, чтобы оно удовлетворяло подходящему состоянию, которое будет проверяться во время теста.
Теперь можно взглянуть на проверку. Мы ожидаем, что текст внутри .hello h1 будет равен «Welcome to Your Vue.js App.». Это правда? Если вы уже запускали тест, то знаете, что он прошел успешно. Посмотрим на код HelloWorld.vue.
В строке 3 в теге h1 контейнера .hello рендерится msg из данных Vue. В строке 28 мы видим, что msg это строка с нужным нам текстом «Welcome to Your Vue.js App.». Похоже, наш тест прошел успешно!
Написание теста
Мы уверены, что наши тесты работают и они корректны. Пора написать свои тесты. Первый шаг в написании любых тестов – понять, что мы будем проверять. Это самое сложное, самая открытая для интерпретации часть.
Существует множество стратегий. Я считаю, что хорошо подумать о том, что должен делать данный компонент, а потом уже написать тест для его проверки. Я обычно не стараюсь писать юнит тесты на все методы и свойства. Вместо этого я проверяю поведение, которое я ожидаю от компонента.
Применим этот подход к HelloWorld компоненту. Какое у него должно быть поведение? Он должен показывать набор статичной информации, и наш текущий тест проверяет это. Если наш динамический msg не отображается, это будет проблема. Давайте напишем тест, проверяющий, что все ссылки отображаются на странице, даже если есть проблемы с рендером msg.
Давайте подумаем о тесте. Необходимо, чтобы все ссылки отображались правильно. Напишем тест, проверяющий то, что мы рендерим правильное число ссылок.
Вернемся в HelloWorld.spec.js, после первого it() добавьте еще один:
it('should show all the links', () => { })
Осталось наполнить его, как в первом тесте. Можно добавить те же константы, что и в первом тесте.
it('should show all the links', () => { const Constructor = Vue.extend(HelloWorld) const vm = new Constructor().$mount()
})
Необходимо убедиться, что для проверки отображаются все ссылки на странице. Давайте найдем количество всех ссылок, который рендерит компонент и сравним это число с ожидаемым значением. В HelloWorld.vue у нас 9 ссылок, т.е. мы ожидаем, что компонент отрендерит 9 ссылок.
it('should show all the links', () => { const Constructor = Vue.extend(HelloWorld) const vm = new Constructor().$mount() expect(vm.$el.querySelectorAll('a').length) .to.equal(9)
})
Если запустить тест сьют, то он будет зеленый! Для проверки закомментируйте ссылку. Тест должен упасть.
Заключение
В этой пошаговой статье мы изучили много нового. Начали с создания и запуска проекта с помощью vue-cli. Затем мы посмотрели на тесты по умолчанию, узнали, как они работают. В конце мы написали свой тест, проверив работу компонента.
Все мы понимаем, что лучший способ выучить что-то – это практика. Поэтому попробуйте создать тесты для своего следующего проекта или нового компонента. Уверяю вас, вы сами удивитесь тому, что уже знаете.
Автор: Nick Basile
Источник: https://medium.com/
Редакция: Команда webformyself.
