test(date-picker): add test to cover custom template in calendar header

Author: didimmova

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -6,7 +6,7 @@ import {
     IgxHintDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective
 } from '../input-group/public_api';
 import { configureTestSuite } from '../test-utils/configure-suite';
-import { IFormattingViews, IgxCalendarComponent, WEEKDAYS } from '../calendar/public_api';
+import { IFormattingViews, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, WEEKDAYS } from '../calendar/public_api';
 import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component';
 import { IgxDatePickerComponent } from './date-picker.component';
 import {
@@ -35,7 +35,7 @@ const DATE_PICKER_CLEAR_ICON = 'clear';
 const CSS_CLASS_INPUT_GROUP_REQUIRED = 'igx-input-group--required';
 const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid';
 
-describe('IgxDatePicker', () => {
+fdescribe('IgxDatePicker', () => {
     describe('Integration tests', () => {
         configureTestSuite();
         beforeAll(waitForAsync(() => {
@@ -46,6 +46,7 @@ describe('IgxDatePicker', () => {
                     IgxDatePickerTestComponent,
                     IgxDatePickerNgModelComponent,
                     IgxDatePickerWithProjectionsComponent,
+                    IgxDatePickerWithTemplatesComponent,
                     IgxDatePickerInFormComponent,
                     IgxDatePickerReactiveFormComponent
                 ]
@@ -492,6 +493,47 @@ describe('IgxDatePicker', () => {
             });
         });
 
+        describe('Templated Header', () => {
+            let fixture: ComponentFixture<IgxDatePickerWithTemplatesComponent>;
+
+            beforeEach(fakeAsync(() => {
+              TestBed.configureTestingModule({
+                imports: [IgxDatePickerWithTemplatesComponent]
+              }).compileComponents();
+
+              fixture = TestBed.createComponent(IgxDatePickerWithTemplatesComponent);
+              fixture.detectChanges();
+            }));
+
+            it('Should use the custom template for header title', fakeAsync(() => {
+              const testDate = new Date(2024, 10, 11);
+              fixture.componentInstance.datePicker.value = testDate;
+              fixture.componentInstance.datePicker.open();
+              tick();
+              fixture.detectChanges();
+
+              const headerTitleElement = fixture.debugElement.query(By.css('.igx-calendar__header-year'));
+              expect(headerTitleElement).toBeTruthy('Header title element should be present');
+              if (headerTitleElement) {
+                expect(headerTitleElement.nativeElement.textContent.trim()).toBe('2024');
+              }
+            }));
+
+            it('Should use the custom template for header', fakeAsync(() => {
+              const testDate = new Date(2024, 10, 11);
+              fixture.componentInstance.datePicker.value = testDate;
+              fixture.componentInstance.datePicker.open();
+              tick();
+              fixture.detectChanges();
+
+              const headerElement = fixture.debugElement.query(By.css('.igx-calendar__header-date'));
+              expect(headerElement).toBeTruthy('Header element should be present');
+              if (headerElement) {
+                expect(headerElement.nativeElement.textContent.trim()).toBe('Nov');
+              }
+            }));
+        });
+
         describe('UI Interaction', () => {
             let fixture: ComponentFixture<any>;
             let datePicker: IgxDatePickerComponent;
@@ -1531,6 +1573,20 @@ export class IgxDatePickerWithProjectionsComponent {
     public showCustomClear = false;
 }
 
+@Component({
+    template: `
+    <igx-date-picker [mode]="mode">
+        <ng-template igxCalendarHeaderTitle let-formatCalendar>{{ formatCalendar.year.value }}</ng-template>
+        <ng-template igxCalendarHeader let-formatCalendar>{{ formatCalendar.month.value }}</ng-template>
+    </igx-date-picker>`,
+    standalone: true,
+    imports: [IgxDatePickerComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective]
+})
+export class IgxDatePickerWithTemplatesComponent {
+    @ViewChild(IgxDatePickerComponent) public datePicker: IgxDatePickerComponent;
+    public mode: PickerInteractionMode = PickerInteractionMode.Dialog;
+}
+
 @Component({
     template: `
     <form #form="ngForm">