fix(datepicker): allow MatCalendarHeader to be re-used inside a custom header #10856

tobiasschweizer · 2018-04-14T09:14:46Z

This PR makes MatCalendarHeader available for the use from the outside of MatCalendar. Like this, custom calendar header components may make use of the selector mat-calendar-header.

tobiasschweizer · 2018-04-14T09:16:52Z

@mmalerba Where should the test case be added? I could make a custom header component that uses mat-calendar-header and add it to the datepicker demo (004fc44).

Or should it be a unit test in the spec file?

…der to demo

tobiasschweizer · 2018-04-14T11:50:08Z

src/demo-app/datepicker/datepicker-demo.ts

+  moduleId: module.id,
+  selector: 'custom-header2',
+  template: `
+  <div>Custom element</div>


@mmalerba Prepending elements may break the design (missing space at the bottom of the calendar body). Can this be solved with CSS?

Yeah that's a good point. I think for now if people are overriding the header they can just add CSS to make the popup taller as well. It would be good to see if we can change the Material CSS to make it work automatically though

mmalerba · 2018-04-16T16:38:46Z

src/demo-app/datepicker/datepicker-demo.ts

+  moduleId: module.id,
+  selector: 'custom-header2',
+  template: `
+  <div>Custom element</div>


Yeah that's a good point. I think for now if people are overriding the header they can just add CSS to make the popup taller as well. It would be good to see if we can change the Material CSS to make it work automatically though

mmalerba · 2018-04-16T16:42:43Z

src/demo-app/datepicker/datepicker-demo.html

+
+<h2>Datepicker with custom header using standard header</h2>
+<p>
+  <mat-form-field>


Can you create a unit test version of this that just tests that the component can be constructed without errors and the default header is in the DOM?

I guess src/lib/datepicker/datepicker.spec.ts would be a good place for that. I could move my test component CustomHeader2 there and create a test case where it is used as an input for the header.

Yeah that sounds good, you can leave it in the demo app too if you want, but the unit test is most important

…going)

tobiasschweizer · 2018-04-16T19:02:22Z

src/lib/datepicker/datepicker.spec.ts

+class DatepickerWithCustomHeader {
+  @ViewChild('ch') datepicker: MatDatepicker<Date>;
+  @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput<Date>;
+}


@mmalerba

I tried to add the custom header component as an input:

@Component({ template: ` <input [matDatepicker]="ch"> <mat-datepicker #ch [calendarHeaderComponent]="CustomHeaderForDatepicker"></mat-datepicker> `, }) class DatepickerWithCustomHeader { @ViewChild('ch') datepicker: MatDatepicker<Date>; @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput<Date>; } @Component({ template: ` <div>Custom element</div> <mat-calendar-header></mat-calendar-header> ` }) export class CustomHeaderForDatepicker { constructor() { } }

But I get:

: Cannot determine the module for class CustomHeaderForDatepicker in /src/lib/datepicker/datepicker.spec.ts! Add CustomHeaderForDatepicker to the NgModule to fix it.

I remember that I had to add the custom header component to entryComponents for the demo page. How would that work for a test?

Is this a possible solution https://stackoverflow.com/questions/41483841/providing-entrycomponents-for-a-testbed?

Is this correct?

@Component({ template: ` <div>Custom element</div> <mat-calendar-header></mat-calendar-header> ` }) export class CustomHeaderForDatepicker { constructor() { } } @NgModule({ imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [CustomHeaderForDatepicker], entryComponents: [CustomHeaderForDatepicker] }) export class CustomHeaderModule {}

You can modify the createComponent function to take an optional list of entryComponents. It already had optional lists for imports and providers

entryComponents is not a member of the expected configuration object

static configureTestingModule(moduleDef: TestModuleMetadata): typeof TestBed;

export declare type TestModuleMetadata = { providers?: any[]; declarations?: any[]; imports?: any[]; schemas?: Array<SchemaMetadata | any[]>; aotSummaries?: () => any[]; };

Is this the way to do it angular/angular#10760 (comment) ?

So the proposed solution would be

// Creates a test component fixture. function createComponent( component: any, imports: any[] = [], providers: any[] = [], entryComponents: any[] = []): ComponentFixture<any> { TestBed.configureTestingModule({ imports: [ FormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, NoopAnimationsModule, ReactiveFormsModule, ...imports ], providers, declarations: [component], }); TestBed.overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [entryComponents] } }).compileComponents(); return TestBed.createComponent(component); }

I tried this with the modified createComponent function:

describe('datepicker with custom header', () => { let fixture: ComponentFixture<DatepickerWithCustomHeader>; let testComponent: DatepickerWithCustomHeader; beforeEach(fakeAsync(() => { fixture = createComponent( DatepickerWithCustomHeader, [MatNativeDateModule], [], [CustomHeaderForDatepicker] ); fixture.detectChanges(); testComponent = fixture.componentInstance; })); it('should instantiate a datepicker with a custom header', fakeAsync(() => { expect(testComponent).toBeTruthy(); })); }); ... @Component({ template: ` <input [matDatepicker]="ch"> <mat-datepicker #ch [calendarHeaderComponent]="CustomHeaderForDatepicker"></mat-datepicker> `, }) class DatepickerWithCustomHeader { @ViewChild('ch') datepicker: MatDatepicker<Date>; @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput<Date>; } @Component({ template: ` <div>Custom element</div> <mat-calendar-header></mat-calendar-header> ` }) export class CustomHeaderForDatepicker { constructor() { } }

