Как проверить компонент, который содержит пользовательский элемент управления формы?

Question

У меня есть такой компонент

@Component({
      selector: 'app-custom-form-control',
      templateUrl: '<input>',
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => SelectComponent),
          multi: true
        }
      ]
    })
export class CustomFormControlComponent implements ControlValueAccessor {...}

Как видите, это пользовательский элемент управления формы.Я использую его в компоненте, который собираюсь протестировать.

    @Component({
      selector: 'app-root',
      templateUrl: '<div [formGroup]="form">
          <app-custom-form-control formControlName="my_field"></app-custom-form-control>
      </div>',
    })
    export class AppComponent implements OnInit, OnDestroy {...}

Так как же я могу смоделировать app-custom-form-control для моего теста?

Текущая реализация нуждается в реальном компоненте ...

  beforeEach(async(() => {
    const testRouter = new RouterStub();
    const testDataService = new DataServiceStub();
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        CustomFormControlComponent // it is a real stuff
      ],
      imports: [
        ReactiveFormsModule
      ],
      providers: [
        { provide: Router, useValue: testRouter },
        { provide: DataService, useValue: testDataService }
      ],
      schemas: [ NO_ERRORS_SCHEMA ]
    }).compileComponents();
  }));

В противном случае (без объявления компонента) я получил ошибку Failed: No value accessor for form control with name: app-custom-form-control

Answer 1

При выполнении тестов для приложений Angular существует два основных подхода ( и смесь ), которые вы можете использовать:

1- Удаление ненужных компонентов , где

(...) вы создаете и объявляете версии-заглушки компонентов и директив, которые играют небольшую роль или не играют никакой роли в тестах (...)

2- NO_ERRORS_SCHEMA, который

(...) указывает Angular-компилятору игнорировать нераспознанные элементы и атрибуты (...)

С этим последним компилятор не будет выдавать ошибку при обнаружении селектора app-custom-form-control в шаблоне AppComponent.

3- Использовать обаметоды вместе

Выбор того или иного подхода зависит от вас, поскольку это зависит от конечной цели, к которой вы стремитесь с помощью теста.

---

Применение подхода 1 будетбыть примерно таким:

describe('AppComponent', () => {

// component stub
@Component({selector: 'app-custom-form-control', template: ''})
class CustomFormControlComponentStub {}
//...
  beforeEach(async(() => {
    const testRouter = new RouterStub();
    const testDataService = new DataServiceStub();
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        CustomFormControlComponentStub // it is fake! stuff
      ],
      // ... code omitted
    }).compileComponents();
  }));
//...
});