Angular 如何测试角材料日期选择器？

我创建了一个组件使用角材料，我想测试它

以下是角度材质和角度材质的版本：

• 角度9.1.4
• 角材料9.2.2

视图具有以下代码来呈现日期选择器：

<input
    hidden
    matInput
    [matDatepicker]="datePickerCalendar"
    (dateChange)="onCalendarChange($event)"
/>
<mat-datepicker-toggle matPrefix [for]="datePickerCalendar"></mat-datepicker-toggle>
<mat-datepicker #datePickerCalendar startView="multi-year"> </mat-datepicker>

控制器通过以下方式获取datepicker元素：

@ViewChild('datePickerCalendar') public datePickerCalendar: MatDatepicker<Date>;

@ViewChild（'datePickerCalendar'）公共datePickerCalendar:MatDatepicker；

这是从日期选择器触发日期更改时调用的方法：

public onCalendarChange(e: MatDatepickerInputEvent<Moment>): void {
    this.datePickerCalendar.close()
}

public onCalendarChange（e:MatDatepickerInputEvent）：无效{
this.datePickerCalendar.close（）
}

所以我的问题是，我如何实现一个单元测试来创建组件，并且在调用此方法时，将调用close（）方法而不会出错

这是我当前的单元测试：

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            imports: [
                MatIconModule,
                MatFormFieldModule,
                MatInputModule,
                MatDatepickerModule,
                MatNativeDateModule,
                NoopAnimationsModule,
            ],
        }).compileComponents();
    }));

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

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    describe('clearing values', () => {

        beforeEach(() => {
            component.value = new DateObj(1, 1, 2000);
        });

        it('should clear day to null, no changes for month/year', fakeAsync(() => {
            component.clearDay();
            component.valueChange.subscribe((dateObj: DateObj) => {
                expect(dateObj.day).toEqual(null);
                expect(dateObj.month).toEqual(1);
                expect(dateObj.year).toEqual(2000);
            });
        }));

    });
});

description（'MyComponent'，（）=>{
let组分：MyComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[MyComponent]，
进口：[
Maticon模块，
MatFormFieldModule，
MatInputModule，
MatDatepickerModule，
MatNativeDate模块，
NoopAnimationsModule，
],
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（MyComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
描述（'清除值'，（）=>{
在每个之前（（）=>{
component.value=new DateObj（1,1,2000）；
});
它（'应将天清除为空，月/年无更改'，fakeAsync（（）=>{
component.clearDay（）；
component.valueChange.subscribe（（dateObj:dateObj）=>{
expect（dateObj.day）.toEqual（null）；
期望（日期、月份）达到（1）；
预期（日期目标年）.toEqual（2000年）；
});
}));
});
});

我试图在线搜索，但没有找到任何实现datepicker单元测试的东西。 唯一好的教程是来自angular material网站（）的教程，但它没有解释如何测试angular material datepicker

---

谢谢

请参阅名为线束的CDK组件下的材料文档。有了这个模块，你可以单元测试你的材料组件，而不必担心像去BounceTime这样的单一细节，以及更多的理由

---

请展示您到目前为止的测试内容，包括渲染包含日期选择器的组件，包括注入所有必要的角度材质相关性，以及使用链接到查询日期选择器的线束，以及为

datePickerCalendar

@AlexanderStaroselsky updatedOkay设置某种间谍太棒了。因此，您共享了有关使用线束的文档。是否已确定日期选择器是否存在测试线束？如果没有，您是否尝试过该文档中关于手动查询元素的共享内容？首先查询呈现的日期选择器，评估对

打开的

、

关闭的

的更改，或者跟踪对这些方法的调用。还请记住，您可以看到material团队如何测试日期选择器：。从查询elThanks@AlexanderStaroselsky开始，我知道您可以手动选择元素，但是，因为我阅读了angular material provide harness元素，所以我认为datepicker可以避免编写大量代码，并在读取/使用方面进行复杂的单元测试。不过，我会更深入地了解这些我没有检查的部分，谢谢