使用反应式形式运行测试时出错

Question

我有以下代码，并对其进行了一些测试。当我模拟 ts 测试的表单时，它运行良好。当我模拟 html 的相同表单时，我最终得到了这个错误：

名称为“Enable”的表单控件没有值访问器

如果我删除这一行

formControlName="Enable"

，那么测试会通过，但代码会中断`。

该代码不是我的，我输入它是为了编写一个小修复，并且仅测试我接触的代码（特别是按钮逻辑）。

有人能解决这个错误吗？

<ng-template matStepLabel>Label</ng-template>
<form *ngIf="form" novalidate [formGroup]="form">
  <div>
    <div class="form-item-wrapper">
      <div class="form-item">
        <label class="form-label mandatory" for="Description"
          >Description</label
        >
        <custom-input
          [type]="'text'"
          [name]="'Description'"
          [required]="'required'"
          [field]="field('Description')"
          [formGroup]="form"
          [maxLength]="200"
        ></custom-input>
      </div>
    </div>

    <div class="form-item-wrapper">
      <div class="form-item">
        <label class="form-label mandatory" for="FirstItem"
          >First Item
          <i
            class="icon-info__new"
            matTooltip="First Item"
          ></i
        ></label>
        <custom-input
          [type]="'text'"
          [name]="'FirstItem'"
          [required]="'required'"
          [field]="field('FirstItem')"
          [formGroup]="form"
          [maxLength]="255"
        ></custom-input>
      </div>
    </div>

    <div class="form-item-wrapper">
      <div class="form-item">
        <label class="form-label mandatory" for="SecondItem"
          >Second Item
          <i
            class="icon-info__new"
            matTooltip="Second Item"
          ></i>
        </label>
        <custom-input
          [type]="'number'"
          [name]="'ThirdItem'"
          [required]="'required'"
          [field]="field('ThirdItem')"
          [formGroup]="form"
        ></custom-input>
      </div>
    </div>

    <div class="form-item-wrapper">
      <div class="form-item">
        <label class="form-label">Enable </label>
        <mat-slide-toggle
          [color]="slideColor"
          formControlName="Enable"
          name="Enable"
        ></mat-slide-toggle>
      </div>
    </div>

    <div class="button-section">
      <custom-button (click)="backButtonClicked()" *ngIf="editMode != eEditMode.Edit" >
        Back
      </custom-button>
      <custom-button (click)="nextButtonClicked()" [disabled]="!form.valid" >
        Next
      </custom-button>
      <custom-button
        (click)="submit()"
        *ngIf="editMode == eEditMode.Edit"
        [theme]="'submit'"
        [disabled]="!form.valid"
      >
        Save
      </custom-button>
    </div>
  </div>
</form>

这是我在测试中用于模拟有效状态并调用按钮的代码。请注意，相同的代码可以在具有相同按钮的另一个组件中运行，但开头没有 ngIf 形式。

  function clickButton(text:string){


    // Find all custom buttons within .button-section
    const buttons = debugElement.nativeElement.querySelectorAll('.button-section custom-button');

    console.log('buttons basic', buttons)

    // Iterate through the buttons and find the one with text
    let clickButton;
    for (const button of buttons) {
      console.log('button text',button.textContent)
      if (button.textContent.includes(text)) {
        clickButton = button;
        break;
      }
    }
    expect(clickButton).toBeTruthy();
    clickButton.click();
  }

  function setFormValidity(valid:boolean){

    // Create a mock form group with a valid property set to true or false
    const mockFormGroup = fb.group({
      Enable:fb.control(true)
    });

    // Set the valid property of the form group to the value of valid
    Object.defineProperty(mockFormGroup, 'valid', { get: () => valid });

    // Assign the mock form group to the component's form property
    component.form = mockFormGroup;
  }

这就是我在测试中称呼它的方式

  setFormValidity(true);
      fixture.detectChanges();

      clickButton('Back');

Answer 1

事实证明，缺少的行是测试文件中的导入。当我将

MatSlideToggleModule

添加到导入中后，问题就解决了。

 imports: [ReactiveFormsModule, MatSlideToggleModule]