Установка начальных значений в группу угловых форм для тестирования

Question

Я пишу модульный тест для реактивной формы Angular 7, в которой входные значения предварительно заполнены данными сервера в ngInit.Как я могу установить значения этой формы, чтобы она не вызывала ошибку «значение не определено» во время тестирования?

Это моя форма, предварительно заполненная в ngOnInit:

 ngOnInit() {
  this.userForm = this.formBuilder.group({
  id: [ this.user.id ],
  first_name: [this.user.first_name, Validators.required],
  last_name: [this.user.last_name, Validators.required],
});

Это текущий (barebone) тестовый код для формы:

//import modules

describe('UserListItemComponent', () => {
  let component: UserListItemComponent;
  let fixture: ComponentFixture<UserListItemComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
    imports: [
      MaterialModule,
      ReactiveFormsModule,
      FormsModule,
    ],
    declarations: [
      UserListItemComponent,
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  .compileComponents();
  }));

beforeEach(() => {
  fixture = TestBed.createComponent(UserListItemComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

it('should create', () => {
  component.userForm.setValue({
    id: 123,
    first_name: "john",
    last_name: "smith",
  });
  expect(component).toBeTruthy();
  });
});

Однако,тестер кармы все еще говорит, что он не определен для идентификатора.Это потому, что данные предварительно не заполняются setValue?

Answer 1

У вас может быть функция для обновления значений формы при тестировании:

function updateForm(id: string, first_name: string, last_name: string) {
        component.userForm.controls['id'].setValue(id);
        component.userForm.controls['first_name'].setValue(first_name);
        component.userForm.controls['last_name'].setValue(last_name);
    }

В тестовом примере:

 it('should create form', () => {
  updateForm('1','john','smith');
  expect(component).toBeTruthy();
  expect(component.userForm.value).toBeTruthy();
});

Или вы можете передать объект user виспользование компонента:

`component.user = mockUser;`

И значения формы будут установлены в onInit.

Скорее всего, у вас ошибка из-за неопределенного свойства user компонента.

Answer 2

Вызов fixture.detectChanges(); вызовет ngOnInit(), но свойство user не определено.Вы можете изменить свой код следующим образом:

fixture = TestBed.createComponent(UserListItemComponent);
component = fixture.componentInstance;
const user = {
//your properties here
};
component.user = user;
fixture.detectChanges();