NG Boostrap Datepicker in test passes but throws an error about popper

I have an Angular component that contains an ng-bootstrap datepicker popup. Click a button, it shows the datepicker, and to select a date which it emits. Very simple.

<button
type="button"
class="btn btn-outline-secondary"
aria-label="Select Week Ending Date"
id="week-ending-btn"
(click)="picker.toggle()"
>
<i class="bi bi-calendar3"></i>
Select Week Ending
</button>

<input
#picker="ngbDatepicker"
type="hidden"
readonly
ngbDatepicker
navigation="arrows"
positionTarget="#week-ending-btn"
[(ngModel)]="weekEndingModel"
(dateSelect)="onDateSelection($event, true)"
/>


@Component({
selector: 'app-week-ending-selector',
standalone: true,
imports: [FormsModule, NgbDatepickerModule],
templateUrl: './week-ending-selector.component.html',
})
export class WeekEndingSelectorComponent {
private readonly dateService = inject(DateService);

@Input() public date?: string;
@Output() public readonly dateChanged = new EventEmitter<IWeekEndingSelectorChangeEvent>();

public weekEndingModel!: NgbDateStruct;

public onDateSelection(date: NgbDateStruct, shouldEmitEvent: boolean): void {
const dateAsIso = this.dateService.ngbDateToIso(date);
const weekEnding = this.dateService.getWeekEndingDate(dateAsIso);

this.weekEndingFriendly = this.dateService.formatDateString(weekEnding, 'friendlyShort');
if (shouldEmitEvent) {
this.dateChanged.emit({
friendly: this.weekEndingFriendly,
route: this.dateService.formatDateString(weekEnding, 'isoShort'),
year: weekEnding.getFullYear(),
date: weekEnding,
});
}
}
}


I have a test for this, which works and passes

it('should emit the value for the selected date', () => {
spyOn(component.dateChanged, 'emit');

const thisWeek = getCurrentWeekEndingDate(); //a test helper function
component.date = getCurrentWeekEndingDate(true);

fixture.detectChanges(); //triggers ngOnInit

//Click to open the date picker
fixture.debugElement.query(By.css('#week-ending-btn')).click();
fixture.detectChanges();

//This will click on the last day of the first week in the calendar grid
const day = fixture.debugElement.query(By.css('ngb-datepicker .ngb-dp-day:nth-child(7)'));
day.click();
fixture.detectChanges();

//A bit of a hack, but we can force-parse the date from a string on an attribute
const dateStr = day.getAttribute('aria-label')?.toString() ?? '';
const expectedDate = new Date(dateStr);
expectedDate.setHours(23);
expectedDate.setMinutes(59);
expectedDate.setSeconds(59);
expectedDate.setMilliseconds(999);

expect(component.dateChanged.emit).toHaveBeenCalledOnceWith({
friendly: formatDateAsFriendly(expectedDate),
route: formatDateAsIso(expectedDate),
year: expectedDate.getFullYear(),
date: expectedDate,
});
});


However, this error is logged in the test console

'ERROR', TypeError: Cannot read properties of undefined (reading 'split')
TypeError: Cannot read properties of undefined (reading 'split')
at getPopperOptions (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ng-bootstrap/ng-bootstrap/fesm2022/ng-bootstrap.mjs:3734:21)
at Object.createPopper (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ng-bootstrap/ng-bootstrap/fesm2022/ng-bootstrap.mjs:3815:57)
at apply (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ng-bootstrap/ng-bootstrap/fesm2022/ng-bootstrap.mjs:4118:39)
at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:369:28)
at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:2081:39)
at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:368:34)
at ZoneImpl.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:111:43)
at NgZone.runOutsideAngular (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:7142:28)
at NgbInputDatepicker.open (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ng-bootstrap/ng-bootstrap/fesm2022/ng-bootstrap.mjs:4116:26)
at NgbInputDatepicker.toggle (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@ng-bootstrap/ng-bootstrap/fesm2022/ng-bootstrap.mjs




What is happening here and what do I need to do to make this error go away?

Continue reading...