How to test angular material date picker?

Question

i created a component using angular material, and i would like to test it.

These are the versions of angular and angular materials:

Angular 9.1.4
Angular Material 9.2.2

The view has this code to render the datepicker:

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

The controller get the datepicker element in this way:

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

and this is the method called when dateChange is triggered from the date picker:

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

So my question is, how can i implement an unit test that create the component and, when this method is called, will call the close() method without errors?

This is my current unit test:

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

    });
});

I tried to search online but i didn't find anything to implement datepicker unit test. The only good tutorial was this one from angular material website (link) but it didn't explain how to test angular material datepicker.

Thank you

Please show what you have so far for your test including rendering the component containing the date picker including injecting all necessary angular material dependencies as well using the harness you linked to query for the datepicker, as well as setting up some sort of spies for datePickerCalendar. — Alexander Staroselsky
Okay great. So you shared the documentation on using harnesses. Have you determined if a test harness exists for the datepicker? If not, have you tried what is shared in that documentation about manually querying for elements? You start with querying for the rendered datepicker and evaluating the changes to opened, closed and or tracking the calls to those methods. Also keep in mind you can see how the material team tests date pickers: github.com/angular/components/blob/… . Start with querying the el — Alexander Staroselsky
Thanks @AlexanderStaroselsky i know that you can select manually the element, but, because i read the angular material provide harness elements, i thought that maybe there was one for datepicker to avoid to write a lote of code and have a complex unit test in term of reading/usage. However i will read deeper about these parts that i didn't check, thank you — nobald282

gsa.interactive gsa.interactive · Accepted Answer · 2020-06-04T17:14:51

Please see the Material Docs under CDK components called Harness. With this modules you can unit test your Material components, without having to worry about single detail like debounceTime and much more to justify...

https://material.angular.io/cdk/test-harnesses

How to test angular material date picker?

1 Answers