Тест NG дает компонент должен создать - PullRequest
Новая
       7

Тест NG дает компонент должен создать

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

Я написал свое первое угловое приложение в Angular 6.

Я еще не написал ни одного теста, но есть некоторые тестовые файлы по умолчанию, созданные автоматически при генерации components и services.

Когда я запускаю автоматически сгенерированные тесты, используя 

ng test

Это выдает слишком много ошибок.Одна из них - как 

ChangeAvatarModalComponent should create

Failed: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("
<div class="modal-body">

  <form [formGroup]="changeAvatarForm" id="avatar-form" [ERROR ->]#formDir="ngForm" (submit)="onSubmit()">
  <div class="row">
    <div class="col-md-12">
"): ng:///DynamicTestModule/ChangeAvatarModalComponent.html@8:56
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
<div class="modal-body">

У меня есть модуль account с ChangeAvatarModalComponent .

У меня есть следующие строки внутри account.module.ts 

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(AccountRoutes),
    NgbModule
  ],
  declarations: [
    ChangeAvatarModalComponent
  ],
  entryComponents: [
    ChangeAvatarModalComponent
  ]
})
export class AccountModule { }

, а также FormsModule и ReactiveFormsModule импортируются в app.module.ts

Есть многотакие ошибки в журнале генерируются.

Редактировать 2: change-avatar-modal.component.spec.ts 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ChangeAvatarModalComponent } from './change-avatar-modal.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ChangeAvatarModalComponent ]
    })
    .compileComponents();
  }));

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

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

1 Ответ

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

Вы не показываете файл .spec.ts в коде, который вы дали.

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

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        TranslateModule.forRoot({
          loader: {provide: TranslateLoader, useClass: TranslateFakeLoader}
        }),
        HttpClientModule,
        HttpClientTestingModule,
        FormsModule,
        SfFormModule,
        ReactiveFormsModule,
        NguiAutoCompleteModule,
        NgxMyDatePickerModule,
        NgxPermissionsModule.forRoot(),
        PipeModule,
        StoreModule.forRoot({}),
        LayoutsModule
      ],
      declarations: [
        ExampleComponent
      ],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'},
        {provide: ToastrService, MockToastrService},
        ActionsSubject,
        SimService
      ]
    }).compileComponents()
  }))

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

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

В вашем случае вам нужно импортировать FormsModule и / или ReactiveFormsModule в ваш spec-файл, а также пробовать другие вещи.

Чтобы уменьшить количество импортов, которые вы можете получитьпросто импортируйте ваши собственные модули в файл спецификации - например, AccountModule и / или AppModule - так как они уже импортируют формы.

...