However, I still get

: Cannot determine the module for class CustomHeaderForDatepicker in material2/src/lib/datepicker/datepicker.spec.ts! Add CustomHeaderForDatepicker to the NgModule to fix it.

I think maybe the fact that you're exporting the class is the problem. Did you try just

class CustomHeaderForDatepicker { ... }

@mmalerba

done in 6aca934

However, there are still some issues:

tslint complains about import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing'; -> missing in rollup-globals.ts:

ERROR: /home/travis/build/angular/material2/src/lib/datepicker/datepicker.spec.ts[33, 1]: Module "@angular/platform-browser-dynamic/testing" is missing from file /home/travis/build/angular/material2/tools/package-tools/rollup-globals.ts.

the test is executed now but fails. It complains about a missing import:

should instantiate a datepicker with a custom header
MatDatepicker datepicker with custom header
Error: Component CustomHeaderForDatepicker is not part of any NgModule or the module has not been imported into your module. (line 22757)

But if I add CustomHeaderForDatepicker as an import to createComponent it fails too

I would be glad for any advice ;-)

Ah, I forgot to add the custom header to declarations (https://stackoverflow.com/questions/44827999/component-is-not-part-of-any-ngmodule-or-the-module-has-not-been-imported-into-y?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa).

Done in 5ee44e7 Sorry!

lint problem should be fixed in e189b23

…ary)

mmalerba · 2018-04-18T15:44:41Z

src/lib/datepicker/datepicker.spec.ts

