diff --git a/components/button/nz-button.spec.ts b/components/button/nz-button.spec.ts index 85b6e6b0dc3..c8498f96b7b 100644 --- a/components/button/nz-button.spec.ts +++ b/components/button/nz-button.spec.ts @@ -167,7 +167,7 @@ describe('button', () => { tick(); fixture.detectChanges(); expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(true); - expect(button.nativeElement.firstElementChild.classList.contains('anticon-spin')).toBe(true); + expect(button.nativeElement.firstElementChild.firstElementChild.classList.contains('anticon-spin')).toBe(true); expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(true); expect(button.nativeElement.firstElementChild.localName).toBe('i'); tick(5000); @@ -179,7 +179,7 @@ describe('button', () => { const button = buttons[ 3 ]; fixture.detectChanges(); expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(false); - expect(button.nativeElement.firstElementChild.classList.contains('anticon-apin')).toBe(false); + expect(button.nativeElement.firstElementChild.querySelector('svg')).toBe(null); expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(false); expect(button.nativeElement.firstElementChild.localName).toBe('i'); button.nativeElement.click(); @@ -187,7 +187,7 @@ describe('button', () => { tick(); fixture.detectChanges(); expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(true); - expect(button.nativeElement.firstElementChild.classList.contains('anticon-spin')).toBe(true); + expect(button.nativeElement.firstElementChild.firstElementChild.classList.contains('anticon-spin')).toBe(true); expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(true); expect(button.nativeElement.firstElementChild.localName).toBe('i'); tick(5000); diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts index f994958abd1..33070e60f98 100644 --- a/components/cascader/nz-cascader.component.ts +++ b/components/cascader/nz-cascader.component.ts @@ -173,7 +173,6 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces if (!this.inSearch && willBeInSearch) { this.oldActivatedOptions = this.activatedOptions; this.activatedOptions = []; - this.searchWidthStyle = `${this.input.nativeElement.offsetWidth}px`; } else if (this.inSearch && !willBeInSearch) { this.activatedOptions = this.oldActivatedOptions; } @@ -181,11 +180,13 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces // 搜索状态变更之后 this.inSearch = !!willBeInSearch; if (this.inSearch) { + this.labelRenderText = ''; this.prepareSearchValue(); } else { if (this.showSearch) { this.nzColumns = this.oldColumnsHolder; } + this.buildDisplayLabel(); this.searchWidthStyle = ''; } this.setClassMap(); diff --git a/components/cascader/nz-cascader.spec.ts b/components/cascader/nz-cascader.spec.ts index ebc71b4a445..e1e0aa8b301 100644 --- a/components/cascader/nz-cascader.spec.ts +++ b/components/cascader/nz-cascader.spec.ts @@ -1377,7 +1377,9 @@ describe('cascader', () => { it('should support custom sorter', (done) => { testComponent.nzShowSearch = { sorter(a: CascaderOption[], b: CascaderOption[], inputValue: string): number { - return 1; // all reversed, just to be sure it works + const l1 = a[ 0 ].label; + const l2 = b[ 0 ].label; // all reversed, just to be sure it works + return ('' + l1).localeCompare(l2); } } as NzShowSearchOptions; fixture.detectChanges(); diff --git a/components/form/nz-form-control.component.html b/components/form/nz-form-control.component.html index 8fc70b4d22a..77815f1be48 100644 --- a/components/form/nz-form-control.component.html +++ b/components/form/nz-form-control.component.html @@ -2,7 +2,7 @@ - + diff --git a/components/icon/demo/basic.ts b/components/icon/demo/basic.ts index 287e608efaf..d39e84a80dd 100644 --- a/components/icon/demo/basic.ts +++ b/components/icon/demo/basic.ts @@ -18,12 +18,12 @@ import { Component } from '@angular/core'; `, - styles: [ ` + styles : [ ` .icons-list > .anticon { margin-right: 6px; font-size: 24px; } - `] + ` ] }) export class NzDemoIconBasicComponent { } diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts index f55f95abd96..fecffc15dd5 100644 --- a/components/icon/nz-icon.directive.ts +++ b/components/icon/nz-icon.directive.ts @@ -12,6 +12,8 @@ import { import { IconDirective } from '@ant-design/icons-angular'; import { NzIconService } from './nz-icon.service'; +const iconTypeRE = /^anticon\-\w/; + /** * This directive extends IconDirective to provide: * @@ -32,78 +34,113 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, /** * In order to make this directive compatible to old API, we had do some ugly stuff here. - * Should be removed in next major version. + * TODO: Should be removed in next major version. */ private _classChangeHandler(className: string): void { - if (!className) { return; } - - const forceSpin = className.indexOf('anticon-spin') > -1; - const classArr = className.split(/\s/); - let anticonType = classArr.filter(cls => cls !== 'anticon' && cls !== 'anticon-spin' && cls.match(/^anticon\-\w/))[ 0 ]; + if (className) { + const iconType = className + .split(/\s/) + .filter(cls => cls !== 'anticon' && cls !== 'anticon-spin' && !!cls.match(iconTypeRE))[ 0 ]; - if (!anticonType) { return; } + if (!iconType) { + return; + } - anticonType = anticonType.replace('anticon-', ''); - if (anticonType.includes('verticle')) { - anticonType = anticonType.replace('verticle', 'vertical'); - if (!this._iconService.warnedAboutVertical) { - console.warn('[NG-ZORRO]', `'verticle' is misspelled, would be corrected in the next major version.`); - this._iconService.warnedAboutVertical = true; + let parsedIconType = iconType.replace('anticon-', ''); + if (parsedIconType.includes('verticle')) { + parsedIconType = parsedIconType.replace('verticle', 'vertical'); + this._warnAPI('cross'); } - } - if (anticonType.startsWith('cross')) { - anticonType = anticonType.replace('cross', 'close'); - if (!this._iconService.warnedAboutCross) { - console.warn('[NG-ZORRO]', `'cross' icon is replaced by 'close' icon.`); - this._iconService.warnedAboutCross = true; + if (parsedIconType.startsWith('cross')) { + parsedIconType = parsedIconType.replace('cross', 'close'); + this._warnAPI('vertical'); } - } - if (!(anticonType.endsWith('-o') || anticonType.endsWith('-fill') || anticonType.endsWith('-twotone'))) { - anticonType += '-o'; - } - if (this.type !== anticonType) { - this.type = anticonType; - this._changeIcon().catch(err => { + // Only change icon when icon type does change. + if (this.type !== parsedIconType) { + this.type = parsedIconType; + this._changeIcon().catch(err => { console.warn('[NG-ZORRO]', `You can find more about this error on http://ng.ant.design/components/icon/en\n`, err); }); + } } } - private _warnAPI(): void { - if (isDevMode() && !this._iconService.warnedAboutAPI) { - console.warn('[NG-ZORRO]', ` would be deprecated soon. Please use API.`); + /** + * In order to make this directive compatible to old API, we had do some ugly stuff here. + * TODO: Should be removed in next major version. + */ + private _warnAPI(type: 'old' | 'cross' | 'vertical'): void { + if (isDevMode()) { + if (type === 'old' && !this._iconService.warnedAboutAPI) { + console.warn('[NG-ZORRO]', ` would be deprecated soon. Please use API.`); + this._iconService.warnedAboutAPI = true; + } + if (type === 'cross' && !this._iconService.warnedAboutCross) { + console.warn('[NG-ZORRO]', `'cross' icon is replaced by 'close' icon.`); + this._iconService.warnedAboutCross = true; + } + if (type === 'vertical' && !this._iconService.warnedAboutVertical) { + console.warn('[NG-ZORRO]', `'verticle' is misspelled, would be corrected in the next major version.`); + this._iconService.warnedAboutVertical = true; + } } - this._iconService.warnedAboutAPI = true; } - private _addExtraModifications(svg: SVGElement): void { - if (this.spin || this.type === 'loading') { - this._renderer.addClass(this._el, 'anticon-spin'); + private _toggleSpin(svg: SVGElement): void { + if ((this.spin || this.type === 'loading') && !this._el.classList.contains('anticon-spin')) { + this._renderer.addClass(svg, 'anticon-spin'); } else { - this._renderer.removeClass(this._el, 'anticon-spin'); + this._renderer.removeClass(svg, 'anticon-spin'); + } + } + + private _setClassName(): void { + // If there's not an anticon class, usually a new API icon, get the icon class name back. + // anticon should be added before other class names. + if (this._el && typeof this.type === 'string') { + const iconClassNameArr = this._el.className.split(/\s/); + const oldTypeNameIndex = iconClassNameArr.findIndex(cls => cls !== 'anticon' && cls !== 'anticon-spin' && !!cls.match(iconTypeRE)); + + if (oldTypeNameIndex !== -1) { + iconClassNameArr.splice(oldTypeNameIndex, 1, `anticon-${this.type}`); + this._renderer.setAttribute(this._el, 'class', iconClassNameArr.join(' ')); + } else { + this._renderer.addClass(this._el, `anticon-${this.type}`); + } } } - private _getIconNameBack(): void { + private _setSVGData(svg: SVGElement): void { if (typeof this.type === 'string') { - this._renderer.addClass(this._elementRef.nativeElement, `anticon-${this.type}`); + this._renderer.setAttribute(svg, 'data-icon', this.type); + this._renderer.setAttribute(svg, 'aria-hidden', 'true'); } } + private _addExtraModifications(svg: SVGElement): void { + this._toggleSpin(svg); + this._setSVGData(svg); + } + constructor(public _iconService: NzIconService, public _elementRef: ElementRef, public _renderer: Renderer2) { - super(_iconService, _elementRef, _renderer); // NzIconService extends IconService so IconDirective won't complain. + super(_iconService, _elementRef, _renderer); } ngOnChanges(): void { if (!this.iconfont) { - this._getIconNameBack(); // Should get back classNames immediately. + // For ant design icons. + this._setClassName(); this._changeIcon().then(svg => { this._addExtraModifications(svg); - }).catch(() => { - console.warn('[NG-ZORRO]', `You can find more about this error on http://ng.ant.design/components/icon/en`); + }).catch((err) => { + if (err) { + console.error(err); + console.warn('[NG-ZORRO]', `You can find more about this error on http://ng.ant.design/components/icon/en`); + } }); } else { + // For iconfont icons. this._setSVGElement(this._iconService.createIconfontIcon(`#${this.iconfont}`)); } } @@ -113,8 +150,10 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, */ ngOnInit(): void { this._el = this._elementRef.nativeElement; + + // Make the component compatible to old class="anticon" API. if (this._el && !this.type) { - this._warnAPI(); + this._warnAPI('old'); this._classChangeHandler(this._el.className); this._classNameObserver = new MutationObserver((mutations: MutationRecord[]) => { mutations @@ -127,6 +166,10 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, if (!this._el.classList.contains('anticon')) { this._renderer.setAttribute(this._el, 'class', `anticon ${this._el.className}`); } + + if (this.type) { + this._setClassName(); + } } ngOnDestroy(): void { @@ -141,8 +184,7 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges, ngAfterContentChecked(): void { const children = (this._elementRef.nativeElement as HTMLElement).children; if (children && children.length && !this.type) { - const child = children[ 0 ]; - this._iconService.normalizeSvgElement(child as SVGElement); + this._iconService.normalizeSvgElement(children[ 0 ] as SVGElement); } } } diff --git a/components/icon/nz-icon.service.ts b/components/icon/nz-icon.service.ts index 6b961589b8d..e78c128c588 100644 --- a/components/icon/nz-icon.service.ts +++ b/components/icon/nz-icon.service.ts @@ -69,8 +69,7 @@ export class NzIconService extends IconService { } createIconfontIcon(type: string): SVGElement { - const svgString = ``; - return this._createSVGElementFromString(svgString); + return this._createSVGElementFromString(``); } constructor( diff --git a/components/icon/nz-icon.spec.ts b/components/icon/nz-icon.spec.ts index 094c1f64c11..a6ed87b3503 100644 --- a/components/icon/nz-icon.spec.ts +++ b/components/icon/nz-icon.spec.ts @@ -28,27 +28,43 @@ describe('icon', () => { it('should get icon class name back', fakeAsync(() => { fixture.detectChanges(); - expect(icons[ 0 ].nativeElement.classList.contains('anticon-question')); - expect(icons[ 1 ].nativeElement.classList.contains('anticon-loading')); + tick(1000); + fixture.detectChanges(); + expect(icons[ 0 ].nativeElement.classList.contains('anticon')).toBe(true); + expect(icons[ 0 ].nativeElement.classList.contains('anticon-question')).toBe(true); + expect(icons[ 1 ].nativeElement.classList.contains('anticon-loading')).toBe(true); + })); + + it('should change class name when type changes', fakeAsync(() => { + fixture.detectChanges(); + tick(1000); + fixture.detectChanges(); + testComponent.type = 'question-circle'; + fixture.detectChanges(); + tick(1000); + fixture.detectChanges(); + expect(icons[ 0 ].nativeElement.classList.contains('anticon')).toBe(true); + expect(icons[ 0 ].nativeElement.classList.contains('anticon-question-circle')).toBe(true); + expect(icons[ 0 ].nativeElement.classList.contains('anticon-question')).not.toBe(true); })); it('should support spin and cancel', fakeAsync(() => { fixture.detectChanges(); tick(1000); fixture.detectChanges(); - expect(icons[ 0 ].nativeElement.classList.contains('anticon-spin')).toBe(true); + expect(icons[ 0 ].nativeElement.firstChild.classList.contains('anticon-spin')).toBe(true); testComponent.spin = false; fixture.detectChanges(); tick(1000); fixture.detectChanges(); - expect(icons[ 0 ].nativeElement.classList.contains('anticon-spin')).toBe(false); + expect(icons[ 0 ].nativeElement.firstChild.classList.contains('anticon-spin')).toBe(false); })); it('should make loading spin', fakeAsync(() => { fixture.detectChanges(); tick(1000); fixture.detectChanges(); - expect(icons[ 1 ].nativeElement.classList.contains('anticon-spin')).toBe(true); + expect(icons[ 1 ].nativeElement.firstChild.classList.contains('anticon-spin')).toBe(true); })); }); diff --git a/components/layout/nz-layout.module.ts b/components/layout/nz-layout.module.ts index 5db5523fccd..934d801947b 100644 --- a/components/layout/nz-layout.module.ts +++ b/components/layout/nz-layout.module.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { NzMatchMediaService } from '../core/services/nz-match-media.service'; +import { NzIconModule } from '../icon/nz-icon.module'; import { NzContentComponent } from './nz-content.component'; import { NzFooterComponent } from './nz-footer.component'; @@ -13,7 +14,7 @@ import { NzSiderComponent } from './nz-sider.component'; declarations: [ NzLayoutComponent, NzHeaderComponent, NzContentComponent, NzFooterComponent, NzSiderComponent ], exports : [ NzLayoutComponent, NzHeaderComponent, NzContentComponent, NzFooterComponent, NzSiderComponent ], providers : [ NzMatchMediaService ], - imports : [ CommonModule ] + imports : [ CommonModule, NzIconModule ] }) export class NzLayoutModule { } diff --git a/components/layout/nz-sider.component.html b/components/layout/nz-sider.component.html index 5c7f2649785..d55f1000e60 100644 --- a/components/layout/nz-sider.component.html +++ b/components/layout/nz-sider.component.html @@ -8,6 +8,6 @@ - - + + \ No newline at end of file diff --git a/components/package.json b/components/package.json index 8f2e5136c55..33cc9d0cd9f 100644 --- a/components/package.json +++ b/components/package.json @@ -23,7 +23,7 @@ "dependencies": { "date-fns": "^1.29.0", "@angular/cdk": "^6.0.0", - "@ant-design/icons-angular": "^0.0.2" + "@ant-design/icons-angular": "^0.0.3" }, "peerDependencies": { "@angular/animations": "^6.0.0", diff --git a/components/pagination/nz-pagination.component.html b/components/pagination/nz-pagination.component.html index a9e08dc89a4..40d7f1675fa 100644 --- a/components/pagination/nz-pagination.component.html +++ b/components/pagination/nz-pagination.component.html @@ -37,12 +37,12 @@ [class.mini]="nzSize=='small'" [class.ant-table-pagination]="nzInTable" class="ant-pagination"> - - - - +
  • + + +
  • { }); it('should render correct', () => { fixture.detectChanges(); - expect(paginationElement.firstElementChild.innerText).toBe('1-20 of 85 items'); + expect(paginationElement.firstElementChild.innerText.trim()).toBe('1-20 of 85 items'); testComponent.pageIndex = 2; fixture.detectChanges(); expect(paginationElement.firstElementChild.innerText).toBe('21-40 of 85 items'); diff --git a/components/progress/nz-progress.spec.ts b/components/progress/nz-progress.spec.ts index b78b3e53809..59919108cb0 100644 --- a/components/progress/nz-progress.spec.ts +++ b/components/progress/nz-progress.spec.ts @@ -30,15 +30,15 @@ describe('progress', () => { it('should percent work', () => { fixture.detectChanges(); expect(progress.nativeElement.querySelector('.ant-progress-bg').style.cssText).toBe('width: 0%; height: 8px;'); - expect(progress.nativeElement.querySelector('.ant-progress-text').innerText).toBe('0%'); + expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('0%'); testComponent.percent = 50; fixture.detectChanges(); expect(progress.nativeElement.querySelector('.ant-progress-bg').style.cssText).toBe('width: 50%; height: 8px;'); - expect(progress.nativeElement.querySelector('.ant-progress-text').innerText).toBe('50%'); + expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('50%'); testComponent.percent = 100; fixture.detectChanges(); expect(progress.nativeElement.querySelector('.ant-progress-bg').style.cssText).toBe('width: 100%; height: 8px;'); - expect(progress.nativeElement.querySelector('.ant-progress-text').innerText).toBe(''); + expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe(''); expect(progress.nativeElement.querySelector('.anticon-check-circle')).toBeDefined(); }); it('should successPercent', () => { @@ -51,10 +51,10 @@ describe('progress', () => { it('should format work', () => { testComponent.format = (percent) => `${percent} percent`; fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-text').innerText).toBe('0 percent'); + expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('0 percent'); testComponent.percent = 100; fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-text').innerText).toBe('100 percent'); + expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('100 percent'); }); it('should status work', () => { fixture.detectChanges(); @@ -113,10 +113,10 @@ describe('progress', () => { it('should format work', () => { testComponent.format = (percent) => `${percent} percent`; fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-text').innerText).toBe('0 percent'); + expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('0 percent'); testComponent.percent = 100; fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-text').innerText).toBe('100 percent'); + expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('100 percent'); }); it('should showInfo work', () => { fixture.detectChanges(); @@ -129,13 +129,13 @@ describe('progress', () => { }); it('should percent work', () => { fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-text').innerText).toBe('0%'); + expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('0%'); testComponent.percent = 50; fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-text').innerText).toBe('50%'); + expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe('50%'); testComponent.percent = 100; fixture.detectChanges(); - expect(progress.nativeElement.querySelector('.ant-progress-text').innerText).toBe(''); + expect(progress.nativeElement.querySelector('.ant-progress-text').innerText.trim()).toBe(''); expect(progress.nativeElement.querySelector('.anticon-check-circle')).toBeDefined(); }); it('should width work', () => { diff --git a/components/steps/nz-steps.spec.ts b/components/steps/nz-steps.spec.ts index 79823215c1d..6b2591f20bf 100644 --- a/components/steps/nz-steps.spec.ts +++ b/components/steps/nz-steps.spec.ts @@ -58,15 +58,15 @@ describe('steps', () => { })); it('should title correct', () => { fixture.detectChanges(); - expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-title').innerText).toBe('0title'); - expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-title').innerText).toBe('1title'); - expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-title').innerText).toBe('2title'); + expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-title').innerText.trim()).toBe('0title'); + expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-title').innerText.trim()).toBe('1title'); + expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-title').innerText.trim()).toBe('2title'); }); it('should description correct', () => { fixture.detectChanges(); - expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-description').innerText).toBe('0description'); - expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-description').innerText).toBe('1description'); - expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-description').innerText).toBe('2description'); + expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe('0description'); + expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe('1description'); + expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe('2description'); }); it('should icon display correct', () => { fixture.detectChanges(); @@ -130,9 +130,9 @@ describe('steps', () => { tick(); fixture.detectChanges(); expect(outStep.nativeElement.firstElementChild.classList.contains('ant-steps-dot')).toBe(true); - expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.innerText).toBe('process0'); - expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.innerText).toBe('wait1'); - expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.innerText).toBe('wait2'); + expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.innerText.trim()).toBe('process0'); + expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.innerText.trim()).toBe('wait1'); + expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').firstElementChild.innerText.trim()).toBe('wait2'); expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-icon').lastElementChild.classList.contains('ant-steps-icon-dot')).toBe(true); expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').lastElementChild.classList.contains('ant-steps-icon-dot')).toBe(true); expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').lastElementChild.classList.contains('ant-steps-icon-dot')).toBe(true); @@ -149,9 +149,9 @@ describe('steps', () => { expect(innerSteps[ 0 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-process'); expect(innerSteps[ 1 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait'); expect(innerSteps[ 2 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait'); - expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-icon').innerText).toBe('4'); - expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').innerText).toBe('5'); - expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').innerText).toBe('6'); + expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-icon').innerText.trim()).toBe('4'); + expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').innerText.trim()).toBe('5'); + expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').innerText.trim()).toBe('6'); })); }); describe('inner step string', () => { @@ -178,15 +178,15 @@ describe('steps', () => { }); it('should title display correct', () => { fixture.detectChanges(); - expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-title').innerText).toBe('title'); - expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-title').innerText).toBe('title'); - expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-title').innerText).toBe('title'); + expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-title').innerText.trim()).toBe('title'); + expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-title').innerText.trim()).toBe('title'); + expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-title').innerText.trim()).toBe('title'); }); it('should description display correct', () => { fixture.detectChanges(); - expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-description').innerText).toBe('description'); - expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-description').innerText).toBe('description'); - expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-description').innerText).toBe('description'); + expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe('description'); + expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe('description'); + expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe('description'); }); it('should icon display correct', () => { fixture.detectChanges(); @@ -208,15 +208,15 @@ describe('steps', () => { }); it('should title display correct', () => { fixture.detectChanges(); - expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-title').innerText).toBe('titleTemplate'); - expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-title').innerText).toBe('titleTemplate'); - expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-title').innerText).toBe('titleTemplate'); + expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-title').innerText.trim()).toBe('titleTemplate'); + expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-title').innerText.trim()).toBe('titleTemplate'); + expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-title').innerText.trim()).toBe('titleTemplate'); }); it('should description display correct', () => { fixture.detectChanges(); - expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-description').innerText).toBe('descriptionTemplate'); - expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-description').innerText).toBe('descriptionTemplate'); - expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-description').innerText).toBe('descriptionTemplate'); + expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe('descriptionTemplate'); + expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe('descriptionTemplate'); + expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-item-description').innerText.trim()).toBe('descriptionTemplate'); }); it('should icon display correct', () => { fixture.detectChanges(); diff --git a/package.json b/package.json index 0fe409d27de..fa65bae4292 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ }, "dependencies": { "@angular/cdk": "^6.0.0", - "@ant-design/icons-angular": "0.0.2", + "@ant-design/icons-angular": "^0.0.3", "date-fns": "^1.29.0" }, "devDependencies": {