npm 包 @netbasal/spectator 使用教程

简介

@netbasal/spectator 是一个 Angular 测试工具，它可以让测试代码更简单，更清晰。使用它，你可以节省时间并降低维护成本。

安装

要使用 @netbasal/spectator，你需要在项目中安装它。使用 npm 可以很方便地完成安装。

npm install @netbasal/spectator --save-dev

使用

使用 @netbasal/spectator，你可以用更简单的方式编写测试。让我们来看一下示例。

-- -------------------- ---- -------
------ - ---------- ---------------------- - ---- ----------------------
------ - ----------- - ---- -----------------

----------------------- -- -- -
  --- ---------- -----------------------
  ----- --------------- - ------------------------------------

  ---------- -------- -- -- -
    --------- - ------------------

    -----------------------------------------
  ---

  ---------- ------ ----------- -- -- -
    --------- - ------------------

    -------------------------------------------- ------------
  ---
---

我们首先导入 @netbasal/spectator 中的 Spectator 和 createComponentFactory。接着我们创建一个组件测试套件。在 createComponentFactory 中传入我们要测试的组件，并通过 createComponent 创建组件实例。这样我们就可以方便地测试组件的行为。

在上面的示例中，我们测试了两个断言。第一个是组件是否创建成功，第二个是组件是否正确地渲染。我们可以通过 query 来查找组件中的元素，并通过 toHaveText 来检查其文本是否符合预期。

深入学习

@netbasal/spectator 提供了许多便利的方法帮助你编写更好的测试代码，这些方法可以在官方文档中找到。这里给出一些示例。

属性访问

你可以通过 spectator.component.property 来访问组件中的属性。

it('should have correct title', () => {
  spectator = createComponent({ title: 'My Title' });

  expect(spectator.component.title).toEqual('My Title');
});

事件触发

你可以使用 spectator.triggerEventHandler 来触发组件中的事件。

it('should trigger click event', () => {
  spectator = createComponent();

  spectator.click('button');

  expect(/* ... */).toBeTruthy();
});

服务注入

你可以使用 spectator.inject 来获取组件中的服务实例。

it('should be able to use service', () => {
  spectator = createComponent();

  const service = spectator.inject(MyService);

  expect(service.doSomething()).toEqual(/* ... */);
});

以上只是一些示例，@netbasal/spectator 还提供了很多其它方法，可以在官方文档中查看。

相关阅读

• @netbasal/spectator 官方文档：https://netbasal.gitbook.io/spectator/
• Angular 测试指南：https://angular.io/guide/testing

总结

使用 @netbasal/spectator，你可以更简单地编写 Angular 测试代码。它提供了许多便利的方法，可以帮助你节省时间并降低维护成本。祝你测试愉快！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673ddfb81d47349e53b66