ng-mocks: What is ".point"?

Question

I have seen this code in the docs:

const fixture = MockRender(TargetComponent);
expect(fixture.point.componentInstance).toBeDefined();

But I noticed, we can do fixture.componentInstance also, so without the point. I searched the docs but I didn't find an answer. What exactly does ".point" do? When to use it, when to not use it?

Answer 1

The .point property in Angular testing refers to the DebugElement that wraps the component insteace.

The debugElement provides access to the component, directives and elements inside the component's template.

So the fixture.point return the DebugElement, while fixture.componentInstance return the actual component instace.

Some key differences:

• fixture.point allows you to query elements in the template using things like .query() and .queryAll() You can not do this with fixture.componentInstance.
• fixture.componentInstance allows you to access methods, properties and other things on the component class directly.

---

When to use .point:

• When you need to test elements in the component's template. For Example - finding a button element to click.
• When you need to access to directives in the template.

---

When to use .componentInstance directly:

• When testing methods or properties on the component class.
• When you don't need access to the template and just want to the component instance.

---

So in summary:

• Use .point when you need to access the template or directives
• Use .componentInstace When testing the component class members directly.

---

I hope this will help you. If you need more clarification then please let me know. Cheers