1

I am writing a test cases using Jasmine Karma in Angular 2 component which having constructor. In this constructor I am passing other component object as a parameter. When trying to access methods of other component are getting undefined.

1. TestComponent

@Component({
    template: `<div></div>`
})
class TestComponent implements OnInit {
    constructor(public otherComponent: OtherComponent) {}
    ngOnInit() {}
    callMyFunction() {
        this.otherComponent.otherFunction();
    }
}

2. OtherComponent 

@Component({
    selector: "other-component",
    template: `<div></div>`
})
export class OtherComponent implements OnInit {
    ngOnInit() {}
    public otherFunction(): void {
        console.log('test function called');
    }
}

3. Test Case

describe("TestComponent", () => {

    let comp: TestComponent;
    let fixture: ComponentFixture < TestComponent > ;
    let de: DebugElement;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [FormsModule],
            declarations: [TestComponent, OtherComponent],
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(TestComponent);
        comp = fixture.componentInstance;
        de = fixture.debugElement;
        fixture.detectChanges();
    });

    fit("Should call otherFunction of OtherComponent.", () => {
        spyOn(comp.otherComponent, "otherFunction").and.callThrough();
        comp.callMyFunction();
        expect(comp.otherComponent.otherFunction).toHaveBeenCalled();
    });
});

Please help me on this.

Sachin_J
  • 11
  • 4
  • Are you getting `Error: No provider for OtherComponent!`? – yurzui Sep 28 '17 at 15:19
  • Yes....getting error No provider for OtherComponent – Sachin_J Sep 28 '17 at 15:21
  • OtherComponent template should contain TestComponent definition – yurzui Sep 28 '17 at 15:23
  • Can you elaborate more or how to add TestComponent definition in OtherComponent template – Sachin_J Sep 28 '17 at 15:25
  • TestBed.createComponent(TestComponent) creates only TestComponent instance it doesn't have any parent components. But dependency injection system requires parent component or we can provide it manually – yurzui Sep 28 '17 at 15:26
  • How to inject other component object and where to inject in describe or in it – Sachin_J Sep 28 '17 at 15:28
  • It won't create OtherComponent because angular doesn't know how to get it: OtherComponent hasn't any providers and it's root component – yurzui Sep 28 '17 at 15:30
  • You can either add it to providers array or create OtherComponent with template that contains TestComponent – yurzui Sep 28 '17 at 15:31
  • How i can add providers in Other component object – Sachin_J Sep 28 '17 at 15:32
  • Providers of your module https://plnkr.co/edit/06QcOMdIuVgp3N8YGDEY?p=preview or providers of TestComponent – yurzui Sep 28 '17 at 15:33
  • How are they connected in your real application? – yurzui Sep 28 '17 at 15:35
  • Thank you @yurzui got it... .... – Sachin_J Sep 28 '17 at 15:35
  • We usually write test where child component is part of parent like `@Component({ selector: "other-component", template: `` }) export class OtherComponent implements OnInit { @ViewChild(TestComponent) testComponent;` Then we can create instance of OtherComponent and get child through @ViewChild. In this case we do not need add component in providers array – yurzui Sep 28 '17 at 15:37
  • Read this thread https://stackoverflow.com/questions/46332859/angular-2-how-does-ng-bootstrap-provide-the-ngbradiogroup-and-ngbbuttonlabel-t I am explaining there how angular DI system works in tree of elements – yurzui Sep 28 '17 at 15:40

0 Answers0