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!
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.
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).
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 ...
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();
)};
                        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');
});
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With