封装mat-radio组件后，单元测试checked属性不生效问题排查

我在封装mat-radio按钮并编写单元测试时，卡在了「should uniquely select radios by a name」测试用例上。设置封装后的组件的checked输入属性后，该属性无法传递给内部封装的mat-radio-button，导致测试断言不通过。我猜测这是变更检测问题，但仅更新输入属性无法解决，尝试了tick和fixture稳定化操作都无效。

测试代码 #

it('should uniquely select radios by a name', () => {
  seasonRadioInstances[0].checked = true;
  weatherRadioInstances[1].checked = true; 

  fixture.detectChanges();
// now the mat-radio-button should be updated but is not
  expect(seasonRadioInstances[0].checked).toBe(true);
  expect(seasonRadioInstances[1].checked).toBe(false);
  expect(seasonRadioInstances[2].checked).toBe(false);
  expect(weatherRadioInstances[0].checked).toBe(false);
  expect(weatherRadioInstances[1].checked).toBe(true);
  expect(weatherRadioInstances[2].checked).toBe(false);
}))

测试模板组件代码 #

@Component({
  template: `
        <my-wrap-radio-button name="season" value="spring">Spring</my-wrap-radio-button>
        <my-wrap-radio-button name="season" value="summer">Summer</my-wrap-radio-button>
        <my-wrap-radio-button name="season" value="autum">Autumn</my-wrap-radio-button>

        <my-wrap-radio-button name="weather" value="warm">Spring</my-wrap-radio-button>
        <my-wrap-radio-button name="weather" value="hot">Summer</my-wrap-radio-button>
        <my-wrap-radio-button name="weather" value="cool">Autumn</my-wrap-radio-button>

        <span id="xyz">Baby Banana</span>
        <span id="abc">A smaller banana</span>
        <my-wrap-radio-button
          name="fruit"
          value="banana"
        >
        </my-wrap-radio-button>
        <my-wrap-radio-button name="fruit" value="raspberry">Raspberry</my-wrap-radio-button>
        <my-wrap-radio-button id="nameless" value="no-name">No name</my-wrap-radio-button>
      `,
})
class StandaloneRadioButtons {
  ariaLabel: string = 'Banana';
  ariaLabelledby: string = 'xyz';
  ariaDescribedby: string = 'abc';
}

内容的提问来源于stack exchange，提问作者luigi denora