From 512c85fc3875d4be207080fe869c7a0b0f5c72cf Mon Sep 17 00:00:00 2001 From: wenqi73 <1264578441@qq.com> Date: Thu, 31 Oct 2019 20:18:56 +0800 Subject: [PATCH] fix: change the test to en_US locale --- .../date-picker/abstract-picker.component.ts | 2 +- .../date-range-picker.component.ts | 2 +- .../nz-date-picker.component.spec.ts | 71 +++++++------------ .../nz-range-picker.component.spec.ts | 41 ++++++----- 4 files changed, 51 insertions(+), 65 deletions(-) diff --git a/components/date-picker/abstract-picker.component.ts b/components/date-picker/abstract-picker.component.ts index c27bd768749..c250c666bf7 100644 --- a/components/date-picker/abstract-picker.component.ts +++ b/components/date-picker/abstract-picker.component.ts @@ -180,7 +180,7 @@ export abstract class AbstractPickerComponent implements OnInit, OnChanges, OnDe this.cdr.markForCheck(); } - private setFormat(): void {} + protected setFormat(): void {} private setDefaultPlaceHolder(): void { if (!this.isCustomPlaceHolder && this.nzLocale) { diff --git a/components/date-picker/date-range-picker.component.ts b/components/date-picker/date-range-picker.component.ts index f62e4f07a42..00b934036bc 100644 --- a/components/date-picker/date-range-picker.component.ts +++ b/components/date-picker/date-range-picker.component.ts @@ -91,7 +91,7 @@ export class DateRangePickerComponent extends AbstractPickerComponent implements } } - private setFormat(): void { + protected setFormat(): void { // Default format when it's empty if (this.showWeek) { // TODO: Complete weekFormat in every locale file diff --git a/components/date-picker/nz-date-picker.component.spec.ts b/components/date-picker/nz-date-picker.component.spec.ts index c4ff3fc0230..41ca658bdf2 100644 --- a/components/date-picker/nz-date-picker.component.spec.ts +++ b/components/date-picker/nz-date-picker.component.spec.ts @@ -10,10 +10,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { isSameDay } from 'date-fns'; import { dispatchKeyboardEvent, dispatchMouseEvent, typeInElement, NgStyleInterface } from 'ng-zorro-antd/core'; -import en_US from '../i18n/languages/en_US'; -import { enUS } from 'date-fns/locale'; -import { NzI18nModule, NzI18nService, NZ_DATE_LOCALE } from 'ng-zorro-antd/i18n'; +import { en_US, zh_CN, NzI18nModule, NzI18nService, NZ_I18N } from 'ng-zorro-antd/i18n'; import { NzDatePickerComponent } from './nz-date-picker.component'; import { NzDatePickerModule } from './nz-date-picker.module'; @@ -31,6 +29,7 @@ describe('NzDatePickerComponent', () => { TestBed.configureTestingModule({ imports: [FormsModule, NoopAnimationsModule, NzDatePickerModule, NzI18nModule], providers: [ + { provide: NZ_I18N, useValue: en_US } // { provide: NZ_DATE_CONFIG, useValue: { firstDayOfWeek: 1 } } ], declarations: [NzTestDatePickerComponent] @@ -130,21 +129,19 @@ describe('NzDatePickerComponent', () => { })); it('should support changing language at runtime', fakeAsync(() => { - fixture.detectChanges(); - expect(getPickerTrigger().placeholder).toBe('请选择日期'); - i18nService.setLocale(en_US); - // i18nService.setDateLocale(en); fixture.detectChanges(); expect(getPickerTrigger().placeholder).toBe('Select date'); - + i18nService.setLocale(zh_CN); + fixture.detectChanges(); + expect(getPickerTrigger().placeholder).toBe('请选择日期'); dispatchMouseEvent(getPickerTriggerWrapper(), 'click'); fixture.detectChanges(); tick(500); fixture.detectChanges(); expect( (queryFromOverlay('.ant-calendar-date-input-wrap input.ant-calendar-input') as HTMLInputElement).placeholder - ).toBe('Select date'); - expect(queryFromOverlay('.ant-calendar-table .ant-calendar-column-header-inner').textContent).toContain('Su'); + ).toBe('请选择日期'); + expect(queryFromOverlay('.ant-calendar-table .ant-calendar-column-header-inner').textContent).toContain('一'); })); /* Issue https://github.com/NG-ZORRO/ng-zorro-antd/issues/1539 */ @@ -265,10 +262,10 @@ describe('NzDatePickerComponent', () => { fixture.detectChanges(); }; // Should fail to submit a disabled date - submit('2018-11-15'); + submit('11/15/2018'); expect(getPickerContainer()).not.toBeNull(); // But it should be fine to submit an enabled date - submit('2018-11-11'); + submit('11/11/2019'); expect(getPickerContainer()).toBeNull(); })); @@ -406,6 +403,18 @@ describe('NzDatePickerComponent', () => { expect(result.getMonth() + 1).toBe(10); expect(result.getDate()).toBe(25); })); + + it('should nzFormat has default value', fakeAsync(() => { + fixtureInstance.nzValue = new Date('2019-10-31 18:30:13'); + fixtureInstance.nzShowTime = true; + i18nService.setLocale(zh_CN); + fixture.detectChanges(); + expect(fixtureInstance.datePickerComp.defaultFormat).toBe('YYYY年M月D日 HH时mm分ss秒'); + openPickerByClickTrigger(); + expect((queryFromOverlay('input.ant-calendar-input') as HTMLInputElement).value).toBe( + '2019年10月31日 18时30分13秒' + ); + })); }); describe('panel switch and move forward/afterward', () => { @@ -414,8 +423,6 @@ describe('NzDatePickerComponent', () => { it('should support date panel changes', fakeAsync(() => { fixtureInstance.nzValue = new Date('2018-11-11'); fixture.detectChanges(); - tick(500); - fixture.detectChanges(); openPickerByClickTrigger(); // Click previous year button dispatchMouseEvent(queryFromOverlay('.ant-calendar-prev-year-btn'), 'click'); @@ -438,7 +445,7 @@ describe('NzDatePickerComponent', () => { fixture.detectChanges(); tick(500); fixture.detectChanges(); - expect(queryFromOverlay('.ant-calendar-month-select').textContent!.indexOf('10') > -1).toBeTruthy(); + expect(queryFromOverlay('.ant-calendar-month-select').textContent!.indexOf('Oct') > -1).toBeTruthy(); // Click next month button * 2 dispatchMouseEvent(queryFromOverlay('.ant-calendar-next-month-btn'), 'click'); fixture.detectChanges(); @@ -448,7 +455,7 @@ describe('NzDatePickerComponent', () => { fixture.detectChanges(); tick(500); fixture.detectChanges(); - expect(queryFromOverlay('.ant-calendar-month-select').textContent!.indexOf('12') > -1).toBeTruthy(); + expect(queryFromOverlay('.ant-calendar-month-select').textContent!.indexOf('Dec') > -1).toBeTruthy(); })); it('should support month panel changes', fakeAsync(() => { @@ -658,7 +665,7 @@ describe('NzDatePickerComponent', () => { fixture.detectChanges(); flush(); fixture.detectChanges(); - expect((queryFromOverlay('input.ant-calendar-input') as HTMLInputElement).value).toBe('2018-11-11 00:22:33'); + expect((queryFromOverlay('input.ant-calendar-input') as HTMLInputElement).value).toBe('11/11/2018 00:22:33'); })); it('should not reset time', fakeAsync(() => { @@ -672,7 +679,7 @@ describe('NzDatePickerComponent', () => { fixture.detectChanges(); flush(); fixture.detectChanges(); - expect((queryFromOverlay('input.ant-calendar-input') as HTMLInputElement).value).toBe('2019-07-29 13:03:33'); + expect((queryFromOverlay('input.ant-calendar-input') as HTMLInputElement).value).toBe('7/28/2019 13:03:33'); })); it('should support nzShowTime.nzFormat', fakeAsync(() => { @@ -821,7 +828,7 @@ describe('NzDatePickerComponent', () => { expect(input.classList.contains('ant-calendar-input-invalid')).toBeTruthy(); // Correct inputing - input.value = '2018-11-22'; + input.value = '11/22/2018'; input.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' })); // dispatchKeyboardEvent(input, 'keyup', ENTER); // Not working? fixture.detectChanges(); @@ -890,32 +897,6 @@ describe('NzDatePickerComponent', () => { } }); -describe('date-fns testing', () => { - let fixture: ComponentFixture; - let fixtureInstance: NzTestDatePickerComponent; - - beforeEach(fakeAsync(() => { - TestBed.configureTestingModule({ - imports: [FormsModule, NoopAnimationsModule, NzDatePickerModule, NzI18nModule], - providers: [{ provide: NZ_DATE_LOCALE, useValue: enUS }], - declarations: [NzTestDatePickerComponent] - }); - TestBed.compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(NzTestDatePickerComponent); - fixtureInstance = fixture.componentInstance; - fixtureInstance.useSuite = 1; - }); - - it('should nzFormat has default value', fakeAsync(() => { - fixtureInstance.nzShowTime = true; - fixture.detectChanges(); - expect(fixtureInstance.datePickerComp.nzFormat).toBe('MMM d, y h:mm:ss a'); - })); -}); - @Component({ template: ` diff --git a/components/date-picker/nz-range-picker.component.spec.ts b/components/date-picker/nz-range-picker.component.spec.ts index f4c979e4067..55b3314b60c 100644 --- a/components/date-picker/nz-range-picker.component.spec.ts +++ b/components/date-picker/nz-range-picker.component.spec.ts @@ -10,6 +10,7 @@ import { differenceInDays, isSameDay } from 'date-fns'; import { dispatchMouseEvent, typeInElement, NgStyleInterface } from 'ng-zorro-antd/core'; +import { en_US, NzI18nModule, NZ_I18N } from 'ng-zorro-antd'; import { CandyDate } from '../core'; import { NzDatePickerModule } from './nz-date-picker.module'; @@ -24,8 +25,8 @@ describe('NzRangePickerComponent', () => { beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ - imports: [FormsModule, NoopAnimationsModule, NzDatePickerModule], - providers: [], + imports: [FormsModule, NoopAnimationsModule, NzDatePickerModule, NzI18nModule], + providers: [{ provide: NZ_I18N, useValue: en_US }], declarations: [NzTestRangePickerComponent] }); @@ -338,7 +339,7 @@ describe('NzRangePickerComponent', () => { dispatchMouseEvent(queryFromOverlay('.ant-calendar-range-left .ant-calendar-prev-month-btn'), 'click'); fixture.detectChanges(); expect( - queryFromOverlay('.ant-calendar-range-left .ant-calendar-month-select').textContent!.indexOf('5') > -1 + queryFromOverlay('.ant-calendar-range-left .ant-calendar-month-select').textContent!.indexOf('May') > -1 ).toBeTruthy(); // Click next month button * 2 dispatchMouseEvent(queryFromOverlay('.ant-calendar-range-left .ant-calendar-next-month-btn'), 'click'); @@ -346,7 +347,7 @@ describe('NzRangePickerComponent', () => { dispatchMouseEvent(queryFromOverlay('.ant-calendar-range-left .ant-calendar-next-month-btn'), 'click'); fixture.detectChanges(); expect( - queryFromOverlay('.ant-calendar-range-left .ant-calendar-month-select').textContent!.indexOf('7') > -1 + queryFromOverlay('.ant-calendar-range-left .ant-calendar-month-select').textContent!.indexOf('Jul') > -1 ).toBeTruthy(); })); }); // /panel switch and move forward/afterward @@ -397,7 +398,7 @@ describe('NzRangePickerComponent', () => { 'click' ); fixture.detectChanges(); - expect(getPickerPanelLeftInput().value).toBe('2018-11-11 00:22:33'); + expect(getPickerPanelLeftInput().value).toBe('11/11/2018 00:22:33'); })); it('should support nzShowTime.nzFormat', fakeAsync(() => { @@ -611,14 +612,18 @@ describe('NzRangePickerComponent', () => { fixture.detectChanges(); openPickerByClickTrigger(); - expect(queryFromOverlay('.ant-calendar-range-right .ant-calendar-month-select').textContent).toContain('6'); + expect(queryFromOverlay('.ant-calendar-range-right .ant-calendar-month-select').textContent!.trim()).toContain( + 'Jun' + ); // Open time picker panel dispatchMouseEvent(queryFromOverlay('.ant-calendar-time-picker-btn'), 'click'); fixture.detectChanges(); tick(); fixture.detectChanges(); - expect(queryFromOverlay('.ant-calendar-range-right .ant-calendar-month-select').textContent).toContain('5'); + expect(queryFromOverlay('.ant-calendar-range-right .ant-calendar-month-select').textContent!.trim()).toContain( + 'May' + ); })); it('should support nzRanges', fakeAsync(() => { @@ -665,9 +670,9 @@ describe('NzRangePickerComponent', () => { const leftInput = getPickerPanelLeftInput(); const rightInput = getPickerPanelRightInput(); - typeInElement('2018-11-11', leftInput); + typeInElement('11/11/2018', leftInput); fixture.detectChanges(); - typeInElement('2018-12-12', rightInput); + typeInElement('12/12/2018', rightInput); rightInput.dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' })); fixture.detectChanges(); tick(500); @@ -687,14 +692,14 @@ describe('NzRangePickerComponent', () => { const leftInput = getPickerPanelLeftInput(); const rightInput = getPickerPanelRightInput(); - const newDateString = ['2019-09-15 11:08:22', '2020-10-10 11:08:22']; + const newDateString = ['9/15/2019 11:08:22', '10/10/2020 11:08:22']; typeInElement(newDateString[0], leftInput); fixture.detectChanges(); typeInElement(newDateString[1], rightInput); rightInput.dispatchEvent(new KeyboardEvent('keyup', { key: 'enter' })); fixture.detectChanges(); tick(500); - expect(nzOnChange).toHaveBeenCalledWith([new Date(newDateString[0]), new Date(newDateString[1])]); + expect(nzOnChange).toHaveBeenCalledWith([new Date('2019-09-15 11:08:22'), new Date('2020-10-10 11:08:22')]); })); it('should not change value when click ESC', fakeAsync(() => { @@ -706,18 +711,18 @@ describe('NzRangePickerComponent', () => { const leftInput = getPickerPanelLeftInput(); const rightInput = getPickerPanelRightInput(); - typeInElement('2019-11-05', leftInput); + typeInElement('11/5/2019', leftInput); fixture.detectChanges(); // value should be change expect(getFirstSelectedDayCell().textContent!.trim()).toBe('5'); - typeInElement('2019-12-08', rightInput); + typeInElement('12/8/2019', rightInput); fixture.detectChanges(); tick(500); expect(getSecondSelectedDayCell().textContent!.trim()).toBe('8'); dispatchMouseEvent(queryFromOverlay('.cdk-overlay-backdrop'), 'click'); fixture.detectChanges(); tick(500); - expect(getRangePickerLeftInput()!.value).toBe('2018-09-11'); + expect(getRangePickerLeftInput()!.value).toBe('9/11/2018'); })); it('should auto sort range value when start is after end', fakeAsync(() => { @@ -725,12 +730,12 @@ describe('NzRangePickerComponent', () => { openPickerByClickTrigger(); const leftInput = getPickerPanelLeftInput(); const rightInput = getPickerPanelRightInput(); - typeInElement('2019-08-10', leftInput); + typeInElement('8/10/2019', leftInput); fixture.detectChanges(); - typeInElement('2018-02-06', rightInput); + typeInElement('2/6/2018', rightInput); fixture.detectChanges(); - expect(leftInput.value).toBe('2018-02-06'); - expect(rightInput.value).toBe('2019-08-10'); + expect(leftInput.value).toBe('2/6/2018'); + expect(rightInput.value).toBe('8/10/2019'); })); }); // /specified date picker testing