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

Posted 2023-03-13

【中文标题】带有 ControlValueAccessor 测试的 Angular 2(4) 组件

【英文标题】：Angular 2(4) component with ControlValueAccessor testing

【发布时间】：2017-11-19 00:01:38

【问题描述】：

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

@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 中的通常输入 Input() 值等于 1（这是真的），并且 ngModel 值将等于 2，但是 ngModel = undefined 并且在调试之后我知道 ControlValueAccessor writeValue 方法不会在测试中调用环境（但它适用于浏览器）。那么我该如何解决呢？

【问题讨论】：

阅读Never again be confused when implementing ControlValueAccessor in Angular forms

能否提供你的custom-component的源代码？

【参考方案1】：

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

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

【参考方案2】：

你必须用异步包裹你的测试，然后等待fixture.whenStable

it('should get ngModel', async(() =>   
   let customComponent = debugEl.query(By.directive(CustomComponent)); 

   fixture.whenStable().then(() => 
      fixture.detectChanges();
      expect(customComponent.componentInstance.value).toEqual(2);        
   ); 
);