Skip to content

Commit

Permalink
fix(module: date-picker): fix year-picker and month-picker style erro…
Browse files Browse the repository at this point in the history
…r within compacted input group (NG-ZORRO#2136)

GLTM
  • Loading branch information
hungtcs authored and vthinkxie committed Sep 19, 2018
1 parent 6063823 commit 0704682
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 8 deletions.
24 changes: 21 additions & 3 deletions components/date-picker/month-picker.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import isBefore from 'date-fns/is_before';
import { dispatchMouseEvent } from '../core/testing';
import { NzInputModule } from '../input/nz-input.module';
import { NzDatePickerModule } from './date-picker.module';
import { CandyDate } from './lib/candy-date';
import { PickerResultSingle } from './standard-types';
Expand All @@ -24,7 +25,7 @@ describe('NzMonthPickerComponent', () => {

beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports : [ FormsModule, NoopAnimationsModule, NzDatePickerModule ],
imports : [FormsModule, NoopAnimationsModule, NzDatePickerModule, NzInputModule ],
providers : [],
declarations: [
NzTestMonthPickerComponent
Expand Down Expand Up @@ -146,10 +147,21 @@ describe('NzMonthPickerComponent', () => {
it('should support nzClassName', () => {
const className = fixtureInstance.nzClassName = 'my-test-class';
fixture.detectChanges();
const picker = debugElement.query(By.css('.ant-calendar-picker')).nativeElement as HTMLElement;
const picker = debugElement.queryAll(By.css('.ant-calendar-picker'))[1].nativeElement as HTMLElement;
expect(picker.classList.contains(className)).toBeTruthy();
});

it('should support nzCompact', () => {
fixtureInstance.useSuite = 4;

fixture.detectChanges();
const pickerInput = debugElement.query(By.css('input.ant-calendar-picker-input')).nativeElement as HTMLElement;
expect(pickerInput).not.toBeNull();
const compStyles = window.getComputedStyle(pickerInput);
expect(compStyles.getPropertyValue('border-top-right-radius') === '0px').toBeTruthy();
expect(compStyles.getPropertyValue('border-bottom-right-radius') === '0px').toBeTruthy();
});

it('should support nzDisabledDate', fakeAsync(() => {
fixture.detectChanges();
const compareDate = new Date('2018-11-15 00:00:00');
Expand Down Expand Up @@ -441,11 +453,17 @@ describe('NzMonthPickerComponent', () => {
<!-- Suite 3 -->
<nz-month-picker *ngSwitchCase="3" nzOpen [(ngModel)]="modelValue"></nz-month-picker>
<!-- Suite 4 -->
<nz-input-group *ngSwitchCase="4" nzCompact>
<nz-month-picker style="width: 200px;"></nz-month-picker>
<input nz-input type="text" style="width: 200px;" />
</nz-input-group>
</ng-container>
`
})
class NzTestMonthPickerComponent {
useSuite: 1 | 2 | 3;
useSuite: 1 | 2 | 3 | 4;
@ViewChild('tplExtraFooter') tplExtraFooter: TemplateRef<void>;

// --- Suite 1
Expand Down
3 changes: 2 additions & 1 deletion components/date-picker/month-picker.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import { HeaderPickerComponent, SupportHeaderPanel } from './header-picker.compo
useExisting: forwardRef(() => NzMonthPickerComponent)
}],
host : {
'[class.ant-checkbox-group]': 'true'
'[class.ant-checkbox-group]': 'true',
'[class.ant-calendar-picker]': 'true'
}
})

Expand Down
25 changes: 22 additions & 3 deletions components/date-picker/year-picker.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import * as isBefore from 'date-fns/is_before';
import { dispatchMouseEvent } from '../core/testing';
import { NzInputModule } from '../input/nz-input.module';
import { NzDatePickerModule } from './date-picker.module';
import { CandyDate } from './lib/candy-date';
import { PickerResultSingle } from './standard-types';
Expand All @@ -24,7 +25,7 @@ describe('NzYearPickerComponent', () => {

beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports : [ FormsModule, NoopAnimationsModule, NzDatePickerModule ],
imports : [ FormsModule, NoopAnimationsModule, NzDatePickerModule, NzInputModule ],
providers : [],
declarations: [
NzTestYearPickerComponent
Expand Down Expand Up @@ -146,10 +147,21 @@ describe('NzYearPickerComponent', () => {
it('should support nzClassName', () => {
const className = fixtureInstance.nzClassName = 'my-test-class';
fixture.detectChanges();
const picker = debugElement.query(By.css('.ant-calendar-picker')).nativeElement as HTMLElement;
const picker = debugElement.queryAll(By.css('.ant-calendar-picker'))[1].nativeElement as HTMLElement;
expect(picker.classList.contains(className)).toBeTruthy();
});

it('should support nzCompact', () => {
fixtureInstance.useSuite = 4;

fixture.detectChanges();
const pickerInput = debugElement.query(By.css('input.ant-calendar-picker-input')).nativeElement as HTMLElement;
expect(pickerInput).not.toBeNull();
const compStyles = window.getComputedStyle(pickerInput);
expect(compStyles.getPropertyValue('border-top-right-radius') === '0px').toBeTruthy();
expect(compStyles.getPropertyValue('border-bottom-right-radius') === '0px').toBeTruthy();
});

it('should support nzLocale', () => {
const featureKey = 'TEST_PLACEHOLDER';
fixtureInstance.nzLocale = { lang: { placeholder: featureKey } };
Expand Down Expand Up @@ -386,11 +398,18 @@ describe('NzYearPickerComponent', () => {
<!-- Suite 3 -->
<nz-year-picker *ngSwitchCase="3" nzOpen [(ngModel)]="modelValue"></nz-year-picker>
<!-- Suite 4 -->
<nz-input-group *ngSwitchCase="4" nzCompact>
<nz-year-picker style="width: 200px;"></nz-year-picker>
<input nz-input type="text" style="width: 200px;" />
</nz-input-group>
</ng-container>
`
})
class NzTestYearPickerComponent {
useSuite: 1 | 2 | 3;
useSuite: 1 | 2 | 3 | 4;
@ViewChild('tplExtraFooter') tplExtraFooter: TemplateRef<void>;

// --- Suite 1
Expand Down
3 changes: 2 additions & 1 deletion components/date-picker/year-picker.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import { HeaderPickerComponent, SupportHeaderPanel } from './header-picker.compo
useExisting: forwardRef(() => NzYearPickerComponent)
}],
host : {
'[class.ant-checkbox-group]': 'true'
'[class.ant-checkbox-group]': 'true',
'[class.ant-calendar-picker]': 'true'
}
})

Expand Down

0 comments on commit 0704682

Please sign in to comment.