How to locate [(ngModel)] for protractor tests

Question

<span class="selector-label">Team: </span>
<select class="selector-component" [(ngModel)]="selectedTeamId">
  <option *ngFor="#team of teams" [value]="team.id">{{team.name}}</option>
</select>

I am trying to add protractor tests for the selectedTeamId which is the first one sorted alphabetically if one user assigned to multiple teams. I think I should use [(ngModel)]="selectedTeamId", but not sure how to do it. thanks. I know how to get all teams, but I need to get the first one which is the logical implemented in selectedTeamId method.

Answer 1

The idea would be to locate the select element (by the preceding label, for example), evaluate teams, sort it alphabetically by name, get the first team and check that this is the same as the selectedTeamId model value:

var select = element(by.xpath("//span[starts-with(., 'Team')]/following-sibling::select"));

select.evaluate("teams").then(function(teams) {
    teams.sort(function(a, b) {
         return a["name"].localeCompare(b["name"])
    });
    var firstTeam = teams[0];

    expect(select.evaluate("selectedTeamId")).toEqual(firstTeam);
});