背景介绍
在我们的应用中，过滤器和管道是非常重要的组件。过滤器用于过滤和转换数据，而管道用于修改数据流。在 Angular 中，过滤器和管道都可以用来处理数据，比如格式化数据、将数据转换为特定格式等等。这些组件的正确性与可靠性对于我们应用的正确运行至关重要。本文将介绍如何使用 Jest 来测试 Angular 应用中的过滤器和管道。
Jest 简介
Jest 是 Facebook 开发的一个 JavaScript 测试框架，它简洁、高效、易学易用。Jest 支持测试异步代码、模拟数据、生成测试覆盖报告等功能。Jest 还可以与 TypeScript、React、Angular、Vue.js 等主流的前端框架无缝集成。
测试 Angular 中的过滤器和管道
过滤器的测试
测试过滤器的输入和输出
下面是一个简单的过滤器示例代码：
-- -------------------- ---- -------
------ - ----- ------------- - ---- ----------------
------------ ------------
------ ----- ------------ ---------- ------------- -
---------------- ------ - --------- ------- -------- ------ - -------- -
-- -------- -- ------------- --- --- -
------ ------
-
-- ---------------------- -
------ -------------- -- ----------------- --- ----
-
------ --------------------- --- -- - ----- - -----
-
-这个过滤器有两个参数：value 和 search。value 表示要过滤的数据，search 表示要搜索的关键字。如果 value 是一个数组，那么这个过滤器会返回一个新的数组，其中包含找到的所有值；如果 value 是一个字符串，那么这个过滤器会返回这个字符串或者 null，具体取决于这个字符串中是否出现了 search。
我们可以使用 Jest 来测试这个过滤器：
-- -------------------- ---- -------
------ - ------------ - ---- -------------------
------------------------ -- -- -
--- ----- -------------
------------- -- -
---- - --- ---------------
---
---------- ------ -- ---------- -- -- -
--------------------------
---
---------- ---- -------- ---- -- ------- -- -- -
----- ----- - --------- ---------
----- ------ - --------
---------------------------- ----------------------------
---
---------- ------ ---- -- ------ -- --- ------- -- -- -
----- ----- - ------ -------
----- ------ - ---------
---------------------------- --------------------
---
---------- ------ --- ------ -- ------ -- ------- -- -- -
----- ----- - ------ -------
----- ------ - --------
---------------------------- ----------------------- --------
---
---在这个测试中，我们首先创建了 MyFilterPipe 的一个实例，并进行了一些基本测试，以确保它可以正确地创建、实例化和销毁。接下来，我们测试了过滤器的三个方面：在数组中查找项目、查找字符串并返回 null，以及查找字符串并返回字符串本身。
测试过滤器的拦截器
在 Angular 中，我们可以使用过滤器的拦截器来测试过滤器的正确性。拦截器可以帮助我们检测过滤器的输入和输出是否正确。下面是一个简单的拦截器示例：
-- -------------------- ---- -------
------ - ------------ - ---- -------------------
---------------------- ------- --------- -- -- -
----- ---- - --- ---------------
---------- -- ---------- -- -- -
--------------------------
---
-------------- -- ----- -- --------- -- -- -
----- ------- -------- - --------- ---------
----- ------ - --------
----------------------------- ----------------------------
---
---通过使用这个拦截器，我们可以添加更多的测试覆盖范围来确保我们的过滤器正在按照预期的方式工作。
管道的测试
管道的测试与过滤器的测试非常相似，但是在测试管道时我们需要使用 Angular 的 TestBed 工具来正确地建立和销毁组件的环境。 TestBed 可以让我们针对管道执行更全面、更复杂的测试。
测试管道的输入和输出
下面是一个简单的管道示例代码：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'myPipe'})
export class MyPipePipe implements PipeTransform {
transform(value: string): string {
return value.replace('foo', 'bar');
}
}这个管道用于修改字符串，将所有出现的“foo”替换为“bar”并返回它的副本。我们可以使用 Jest 和 TestBed 来测试这个管道：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------
------ - ------- - ---- ------------------------
---------------------- -- -- -
--- ----- -----------
------------- -- -
--------------------------------
------------- - ---------- --
---
---- - ---------------------------
---
---------- ------ -- ---------- -- -- -
--------------------------
---
---------- ------- ----- ---- ------- -- -- -
----- ----- - -- --- - --- ---
---------------------------------------- --- - --- ----
---
---在这个测试中，我们使用 TestBed 创建了 MyPipePipe 的一个实例，并对管道的基本功能进行了测试。我们还测试了管道是否能够正确地去除字符串中的“foo”。
测试管道中的依赖
管道可使用其他依赖来处理数据。为了测试这种情况，我们需要在我们的测试中注入依赖，并使用它来执行其他操作。
下面是一个使用依赖的管道示例代码：
-- -------------------- ---- -------
------ - ----- ------------- - ---- ----------------
------------ ------------------------
------ ----- ------------------------ ---------- ------------- -
------------------- ----------- ---- --
---------------- -------- ------ -
------ -----------------------------------
-
-在这个例子中，MyPipeWithDependencyPipe 包含了一个名为 dependency 的依赖项。这个依赖项实际上是一个服务，它包含了一个 doSomething 方法，该方法接受一个字符串并对其进行修改。我们可以使用 Jest 和 TestBed 来测试这个依赖：
-- -------------------- ---- -------
------ - ------------------------ - ---- ---------------------------------
------ - ------- - ---- ------------------------
------------------------------------ -- -- -
--- ----- -------------------------
--- ----------- ----
------------- -- -
-- ----------
---------- - -
------------ --------------- ------- -- ---------- -----------
--
--------------------------------
------------- - ------------------------ --
---------- -
- -------- ----------- --------- ---------- --
--
---
---- - -----------------------------------------
---
---------- ------ -- ---------- -- -- -
--------------------------
---
---------- --- ------------ -- -- -
----- ----- - -----------
------------------------------------------------ -----------
-----------------------------------------------------------
---
---在这个测试中，我们创建了一个模拟的依赖项，并使用 TestBed 将其作为提供程序添加到我们的测试中。接下来，我们测试了管道在使用这个依赖项时是否有正确的行为。
结论
在本文中，我们简要介绍了如何使用 Jest 测试 Angular 应用中的过滤器和管道。我们还详细讲解了如何使用 Jest 和 TestBed 来测试这些组件的输入和输出，以及如何测试它们在使用依赖项时的行为。这些测试可以确保我们的过滤器和管道能够正确工作，并帮助我们快速地发现和修复一些问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67733ed86d66e0f9aae0e916