How do I access the scope data from an Angular2 DebugElement?

Question

I'd like to cycle through DebugElements to ensure that the object described by the element has certain properties. For example, I may want to be sure that the display only shows those patients who have an appointment today and not the full list of patients that is available.

How does one access the scope data from the debug element?

For example:

Note: In the code below, the page variable packages frequent debug element searches into a single class. In this case, it provides debug elements for two implementations of the same list component, and each list-component displays a different list of patients based on criteria not relevant to this question.

it( "lists zero patients from other staff members that the staff member who is logged in", ()=>{
    var element : DebugElement, list : any;
    var user : string = component.credentials.username;
    var notMyPatientCount : number = 0;
    for (list of [page.primaryPatients, page.patientBacklog] ){
        for( element of list ){
            var patient = /* I need something to put here to extract the PatientSummary object that is displayed in this element */;
        }
    }
    expect( notMyPatientCount ).toBe( 0, "When filtered, the display only holds patients assigned to the current user." );
});

This is just an observation not an answer, but it seems this logic belongs in a service and that the tests for it belong in the test suite for that service. I'm honestly confused as I see a lot of tests like this and I don't understand their purpose. I realize the component is filtering the data but maybe that filter should be in a service... I honestly don't know — Aluan Haddad, Feb 17 '17 at 08:30
My original implementation used Pipe services to do this job, but the pipes were causing errors with invalid zone references or something like that. I tried trouble shooting that for a couple of days and then found an implementation like the one above and realized that I could bypass the Pipes that were causing me so much trouble. — Jared Clemence, Feb 19 '17 at 00:30
I see that makes sense. A Pipe is not really a service, it is more of a function that you put in the namespace of all views. I was thinking more that you would want to inject a regular service and just use that since services are much easier to test than components. Thanks for explaining by the way. — Aluan Haddad, Feb 19 '17 at 12:09

score 1 · Accepted Answer · answered Feb 14 '17 at 22:24

The testing page has an API reference for DebugElement (click here for DebugElement API).

I had reviewed this documentation before, but I missed the fact that the attribute called "componentInstance" refers to the component instance attached to the debug element and not to the testing scope.

To access the PatientSummary object being used in the DebugElement, I used the following code:

/**
*
*    @Component( ... )
*    export class PatientListItemComponent {
*         ...
*         patientSummary : PatientSummary;
*         ...
*    }
*
*/

var component : PatientListItemComponent = element.componentInstance;
var patient : PatientSummary = component.patientSummary;

How do I access the scope data from an Angular2 DebugElement?

1 Answers1