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

Question

我有一个小的Vue.js应用程序，它可以获取并显示产品列表。应用程序必须允许按大小，价格范围，按字母顺序等对产品进行分类 - 所有前进和后退。

有单元测试，集成测试，E2E测试等。

对于这个特定的应用程序，我想象：

• 单元测试负责测试组件方法
• 集成测试：负责某个动作/功能的输出： 实际上是否展示了产品？ 退回任何产品的价格范围是0％到100％吗？
• E2E测试 - 不完全确定。

在这个特别简单的例子中，哪些测试应该覆盖绝对最小值？

任何想法赞赏！

Answer 1

首先，您的定义并不完全正确。我强烈建议你看看qazxsw poi。

您会发现测试类型之间的区别：

• 单元测试 - 通过提供输入并确保输出符合预期来测试各个功能或类别。
• 集成测试 - 测试过程或组件以按预期运行，包括副作用。
• UI测试 - （A.K.A功能测试）通过控制浏览器或网站测试产品本身的场景，无论内部结构如何，都能确保预期的行为。

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

关于哪些测试应该覆盖绝对最小值，它是主观的。我个人喜欢测试每个计算属性，观察者，生命周期钩子和方法（其中包含逻辑的所有东西），但在你的情况下它可能有点多，这是你的电话！

---

编辑：

你问我如何编写好的测试，再次，这是非常主观的。

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

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

这是一个例子，如果我必须测试一个显示产品的组件：

注意：这里我使用的是Vitali Zaidman's Overview of JavaScript Testing in 2018和Jest，但你可以使用你喜欢的框架，我只是向你展示我在非常简单和直接的部分做的方式。

我的组件有一个显示产品的计算属性，它根据订单数据获取产品数据并按名称按升序或降序对其进行排序。

Vue Test Utils

请注意，测试是可读的，从第一个

// 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.js测试的各个方面。