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

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

有单元测试、集成测试、E2E测试等

对于此特定应用程序，我认为：

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

• 集成测试：负责特定动作/功能的输出：
  • 事实上是否有产品展示
  • 价格在0%到100%之间是否有退货
• E2E测试-不完全确定

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

---

任何想法都很感激

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

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

• 单元测试-通过提供输入并确保输出符合预期，对单个函数或类进行测试

• 集成测试-测试过程或组件是否符合预期，包括副作用

• UI测试-（又称功能测试）通过控制浏览器或网站，在产品本身上测试场景，而不管内部结构如何，以确保预期的行为

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

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

---

编辑：

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

你可以为每一篇博客文章找到一种新的做事方式

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

下面是一个示例，如果我必须测试一个显示产品的组件，如您的案例：

注意：这里我使用的是，但是你可以使用你喜欢的框架，我只是向你展示了我在非常简单和直接的部分上做这件事的方法

我的组件有一个计算属性displayedProducts，它接受产品数据，并根据顺序数据按名称升序或降序排序

// 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...
  });
});

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

description

到

it

（示例：

Products.vue=>Products=>应该显示产品

）

---

你真的应该通读全文，熟悉Vue.js测试的各个方面。

谢谢你的回答。你能告诉我一些你写测试的哲学吗？对于每一个集成测试，我都能想到十几个明显的测试，它们几乎总是失败。。。疯狂背后的方法是什么？换句话说，如何编写好的测试？我正在更新我的答案以添加这一部分。我添加了一个更新，其中包含一个示例和一些更多信息。