具有 ControlValueAccessor 测试的 Angular 2(4) 组件

Question

我想测试实现 ControlValueAccessor 接口(interface)的组件，以允许在我的自定义组件中使用 [(ngModel)]，但问题是通常的输入是正确的，但 ngModel - 未定义。这是代码示例:

@Component({
  template: `
    <custom-component
      [usualInput]="usualInput"
      [(ngModel)]="modelValue"
    ></custom-component>`
})

class TestHostComponent {
  usualInput: number = 1;
  modelValue: number = 2;
}

describe('Component test', () => {
  let component: TestHostComponent;
  let fixture: ComponentFixture<TestHostComponent>;
  let de: DebugElement;
  let customComponent: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        CustomComponent,
      ],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents();
  }));
});

因此，我希望我的 customComponent 中的 usualInput Input() 值将等于 1(这是真的)，而 ngModel 值将等于 2，但是 ngModel = undefined 并且在调试之后我知道 ControlValueAccessor writeValue 方法不会在测试中调用环境(但它适用于浏览器)。那我该如何解决呢？

Answer 1

在您的 ControlValueAccessor 组件中，您无权访问 ngModel，除非您注入(inject)它并采取一些技巧来避免循环依赖。

ControlValueAccessor 有 writeValue 方法，它在控件更新时从控件接收值——如果需要，您可以将这个值存储在组件中，然后对其进行测试。