web-dev-qa-db-fra.com

Comment se moquer d'un objet @Input () dans angular2?

J'ai consulté le site Web angular2, ainsi que vérifié de nombreux messages SO et je n'ai pas pu trouver d'exemple illustrant le cas d'utilisation.

Je veux me moquer des données d'un objet qui a une balise @Input (). Mon composant ressemble à ceci

...
export class DriftInfoDisplayComponent implements OnInit {

  showThisDriftInfo:boolean;
  headerText:string;
  informationText:string;
  linkText:string;
  @Input() inputInfo:DriftInfo;

  constructor(){}

  ngOnInit() {
    this.headerText = this.inputInfo.headerText;
    this.informationText = this.inputInfo.informationText;
    this.linkText = this.inputInfo.linkText;
    this.showThisDriftInfo = this.inputInfo.visible;
  }

  toggleDriftInfo(){
    this.showThisDriftInfo = ! this.showThisDriftInfo;
  }
}

Mon fichier de test unitaire pour ce composant ressemble à ceci

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


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

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

  it('should create', () => {
    const fixture = TestBed.createComponent(DriftInfoDisplayComponent);
    const drift = fixture.debugElement.componentInstance;
    expect(drift).toBeTruthy();
  });
});

Je voudrais écrire un test qui moque l'entréeInfo: DriftInfo et son objet dans DriftInfoDisplayComponent et ses propriétés afin que je puisse tester que ces données s'affichent correctement dans le modèle html. Comment puis-je faire ceci?

Merci pour toute aide qui pourrait être fournie!

angularkarma-jasmine
8
Dan

Ajoutez-le simplement en tant que propriété du composant sous test:

beforeEach(() => {
  const fixture = TestBed.createComponent(DriftInfoDisplayComponent);
  const drift = fixture.debugElement.componentInstance;
  const driftInfo: DriftInfo = new DriftInfo();
  drift.inputInfo = driftInfo;
});

it('should have input info', () => {
  expect(drift.driftInfo instanceof DriftInfo).toBeTruthy();
)};
13
joh04667

Stub un objet, par exemple:

const InputInfo = {
      headerText: 'headerText',
      informationText: 'informationText',
      linkText: 'linkText',
      visible: 'visible' };

Attribuez-lui la propriété du composant dans votre synchrone avant chaque:

beforeEach(() => {
  fixture = TestBed.createComponent(DriftInfoDisplayComponent);
  element = fixture.debugElement.nativeElement;
  component = fixture.debugElement.componentInstance;
  component.inputInfo = InputInfo; // Assign stub to component property
  fixture.detectChanges(); // calls NgOnit  
});

Testez votre modèle:

it('should have a header', () => {
 const header = element.querySelector('h1').textContent;

 expect(header).toBe('headerText');
});
3
Dominique Miller