typescript - Hur man får värdet av en select när man använder ngValue i Angular enhetstester

I min Angular-app har jag en <select> bunden till ett reaktivt formulär som följande:

<form [formGroup]="myForm">
  <select formControlName="myControlName" id="my-select">
    <option [value]="value" *ngFor="let value of mySelectValues">{{ value }}</option>
  </select>
</form>

I det här skedet är mySelectValues en array av strängar.

Jag gör komponentdom-testning så här:

it('the select should reflect the form value"', () => {

  // I somehow change the form value to 'ABC' here 
  // and I want to check if the select is correctly showing the change

  const select = fixture.nativeElement.querySelector('#my-select');
  expect(select.value).toEqual('ABC');
});

Detta fungerar bra. Men vid någon tidpunkt, i vissa val, behövde jag ha objekt som värden istället för vanliga strängar/siffror på vissa ställen.

Så jag har ändrat min HTML-kod för att använda [ngValue] istället för [value]:

<option [ngValue]="value" ...

Vid denna punkt är värdet av select.value i mitt test inte längre 'ABC' utan blir något i stil med '2: ABC' där 2 är indexet för det valda alternativet, sedan ett kolon + mellanslag, och sedan det faktiska värdet.

Hittills kan jag leva med detta, bara genom att ändra mitt test till:

expect(select.value).toEqual('2: ABC');

Och det fortsätter att fungera. Men på vissa ställen behöver jag använda Objekt som värden, så mySelectValues kommer inte att vara en array av vanliga strängar/siffror, utan en array av objekt istället.

Till exempel:

mySelectValues = [
  { name: 'Name 1', value: 'MyTestValue1' },
  { name: 'Name 2', value: 'MyTestValue2' },
];

Och så att ändra HTML på detta sätt:

<form [formGroup]="myForm">
  <select formControlName="myControlName" id="my-select">
    <option [ngValue]="object.value" *ngFor="let object of mySelectValues">{{ object.name }}</option>
  </select>
</form>

Selecten fungerar nu bra med objekt. Min test fungerar dock inte längre eftersom select.value nu alltid returnerar värden som '2: Object' eftersom ett objekt är valt och inte längre en vanlig sträng.

Hur kan jag lösa det här problemet?

Med andra ord: givet en <select> som använder <option> med [ngValue] bundet till objekt, hur kan jag få det valda värdet av <select> (återigen genom att komma åt det via DOM som i mitt ursprungliga testfall)?

Relaterade artiklar