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

Question

I'm using ng-recaptcha V2 in a reactive form and can't figure out how to write my unit tests for a component quite similar to doc sample for reactive forms: https://github.com/DethAriel/ng-recaptcha/#example-forms

How to mock reCaptcha to simulate user operation pending / reCaptcha failed / reCaptcha passed?

I tried many different ways. The one that seams the most promising is skipping RecaptchaModule and RecaptchaFormsModule imports in test and creating a ReCaptchaComponentMock component. But I can't get it working because of Error: No value accessor for form control with name: 'recaptcha' ("recaptcha" being the formControlName value for my tag)

Answer 1

Here is the code I use to mock 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.');
  }

}