Учимся тестировать проекты Vue.js: список продуктов

Во-первых, ваши определения не совсем правильны. Я настоятельно рекомендую вам взглянуть на Виталия Зайдмана. Обзор тестирования JavaScript в 2018 году.

Вы найдете разницу между типами тестов:

• Unit Tests- Тестирование отдельных функций или классов путем подачи ввода и обеспечения ожидаемого результата.

• Интеграция Tests- Тестирование процессов или компонентов для поведения, как ожидалось, включая побочные эффекты.

• UI Tests- (Функциональные тесты AKA). Сценарии тестирования самого продукта, путем управления браузером или веб-сайтом, независимо от внутренней структуры для обеспечения ожидаемого поведения.

Вы также узнаете обо всех различных типах тестовых инструментов, доступных фреймворках и в основном всем, что вам нужно для начала работы и тестирования ваших компонентов.

Что касается того, какие тесты должны быть там, чтобы покрыть абсолютный минимум, это субъективно. Мне лично нравится проверять все вычислимые свойства, наблюдатели, крючки и методы жизненного цикла (все, что имеет в себе логику), но это может быть немного в вашем случае, это ваш звонок!

Редактировать:

Вы спросили меня, как писать хорошие тесты, и, опять же, это очень субъективно.

Вы можете найти новый способ делать вещи для каждой статьи блога.

Самое главное, что каждый unit тест должен утверждать только одно поведение. Структура тестов также очень важна

Вот пример, если мне пришлось тестировать компонент, отображающий такие продукты, как в вашем случае:

Примечание. Здесь я использую Jest и Vue Test Utils, но вы можете использовать фреймворк, который вам нравится, я просто показываю вам мой способ сделать это на очень простых и простых частях.

В моем компоненте отображается вычисленное свойствоProducts, которое берет данные о продуктах и сортирует их по имени в порядке возрастания или убывания на основе данных заказа.

// 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 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.