Модульное тестирование на угловом уровне, компонент теста не определен - PullRequest
Новая
       11

Модульное тестирование на угловом уровне, компонент теста не определен

0 голосов
/ 22 октября 2018

Я пытаюсь выполнить модульное тестирование компонента "добавить объект" (добавить блюдо) в Angular 6. С моим текущим кодом я получаю ошибку "Невозможно прочитать свойство 'dishForm' из неопределенного".

Итак, похоже, что DishAddComponent не распознается как компонент, подлежащий тестированию?Кто-нибудь может мне помочь с этим?Заранее спасибо!

Я также пытался (помимо прочего) добавить асинхронную передачу в beforeEach, как описано здесь: Angular 2 Testing - экземпляр компонента не определен , но он не работает.

Угловой компонент, подлежащий модульному тестированию: 

export class DishAddComponent implements OnInit {
  public dishForm: FormGroup;

  constructor(private dishService: DishService,
    private formBuilder: FormBuilder,
    private router: Router) { }

  ngOnInit() {
    // define dishForm (with empty default values)
    this.dishForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.maxLength(30), Validators.pattern('[a-zA-Z :]*')]],
      country: [''],
      ingredients: this.formBuilder.array([]),
      recipe: ['', [Validators.required, Validators.minLength(50)]],
    }, { validator: CustomValidators.DishNameEqualsCountryValidator });
  }

  addIngredient(): void {
    let ingredientsFormArray = this.dishForm.get('ingredients') as FormArray;
    ingredientsFormArray.push(IngredientSingleComponent.createIngredient());
  }

  addDish(): void {
    if (this.dishForm.dirty && this.dishForm.valid) {

      let dish = this.dishForm.value;

      this.dishService.addDish(dish)
        .subscribe(
          () => {
            this.router.navigateByUrl('/dishes');
          });
    }
  }
}

Модульный тест в Jest: 

describe('DishAddComponent', () => {
  let component: DishAddComponent;
  let fixture: ComponentFixture<DishAddComponent>;
  let formGroup: FormGroup;
  let formBuilderMock: any;
  let dishServiceMock: any;

  beforeEach(() => {
      formBuilderMock = {
      group: jest.fn().mockName('formBuilderMock.group'),
      array: jest.fn().mockName('formBuilderMock.array')
    };

    dishServiceMock = {
      addDish: jest.fn().mockName('dishServiceMock.addDish')
    };

    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule, FormsModule, RouterTestingModule.withRoutes(routes)],
      declarations: [ DishAddComponent, IngredientSingleComponent ],
      providers: 
      [ 
        { provide: FormBuilder, useValue: formBuilderMock },
        { provide: FormGroup, useValue: formGroup },
        { provide: DishService, useValue: dishServiceMock }
      ]
    });
    fixture = TestBed.createComponent(DishAddComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('form invalid when empty', () => {
    (console).log(component);
  expect(component.dishForm.valid).toBeFalsy();
 });
});

РЕДАКТИРОВАТЬ: Если я использую код ниже,Я также получаю сообщение об ошибке:

DishAddComponent ›должен создать

Ожидается (получено) .toBeTruthy ()

Получено: не определено 

  it('should create', () => {
    expect(component).toBeTruthy();
  });

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

В конце концов я избавился от «неопределенной ошибки» с помощью кода ниже.Мне нужно было посмеяться над одним из дочерних компонентов и создать экземпляр formbuilder.Спасибо за советы! 

describe('DishAddComponent', () => {
  let component: DishAddComponent;
  let fixture: ComponentFixture<DishAddComponent>;
  let dishServiceMock: any;

  // mock singleingredientcomponent
  @Component({
    selector: 'app-ingredient-single',
    template: '<div></div>',
  })
  class MockSingleIngredientComponent {
  @Input() public ingredientIndex: number;
  @Input() public ingredient: FormGroup;
  }

  // create new instance of FormBuilder
  const formBuilder: FormBuilder = new FormBuilder();

  beforeEach(async(() => {
    dishServiceMock = {
      addDish: jest.fn().mockName('dishServiceMock.addDish'),
      addIngredient: jest.fn().mockName('dishServiceMock.addIngredient')
    };

    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule, FormsModule, RouterTestingModule.withRoutes([])],
      declarations: [ DishAddComponent, MockSingleIngredientComponent ],
      providers: 
      [ 
        { provide: FormBuilder, useValue: formBuilder },
        { provide: DishService, useValue: dishServiceMock }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    // create component and test fixture
    fixture = TestBed.createComponent(DishAddComponent);

    // get test component from the fixture
    component = fixture.componentInstance;

    // ..
    fixture.detectChanges();
  });

  // unit tests
  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
0 голосов
/ 22 октября 2018

Попробуйте скомпилировать компоненты, добавив compileComponents () после configureTestingModule () 

TestBed.configureTestingModule({
  imports: [ ReactiveFormsModule, FormsModule, RouterTestingModule.withRoutes(routes)],
  declarations: [ DishAddComponent, IngredientSingleComponent ],
  providers: 
  [ 
    { provide: FormBuilder, useValue: formBuilderMock },
    { provide: FormGroup, useValue: formGroup },
    { provide: DishService, useValue: dishServiceMock }
  ]
})
  .compileComponents();
...