Angular 具有受保护的@Input 字段的单元测试组件

Question

我们习惯于使变量 protected 仅在组件及其子 class 中使用，而不在模板中使用。

如果您的 class 中有 10 个变量，并且使用 protected private 和 public 时，这尤其有利，很容易知道使用了哪些变量在模板中。

@Input() public disablePlus: boolean = false;
@Input() public disableMinus: boolean = false;

@Input() protected jumpSize: number = 1000;

现在我要为此组件创建一些单元测试。但是我无法在 it 方法中主动更改这些值：

it('should change jumpSize to 5000', () => {
    component.jumpSize= 5000; 
    // ts2445: Property `jumpSize` is protected and only accessible within class and its subclasses
    ...
});

it('plus should be disabled', () => {
    component.disablePlus= true; // no error
    ...
});

有没有办法保留 jumpSize protected 还是我们必须将其更改为 public？

或者您是否认为我们使用 protected @Input 字段的方法是愚蠢的并且不是很有用？

感谢您的建议。

Answer 1

我从未见过这样的例子（在 input 上使用 protected）。

事实上，它们应该是 public，因为顾名思义，input 应该从 class 之外更新。你在你的应用程序上使用 AOT 吗？如果真的能编译，我什至会感到惊讶。

从您 Angular 的角度来看，更新属性与您在测试中遇到的问题相同。如果您处于开发模式，那么它会使用 JIT（即时编译）并且您不会从模板中获得那种检查。这就是它可能起作用的原因。

结论：把你所有的inputs public.

Angular 具有受保护的@Input 字段的单元测试组件

Angular unit-testing components with protected @Input fields

unit-testing

concept

typescript

karma-jasmine

angular