@@ -49,7 +56,13 @@ describe('MatDatepicker', () => {
        ...imports
      ],
      providers,
-      declarations: [component],
+      declarations: declarations,


I don't think we need to take declarations in as a separate thing, you can just do:

declarations: [component, ...entryComponents]

done in 47acc75

mmalerba · 2018-04-18T15:50:18Z

src/lib/datepicker/datepicker.spec.ts

+    }));
+
+    it('should instantiate a datepicker with a custom header', fakeAsync(() => {
+      expect(testComponent).toBeTruthy();


One more thing to check:

expect(fixture.debugElement.nativeElement.querySelector('mat-calendar-header')).toBeTruthy();

Hm, it does not find it.

Do I need to do testComponent.datepicker.open(); before?

I imagined a thing like this:

it('should find the standard header selector', fakeAsync(() => { testComponent.datepicker.open(); fixture.detectChanges(); expect(fixture.debugElement.nativeElement.querySelector('mat-calendar-header')).toBeTruthy(); }));

done in 45eb7d7

But I had to use expect(document.querySelector('mat-calendar-header')).toBeTruthy();

I saw a lot of examples like this in the spec file.

Did you try fixture.nativeElement.querySelector(...) (with no debugElement)? I see this elsewhere in the file too. Using document.querySelector doesn't feel quite right...

I know what you mean, you want to get the content from the parent element.

Unfortunately fixture.nativeElement.querySelector('mat-calendar-header') yields null.

When I do console.log(fixture.nativeElement); I get

<div id="root1" ng-version="6.0.0-rc.5"> <input ng-reflect-mat-datepicker="[object Object]" aria-haspopup="true" aria-owns="mat-datepicker-1"> <mat-datepicker></mat-datepicker> </div>

This corresponds with the selectors in the template of DatepickerWithCustomHeader. The selectors should be replaced by their associates templates so we could query for the actual DOM-elements.

Oh I think I understand what's happening. The overlay must be adding itself to document.body which is outside the fixture. Ok document.querySelector is fine then

@mmalerba In case there are more things left to do for this PR, please let me know. I can take care of it tomorrow or Friday. Then I will be away for two weeks.

mmalerba · 2018-04-18T15:51:17Z

src/lib/datepicker/datepicker.spec.ts

+  `,
+})
+class DatepickerWithCustomHeader {
+  @ViewChild('ch') datepicker: MatDatepicker<Date>;


Don't need these ViewChild since they aren't used for anything in the test

I left the datepicker in 47acc75 for the moment

mmalerba · 2018-04-18T15:51:30Z

src/lib/datepicker/datepicker.spec.ts

+  `
+})
+class CustomHeaderForDatepicker {
+  constructor() {


Can omit the constructor

done in 47acc75

…der selector

mmalerba · 2018-04-18T21:49:09Z

src/lib/datepicker/datepicker.spec.ts

+      expect(testComponent).toBeTruthy();
+    }));
+
+    it('should find the standard header selector', fakeAsync(() => {


nit: 'should find the standard header element'

done in ea5e99b

tobiasschweizer · 2018-04-18T21:58:59Z

@mmalerba There seem to be some issues with the integration tests (mode saucelabs required), I can see some failing for other PRs too. I do not think the failing tests are specifically related to this PR.

mmalerba · 2018-04-18T22:01:39Z

yeah CI has been a little flaky lately, probably unrelated

rafaelss95 · 2018-04-18T23:16:25Z

src/lib/datepicker/datepicker.spec.ts

+    component: any,
+    imports: any[] = [],
+    providers: any[] = [],
+    entryComponents: any[] = []): ComponentFixture<any> {


nit: you could use better types instead of any:

import {Component, FactoryProvider, Type, ValueProvider, ViewChild} from '@angular/core'; ... function createComponent( component: Type<any>, imports: Type<any>[] = [], providers: (FactoryProvider | ValueProvider)[] = [], entryComponents: Type<any>[] = []): ComponentFixture<any> { ... }

done in 811ee17

rafaelss95 · 2018-04-18T23:17:32Z

src/lib/datepicker/datepicker.spec.ts

+@Component({
+  template: `
+  <div>Custom element</div>
+  <mat-calendar-header></mat-calendar-header>


Missing indentation for template?

done in 811ee17

angular-automatic-lock-bot · 2019-09-08T19:01:57Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

refactor (MatCalendarHeader): remove Host decorator

6c464a0

tobiasschweizer requested a review from mmalerba as a code owner April 14, 2018 09:14

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Apr 14, 2018

fix (remove unused import)

9e86875

tobiasschweizer mentioned this pull request Apr 14, 2018

refactor (use material2 builds) dhlab-basel/JDNConvertibleCalendarDateAdapter#6

Closed

feature (MatCalendarHeader): add custom header using the standard hea…

004fc44

…der to demo

tobiasschweizer requested a review from jelbourn as a code owner April 14, 2018 11:48

tobiasschweizer commented Apr 14, 2018

View reviewed changes

fix (ts lint)

efc3153

mmalerba reviewed Apr 16, 2018

View reviewed changes

Tobias Schweizer added 3 commits April 16, 2018 20:48

test (MatCalendarHeader): add a unit test for custom header input (on…

4702cbc

…going)

refactor (styling)

3ae0cd1

refactor (styling)

fa7e4b7

tobiasschweizer commented Apr 16, 2018

View reviewed changes

Tobias Schweizer added 6 commits April 17, 2018 07:38

test (MatCalendarHeader): pass header component to datepicker

136a63a

Merge branch 'master' into tobiasschweizer/calendar_header

76ed3b0

test (MatCalendarHeader): remove header component to fix test (tempor…

a7ec618

…ary)

test (MatCalendarHeader): provide entryComponents

6aca934

test (MatCalendarHeader): add custom header component to declarations

5ee44e7

fix (MatCalendarHeader): fix issue with rollup-globals

e189b23

tobiasschweizer requested a review from devversion as a code owner April 18, 2018 05:36

Merge branch 'master' into tobiasschweizer/calendar_header

ffbb4dc

mmalerba reviewed Apr 18, 2018

View reviewed changes

Tobias Schweizer added 2 commits April 18, 2018 19:22

test (MatCalendarHeader): get rid of declarations param

47acc75

test (MatCalendarHeader): add test to check for standard calendar hea…

45eb7d7

…der selector

mmalerba approved these changes Apr 18, 2018

View reviewed changes

mmalerba added pr: lgtm action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release labels Apr 18, 2018

mmalerba changed the title ~~MatCalendarHeader: allow for use from the outside of MatCalendar~~ fix(datepicker): allow MatCalendarHeader to be re-used inside a custom header Apr 18, 2018

test (MatCalendarHeader): rename test

ea5e99b

rafaelss95 reviewed Apr 18, 2018

View reviewed changes

test (MatCalendarHeader): type annotations

811ee17

mmalerba merged commit 153dfb8 into angular:master Apr 19, 2018

tobiasschweizer deleted the tobiasschweizer/calendar_header branch April 19, 2018 20:01

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

fix(datepicker): allow MatCalendarHeader to be re-used inside a custom header #10856

fix(datepicker): allow MatCalendarHeader to be re-used inside a custom header #10856

Conversation

tobiasschweizer commented Apr 14, 2018 • edited Loading

tobiasschweizer commented Apr 14, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tobiasschweizer Apr 17, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tobiasschweizer Apr 17, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tobiasschweizer Apr 17, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tobiasschweizer Apr 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tobiasschweizer Apr 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tobiasschweizer commented Apr 18, 2018

mmalerba commented Apr 18, 2018

rafaelss95 Apr 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rafaelss95 Apr 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 8, 2019

tobiasschweizer commented Apr 14, 2018 •

edited

Loading

tobiasschweizer commented Apr 14, 2018 •

edited

Loading

tobiasschweizer Apr 17, 2018 •

edited

Loading

tobiasschweizer Apr 17, 2018 •

edited

Loading

tobiasschweizer Apr 17, 2018 •

edited

Loading

tobiasschweizer Apr 18, 2018 •

edited

Loading

tobiasschweizer Apr 18, 2018 •

edited

Loading

rafaelss95 Apr 18, 2018 •

edited

Loading

rafaelss95 Apr 18, 2018 •

edited

Loading