Тестирование @ContentChildren () в Angular 5

Question

Мне нужно проверить, правильно ли заполнены мои @ContentChildren с помощью Jasmine, но я не могу заставить мой тест работать.Как это происходит, очень похожий вопрос и ответ здесь , но мой код не работает в строке, указанной ниже.

Вот код:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, NO_ERRORS_SCHEMA } from '@angular/core';

import { RadioButtonGroupComponent } from './radio-button-group.component';

@Component({
  selector: 'sas-radio-button-test',
  template: `<sas-radio-button-group>
  <sas-radio-button text="Radio button 0" value="0" checked="true"></sas-radio-button>
  <sas-radio-button text="Radio button 1" value="1"></sas-radio-button>
  <sas-radio-button text="Radio button 2" value="2"></sas-radio-button>
</sas-radio-button-group>`,
})
class TestWrapperComponent {
}

describe('RadioButtonGroupComponent', () => {
  let component: RadioButtonGroupComponent;
  let fixture: ComponentFixture<TestWrapperComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [TestWrapperComponent, RadioButtonGroupComponent, RadioButtonGroupComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestWrapperComponent);
    component = fixture.debugElement.children[0].componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have the correct number of children', () => {
    expect(component.radioButtons.length).toBe(3); // <!--- this is zero when it should be 3
  });
});

Мой фрагмент компонента выглядит так:

export class RadioButtonGroupComponent implements AfterContentInit {
    @ContentChildren(RadioButtonComponent) radioButtons: QueryList<RadioButtonComponent>;
    //...
}

Может кто-нибудь помочь?

Answer 1

Вы можете поместить fixture.detectChanges(); в тестовый набор (внутри it) и удалить fixture.detectChanges() из beforeEach

it('should have the correct number of children', () => {
    fixture.detectChanges()
    expect(component.radioButtons.length).toBe(3); 
  });

beforeEach - шаг инициализации. Изменения применяются на уровне тестового набора.