正文 

当前位置： 首页 > 知识 >

是否可以像我们在 Angular 2 中测试属性指令一样对结构指令进行单元测试

     2023-02-22     247

关键词：

【中文标题】是否可以像我们在 Angular 2 中测试属性指令一样对结构指令进行单元测试【英文标题】：Is it possible to unit test a structural directive the way we test an attribute directive in angular 2 【发布时间】：2019-01-21 04:07:55 【问题描述】：

我的项目中有属性和结构指令。我可以通过创建一个测试组件并在其模板中使用属性指令来测试属性指令。

@Component(
    template: `<input [myAttrDir]="prop1: val1, prop2: val2"/>`
)
export class TestComponent 


@Directive(
    selector: '[myAttrDir]'
)
export class MyAttrDirective 
    @Input('myAttrDir') testProp;

测试模块如下：

TestBed.configureTestingModule(
    declarations: [MyAttrDirective, TestComponent]
)

我通过这种方式掌握指令：

fixture = TestBed.createComponent(TestComponent)
directive = fixture.debugElement.query(By.directive(MyAttrDirective))

我能够得到属性指令的实例。 但是，当我尝试以相同的方式测试结构指令时，我得到指令的空值。 我也检查了官方文档，只发现了属性指令的单元测试。结构指令测试方法在任何地方都没有给出。

@Component(
    template: `<input *myStrucDir="prop1: val1, prop2: val2"/>`
)
export class TestComponent 

@Directive(
    selector: '[myStrucDir]'
)
export class MyStrucDirective 
    @Input set myStrucDir(data);
    constructor(
        private templateRef: TemplateRef<any>,
        private vcr: ViewContainerRef,
        private cfr: ComponentFactoryResolver,
        private el: ElementRef) 

    

TestBed.configureTestingModule(
    declarations: [MyStrucDirective, TestComponent]
)
fixture = TestBed.createComponent(TestComponent)
directive = fixture.debugElement.query(By.directive(MyStrucDirective))

是否可以以任何方式测试结构指令？

【问题讨论】：

你想达到什么目的？单元测试应该是关于测试一个单元：你不应该在你的组件测试中请求指令。 它是仅用于指令的单元测试用例文件。我只会更改测试组件中的数据，并查看指令是否按照应有的方式运行。这种方式在angular.io的官方文档中给出了 您应该在指令规范文件中测试它：您测试指令是否按照您的预期执行。在您的组件中，您测试您的组件的行为是否符合您的预期。 我也有同样的问题。看起来你不能查询它。你已经设法解决这个问题了吗？ 【参考方案1】：

我遇到了同样的问题，但我知道为什么 debugElement.query(By.directive(MyStrucDirective)) 不适用于结构指令。

结构指令应用于模板 (&lt;ng-template&gt;) 而不是元素。这意味着，它们不绑定到任何DebugElement，而是绑定到DebugNode。这是一个很小的差异，但解释了为什么找不到它。

要查找实例，您必须进行不同的查询：

# Angular 8.1 or below
debugElement.queryAllNodes(debugNode => debugNode.providerTokens.includes(MyStrucDirective))[0];

# Angular 8.2
debugElement.queryAllNodes(By.directive(MyStrucDirective))[0];

【讨论】：

也许你知道如何在调用 createEmbeddedView 和 clear 方法时挂断一个间谍？在 ViewContainerRef 上

Angular2：我们可以在模板中插入哪些表达式

】Angular2：我们可以在模板中插入哪些表达式【英文标题】：Angular2:whatexpressionscanweinterpolateintemplate【发布时间】：2016-11-0406:47:10【问题描述】：我读到我们可以插入Javascript表达式。我们可以插入的有效Javascript表达式列表是什么... 查看详情

在 Grails 2.2 中是不是可以对 mongodb 动态属性进行单元测试？

...IsunittestingofmongodbdynamicattributespossibleinGrails2.2?在Grails2.2中是否可以对mongodb动态属性进行单元测试？【发布时间】：2013-01-2722:04:35【问题描述】：mongodb-1.1.0GA的文档在单元测试部分似乎已经过时：http://springsource. 查看详情

如何创建像 Angular 2 那样的模板变量？

】如何创建像Angular2那样的模板变量？【英文标题】：HowtocreateatemplatevariablelikethatofAngular2?【发布时间】：2018-01-1704:50:46【问题描述】：我想在XamarinForms中创建一个模板变量，就像我们可以在Angular中创建的那样。比如this【问题讨... 查看详情

Angular 2：是不是可以在动态组件中绑定 var？

】Angular2：是不是可以在动态组件中绑定var？【英文标题】：Angular2:isitpossibletobindavarinaDynamicComponent?Angular2：是否可以在动态组件中绑定var？【发布时间】：2017-02-0608:01:25【问题描述】：我正在尝试在动态组件中绑定一个var，但... 查看详情

是否可以升级 angularjs 属性指令以在 Angular 4 中使用？

】是否可以升级angularjs属性指令以在Angular4中使用？【英文标题】：Isitpossibletoupgradeangularjsatttributedirectivestouseinangular4?【发布时间】：2018-02-0815:44:51【问题描述】：我已经能够升级angularjs元素指令以在angular4中使用。这是一个示... 查看详情

