fix(module:message): increase the overlay's zindex tobe the same with… (

#1461)

* fix(module:message): increase the overlay's zindex tobe the same with the inner original zindex style

close #1457

* test(module:message,time-picker): add more testing

components/message/nz-message.service.ts

@@ -60,7 +60,9 @@ export class NzMessageBaseService<ContainerClass extends NzMessageContainerCompo
     const componentRef = factory.create(this.injector); // Use root injector
     componentRef.changeDetectorRef.detectChanges(); // Immediately change detection to avoid multi-checking error
     this.appRef.attachView(componentRef.hostView); // Load view into app root
-    this.overlay.create().overlayElement.appendChild((componentRef.hostView as EmbeddedViewRef<{}>).rootNodes[0] as HTMLElement);
+    const overlayPane = this.overlay.create().overlayElement;
+    overlayPane.style.zIndex = '1010'; // Patching: assign the same zIndex of ant-message to it's parent overlay panel, to the ant-message's zindex work.
+    overlayPane.appendChild((componentRef.hostView as EmbeddedViewRef<{}>).rootNodes[0] as HTMLElement);
 
     return componentRef.instance;
   }

components/message/nz-message.spec.ts

@@ -44,6 +44,7 @@ describe('NzMessage', () => {
     messageService.success('SUCCESS');
     demoAppFixture.detectChanges();
 
+    expect((overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement).style.zIndex).toBe('1010');
     expect(overlayContainerElement.textContent).toContain('SUCCESS');
     expect(overlayContainerElement.querySelector('.anticon-check-circle')).not.toBeNull();
   }));
@@ -96,7 +97,7 @@ describe('NzMessage', () => {
 
     const messageElement = overlayContainerElement.querySelector('.ant-message-notice');
     dispatchMouseEvent(messageElement, 'mouseenter');
-    tick(50000);
+    tick(1000);
     expect(overlayContainerElement.textContent).toContain('EXISTS');
 
     dispatchMouseEvent(messageElement, 'mouseleave');
@@ -146,7 +147,7 @@ describe('NzMessage', () => {
     messageService.config({ nzDuration: 0 });
     messageService.create('loading', 'EXISTS');
     demoAppFixture.detectChanges();
-    tick(50000);
+    tick(1000);
     expect(overlayContainerElement.textContent).toContain('EXISTS');
   }));
 });

components/time-picker/nz-time-picker-panel.component.spec.ts

@@ -25,6 +25,7 @@ describe('time-picker-panel', () => {
       panelElement = fixture.debugElement.query(By.directive(NzTimePickerPanelComponent));
     });
     it('should init correct', () => {
+      testComponent.inDatePicker = true;
       fixture.detectChanges();
       expect(panelElement.nativeElement.classList).toContain('ant-time-picker-panel');
     });
@@ -188,6 +189,7 @@ export class NzTestTimePanelComponent {
       [nzDefaultOpenValue]="openValue"
       [nzSecondStep]="secondStep"
       [nzMinuteStep]="minuteStep"
+      [nzInDatePicker]="inDatePicker"
       [nzHideDisabledOptions]="hideDisabledOptions"
       [nzHourStep]="hourStep">
     </nz-time-picker-panel>`,
@@ -197,6 +199,7 @@ export class NzTestTimePanelComponent {
   ]
 })
 export class NzTestTimePanelDisabledComponent {
+  inDatePicker = false;
   secondStep = 1;
   minuteStep = 1;
   hourStep = 1;