javascript - Angular - 测试带有附加集的@Input

Question

我有一个组件，它将参数作为一种指令来设置 <div> 的大小在它的模板中，现在唯一的问题是我不确定如何测试它？

我这样调用我的组件，其中 small可以替换为其他预定义尺寸，例如 medium/large等:

<spinner small></spinner>

然后我将其视为 @Input(<size>)并执行设置以更改大小变量，然后将其传递到 [ngStyle] 中更改显示组件大小的 CSS。

component.ts

size: number;

@Input('small') set small(value) {
  this.size = !value ? 25 : this.size;
}

get getSize() {
  const myStyle = {
    width: this.size + 'px',
    height: this.size + 'px'
  };
  return myStyle;
}

component.html

<div [ngStyle]="getSize"></div>

我已经成功测试了 get getSize()功能，但我有点困在 @Input(<val>) set 周围功能:-/

Answer 1

要知道要进行什么测试，请问自己这个问题:

What does my [feature/component/service/function/variable/...] do ?

在这种情况下，你的 setter 可以用

来回答

As a setter with an Input decorator, I should set the value of the size variable if my own value is undefined. If my own value is defined, I should fall back to the default value.

这意味着您的 setter 测试将如下所示:

it('should set size variable with value undefined', () => {
  component.size = 10;
  component.small = '';
  epxect(component.size).toEqual(25);
});

it('should not change size variable with value defined', () => {
  component.size = 10;
  component.small = 'ff';
  epxect(component.size).toEqual(10);
});