测试以计数动态生成的组件始终返回0

Question

我要在下面计算在我的组件上动态生成的元素数，并且当前收到以下错误：Chrome 75.0.3770 (Windows 10.0.0) HomeReviewsComponent : should have reviews FAILED Expected 0 to equal 3.

似乎没有生成组件，我该如何拾取它们？

测试

import { TestBed, async } from '@angular/core/testing';
import { HomeReviewsComponent } from './home-reviews.component';
import { SwiperModule } from 'ngx-swiper-wrapper';
import { By } from '@angular/platform-browser';

describe('HomeReviewsComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [HomeReviewsComponent],
      imports: [SwiperModule]
    }).compileComponents();
  }));
  describe(':', () => {
    let fixture, app;

    beforeEach(() => {
      fixture = TestBed.createComponent(HomeReviewsComponent);
      app = fixture.debugElement.componentInstance;
    });

    afterEach(() => {
      fixture.destroy();
      app = null;
    });

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

    it('should have reviews', async(() => {
      app.reviews = [{
        review: 'Review 1',
        author: 'Author 1',
        image: '../assets/img/fred.jpg'
      }, {
        review: 'Review 2',
        author: 'Author 2',
        image: '../assets/img/fred.jpg'
      }, {
        review: 'Review 3',
        author: 'Author 3',
        image: '../assets/img/fred.jpg'
      }];
      fixture.detectChanges();
      const reviews = fixture.debugElement.queryAll(By.css('.review'));
      const reviewImages = fixture.debugElement.queryAll(By.css('.review-images'));
      const reviewAuthors = fixture.debugElement.queryAll(By.css('.review-authors'));
      expect(reviews.length).toEqual(3);
      expect(reviewImages.length).toEqual(3);
      expect(reviewAuthors.length).toEqual(3);
    }));
  });
});

组件

<section class="section bg-gray">
  <div class="container">
    <swiper [config]="config" [(index)]="index">
      <div class="px-6" *ngFor="let review of reviews">
        <blockquote class="blockquote">
          <p class="lead-4 review">{{ review.review }}</p>
          <br>
          <div><img class="avatar avatar-xl review-image" src="{{ review.image }}"></div>
          <footer class="review-author">{{ review.author }}</footer>
        </blockquote>
      </div>
    </swiper>
  </div>
</section>