时间戳

首页 > 解决方案 > Angular 2+ w/Jasmine 测试：[ngClass]=”methodName(configObj)”问题

angular - Angular 2+ w/Jasmine 测试：[ngClass]=”methodName(configObj)”问题

问题描述

我已经阅读了整个 angular.io 测试文档，搜索了关键字并在 SO 使用了高级搜索，但没有找到任何适用于我的案例的内容。我是单元测试的新手，所以也许我还没有术语。如果这是重复的，请指出我正确的方向。

铺垫：我的问题是

A.) angular/jasmine 是否能够测试来自模板方法调用的动态参数。

要不然...

B.) 在每个fixture.detectChanges() 期间，您将如何模拟将参数传递到方法中？

这是情况和失败的代码......

<generic-element 
  *ngFor=”let recordObj of recordsArray” 
  [ngClass]=”doSetClasses(recordObj)”
></generic-element>

总之，我有一个组件模板，其中一个元素通过方法动态获取它的类。此方法接受一个对象（通过 ngFor 指令从列表中提取）并检查它以确定它应该返回到模板的类名。我更喜欢通过方法进行真正冗长的分配，因为我尝试将我的逻辑保留在打字稿文件中，并将结构保留在 HTML 中……至少尽可能多。

我非常简单的单元测试失败了，因为“无法读取未定义的属性 'id'”（在这种情况下，未定义是从模板传递到 doSetClasses() 方法的 recordObj。我已将其与此隔离，因为如果我只是覆盖并剥离把测试环境中doSetClasses方法的内容全部通过，比如：

beforeEach {
   ...
   component.doSetClasses = function() { return; } as any;
}

现在，如果我保持 doSetClasses 方法不变，我注意到如果我不调用 fixture.detectChanges() 它也会通过。所以我的问题似乎是：在角度的变化检测/摘要周期期间，从模板调用的测试方法，也包含模板中的参数。

我的问题是

A.) angular/jasmine 是否能够测试来自模板方法调用的动态参数。

要不然...

B.) 在测试环境中的每个 fixture.detectChanges() 期间，您将如何模拟将参数传递给方法？

同样，如果这是重复的，请指出我正确的方向。

在此先感谢您的任何帮助、建议和指导。非常感激。

标签： angularunit-testingjasmine

解决方案

在几天没有答案、评论或问题之后，似乎不会提交任何指导。因此，对于将来可能会遇到类似问题的任何人来说，这就是我得出的结论：

  1. 我不相信有一种方法可以有机地拥有 [ngClass]="doSetClasses(recordObj)"，它被称为每个摘要周期，从 *ngFor 动态获取它的参数，在单元测试中工作，所以我不得不模拟它。
  2. 在测试环境中创建 doSetClasses() 方法的副本。
  3. 然后去掉原始 doSetClasses() 方法的内容，这样它仍然可以被代码/其他测试调用，但最终什么都不做。
  4. 在测试 doSetClasses 本身的实际使用时，请改用副本并模拟场景。

我目前无法访问我的代码，但这是简写：

beforeEach() {
  //Create a copy to use in controlled scenarios
  const doSetClassesCopy = doSetClasses;
  //Then strip out contents so it can be called but does not error during testing
  doSetClasses = function() { return; } as any;
}

...
(The Test)
  //Now mock it's performance with params from template's *ngFor directive
  const simulatedParamsFromTemplate = { value: 'whatever' } as recordObj;
  const outcome = doSetClassesCopy(simulatedParamsFromTemplate);
  expect(outcome).toBe('Whatever I expect.');

如果有人有更好的解决方案或建议，我很想听听。谢谢。

推荐阅读