web-dev-qa-db-fra.com

Échec: directive inattendue «ContactDetailsComponent» importée par le module «DynamicTestModule». Veuillez ajouter une annotation @NgModule

J'ai créé un nouveau composant et j'ai fait un test ng, mais échoue avec l'erreur ci-dessous

Échec: directive inattendue "ContactDetailsComponent" importée par le module "DynamicTestModule". Veuillez ajouter une annotation @NgModule.

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

import { AdditionalContactDetailsComponent } from './additional-contact-details.component';
import { EdlInputModule, EdlIconModule, EdlMessagesModule } from '@fedex/ddt';
import { ReactiveFormsModule, FormBuilder, FormsModule } from '@angular/forms';
import { ContactDetailsComponent } from '../contact-details/contact-details.component';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';

fdescribe('AdditionalContactDetailsComponent', () => {
  let component: AdditionalContactDetailsComponent;
  let fixture: ComponentFixture<AdditionalContactDetailsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [EdlInputModule,
        ReactiveFormsModule,
        FormsModule,
        EdlIconModule,
        EdlMessagesModule,
        ContactDetailsComponent,
        HttpClientModule,
        HttpClientTestingModule],
      declarations: [AdditionalContactDetailsComponent],
      providers: [FormBuilder]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
angulartypescriptkarma-jasmine
10
Ramana

Supprimez le composant ContactDetailsComponent du tableau d'importation et ajoutez-le dans le tableau de déclaration. Les composants sont toujours placés dans un tableau de déclaration et modules sont placés dans le tableau d'importation.

Voici la solution:

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

import { AdditionalContactDetailsComponent } from './additional-contact-details.component';
import { EdlInputModule, EdlIconModule, EdlMessagesModule } from '@fedex/ddt';
import { ReactiveFormsModule, FormBuilder, FormsModule } from '@angular/forms';
import { ContactDetailsComponent } from '../contact-details/contact-details.component';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';

fdescribe('AdditionalContactDetailsComponent', () => {
  let component: AdditionalContactDetailsComponent;
  let fixture: ComponentFixture<AdditionalContactDetailsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [EdlInputModule,
        ReactiveFormsModule,
        FormsModule,
        EdlIconModule,
        EdlMessagesModule,
        HttpClientModule,
        HttpClientTestingModule],
      declarations: [AdditionalContactDetailsComponent, ContactDetailsComponent],
      providers: [FormBuilder]
    })
    .compileComponents();
  }));

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

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