在 Angular 单元测试中使用 ngValue 时如何获取 select 的值

Question

在我的 Angular 应用程序中，我绑定了<select>一个反应式表单，如下所示：

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

在这个阶段，mySelectValues是一个字符串数组。

我像这样进行组件 dom 测试：

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');
});

这很好用。然而，在某些时候，在某些选择中，我需要将对象作为值，而不是在某些地方使用纯字符串/数字。

所以我改变了我的 HTML 代码来[ngValue]使用[value]：

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

此时，在我的测试中， 的值select.value不再是'ABC'，而是变成类似'2: ABC'where2是所选选项的索引，然后是列+空格，然后是实际值。

到目前为止，我可以忍受这一点，只需将我的测试更改为：

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

而且它一直在工作。但是，在某些地方，我需要使用对象作为值，因此mySelectValues不会是纯字符串/数字的数组，而是对象的数组。

例如：

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

因此，像这样更改 HTML：

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

现在，选择可以很好地处理对象。但是，我的测试不再有效，因为select.value现在总是返回值，例如'2: Object'因为选择了对象而不再是纯字符串。

我怎么解决这个问题？

换句话说：给定 a<select>与<option>对象[ngValue]绑定，我如何获取 the 的选定值<select>（像在我的原始测试用例中一样通过 DOM 访问它）？