Angular 为什么'；异步角度单元测试是否找到DOM元素？

我有一个失败的异步角度组件DOM测试，但它的同步等价物失败了，我不明白为什么

这是茉莉花测试：

describe('Availability Component', () => {

    let fixture: ComponentFixture<AvailabilityComponent>;

    const absenceService = jasmine.createSpyObj('AbsenceService', ['findAbsences']);
    absenceService.findAbsences.and.returnValue(of([{}]));

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [AvailabilityComponent],
            imports: [CalendarModule.forRoot()],
            providers: [{provide: AbsenceService, useValue: absenceService}]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(AvailabilityComponent);
    });

    const printAbsenceReasons = function () {
        console.log(fixture.debugElement.queryAll(By.css('.calendarAbsence'))
        .map(e => e.nativeElement.textContent)
        .join(','));
    };

    it('should synchronously find absences in calendar view', () => {
        fixture.detectChanges();

        console.log('synchronous test');
        printAbsenceReasons();
    });

    it('should  asynchronously find absences in calendar view', fakeAsync(() => {
        fixture.detectChanges();
        tick();
        fixture.detectChanges();
        tick();

        console.log('asynchronous test');
        printAbsenceReasons();
    }));
});

我不确定这是否与我正在使用的组件有关，或者这是否是我的测试代码的一个更基本的问题

以下是我的组件、模板和服务代码供参考：

@Component({
    selector: 'app-availability',
    templateUrl: './availability.component.html',
    styleUrls: ['availability.component.scss']
})
export class AvailabilityComponent implements OnInit {
    viewDate: Date = new Date();
    absenceEvents: CalendarEvent[] = [];

    constructor(private absenceService: AbsenceService) {
    }

    ngOnInit() {
        this.getAbsences();
    }

    getAbsences() {
        this.absenceService.findAbsences()
        .subscribe(ignored => {
            console.log('processing absences');
            this.absenceEvents = [{
                start: new Date(2018, 3, 29), title: 'A'
            }];
        });
    }

    getAbsence(events: CalendarEvent[]) {
        return events[0] ? events[0].title : '';
    }
}

@Injectable()
export class AbsenceService {

    private url = environment.APP_SHIFT_SERVICE_BASE_URL + '/api/absences';

    constructor(private http: HttpClient) {
    }

    findAbsences(): Observable<Absence[]> {
        console.error('Actual findAbsences() called');
        return this.http.get<Absence[]>(this.url);
    }
}

模板代码：

<div>
    <div>
        <mwl-calendar-month-view
            [viewDate]="viewDate"
            [events]="absenceEvents"
            [cellTemplate]="availabilityCellTemplate">
        </mwl-calendar-month-view>
    </div>
    <ng-template #availabilityCellTemplate let-day="day">
        <div class="calendarAbsence">{{ getAbsence(day.events) }}</div>
    </ng-template>
</div>  

{{get缺席（day.events）}

服务代码：

@Component({
    selector: 'app-availability',
    templateUrl: './availability.component.html',
    styleUrls: ['availability.component.scss']
})
export class AvailabilityComponent implements OnInit {
    viewDate: Date = new Date();
    absenceEvents: CalendarEvent[] = [];

    constructor(private absenceService: AbsenceService) {
    }

    ngOnInit() {
        this.getAbsences();
    }

    getAbsences() {
        this.absenceService.findAbsences()
        .subscribe(ignored => {
            console.log('processing absences');
            this.absenceEvents = [{
                start: new Date(2018, 3, 29), title: 'A'
            }];
        });
    }

    getAbsence(events: CalendarEvent[]) {
        return events[0] ? events[0].title : '';
    }
}

@Injectable()
export class AbsenceService {

    private url = environment.APP_SHIFT_SERVICE_BASE_URL + '/api/absences';

    constructor(private http: HttpClient) {
    }

    findAbsences(): Observable<Absence[]> {
        console.error('Actual findAbsences() called');
        return this.http.get<Absence[]>(this.url);
    }
}

@Injectable（）
导出类缺勤服务{
private url=environment.APP_SHIFT_SERVICE_BASE_url+'/api/absences'；
构造函数（专用http:HttpClient）{
}
findabsenses（）：可观察{
error（'Actual findabsenses（）'called'）；
返回this.http.get（this.url）；
}
}

我很确定这不起作用的原因是因为您如何定义了间谍。它在每个块之前的

之外定义

按照现在的方式，当装置启动时，间谍会被创建一次。茉莉花的工作原理是在每次测试结束时清除所有的老间谍。因此，通过第二次测试，你的间谍不再存在

我敢打赌，如果您切换了测试顺序，那么您将看到异步测试工作，而同步测试不工作

要修复此问题，只需将其移动到beforeach块中：

const absenceService = jasmine.createSpyObj('AbsenceService', ['findAbsences']);
absenceService.findAbsences.and.returnValue(of([{}]));

不幸的是，这似乎与fakeAsync区域有关，而与异步测试无关

我已经设法让一个工作异步测试使用
async
而不是
fakeAsync
：

it('should asynchronously find absences in calendar view', async(() => {
        fixture.detectChanges();

        fixture.whenStable().then(() => {
            console.log('asynchronous test');
            printAbsenceReasons(fixture);

            expect(getAbsenceElements(fixture).length).toEqual(35);
        });
    });
}));

我调试了失败的
fakeAsync
和成功的同步测试。它们都将库中名为
getMonthView
的方法称为“calendar utils”，由同一作者命名为“angular calendar”：

在这种情况下，日期参数和其他日期计算本身似乎都出错了

目前我只能假设它与此相关。我在Angular 5.2上，但我认为它仍然相关。无论如何，我确信我的测试代码基本上是正确的，但问题出在别处。
这很有道理，但当我对同步测试进行注释时，我仍然看到异步测试的相同结果为“”。令人惊讶的是，一个
async
而不是
fakeAsync
测试实际上是有效的：
async（（）=>{fixture.detectChanges（）；fixture.whenStable（）。然后（（）=>printAbscenceReasons（））