用茉莉花模拟if / else语句-使用Angular / Typescript进行单元测试

汤姆·拉奇

我在现有功能中添加了一个小修改。我们的质量检查已将其识别为新代码,因此我需要使用单元测试覆盖新的4行-记住从来没有开始过单元测试,而且我添加的功能非常大!

我尝试了多种方法来尝试模拟服务,变量,间谍等等……但总是会出错。我是茉莉的新手,所以苦苦挣扎。我需要做的就是获取各种检查以掩盖真假行。

component.ts文件

hasDescription() {
        return this.isBrilliant() || this.isCool();
    }

isBrilliant() {
        return this.service.Type.description == 'Brilliant';
    }

isCool() {
        return this.service.Type.description == 'Cool';
    }



onExportToExcel(): void {
        var r = [];
        // added the below if/else - any check on this will be suffice.
        if (this.hasDescription()) {
            if (!this.isBrilliant()) {
                r.push('This is Cool');
            } else {
                r.push('This is Brilliant');
            }
            if (!this.isBrilliant()) {
            r.push('More Cool content');
            }
        }
}

我试图将isBrilliant()的模拟值设置为true,并希望该值是真实的expect(component.isBrilliant()).toBeTruthy();

我尝试通过以下方式在规范文件中设置此设置:

const isBrilliant = true;
component.isBrilliant = isBrilliant;

但是我到这里的错误是 Type 'true' is not assignable to type '() => boolean'.

如果有经验的茉莉花开发者可以向我展示一种快速的方法来获得有关此简单声明的一些知识,将不胜感激。谢谢


更新

我可以isBrilliant()成为对或错。我现在需要检查数组r以查看是否已.push输入正确的字符串有任何想法吗?

沙申克·维维克

作为最佳实践的一部分,我建议进行一些更改。

  1. 不要模拟组件方法,因为您需要对其进行测试。在您的情况下,您应设置的值,this.service.Type.description并因此应返回truefalse那将是正确的方法。

如果this.service是已注入的服务,则construtor可以模拟该服务。请参阅本文以了解此处的嘲笑

  1. 由于您正在使用测试多个条件if else,因此您只需编写几个it块即可获得良好的测试覆盖率。

  2. 为了测试var r,您应该public在组件级别而不是在组件级别上将它声明为变量function也喜欢letvar

这是一个示例代码,您可以编写该代码来设置值 isBrilliant()

it('should push Brilliant when the Description is so,()=>{
   component.service.Type.description = 'Brilliant';
   component.onExportToExcel();
   expect(component.r.length).toBe(1);
   expect(component.r[0]).toBe('This is Brilliant');
})

it('should push other cool content when the Description is not Brilliant,()=>{
   component.service.Type.description = 'something else';
   component.onExportToExcel();
   expect(component.r.length).toBe(2);
   // check other values in expect block accordingly
})

// you should also check that "component.r" has zero length when hasDescription() returns false

我希望以上代码片段能给您一个良好的开端

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

用茉莉花测试角度“ controller as”

如何使用茉莉花对document.ready()函数进行单元测试

茉莉花,Angular的“ rootScope。$ broadcast”测试

茉莉花单元测试以检查Angular Bootstrap模态的范围

JavaScript:使用茉莉花测试toLocaleString()

使用打字稿,业力和茉莉花进行单元测试RxJS Observable.timer

茉莉花的Angular2异步单元测试

Angular CLI茉莉花单元测试错误:无法解析RequestOptions的所有参数:(?)

用茉莉花测试异步功能

Angular Karma茉莉花-测试功能

用茉莉花测试拒绝的承诺

模拟对象如何在Angular茉莉花单元测试中工作

Angular-茉莉花单元测试的模拟Promise方法

使用茉莉花和业力进行单元测试时,发生CUSTOM_ELEMENTS_SCHEMA错误

在角度项目中使用茉莉花进行单元测试订阅的方法

如何从集中文件中导入rxjs运算符以进行Angular中的茉莉花单元测试?

Angular 6测试-茉莉花-模拟链式承诺

Angular 5-茉莉花测试:模拟对实际HTTP请求的错误响应错误

Angular 6中茉莉花测试的模拟路由器订阅

用茉莉花测试NGXS异常

Angular8单元测试茉莉花超时问题

如何使用茉莉花测试对Mapbox弹出窗口进行单元测试?

在Visual Studio2013中使用茉莉花和Chutzpah进行单元测试angularjs无法正常工作

TypeError单元测试茉莉花

使用业力茉莉花进行单元测试时出现控制器错误

使用业力和茉莉花编写登录方法的单元测试

用茉莉花测试JavaScript库

使用茉莉花进行代码覆盖的单元测试

使用茉莉花弹珠进行单元测试