软件测试基础

...手段来运行或测试某个系统的过程,其主要的目的是对其是否满足设计要求进行评估的过程”。在这个定义中详细的描述三个维度的内容：软件测试需要在规定条件下进行、软件测试是一过程、目的是验证系统是否满足客户需求... 查看详情

如何在 Angular 2 中将 SASS 用于组件样式？

】如何在Angular2中将SASS用于组件样式？【英文标题】：HowtouseSASSforcomponentsstyleinAngular2?【发布时间】：2016-11-1319:34:20【问题描述】：在Angular2中，当我们定义一个组件时，我们可以为装饰器指定一个styleUrls属性，该属性指向一组... 查看详情

有啥方法可以在 Angular2 中测试 EventEmitter？

】有啥方法可以在Angular2中测试EventEmitter？【英文标题】：AnywaytotestEventEmitterinAngular2?有什么方法可以在Angular2中测试EventEmitter？【发布时间】：2016-05-2101:22:15【问题描述】：我有一个使用EventEmitter的组件，当点击页面上的某人时... 查看详情

为啥 colspan 在 Angular 2 中不是一个已知的原生属性？

】为啥colspan在Angular2中不是一个已知的原生属性？【英文标题】：WhyiscolspannotaknownnativeattributeinAngular2?为什么colspan在Angular2中不是一个已知的原生属性？【发布时间】：2016-06-0713:05:38【问题描述】：如果我们尝试这样的代码：<... 查看详情

如何在 Angular 2 组件中测试我的 RouteConfig 和其他装饰器

】如何在Angular2组件中测试我的RouteConfig和其他装饰器【英文标题】：HowtotestmyRouteConfigandotherdecoratorsinanAngular2Component【发布时间】：2016-08-1811:09:53【问题描述】：在继续之前，我正在尝试为我的Angular2组件编写单元测试，但我不... 查看详情

Angular 2 和 JWT 身份验证 (Auth0)

】Angular2和JWT身份验证(Auth0)【英文标题】：Angular2andJWTauthentication(Auth0)【发布时间】：2016-09-2521:41:38【问题描述】：我有一个带有JWT身份验证(Auth0)的Angular2应用程序，在用户登录后将配置文件和令牌ID存储在localStorage中，配置文... 查看详情

如何在 Angular 2 中填充表单数组？

】如何在Angular2中填充表单数组？【英文标题】：HowdoIpopulateaformarrayinAngular2?【发布时间】：2017-01-0909:39:09【问题描述】：假设我们有一个可以包含值数组的表单。对于这种情况，Angular为我们提供了FormArray类。this.form=newFormGroup(ad... 查看详情

是否可以在 Angular JS 中进行服务器端渲染（在旧版本中，即 2.0 之前的版本）？

】是否可以在AngularJS中进行服务器端渲染（在旧版本中，即2.0之前的版本）？【英文标题】：isitpossibletodoserversiderenderinginangularJS(inolderversioni.e.versionbefore2.0)?【发布时间】：2016-05-1212:11:22【问题描述】：我想用angularJS进行服务器... 查看详情

在 Angular 单元测试中使用回车键提交表单

】在Angular单元测试中使用回车键提交表单【英文标题】：SubmittingformwithenterkeyinAngularunittest【发布时间】：2018-02-2714:32:19【问题描述】：我正在为作为登录表单的Angular4组件编写测试。可以通过单击“提交”按钮或在任何输入字... 查看详情

在 Angular 4+ 中绑定到属性/函数与变量是否很糟糕？

】在Angular4+中绑定到属性/函数与变量是否很糟糕？【英文标题】：Isitbadtobindtoproperties/functionsvsvariablesinAngular4+?在Angular4+中绑定到属性/函数与变量是不是很糟糕？【发布时间】：2020-01-2709:48:18【问题描述】：我试图了解绑定到角... 查看详情

Angular 2 和 Spring Kerberos

】Angular2和SpringKerberos【英文标题】：Angular2andSpringKerberos【发布时间】：2017-06-2523:58:59【问题描述】：是否可以在Angular2应用程序中使用Kerberos？我们正在使用Spring，它托管我们的REST服务，并使用Kerberos保护Angular2资源。我们想要... 查看详情

我们可以像在处理中那样在 PyQt5 中绘制 3D/2D 对象吗？

...发布时间】：2020-04-1914:58:34【问题描述】：我想知道我们是否可以像在处理中使用Java一样在PyQt5中创建3D对象，或者我们是否可以像在Tkinter中那样创建2D正方形/弧形/圆形。实际上，对于涉及MEMS陀螺仪和加速度计的项目，我正在 查看详情

angular绑定数据

1.绑定数据{1.在组件ts文件中定义属性：public属性名= ‘数据’2.在组件中html中定义：{{属性名}} }2.在html获得ts中的值（也可以绑定图片src）{静态属性：title=‘ming’动态属性：[title]=‘ts中属性名字’}3.Htm... 查看详情