Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to mock an @Input() object in angular2?

I have looked on the angular2 website, as well as checked many SO posts and I could not find an example that illustrates my use case.

I want to mock data from an object that has an @Input() tag. My component looks like this:

    ...
    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;
      }
    }

My unit test file for this component looks like this:

    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();
      });
    });

I would like to write a test that mocks the inputInfo:DriftInfo and its object in DriftInfoDisplayComponent and its properties so that I can test that this data is being displayed properly in the html template. How can I do this?

Thanks for any help that may be provided!

like image 206
Dan Avatar asked May 30 '17 14:05

Dan


People also ask

How do you mock a component in Angular testing?

A mock component in Angular tests can be created by MockComponent function. The mock component respects the interface of its original component, but all its methods are dummies. To create a mock component, simply pass its class into MockComponent function.

What is ComponentFixture in Jasmine?

The ComponentFixture is a test harness for interacting with the created component and its corresponding element. Access the component instance through the fixture and confirm it exists with a Jasmine expectation: content_copy const component = fixture. componentInstance; expect(component).

What is Mocking in Unit testing Angular?

Introduction. Mocking is a great idea for testing Angular apps because it makes maintenance easier and helps reduce future bugs. There are a few complex tools, such as XUnit, for mocking an Angular CLI project. You can execute the mocking methods described in this guide only if you use vanilla Jasmine + Angular Testbed ...


Video Answer


2 Answers

Just add it as a property of the component-under-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();
)};
like image 122
joh04667 Avatar answered Oct 20 '22 08:10

joh04667


Stub an object, for example:

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

Assign it the component property in your synchronous before each:

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  
});

Test your template:

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

 expect(header).toBe('headerText');
});
like image 38
Dom Avatar answered Oct 20 '22 07:10

Dom