Модульное тестирование — это способ убедиться, что ваш код уже работает должным образом. Это подходящее решение, чтобы избежать чего-то плохого или неправильного в продукте разработки. (Рохмад, 2018)
Модульное тестирование включает в себя разбиение вашей программы на части и проведение серии тестов для каждой части. (МэттДжей, 2016)
Внедрение модульного тестирования, вероятно, немного потратит ваше время. Но чтобы избежать ошибок в будущем, это отличный способ сделать законченную разработку и сделать ее так, как ожидалось.
Приложение Vue состоит из некоторых компонентов, которые, вероятно, можно использовать повторно и имеют конкретную задачу.
Здесь я поделюсь со всеми вами советами по внедрению модульного тестирования в ваше приложение Vue.
Я предполагаю, что вы уже знакомы с Vue.js и Vuex, по крайней мере, с базовыми знаниями.
Для начала мы бы создали приложение, которое добавило модульное тестирование в каждый его компонент, а также в магазин Vuex.
Установочный проект
Сначала вы должны клонировать этот репозиторий. Однако, если вы хотите внедрить в существующее приложение. Вы можете пропустить этот шаг.
git clone https://github.com/rohmad-st/vue-learning-app.git
Модульное тестирование в компоненте
Из приведенного выше проекта теперь у нас есть компонент Product.vue. Я использую Vuetify в качестве базовой системы проектирования. Поэтому, если вы не знакомы с ним, вы должны сначала прочитать его в https://vuetifyjs.com/en/getting-started/quick-start:
Надеюсь, вы уже знакомы с Vuex, потому что здесь мы также узнаем, как внедрить модульное тестирование в Vuex.
Посмотрите на компонент Product.vue выше, теперь мы попробуем написать для него модульное тестирование. Здесь у нас есть проблемы, чтобы также убедиться, что Vuetify и Vuex также могут работать, поэтому некоторые шаги, которые я делаю:
- импортируйте Vuetify и Vuex в наш файловый тест.
- провести пробное тестирование действий и геттеров vuex
В этом компоненте я ожидал, что заголовок класса headline будет совпадать с заголовком свойств продукта [строка кода: 28–36].
- строка 29: подготовить продукт модели данных
- строка 33: поместите наши фиктивные данные о продукте в параметр props
Модульное тестирование в Vuex Stores
У нас есть модуль products.js для обработки всех событий в действиях продукта.
Из приведенного выше модуля vuex теперь мы добавим коды строк, чтобы протестировать его.
Наши ожидаемые:
- убедитесь, что ответ getAll() правильный, вывод имеет тот же результат, что и макет данных. (кодовая строка: 17–23)
- убедитесь, что действие также переключает любимую работу. можно делать как добавить, так и удалить как избранное. (кодовая строка: 25–40)
- Проверьте, что геттер favoriteIndex получает правильный индекс. (кодовая строка: 42–48)
- Проверьте, что геттер isFavorite получает правильный результат. (кодовая строка: 50–52)
Теперь вы уже можете внедрить модульное тестирование как в компонент vue, так и в vuex.
Не стесняйтесь обсуждать и делиться ею, если считаете, что эта статья полезна. :)
