Угловой компонент модульного теста с использованием TemplateRefs

Question

Я пытаюсь написать модульные тесты для компонента Angular, используя TemplateRef.Вот весь компонент, TypeScript и HTML:

<!-- alerts-display.component.html -->
<ng-template 
    ngFor 
    let-alert 
    [ngForOf]="alerts$ | async" 
    [ngForTemplate]="alertTemplate">
</ng-template>

и

export class AlertsDisplayComponent implements OnInit {
    public alerts$: Subject<Alert[]>;
    @ContentChild(TemplateRef)
    alertTemplate: TemplateRef<NgForOfContext<Alert>>;
    constructor(private _alertToaster: AlertToasterService) {}

    ngOnInit() {
        this.alerts$ = this._alertToaster.alerts$;
    }
}

По сути, я использую асинхронный канал для подписки на Subject из службы, которая будетпредоставьте мне список предупреждений для отображения, и конечный разработчик может передать шаблон для предупреждения (т. е. может передать загрузочный компонент предупреждения или их собственную реализацию).

Я хочу написать модульный тест дляубедитесь, что при добавлении оповещения в тему, элемент выводится на страницу.Вот мой код модульного теста:

@Component({
    selector: 'app-test-host',
    template: `
        <hsa-alerts-display>
            <ng-template let-alert>
                <p>{{ alert.message }}</p>
            </ng-template>
        </hsa-alerts-display>
    `,
})
class TestHostComponent {
    @ViewChild(AlertsDisplayComponent) alertsDisplayComponent: AlertsDisplayComponent;
}

describe('AlertsDisplayComponent', () => {
    let component: TestHostComponent;
    let fixture: ComponentFixture<TestHostComponent>;
    let mockAlertsToasterService: AlertToasterService;

    beforeEach(async(() => {
        mockAlertsToasterService = jasmine.createSpyObj(['toString']);
        mockAlertsToasterService.alerts$ = new Subject<Alert[]>();
        TestBed.configureTestingModule({
            declarations: [AlertsDisplayComponent, TestHostComponent],
            providers: [{ provide: AlertToasterService, useValue: mockAlertsToasterService }],
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(TestHostComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should show an element for each item in the array list', fakeAsync(() => {
        mockAlertsToasterService.alerts$.next([{ message: 'test message', level: 'success' }]);

        tick();

        const ps = fixture.debugElement.queryAll(By.css('p'));

        expect(ps.length).toBe(1);
    }));
});

Я создал тестовый компонент хоста для теста и пытаюсь смоделировать службу, чтобы добавить сообщение.Затем я попытался найти элементы p через fixture, но этот тест не прошел;вместо этого он получает 0.Я попробовал несколько разных вариантов этого, но не знаю, на правильном ли я пути или нет.

Любая помощь будет принята с благодарностью!

Вот также пример Stackblitz .

Answer 1

Все в моем вышеупомянутом вопросе является правильным, единственное, что я пропустил, было добавить fixture.detectChanges() после tick() в последнем тесте.

После этого шаблон обновляется, и выводится тег p, предоставленный TestHostComponent, который можно найти и сосчитать.