本教程是为人们新的与角单元测试。我们将开始与单元测试管因为管道是最简单的方法开始:他们没有依赖关系,测试多个不同输入和期望输出直观。

管我们要测试CurrencyRenderer和工作如下:

{{8.00 | currencyRenderer}} / /显示8美元
{{9.55 | currencyRenderer}} / /显示9.55美元

管道支持两种可选参数:货币和汇率。

{{8 | currencyRenderer:“欧元”:1.20}}/ /显示€6.67
{{8 | currencyRenderer:“英镑”:1.42}}/ /显示£5.63

如果你好奇管道是如何写的,这是它的源代码,这是添加到现有的一些行为CurrencyPipe角的框架:

从“@angular进口{管、PipeTransform} /核心”;
从“@angular /普通”进口{CurrencyPipe};

@Pipe ({
名称:“currencyRenderer”
})
出口类CurrencyRendererPipe实现PipeTransform {

变换(价值:数字、货币=“美元”汇率= 1):字符串|零{
返回新CurrencyPipe (“en - us”)
.transform(价值/汇率,货币,“象征”,1.0 - 2);
}
}

默认的单元测试

当我们创建一个新的角对象(组件、管、指令、服务)角CLI,自动生成一个默认的单元测试.spec.ts文件。在我们管的情况下,这个默认的单元测试是这样的:

进口{CurrencyRendererPipe}”。/ currency-renderer.pipe ';

描述(“CurrencyRendererPipe”, () = > {

(创建一个实例,()= > {
const管= new CurrencyRendererPipe ();
期望(管).toBeTruthy ();
});
})

测试几乎没有什么:它创建一个管道,然后…检查它的存在!

一些重要的事情要知道到目前为止:

• 的描述()函数在单元测试是一种组织单元测试主题/功能(在这里,所有的单元测试CurrencyRendererPipe)
• 的它()函数是一个单独的单元测试
• 这两个描述()和它()把一个字符串作为第一个参数。该字符串是为了描述当前的测试。第二个参数是一个函数包含实际的测试代码。

添加一个有意义的测试

添加一个新的测试,我们添加一个新的它()功能和功能测试不同的场景。开始,让我们检查管格式正确美元:

描述(“CurrencyRendererPipe”, () = > {

(创建一个实例,()= > {
const管= new CurrencyRendererPipe ();
期望(管).toBeTruthy ();
});

(格式正确美元金额,()= > {
const管= new CurrencyRendererPipe ();
期望(pipe.transform (8) .toBe(8美元);
期望(pipe.transform (9.55)) .toBe(9.55美元);
})

})

我们正在设置预期为每个测试使用期望()函数。通常,我们预计返回值等于一个给定的字符串或数字。说,有许多其他的匹配器功能,如toBeGreaterThan ()或toBeUndefined ()。

测试不同的场景中添加更多它()与不同的输入和输出功能。这是一个测试,测试另一种货币的汇率:

(格式英镑数量正确,()= > {
const管= new CurrencyRendererPipe ();
期望(管。变换(2)8“英镑”).toBe (£4);
})

运行测试或测试组和专注于特定的测试

运行测试与角CLI一样容易运行命令:

ng测试

业力将运行所有单元测试中发现的。spec.ts文件,并在浏览器中显示结果如下:

ng测试命令方便,但它将运行所有单元测试,可以花一些时间如果你有成百上千的。如果你想关注测试的子集,可以前缀描述()或它()用下面的函数:

• f的焦点——这意味着这些功能而忽略其他的运行
• x为排除——这意味着忽略这些功能和其他的运行

这是一个例子的运行描述()功能和忽略的一个测试:

/ /关注描述()由于fdescribe ()
fdescribe (CurrencyRendererPipe, () = > {

(创建一个实例,()= > {
const管= new CurrencyRendererPipe ();
期望(管).toBeTruthy ();
});

(格式正确美元金额,()= > {
const管= new CurrencyRendererPipe ();
期望(pipe.transform (8) .toBe(8美元);
期望(pipe.transform (9.55)) .toBe(9.55美元);
});

/ /忽略测试由于——xit ()
——xit(格式英镑数量正确,()= > {
const管= new CurrencyRendererPipe ();
期望(管。变换(2)8“英镑”).toBe (£4);
})

});

这就是第一个教程。在评论中让我知道如果你有任何问题或想要更多的例子来测试服务、组件等。

第二部分,“单元测试角服务如何?“已经发表我自由的一部分每日角通讯。

我可能会开始一系列的主题。

我的名字是betway必威滚球。我是谷歌开发者角和一个专家顾问和教练角训练我帮助web开发团队学习和熟悉角。

如果你需要任何帮助web开发,随时取得联系!

如果你喜欢这篇文章,请为它鼓掌或分享它。我总是感激你的帮助。你也可以订阅我的文章和订阅我的每日角通讯获得有用的日常小贴士。