Во-первых, ваши определения не совсем верны. Я настоятельно рекомендую вам взглянуть на Виталия Зайдмана * Обзор тестирования JavaScript в 2018 году .
Вы найдете разницу между типами тестов:
Модульные тесты - тестирование отдельных функций или классов путем подачи ввода и проверки того, что вывод соответствует ожидаемому.
Интеграционные тесты - тестирование процессов или компонентов на поведение, как ожидается, включая побочные эффекты.
UI Tests- (A.K.A Functional Tests) Тестирование сценариев на самом продукте с помощью управления браузером или веб-сайтом независимо от внутренней структуры для обеспечения ожидаемого поведения.
Вы также узнаете обо всех типах инструментов тестирования , доступных платформах и, в основном, обо всем, что вам нужно для начала работы и тестирования своих компонентов.
Что касается , какие тесты должны быть там, чтобы покрыть абсолютный минимум , это субъективно. Лично мне нравится тестировать все вычисленные свойства, наблюдатели, хуки и методы жизненного цикла (все, что имеет логику), но это может быть немного в вашем случае, это ваш вызов!
Редактировать:
Вы спросили у моего , как писать ХОРОШИЕ тесты и, опять же, это очень субъективно.
Вы можете найти новый способ ведения дел для каждой статьи блога.
Что наиболее важно, так это то, что каждый модульный тест должен утверждать только одно поведение . тестовая структура также очень важна
Вот пример, если бы мне пришлось тестировать компонент, который отображает продукты, как в вашем случае:
Примечание: здесь я использую Jest и Vue Test Utils , но вы можете использовать понравившуюся платформу, я просто показываю вам, как это сделать на очень простые и понятные детали.
Мой компонент имеет вычисленное свойство displayProducts , которое принимает данные products и сортирует их по имени в порядке возрастания или убывания на основе данных order .
// Products.spec.js
// Importing vue-test-utils methods (see the API doc : https://vue-test-utils.vuejs.org/en/api/)
import { mount } from '@vue/test-utils';
// Importing the tested component
import Products from '@/[...]/Product';
describe('Products.vue', () => {
// vue-test-utils' wrapper and Vue instance, used in every tests
let wrapper;
let vm;
const productsMock = [{
name: 'First product',
}, {
name: 'Second product',
}];
// Before each test, we mount a new instance
beforeEach(() => {
// Mounting and inject the products (see the complete documentation here : https://vue-test-utils.vuejs.org/en/api/mount.html)
wrapper = mount(Products, {
products: productsMock,
});
vm = wrapper.vm;
});
// Nested 'describe' to make your tests more verbose
describe('products', () => {
// Basic test, display the list ordered by names in ascending order
it('should display the products', () => {
expect(vm.displayedProducts).toBe(productsMock);
});
// Test that the list is reversed when
it('should reverse the products list when ordering in descending order', () => {
vm.order = 'desc';
expect(vm.displayedProducts).toBe(productsMock.reverse());
});
// [...] test that the order's default value is 'asc'
// [...] test that the list is sorted by the right value, etc...
});
});
Обратите внимание, что тесты читаемы, начиная с первого describe до it (пример: Products.vue => products => should display the products).
Вы действительно должны прочитать всю документацию Vue Test Utils , чтобы ознакомиться со всеми аспектами тестов Vue.js.