Почему асинхронный угловой блок-тест не находит элемент 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();
    }));
});

Что создает правильный вывод в синхронном случае, но неверно в асинхронном случае:

LOG: 'processing absences'
HeadlessChrome 0.0.0 (Mac OS X 10.13.4): Executed 0 of 51 SUCCESS (0 secs / 0 secs)
LOG: 'synchronous test'
HeadlessChrome 0.0.0 (Mac OS X 10.13.4): Executed 0 of 51 SUCCESS (0 secs / 0 secs)
LOG: 'A,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,'
HeadlessChrome 0.0.0 (Mac OS X 10.13.4): Executed 0 of 51 SUCCESS (0 secs / 0 secs)
ERROR: 'Spec 'Availability Component should synchronously find absences in calendar view' has no expectations.'
HeadlessChrome 0.0.0 (Mac OS X 10.13.4): Executed 0 of 51 SUCCESS (0 secs / 0 secs)
LOG: 'processing absences'
HeadlessChrome 0.0.0 (Mac OS X 10.13.4): Executed 1 of 51 SUCCESS (0 secs / 0 secs)
LOG: 'asynchronous test'
HeadlessChrome 0.0.0 (Mac OS X 10.13.4): Executed 1 of 51 SUCCESS (0 secs / 0 secs)
LOG: ''
HeadlessChrome 0.0.0 (Mac OS X 10.13.4): Executed 1 of 51 SUCCESS (0 secs / 0 secs)
ERROR: 'Spec 'Availability Component should  asynchronously find absences in calendar view' has no expectations.'

Я не уверен, что это имеет какое-то отношение к компоненту углового календаря, который я использую, или если это более простая проблема с моим тестовым кодом.

Для справки здесь приведен код компонента, шаблона и сервиса:

@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 : '';
    }
}

код шаблона:

<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>

служебный код:

@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);
    }
}

Ответ 1

К сожалению, это, по-видимому, имеет какое-то отношение к зоне 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" того же автора, что и "угловой календарь": https://github.com/mattlewis92/calendar-utils/blob/master/src/calendar-utils. Т.С.

В этом методе как параметры Date, так и другие сами вычисления Date, похоже, очень ошибочны.

Я могу только предположить, что это связано с этой известной проблемой в zone.js. Я нахожусь на Angular 5.2, но я предполагаю, что он все еще связан. В любом случае я уверен, что мой тестовый код в основном правильный, но проблема кроется в другом месте.

Ответ 2

Я почти уверен, что причина, по которой это не работает, - это то, как вы определили своего шпиона. Он определяется вне блока beforeEach.

Теперь, когда у вас есть это, ваш шпион создается один раз, когда прибор начинает работу. И жасмин работает, удаляя всех старых шпионов в конце каждого теста. Итак, во втором тесте ваш шпион больше не существует.

Я бы поспорил, что если вы включили свой тестовый заказ, вы увидите, что тест асинхронный работает, но синхронизация отсутствует.

Чтобы исправить это, просто переместите это в блок beforeEach:

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