javascript - 学习测试 Vue.js 项目 : product display list

Question

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

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

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

• 单元测试负责测试组件方法

• 集成测试:负责某个 Action /功能的输出:

  • 是否实际展示了产品？
  • 价格范围在 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.

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

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

---

编辑:

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

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

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

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

注意:我在这里使用 Jest和 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 测试的各个方面。