前端代码需要单元测试
前端测试可以通过多种方式,如单元测试、集成测试、系统测试和验收测试。今天,我们要探索单元测试的重要性和技巧来测试我们的前端代码。
介绍
在我7年以上前端开发经验,我见过很少的人愿意为自己的代码编写单元测试用例。它通常是可选的;一些开发商占用作为科技任务如果他们有额外的时间。很多人认为它浪费时间,精力和资源。
但是,如果有的话,单元测试是一项投资未来。如果正确完成,单元测试可以节省大量的时间,精力和资源从长远来看。
因此我觉得这是小时的需要越来越多的谈论它,并给予重视测试驱动开发业务逻辑。
什么是单元测试?
单元测试意味着测试源代码和验证的各个单位如果这个单位是否按预期运行。
在这里,单位可以应用程序/模块的最小的部分,可以进行隔离。
它可以是:
- 一个类在面向对象编程中,
- 一个函数在程序编程中,
- 一个组件在反应,棱角分明,Vue苗条的,等等。
单元测试的主要目的是验证我们的代码,代码的逻辑应该适合所有可能的场景。如果是这样,那么我们可以确保应用程序不会休息。
单元测试的好处
让这个过程更敏捷
随着应用程序的发展和附加功能被添加到它,它可能需要重新设计和代码。单元测试可以检测破译密码的设计更改的合同,允许早期发现这些问题,从而更快解决。
有助于更安全的重构和调试更容易
重构代码时,我们只修改代码结构,而不是最终的结果。重构后的代码应该以同样的方式工作。所以,如果我们有适当的单元测试,任何缺陷引入代码重构可以很容易地检测到的测试用例。我们也可以很容易检测,调试如果任何测试用例失败。这也使得调试过程更简单。
帮助我们创建一个健壮的、可以理解的代码
它是至关重要的逻辑测试用例编写所以,如果任何人任何设计改变组件/函数,单元测试应该失败。这是任何开发人员,新代码库,可以理解代码的最初目的是什么。
帮助文档
良好的单元测试用例作为对未来的文档。当有充分的证据证明,妥善单元测试代码库,那么很容易维护。
现在我们知道单元测试帮助开发周期,让我们看一些关于测试前端代码的技巧。
决定什么前端代码的单元测试
能够有效的单元测试代码,我们应该知道如何测试。如果我们看看断言库,或提供的api来编写单元测试用例,我们可能会感到不知所措的可能性测试用例可以编写一段代码。
越多您的测试类似的方式使用您的软件,他们可以给你更多的信心——推特肯特·c·多兹
我们将探讨一些重要的技巧通过基本的JavaScript实例,看看断言可以写什么。编写单元测试用例开玩笑。
假设我们有一个输入框,应该从一个用户只接受字母数字值。验证用户的输入,我已经创建了一个名为“alphanumericValidator验证器函数。“它接受一个字符串,并返回一个布尔值(真有效输入,假无效的输入)。这是代码:
导出功能alphanumericValidator(输入){
如果输入(!){
返回错误;
}
var alphanumericExp = / ^ [0-9a-z] + $ /;
如果(input.match (alphanumericExp)) {
返回true;
其他}{
返回错误;
}
}
通过测试应该覆盖的基本场景:
业务逻辑的实现应该测试正常
单元测试应该测试的代码应该做什么。例如,我们将检查验证器是否正常工作下断言:
/ /测试如果返回true有效输入/ /测试1:只有字母期望(alphanumericValidator (onlyAlphabets)) .toBe(真正的);/ /测试2:只有数字预计(alphanumericValidator (' 123 ')) .toBe(真正的);/ /测试3:数字和字母在一起
期望(alphanumericValidator (alphabets123)) .toBe(真正的);
这些测试确保我们的前端代码是按预期工作。确实验证器验证正确的字母数字值,因此,它的正常工作,坚持业务逻辑。
所有在场的条件和分支的代码应该被测试
所有的如果和其他的开关的情况下的代码应该是单元测试来验证代码是否按预期工作的所有可能的实时场景。
/ /测试4:测试的其他路径无效inputexpect (alphanumericValidator (alpha123@@@@@@)) .toBe(假);/ /测试5:特殊字符inputexpect (alphanumericValidator (#。/)) .toBe(假);
这些测试确保我们的前端代码不允许用户输入任何不可接受的价值,如特殊字符。这是第一条规则的延伸,帮助我们防止可能出现的错误由于不正确的值由用户发送的错误。
测试意想不到的场景或消极的用例
我们应该试图打破错误场景的测试代码并验证通过的测试用例的代码在街角的情况下不会破坏或意想不到的输入场景,像零/未定义的值。这是特别重要的,当我们有可选参数。
/ /测试6、7:null /未定义输入valuesexpect (alphanumericValidator (null)) .toBe(假);
期望(alphanumericValidator(定义)).toBe(假);/ /测试8、9:为空字符串或没有输入valuesexpect (alphanumericValidator (“)) .toBe(假);
期望(alphanumericValidator ()) .toBe(假);
这些测试让我们的应用程序的前端代码健壮和避免破坏和网站由于意想不到的用户输入的输入。
Skippable场景
虽然有一些场景是必不可少的测试我们的代码是健壮的,还有其他一些场景符合not-so-essential通过单元测试用例测试。
让我们来探讨一些这样的用例:
- 测试静态值,常量、枚举等。
这样的测试用例不帮助任何实质性的方式,而不是提高代码覆盖率百分比(不与代码质量)。例子:
希望(1).toBe (1);
2。测试功能的外部依赖或库
“单元测试”这个词意味着测试单位因此,测试的实际功能的任何依赖项中使用单位不添加任何值单元测试过程。这是因为外部依赖项的功能已经被验证和测试通过单独的测试用例编写单元测试,单元。
单元测试工具
因为有多种编程语言的代码,有多个工具,可用库和框架代码的单元测试。PFB一些单元测试工具的前端编写的代码使用香草JavaScript或JavaScript库/框架:
结论
已经有很多次,我感谢我的过去的自己写的测试用例,救了我的一个巨大的错误和防止否则几乎肯定生产错误。
单元测试不应被视为一个开销或负担,相反,我们应该拥抱他们的日常训练和健康的编码习惯。
请继续关注和抓住你的下一篇文章! !任何反馈都是非常明显的。
感谢你的阅读,祝你有美好的一天! !
