angular - NG Boostrap Datepicker in test passes but throws an error about popper - Stack Overflow

admin管理员组

文章数量:1125077

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-selectorponent.html',
})
export class WeekEndingSelectorComponent impliments OnInit {
  private readonly dateService = inject(DateService);

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

  public weekEndingModel!: NgbDateStruct;
  
   public ngOnInit(): void {
    this.weekEndingModel = this.dateService.dateToNgbDate(this.dateService.getCurrentWeekEndingDate());
    this.onDateSelection(this.weekEndingModel, false);
  }

  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?

本文标签： angularNG Boostrap Datepicker in test passes but throws an error about popperStack Overflow