测试运行时 Datepicker 和 Timepicker 未初始化

Question

在我的 Angular 应用程序中，我经常使用 datepicker and the timepicker components from ngx-bootstrap。

它们工作得很好，但显然我无法测试它们。问题是当我的测试用例是运行ning 时，那些组件还没有初始化：

我在测试用例的第一行设置了断点。

当测试用例完成执行时，我可以看到 datepicker 和 timepicker 组件已正确初始化：

我的代码如下：

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {

    TestBed.configureTestingModule({
      declarations: [
        MyComponent,
        // ...
      ],
      imports: [
        BsDatepickerModule.forRoot(),
        TimepickerModule.forRoot(),
        // ...
      ],
      providers: [
        // ...
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.autoDetectChanges(true);
  });

  it('some expectation here', () => {
    // whatever I put here, at this line the datepicker and timepicker will NOT be initialised
  });
});

如何在日期选择器和时间选择器组件初始化后运行创建我的测试用例？

编辑:

我做了更多调查，问题是关于 <timepicker> 元素的 [(ngModel)]="time" 基本上只有在我的测试用例退出后它才会被触发。

如何手动触发？

我试过 timepickerElement.dispatchEvent(new Event('input')); 但它不起作用。

也尝试了fixture.detectChanges()、fakeAsync+tick()等...但无法解决问题。

Answer 1

问题是 Datepicker 和 Timepicker 的 [(ngModel)] 指令仅在执行测试用例后触发（因为我将它们包装到一个自定义组件中，然后将其用作表单控件） .

要触发它，我需要添加：

datetimeElement.dispatchEvent(new Event('change'));
timepickerElement.dispatchEvent(new Event('change'));
fixture.detectChanges();

更改 Datepicker 和 Timepicker 元素的值后。

测试运行时 Datepicker 和 Timepicker 未初始化

Datepicker and Timepicker not initialised when the test runs

angular

ngx-bootstrap

angular-test