From d36d73dde9c43f4cfc5e965e349c568bb46e3a00 Mon Sep 17 00:00:00 2001 From: Laffery <49607541+Laffery@users.noreply.github.com> Date: Thu, 3 Oct 2024 00:06:17 +0800 Subject: [PATCH] refactor(module:time-picker,timeline): migrate demo to standalone mode (#8815) * refactor(module:time-picker): migrate demo to standalone mode * refactor(module:timeline): migrate demo to standalone mode --- components/time-picker/demo/addon.ts | 6 ++ components/time-picker/demo/basic.ts | 7 +- components/time-picker/demo/bordered.ts | 7 +- components/time-picker/demo/disabled-part.ts | 4 + components/time-picker/demo/disabled.ts | 6 +- components/time-picker/demo/hide-column.ts | 7 +- .../time-picker/demo/interval-options.ts | 6 +- components/time-picker/demo/module | 5 - components/time-picker/demo/size.ts | 5 + components/time-picker/demo/status.ts | 12 ++- components/time-picker/demo/use12-hours.ts | 29 ++--- components/time-picker/demo/value.ts | 11 +- components/time-picker/time-holder.spec.ts | 2 + .../time-picker-panel.component.spec.ts | 90 +++++----------- .../time-picker/time-picker.component.spec.ts | 101 +++++++++--------- .../time-value-accessor.directive.spec.ts | 0 components/timeline/demo/alternate.ts | 5 + components/timeline/demo/basic.ts | 4 + components/timeline/demo/color.ts | 4 + components/timeline/demo/custom.ts | 5 + components/timeline/demo/label.ts | 10 +- components/timeline/demo/module | 6 -- components/timeline/demo/pending.ts | 11 +- components/timeline/demo/position.ts | 4 + components/timeline/demo/right.ts | 5 + components/timeline/timeline.spec.ts | 94 ++++++---------- 26 files changed, 226 insertions(+), 220 deletions(-) delete mode 100644 components/time-picker/demo/module delete mode 100644 components/time-picker/time-value-accessor.directive.spec.ts delete mode 100644 components/timeline/demo/module diff --git a/components/time-picker/demo/addon.ts b/components/time-picker/demo/addon.ts index 7ff67d85e85..2e03da8e5ac 100644 --- a/components/time-picker/demo/addon.ts +++ b/components/time-picker/demo/addon.ts @@ -1,7 +1,13 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { NzButtonModule } from 'ng-zorro-antd/button'; +import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; @Component({ selector: 'nz-demo-time-picker-addon', + standalone: true, + imports: [FormsModule, NzButtonModule, NzTimePickerModule], template: ` diff --git a/components/time-picker/demo/basic.ts b/components/time-picker/demo/basic.ts index c9182c7f1b7..bfe356f6d0f 100644 --- a/components/time-picker/demo/basic.ts +++ b/components/time-picker/demo/basic.ts @@ -1,8 +1,13 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; @Component({ selector: 'nz-demo-time-picker-basic', - template: ` ` + standalone: true, + imports: [FormsModule, NzTimePickerModule], + template: `` }) export class NzDemoTimePickerBasicComponent { time: Date | null = null; diff --git a/components/time-picker/demo/bordered.ts b/components/time-picker/demo/bordered.ts index ea0f2cccf37..e87da040bf3 100644 --- a/components/time-picker/demo/bordered.ts +++ b/components/time-picker/demo/bordered.ts @@ -1,8 +1,11 @@ import { Component } from '@angular/core'; +import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; + @Component({ selector: 'nz-demo-time-picker-bordered', - template: ` `, - styles: [] + standalone: true, + imports: [NzTimePickerModule], + template: `` }) export class NzDemoTimePickerBorderedComponent {} diff --git a/components/time-picker/demo/disabled-part.ts b/components/time-picker/demo/disabled-part.ts index 34c9735be4c..171236d9572 100644 --- a/components/time-picker/demo/disabled-part.ts +++ b/components/time-picker/demo/disabled-part.ts @@ -1,7 +1,11 @@ import { Component } from '@angular/core'; +import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; + @Component({ selector: 'nz-demo-time-picker-disabled-part', + standalone: true, + imports: [NzTimePickerModule], template: ` ` + standalone: true, + imports: [NzTimePickerModule], + template: `` }) export class NzDemoTimePickerDisabledComponent {} diff --git a/components/time-picker/demo/hide-column.ts b/components/time-picker/demo/hide-column.ts index 267d7aaead1..d62d2d35cc4 100644 --- a/components/time-picker/demo/hide-column.ts +++ b/components/time-picker/demo/hide-column.ts @@ -1,8 +1,13 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; @Component({ selector: 'nz-demo-time-picker-hide-column', - template: ` ` + standalone: true, + imports: [FormsModule, NzTimePickerModule], + template: `` }) export class NzDemoTimePickerHideColumnComponent { time = new Date(); diff --git a/components/time-picker/demo/interval-options.ts b/components/time-picker/demo/interval-options.ts index 4282505fef3..5f1f6bb5de2 100644 --- a/components/time-picker/demo/interval-options.ts +++ b/components/time-picker/demo/interval-options.ts @@ -1,7 +1,11 @@ import { Component } from '@angular/core'; +import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; + @Component({ selector: 'nz-demo-time-picker-interval-options', - template: ` ` + standalone: true, + imports: [NzTimePickerModule], + template: `` }) export class NzDemoTimePickerIntervalOptionsComponent {} diff --git a/components/time-picker/demo/module b/components/time-picker/demo/module deleted file mode 100644 index c029b233b23..00000000000 --- a/components/time-picker/demo/module +++ /dev/null @@ -1,5 +0,0 @@ -import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; -import { NzButtonModule } from 'ng-zorro-antd/button'; -import { NzSpaceModule } from 'ng-zorro-antd/space'; - -export const moduleList = [ NzTimePickerModule, NzButtonModule, NzSpaceModule ]; diff --git a/components/time-picker/demo/size.ts b/components/time-picker/demo/size.ts index 34656290a43..13f7f358d94 100644 --- a/components/time-picker/demo/size.ts +++ b/components/time-picker/demo/size.ts @@ -1,7 +1,12 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; @Component({ selector: 'nz-demo-time-picker-size', + standalone: true, + imports: [FormsModule, NzTimePickerModule], template: ` diff --git a/components/time-picker/demo/status.ts b/components/time-picker/demo/status.ts index a98fc03e4ed..38cbcc0f30c 100644 --- a/components/time-picker/demo/status.ts +++ b/components/time-picker/demo/status.ts @@ -1,12 +1,16 @@ import { Component } from '@angular/core'; +import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; + @Component({ selector: 'nz-demo-time-picker-status', + standalone: true, + imports: [NzTimePickerModule], template: ` - - - > - + +
+
+ > ` }) export class NzDemoTimePickerStatusComponent {} diff --git a/components/time-picker/demo/use12-hours.ts b/components/time-picker/demo/use12-hours.ts index 9e76854eae0..1adbb8ca575 100644 --- a/components/time-picker/demo/use12-hours.ts +++ b/components/time-picker/demo/use12-hours.ts @@ -1,28 +1,19 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; @Component({ selector: 'nz-demo-time-picker-use12-hours', + standalone: true, + imports: [FormsModule, NzTimePickerModule], template: ` - - - `, - styles: [ - ` - nz-time-picker { - margin: 0 8px 12px 0; - } - ` - ] + +
+
+ + ` }) export class NzDemoTimePickerUse12HoursComponent { time: Date | null = null; - - log(value: Date): void { - console.log(value); - } } diff --git a/components/time-picker/demo/value.ts b/components/time-picker/demo/value.ts index 415eb2ae439..8e22fc0b225 100644 --- a/components/time-picker/demo/value.ts +++ b/components/time-picker/demo/value.ts @@ -1,13 +1,14 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { NzTimePickerModule } from 'ng-zorro-antd/time-picker'; @Component({ selector: 'nz-demo-time-picker-value', - template: ` ` + standalone: true, + imports: [FormsModule, NzTimePickerModule], + template: `` }) export class NzDemoTimePickerValueComponent { time: Date | null = null; - - log(time: Date): void { - console.log(time && time.toTimeString()); - } } diff --git a/components/time-picker/time-holder.spec.ts b/components/time-picker/time-holder.spec.ts index 725e2b10b07..3c1d36eec3a 100644 --- a/components/time-picker/time-holder.spec.ts +++ b/components/time-picker/time-holder.spec.ts @@ -63,12 +63,14 @@ describe('time holder', () => { const date = new Date(0, 0, 0, 15, 0, 0, 0); expect(mathSecondRound(holder.value!)).toEqual(mathSecondRound(date)); }); + it('should set default selected 12-hours with value', () => { const holderPM = new TimeHolder().setValue(new Date(0, 0, 0, 15, 2, 3), true); expect(holderPM.selected12Hours).toBe('PM'); const holderAM = new TimeHolder().setValue(new Date(0, 0, 0, 0, 2, 3), true); expect(holderAM.selected12Hours).toBe('AM'); }); + it('should transform special value in 12-hour', () => { const holder = new TimeHolder().setValue(new Date(), true); holder.setSelected12Hours('am'); diff --git a/components/time-picker/time-picker-panel.component.spec.ts b/components/time-picker/time-picker-panel.component.spec.ts index 3e579007981..c6e97b2e6a7 100644 --- a/components/time-picker/time-picker-panel.component.spec.ts +++ b/components/time-picker/time-picker-panel.component.spec.ts @@ -1,31 +1,14 @@ -import { ApplicationRef, Component, DebugElement, NO_ERRORS_SCHEMA, ViewChild, ViewEncapsulation } from '@angular/core'; -import { ComponentFixture, TestBed, fakeAsync, flush, tick, waitForAsync } from '@angular/core/testing'; +import { ApplicationRef, Component, DebugElement, ViewChild } from '@angular/core'; +import { ComponentFixture, TestBed, fakeAsync, flush, tick } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { dispatchFakeEvent } from 'ng-zorro-antd/core/testing'; -import { NzI18nModule } from 'ng-zorro-antd/i18n'; import { NzTimePickerPanelComponent } from './time-picker-panel.component'; describe('time-picker-panel', () => { - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - NzI18nModule, - NzTimePickerPanelComponent, - NzTestTimePanelComponent, - NzTestTimePanelDisabledComponent, - NzTest12HourTimePanelComponent, - NzTest12HourTimePanelDisabledComponent - ], - schemas: [NO_ERRORS_SCHEMA] - }); - TestBed.compileComponents(); - })); - - describe('basic time-picker-panel', () => { + describe('basic', () => { let fixture: ComponentFixture; let testComponent: NzTestTimePanelComponent; let panelElement: DebugElement; @@ -54,7 +37,7 @@ describe('time-picker-panel', () => { expect(testComponent.nzTimePickerPanelComponent.minuteEnabled).toBe(true); expect(testComponent.nzTimePickerPanelComponent.secondEnabled).toBe(false); expect(testComponent.nzTimePickerPanelComponent.enabledColumns).toBe(2); - testComponent.format = null; + testComponent.format = null!; fixture.detectChanges(); expect(testComponent.nzTimePickerPanelComponent.hourEnabled).toBe(true); expect(testComponent.nzTimePickerPanelComponent.minuteEnabled).toBe(true); @@ -173,7 +156,7 @@ describe('time-picker-panel', () => { }); }); }); - describe('disabled time-picker-panel', () => { + describe('disabled', () => { let fixture: ComponentFixture; let testComponent: NzTestTimePanelDisabledComponent; let panelElement: DebugElement; @@ -229,7 +212,7 @@ describe('time-picker-panel', () => { ).toBe('12'); })); }); - describe('12-hour time-picker-panel', () => { + describe('12-hour', () => { let panelElement: DebugElement; let fixture12Hour: ComponentFixture; let testComponent: NzTest12HourTimePanelComponent; @@ -299,7 +282,7 @@ describe('time-picker-panel', () => { expect(listOfHourContainer[0].children.length).toEqual(6); })); }); - describe('disabled and format 12-hour time-picker-panel', () => { + describe('disabled and format 12-hour', () => { let panelElement: DebugElement; let fixture12Hour: ComponentFixture; let testComponent: NzTest12HourTimePanelDisabledComponent; @@ -356,7 +339,8 @@ describe('time-picker-panel', () => { }); @Component({ - encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [NzTimePickerPanelComponent, FormsModule], template: ` { [nzMinuteStep]="minuteStep" [nzHourStep]="hourStep" > - `, - styles: ` - @import '../style/testing.less'; - @import '../style/index.less'; - @import './style/index.less'; - `, - imports: [NzTimePickerPanelComponent, FormsModule], - standalone: true + ` }) export class NzTestTimePanelComponent { + @ViewChild(NzTimePickerPanelComponent, { static: false }) nzTimePickerPanelComponent!: NzTimePickerPanelComponent; secondStep = 1; minuteStep = 1; hourStep = 1; - @ViewChild(NzTimePickerPanelComponent, { static: false }) nzTimePickerPanelComponent!: NzTimePickerPanelComponent; value?: Date; openValue = new Date(0, 0, 0, 10, 11, 12); - format: string | null = 'HH:mm:ss'; + format: string = 'HH:mm:ss'; } @Component({ - encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [NzTimePickerPanelComponent, FormsModule], template: ` - `, - styles: ` - @import '../style/testing.less'; - @import '../style/index.less'; - @import './style/index.less'; - `, - imports: [NzTimePickerPanelComponent, FormsModule], - standalone: true + ` }) export class NzTestTimePanelDisabledComponent { + @ViewChild(NzTimePickerPanelComponent, { static: false }) nzTimePickerPanelComponent!: NzTimePickerPanelComponent; inDatePicker = false; secondStep = 1; minuteStep = 1; hourStep = 1; hideDisabledOptions = false; - @ViewChild(NzTimePickerPanelComponent, { static: false }) nzTimePickerPanelComponent!: NzTimePickerPanelComponent; value = new Date(0, 0, 0, 0, 0, 0); openValue = new Date(0, 0, 0, 10, 11, 12); format = 'HH:mm:ss'; @@ -441,8 +412,10 @@ export class NzTestTimePanelDisabledComponent { } } } + @Component({ - encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [NzTimePickerPanelComponent, FormsModule], template: ` - `, - styles: ` - @import '../style/testing.less'; - @import '../style/index.less'; - @import './style/index.less'; - `, - imports: [NzTimePickerPanelComponent, FormsModule], - standalone: true + ` }) export class NzTest12HourTimePanelComponent { @ViewChild(NzTimePickerPanelComponent, { static: false }) nzTimePickerPanelComponent!: NzTimePickerPanelComponent; @@ -467,8 +433,10 @@ export class NzTest12HourTimePanelComponent { value?: Date; openValue = new Date(0, 0, 0, 0, 0, 0); } + @Component({ - encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [NzTimePickerPanelComponent, FormsModule], template: ` - `, - styles: ` - @import '../style/testing.less'; - @import '../style/index.less'; - @import './style/index.less'; - `, - imports: [NzTimePickerPanelComponent, FormsModule], - standalone: true + ` }) export class NzTest12HourTimePanelDisabledComponent { @ViewChild(NzTimePickerPanelComponent, { static: false }) nzTimePickerPanelComponent!: NzTimePickerPanelComponent; format = 'hh:mm:ss a'; value = new Date(0, 0, 0, 1, 1, 1); + disabledHours = (): number[] => []; + disabledMinutes(hour: number): number[] { if (hour === 4) { return [20, 21, 22, 23, 24, 25]; @@ -500,6 +463,7 @@ export class NzTest12HourTimePanelDisabledComponent { return []; } } + disabledSeconds(hour: number, minute: number): number[] { if (hour === 5 && minute === 1) { return [20, 21, 22, 23, 24, 25]; diff --git a/components/time-picker/time-picker.component.spec.ts b/components/time-picker/time-picker.component.spec.ts index 371e26bc813..4a850fbc5df 100644 --- a/components/time-picker/time-picker.component.spec.ts +++ b/components/time-picker/time-picker.component.spec.ts @@ -1,12 +1,10 @@ import { BidiModule, Direction } from '@angular/cdk/bidi'; import { OverlayContainer } from '@angular/cdk/overlay'; -import { registerLocaleData } from '@angular/common'; -import zh from '@angular/common/locales/zh'; -import { Component, DebugElement, NO_ERRORS_SCHEMA, ViewChild } from '@angular/core'; +import { Component, DebugElement, ViewChild } from '@angular/core'; import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { provideNoopAnimations } from '@angular/platform-browser/animations'; import { dispatchFakeEvent, dispatchMouseEvent, typeInElement } from 'ng-zorro-antd/core/testing'; import { NzStatus } from 'ng-zorro-antd/core/types'; @@ -14,11 +12,8 @@ import { PREFIX_CLASS } from 'ng-zorro-antd/date-picker'; import { getPickerInput, getPickerOkButton } from 'ng-zorro-antd/date-picker/testing/util'; import { NzFormControlStatusType, NzFormModule } from 'ng-zorro-antd/form'; -import { en_GB, NzI18nModule, NzI18nService } from '../i18n'; +import { en_GB, NzI18nService } from '../i18n'; import { NzTimePickerComponent } from './time-picker.component'; -import { NzTimePickerModule } from './time-picker.module'; - -registerLocaleData(zh); describe('time-picker', () => { let overlayContainer: OverlayContainer; @@ -26,34 +21,21 @@ describe('time-picker', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [ - BidiModule, - NoopAnimationsModule, - FormsModule, - ReactiveFormsModule, - NzI18nModule, - NzTimePickerModule, - NzFormModule, - NzTestTimePickerComponent, - NzTestTimePickerStatusComponent, - NzTestTimePickerDirComponent, - NzTestTimePickerInFormComponent - ], - schemas: [NO_ERRORS_SCHEMA] + providers: [provideNoopAnimations()] }); - TestBed.compileComponents(); - inject([OverlayContainer], (oc: OverlayContainer) => { - overlayContainer = oc; - overlayContainerElement = oc.getContainerElement(); - })(); })); - afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => { - currentOverlayContainer.ngOnDestroy(); + beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => { + overlayContainer = oc; + overlayContainerElement = oc.getContainerElement(); + })); + + afterEach(inject([OverlayContainer], (oc: OverlayContainer) => { + oc.ngOnDestroy(); overlayContainer.ngOnDestroy(); })); - describe('basic time-picker', () => { + describe('basic', () => { let testComponent: NzTestTimePickerComponent; let fixture: ComponentFixture; let timeElement: DebugElement; @@ -63,11 +45,13 @@ describe('time-picker', () => { fixture.detectChanges(); timeElement = fixture.debugElement.query(By.directive(NzTimePickerComponent)); }); + it('should init work', () => { fixture.detectChanges(); expect(timeElement.nativeElement.classList).toContain('ant-picker'); expect(timeElement.nativeElement.classList).not.toContain('ant-picker-disabled'); }); + it('should autofocus work', () => { fixture.detectChanges(); testComponent.autoFocus = true; @@ -79,6 +63,7 @@ describe('time-picker', () => { fixture.detectChanges(); expect(timeElement.nativeElement.querySelector('input').attributes.getNamedItem('autofocus')).toBe(null); }); + it('should focus and blur function work', () => { fixture.detectChanges(); expect(timeElement.nativeElement.querySelector('input') === document.activeElement).toBe(false); @@ -89,6 +74,7 @@ describe('time-picker', () => { fixture.detectChanges(); expect(timeElement.nativeElement.querySelector('input') === document.activeElement).toBe(false); }); + it('should disabled work', fakeAsync(() => { testComponent.disabled = true; fixture.detectChanges(); @@ -121,6 +107,7 @@ describe('time-picker', () => { fixture.detectChanges(); expect(timeElement.nativeElement.querySelector('input') === document.activeElement).toBe(false); })); + it('should readOnly work', () => { testComponent.nzInputReadOnly = true; fixture.detectChanges(); @@ -130,6 +117,7 @@ describe('time-picker', () => { fixture.detectChanges(); expect(getPickerInput(fixture.debugElement).readOnly).not.toBeTruthy(); }); + it('should open and close work', () => { testComponent.open = true; fixture.detectChanges(); @@ -143,6 +131,7 @@ describe('time-picker', () => { expect(testComponent.openChange).toHaveBeenCalledTimes(3); expect(testComponent.open).toBe(true); }); + it('should clear work', fakeAsync(() => { fixture.detectChanges(); testComponent.date = new Date('2018-11-11 11:11:11'); @@ -153,11 +142,13 @@ describe('time-picker', () => { fixture.detectChanges(); expect(testComponent.date).toBeNull(); })); + it('should support default nzfomat in 12-hours', () => { testComponent.use12Hours = true; fixture.detectChanges(); expect(testComponent.nzTimePickerComponent.nzFormat).toBe('h:mm:ss a'); }); + it('should support ngModelChange', fakeAsync(() => { testComponent.date = new Date('2020-03-26 11:33:00'); fixture.detectChanges(); @@ -183,6 +174,7 @@ describe('time-picker', () => { expect(result.getHours()).toBe(0); expect(testComponent.nzTimePickerComponent.inputRef.nativeElement.value).toBe('00:33:00'); })); + it('should support ISO string', fakeAsync(() => { testComponent.date = new Date('2020-03-27T13:49:54.917Z'); fixture.detectChanges(); @@ -202,11 +194,13 @@ describe('time-picker', () => { .textContent ).toBe(date.getMinutes().toString()); })); + it('should support custom suffixIcon', fakeAsync(() => { testComponent.nzSuffixIcon = 'calendar'; fixture.detectChanges(); expect(fixture.debugElement.query(By.css(`.anticon-calendar`))).toBeDefined(); })); + it('should backdrop work', fakeAsync(() => { testComponent.nzBackdrop = true; testComponent.open = true; @@ -215,6 +209,7 @@ describe('time-picker', () => { fixture.detectChanges(); expect(overlayContainerElement.children[0].classList).toContain('cdk-overlay-backdrop'); })); + it('should open with click and close with tab', fakeAsync(() => { dispatchMouseEvent(getPickerInput(fixture.debugElement), 'click'); fixture.detectChanges(); @@ -229,6 +224,7 @@ describe('time-picker', () => { expect(getPickerContainer()).toBeNull(); })); + it('should set default opening time when clicking ok', fakeAsync(() => { const onChange = spyOn(testComponent, 'onChange'); dispatchMouseEvent(getPickerInput(fixture.debugElement), 'click'); @@ -248,9 +244,10 @@ describe('time-picker', () => { expect(result.getMinutes()).toEqual(0); expect(result.getSeconds()).toEqual(0); })); + it('should not set time when clicking ok without default opening time', fakeAsync(() => { const onChange = spyOn(testComponent, 'onChange'); - testComponent.defaultOpenValue = null; + testComponent.defaultOpenValue = null!; dispatchMouseEvent(getPickerInput(fixture.debugElement), 'click'); fixture.detectChanges(); tick(500); @@ -267,6 +264,7 @@ describe('time-picker', () => { const result = (onChange.calls.allArgs()[0] as Date[])[0]; expect(result).toBeNull(); })); + it('should set previous value when tabbing out with invalid input', fakeAsync(() => { testComponent.date = new Date('2020-03-27T13:49:54.917'); @@ -287,6 +285,7 @@ describe('time-picker', () => { expect(input.value).not.toEqual('invalid'); })); + it('should set new value when tabbing out with valid input', fakeAsync(() => { const onChange = spyOn(testComponent, 'onChange'); testComponent.date = new Date('2020-03-27T13:49:54.917'); @@ -310,11 +309,13 @@ describe('time-picker', () => { expect(result.getMinutes()).toEqual(10); expect(result.getSeconds()).toEqual(30); })); + it('should support nzBorderless', fakeAsync(() => { fixture.componentInstance.nzBorderless = true; fixture.detectChanges(); expect(fixture.debugElement.query(By.css(`.ant-picker-borderless`))).toBeDefined(); })); + it('should not trigger blur after close panel', fakeAsync(() => { dispatchMouseEvent(getPickerInput(fixture.debugElement), 'click'); fixture.detectChanges(); @@ -331,6 +332,7 @@ describe('time-picker', () => { expect(timeElement.nativeElement.querySelector('input') === document.activeElement).toBe(false); })); + describe('setup I18n service', () => { let srv: NzI18nService; @@ -354,7 +356,7 @@ describe('time-picker', () => { }); }); - describe('time-picker status', () => { + describe('status', () => { let testComponent: NzTestTimePickerStatusComponent; let fixture: ComponentFixture; let timeElement: DebugElement; @@ -364,6 +366,7 @@ describe('time-picker', () => { fixture.detectChanges(); timeElement = fixture.debugElement.query(By.directive(NzTimePickerComponent)); }); + it('should className correct with nzStatus', () => { fixture.detectChanges(); expect(timeElement.nativeElement.classList).toContain('ant-picker-status-error'); @@ -378,7 +381,7 @@ describe('time-picker', () => { }); }); - describe('time-picker RTL', () => { + describe('RTL', () => { let testComponent: NzTestTimePickerDirComponent; let fixture: ComponentFixture; let timeElement: DebugElement; @@ -388,6 +391,7 @@ describe('time-picker', () => { fixture.detectChanges(); timeElement = fixture.debugElement.query(By.directive(NzTimePickerComponent)); }); + it('should className correct on dir change', () => { expect(timeElement.nativeElement.classList).not.toContain('ant-picker-rtl'); testComponent.dir = 'rtl'; @@ -396,13 +400,14 @@ describe('time-picker', () => { }); }); - describe('time-picker in form', () => { + describe('in form', () => { let testComponent: NzTestTimePickerInFormComponent; let fixture: ComponentFixture; beforeEach(() => { fixture = TestBed.createComponent(NzTestTimePickerInFormComponent); testComponent = fixture.debugElement.componentInstance; }); + it('should disable if the form is disabled initially and nzDisabled set to false', fakeAsync(() => { testComponent.disable(); fixture.detectChanges(); @@ -414,6 +419,7 @@ describe('time-picker', () => { expect(timeElement.nativeElement.classList).toContain('ant-picker-disabled'); expect(inputElement.disabled).toBe(true); })); + it('should className correct', () => { fixture.detectChanges(); const timeElement = fixture.debugElement.query(By.directive(NzTimePickerComponent)).nativeElement; @@ -448,6 +454,8 @@ describe('time-picker', () => { }); @Component({ + standalone: true, + imports: [NzTimePickerComponent, FormsModule], template: ` { [nzDefaultOpenValue]="defaultOpenValue" [nzBorderless]="nzBorderless" > - `, - imports: [NzTimePickerComponent, FormsModule], - standalone: true + ` }) export class NzTestTimePickerComponent { open = false; @@ -475,37 +481,39 @@ export class NzTestTimePickerComponent { disabled = false; nzInputReadOnly = false; use12Hours = false; - nzSuffixIcon?: string; + nzSuffixIcon: string = 'close-circle'; nzBackdrop = false; nzBorderless = true; - defaultOpenValue: Date | null = new Date('2020-03-27T00:00:00'); + defaultOpenValue: Date = new Date('2020-03-27T00:00:00'); onChange(_: Date | null): void {} @ViewChild(NzTimePickerComponent, { static: false }) nzTimePickerComponent!: NzTimePickerComponent; } @Component({ - template: ` `, + standalone: true, imports: [NzTimePickerComponent], - standalone: true + template: `` }) export class NzTestTimePickerStatusComponent { status: NzStatus = 'error'; } @Component({ + standalone: true, + imports: [NzTimePickerComponent, BidiModule], template: `
- `, - imports: [NzTimePickerComponent, BidiModule], - standalone: true + ` }) export class NzTestTimePickerDirComponent { dir: Direction = 'ltr'; } @Component({ + standalone: true, + imports: [NzFormModule, ReactiveFormsModule, NzTimePickerComponent], template: `
@@ -514,9 +522,7 @@ export class NzTestTimePickerDirComponent {
- `, - imports: [NzFormModule, ReactiveFormsModule, NzTimePickerComponent], - standalone: true + ` }) export class NzTestTimePickerInFormComponent { timePickerForm = new FormGroup({ @@ -524,7 +530,6 @@ export class NzTestTimePickerInFormComponent { }); status: NzFormControlStatusType = 'error'; feedback = true; - disabled = false; disable(): void { diff --git a/components/time-picker/time-value-accessor.directive.spec.ts b/components/time-picker/time-value-accessor.directive.spec.ts deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/components/timeline/demo/alternate.ts b/components/timeline/demo/alternate.ts index 81872c70580..121ffced085 100644 --- a/components/timeline/demo/alternate.ts +++ b/components/timeline/demo/alternate.ts @@ -1,7 +1,12 @@ import { Component } from '@angular/core'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzTimelineModule } from 'ng-zorro-antd/timeline'; + @Component({ selector: 'nz-demo-timeline-alternate', + standalone: true, + imports: [NzIconModule, NzTimelineModule], template: ` Create a services site 2015-09-01 diff --git a/components/timeline/demo/basic.ts b/components/timeline/demo/basic.ts index dc876b75979..8cc6a8eb600 100644 --- a/components/timeline/demo/basic.ts +++ b/components/timeline/demo/basic.ts @@ -1,7 +1,11 @@ import { Component } from '@angular/core'; +import { NzTimelineModule } from 'ng-zorro-antd/timeline'; + @Component({ selector: 'nz-demo-timeline-basic', + standalone: true, + imports: [NzTimelineModule], template: ` Create a services site 2015-09-01 diff --git a/components/timeline/demo/color.ts b/components/timeline/demo/color.ts index 7a2fcd85696..f14fc5a24ba 100644 --- a/components/timeline/demo/color.ts +++ b/components/timeline/demo/color.ts @@ -1,7 +1,11 @@ import { Component } from '@angular/core'; +import { NzTimelineModule } from 'ng-zorro-antd/timeline'; + @Component({ selector: 'nz-demo-timeline-color', + standalone: true, + imports: [NzTimelineModule], template: ` Create a services site 2015-09-01 diff --git a/components/timeline/demo/custom.ts b/components/timeline/demo/custom.ts index 19b987a2f3b..daa9b42b573 100644 --- a/components/timeline/demo/custom.ts +++ b/components/timeline/demo/custom.ts @@ -1,7 +1,12 @@ import { Component } from '@angular/core'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzTimelineModule } from 'ng-zorro-antd/timeline'; + @Component({ selector: 'nz-demo-timeline-custom', + standalone: true, + imports: [NzIconModule, NzTimelineModule], template: ` Create a services site 2015-09-01 diff --git a/components/timeline/demo/label.ts b/components/timeline/demo/label.ts index b9a997fb8e4..7ecbc8d4d02 100644 --- a/components/timeline/demo/label.ts +++ b/components/timeline/demo/label.ts @@ -1,15 +1,21 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; -import { NzTimelineMode } from 'ng-zorro-antd/timeline'; +import { NzRadioModule } from 'ng-zorro-antd/radio'; +import { NzTimelineMode, NzTimelineModule } from 'ng-zorro-antd/timeline'; @Component({ selector: 'nz-demo-timeline-label', + standalone: true, + imports: [FormsModule, NzRadioModule, NzTimelineModule], template: ` - + +
+
Create a services Solve initial network problems diff --git a/components/timeline/demo/module b/components/timeline/demo/module deleted file mode 100644 index 08ec0f48e09..00000000000 --- a/components/timeline/demo/module +++ /dev/null @@ -1,6 +0,0 @@ -import { NzIconModule } from 'ng-zorro-antd/icon'; -import { NzTimelineModule } from 'ng-zorro-antd/timeline'; -import { NzButtonModule } from 'ng-zorro-antd/button'; -import { NzRadioModule } from 'ng-zorro-antd/radio' - -export const moduleList = [ NzRadioModule, NzIconModule, NzTimelineModule, NzButtonModule ]; diff --git a/components/timeline/demo/pending.ts b/components/timeline/demo/pending.ts index bf77620def9..d01f4d4a6c6 100644 --- a/components/timeline/demo/pending.ts +++ b/components/timeline/demo/pending.ts @@ -1,14 +1,21 @@ import { Component } from '@angular/core'; +import { NzButtonModule } from 'ng-zorro-antd/button'; +import { NzTimelineModule } from 'ng-zorro-antd/timeline'; + @Component({ selector: 'nz-demo-timeline-pending', + standalone: true, + imports: [NzButtonModule, NzTimelineModule], template: ` - + Create a services site 2015-09-01 Solve initial network problems 2015-09-01 Technical testing 2015-09-01 - +
+
+ ` }) export class NzDemoTimelinePendingComponent { diff --git a/components/timeline/demo/position.ts b/components/timeline/demo/position.ts index 133764e19f5..57ef7631c65 100644 --- a/components/timeline/demo/position.ts +++ b/components/timeline/demo/position.ts @@ -1,7 +1,11 @@ import { Component } from '@angular/core'; +import { NzTimelineModule } from 'ng-zorro-antd/timeline'; + @Component({ selector: 'nz-demo-timeline-position', + standalone: true, + imports: [NzTimelineModule], template: ` Alice 20' diff --git a/components/timeline/demo/right.ts b/components/timeline/demo/right.ts index 219b237d628..c538fae9c17 100644 --- a/components/timeline/demo/right.ts +++ b/components/timeline/demo/right.ts @@ -1,7 +1,12 @@ import { Component } from '@angular/core'; +import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzTimelineModule } from 'ng-zorro-antd/timeline'; + @Component({ selector: 'nz-demo-timeline-right', + standalone: true, + imports: [NzIconModule, NzTimelineModule], template: ` Create a services site 2015-09-01 diff --git a/components/timeline/timeline.spec.ts b/components/timeline/timeline.spec.ts index a3e0e36f6ef..0008d0df185 100644 --- a/components/timeline/timeline.spec.ts +++ b/components/timeline/timeline.spec.ts @@ -1,30 +1,22 @@ -import { BidiModule, Dir } from '@angular/cdk/bidi'; +import { BidiModule, Dir, Direction } from '@angular/cdk/bidi'; import { Component, DebugElement, ViewChild } from '@angular/core'; -import { ComponentFixture, waitForAsync } from '@angular/core/testing'; +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/component-bed'; -import { NzRadioModule } from 'ng-zorro-antd/radio'; - import { NzDemoTimelineLabelComponent } from './demo/label'; import { NzTimelineComponent } from './timeline.component'; import { NzTimelineModule } from './timeline.module'; describe('nz-timeline', () => { describe('basic', () => { - let testBed: ComponentBed; let fixture: ComponentFixture; let testComponent: NzTestTimelineBasicComponent; let timeline: DebugElement; let items: HTMLDivElement[] = []; beforeEach(() => { - testBed = createComponentBed(NzTestTimelineBasicComponent, { - imports: [NzTimelineModule] - }); - fixture = testBed.fixture; - testComponent = testBed.component; - + fixture = TestBed.createComponent(NzTestTimelineBasicComponent); + testComponent = fixture.componentInstance; fixture.detectChanges(); timeline = fixture.debugElement.query(By.directive(NzTimelineComponent)); @@ -110,38 +102,31 @@ describe('nz-timeline', () => { }); // add another test component for simplicity - it('should custom position work', () => { - let testBed: ComponentBed; + describe('custom position', () => { let fixture: ComponentFixture; let timeline: DebugElement; let items: HTMLDivElement[] = []; - testBed = createComponentBed(NzTestTimelineCustomPositionComponent, { - imports: [NzTimelineModule] - }); - fixture = testBed.fixture; - - fixture.detectChanges(); + beforeEach(() => { + fixture = TestBed.createComponent(NzTestTimelineCustomPositionComponent); + fixture.detectChanges(); - timeline = fixture.debugElement.query(By.directive(NzTimelineComponent)); - items = Array.from((fixture.debugElement.nativeElement as HTMLElement).querySelectorAll('.ant-timeline-item')); - // console.log(fixture.debugElement.nativeElement.outerHTML); + timeline = fixture.debugElement.query(By.directive(NzTimelineComponent)); + items = Array.from((fixture.debugElement.nativeElement as HTMLElement).querySelectorAll('.ant-timeline-item')); + }); - expect(timeline.nativeElement.firstElementChild!.classList).toContain('ant-timeline-alternate'); - expect(items[0].classList).toContain('ant-timeline-item-right'); + it('should custom position work', () => { + expect(timeline.nativeElement.firstElementChild!.classList).toContain('ant-timeline-alternate'); + expect(items[0].classList).toContain('ant-timeline-item-right'); + }); }); describe('custom color', () => { - let testBed: ComponentBed; let fixture: ComponentFixture; let items: HTMLLIElement[]; beforeEach(() => { - testBed = createComponentBed(NzTestTimelineCustomColorComponent, { - imports: [NzTimelineModule] - }); - fixture = testBed.fixture; - + fixture = TestBed.createComponent(NzTestTimelineCustomColorComponent); fixture.detectChanges(); items = Array.from((fixture.debugElement.nativeElement as HTMLElement).querySelectorAll('.ant-timeline-item')); @@ -161,18 +146,12 @@ describe('nz-timeline', () => { }); describe('pending', () => { - let testBed: ComponentBed; let fixture: ComponentFixture; let timeline: DebugElement; beforeEach(() => { - testBed = createComponentBed(NzTestTimelinePendingComponent, { - imports: [NzTimelineModule] - }); - fixture = testBed.fixture; - + fixture = TestBed.createComponent(NzTestTimelinePendingComponent); fixture.detectChanges(); - timeline = fixture.debugElement.query(By.directive(NzTimelineComponent)); }); @@ -183,17 +162,12 @@ describe('nz-timeline', () => { }); describe('label', () => { - let testBed: ComponentBed; let fixture: ComponentFixture; let timeline: DebugElement; let items: HTMLLIElement[]; beforeEach(() => { - testBed = createComponentBed(NzDemoTimelineLabelComponent, { - imports: [NzTimelineModule, NzRadioModule] - }); - fixture = testBed.fixture; - + fixture = TestBed.createComponent(NzDemoTimelineLabelComponent); fixture.detectChanges(); timeline = fixture.debugElement.query(By.directive(NzTimelineComponent)); @@ -215,19 +189,12 @@ describe('nz-timeline', () => { }); describe('RTL', () => { - let testBed: ComponentBed; let fixture: ComponentFixture; let timeline: DebugElement; let items: HTMLDivElement[] = []; beforeEach(waitForAsync(() => { - testBed = createComponentBed(NzTestTimelineRtlComponent, { - imports: [BidiModule, NzTimelineModule], - declarations: [NzTestTimelineBasicComponent] - }); - - fixture = testBed.fixture; - + fixture = TestBed.createComponent(NzTestTimelineRtlComponent); fixture.detectChanges(); timeline = fixture.debugElement.query(By.directive(NzTimelineComponent)); @@ -245,15 +212,11 @@ describe('nz-timeline', () => { }); describe('clear', () => { - let testBed: ComponentBed; let fixture: ComponentFixture; let timeline: NzTimelineComponent; beforeEach(() => { - testBed = createComponentBed(NzTestTimelineClearItemsComponent, { - imports: [NzTimelineModule] - }); - fixture = testBed.fixture; + fixture = TestBed.createComponent(NzTestTimelineClearItemsComponent); fixture.detectChanges(); timeline = fixture.componentInstance.nzTimeLine; }); @@ -267,7 +230,8 @@ describe('nz-timeline', () => { }); @Component({ - // eslint-disable-next-line + standalone: true, + imports: [NzTimelineModule], selector: 'nz-test-basic-timeline', template: ` template @@ -292,6 +256,8 @@ export class NzTestTimelineBasicComponent { } @Component({ + standalone: true, + imports: [NzTimelineModule], template: ` Create a services site 2015-09-01 @@ -304,6 +270,8 @@ export class NzTestTimelineBasicComponent { export class NzTestTimelineCustomColorComponent {} @Component({ + standalone: true, + imports: [NzTimelineModule], template: ` template @@ -315,16 +283,20 @@ export class NzTestTimelineCustomColorComponent {} export class NzTestTimelinePendingComponent {} @Component({ + standalone: true, + imports: [NzTimelineModule], template: ` Right - Left + Left ` }) export class NzTestTimelineCustomPositionComponent {} @Component({ + standalone: true, + imports: [BidiModule, NzTestTimelineBasicComponent], template: `
@@ -333,10 +305,12 @@ export class NzTestTimelineCustomPositionComponent {} }) export class NzTestTimelineRtlComponent { @ViewChild(Dir) dir!: Dir; - direction = 'rtl'; + direction: Direction = 'rtl'; } @Component({ + standalone: true, + imports: [NzTimelineModule], template: ` @for (item of data; track item) {