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

Answer 1

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;