如何以反应形式使用 ng-recaptcha V2 在单元测试中模拟组件的“<re-captcha>”？

Question

我正在以反应形式使用 ng-recaptcha V2，但无法弄清楚如何为与反应形式的文档示例非常相似的组件编写单元测试：https://github.com/DethAriel/ng-recaptcha/#example-forms

如何模拟 reCaptcha 以模拟用户操作挂起/reCaptcha 失败/reCaptcha 通过？

我尝试了很多不同的方法。最有前途的接缝是在测试中跳过 RecaptchaModule 和 RecaptchaFormsModule 导入并创建 ReCaptchaComponentMock 组件。但由于 Error: No value accessor for form control with name: 'recaptcha'（"recaptcha" 是我的标签的 formControlName 值，我无法让它工作）

Answer 1

这是我用来模拟 reCaptcha V2 的代码：

@Component({
  selector: 're-captcha',
  template: `
    <input type="checkbox" (click)="toggleStatus()" checked="{{isValid}}">
    <div class="status">{{status}}</div>`,
  styles: [],
  providers: [
    { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => MockReCaptchaComponent) },
  ],
})
export class MockReCaptchaComponent implements ControlValueAccessor {
  @Input() id: string;
  @Input() siteKey: string;
  @Input() tabIndex: number;
  @Output() resolved = new EventEmitter<string>();

  isValid: boolean = null;

  status: string = null;

  private change;

  private touch;

  toggleStatus() {
    this.writeValue(this.isValid ? null : true);
    this.status = this.isValid ? 'reCaptcha passed' : 'You robot!';
    this.touch();
    this.change(this.isValid);
    if (this.isValid) {
      this.resolved.emit('reCaptha-token');
    } else {
      throwError('robot');
    }
  }

  execute(): void {
    throw new Error('Method not implemented.');
  }

  reset(): void {
  }

  writeValue(obj: any): void {
    this.isValid = obj;
  }

  registerOnChange(fn: any): void {
    this.change = fn;
  }

  registerOnTouched(fn: any): void {
    this.touch = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    throw new Error('Method not implemented.');
  }

}