学习测试Vue.js个项目：产品展示列表

Question

我有一个小型 Vue.js 应用程序，可以获取并显示产品列表。该应用程序必须允许按尺寸、价格范围、字母顺序等对产品进行排序 - 所有向前和向后。

有单元测试、集成测试、端到端测试等

对于这个特定的应用程序，我认为：

单元测试负责测试组件方法
集成测试：负责某某action/function的输出：
- 是否有实际展示的产品？
- 价格范围在 0% 到 100% 之间是否有退货产品？
E2E 测试 - 不太确定。

在这个特别简单的示例中，应该进行哪些测试以涵盖绝对最小值？

任何想法表示赞赏！

Answer 1

首先，您的定义并不完全正确。我强烈建议你看看Vitali Zaidman's Overview of JavaScript Testing in 2018。

您会发现测试类型之间的差异：

Unit Tests- Testing of individual functions or classes by supplying input and making sure the output is as expected.

Integration Tests- Testing processes or components to behave as expected, including the side effects.

UI Tests- (A.K.A Functional Tests) Testing scenarios on the product itself, by controlling the browser or the website, regardless of the internal structure to ensure expected behavior.

您还将了解所有不同的测试工具类型、可用的框架，以及基本的开始和测试组件所需的一切。

关于应该进行哪些测试以涵盖绝对最小值，这是主观的。我个人喜欢测试每个计算属性、观察者、生命周期挂钩和方法（所有有逻辑的东西），但在你的情况下可能有点多，这是你的决定！

编辑：

你问过我的如何写出好的测试，同样，这是非常主观的。

您可以为每篇博客文章找到一种新的处理方式。

最重要的是每个单元测试必须断言只有一种行为。 测试结构也很重要

这是一个示例，如果我必须测试一个显示产品的组件，就像您的情况一样：

注意：这里我使用的是Jest and Vue Test Utils，但是你可以使用你喜欢的框架，我只是在非常简单和直接的部分向你展示我的方法。

我的组件有一个计算属性 displayedProducts，它获取 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 documentation，以熟悉 Vue.js 测试的各个方面。

学习测试Vue.js个项目：产品展示列表

Learning to test Vue.js projects: product display list

javascript

testing

tdd

karma-mocha

vue.js