test(module:select): add test for select

NG-ZORRO · Feb 26, 2020 · c53c0f2 · c53c0f2
1 parent 40daee9
commit c53c0f2
Show file tree

Hide file tree

Showing 8 changed files with 794 additions and 36 deletions.
diff --git a/components/select/demo/big-data.ts b/components/select/demo/big-data.ts
@@ -22,7 +22,7 @@ export class NzDemoSelectBigDataComponent implements OnInit {
 
   ngOnInit(): void {
     const children: string[] = [];
-    for (let i = 10; i < 100000; i++) {
+    for (let i = 10; i < 10000; i++) {
       children.push(`${i.toString(36)}${i}`);
     }
     this.listOfOption = children;

diff --git a/components/select/demo/module b/components/select/demo/module
@@ -2,8 +2,9 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { FormsModule } from '@angular/forms';
 import { HttpClientJsonpModule } from '@angular/common/http';
 
-export const moduleList = [ FormsModule, HttpClientJsonpModule, NzSelectModule, NzDividerModule, NzRadioModule, NzIconModule, NzInputModule ];
+export const moduleList = [ FormsModule, NzSpinModule, HttpClientJsonpModule, NzSelectModule, NzDividerModule, NzRadioModule, NzIconModule, NzInputModule ];
diff --git a/components/select/demo/optgroup.ts b/components/select/demo/optgroup.ts
@@ -11,7 +11,6 @@ import { Component } from '@angular/core';
       <nz-option-group nzLabel="Engineer">
         <nz-option nzValue="tom" nzLabel="Tom"></nz-option>
       </nz-option-group>
-      <nz-option nzValue="lily" nzLabel="Lily"></nz-option>
     </nz-select>
   `,
   styles: [

diff --git a/components/select/demo/scroll-load.ts b/components/select/demo/scroll-load.ts
@@ -6,22 +6,24 @@ import { map } from 'rxjs/operators';
 @Component({
   selector: 'nz-demo-select-scroll-load',
   template: `
-    <nz-select [(ngModel)]="selectedUser" (nzScrollToBottom)="loadMore()" nzPlaceHolder="Select users" nzAllowClear>
+    <nz-select
+      [(ngModel)]="selectedUser"
+      (nzScrollToBottom)="loadMore()"
+      nzPlaceHolder="Select users"
+      nzAllowClear
+      [nzDropdownRender]="renderTemplate"
+    >
       <nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o"></nz-option>
-      <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
-        <i nz-icon nzType="loading" class="loading-icon"></i> Loading Data...
-      </nz-option>
     </nz-select>
+    <ng-template #renderTemplate>
+      <nz-spin *ngIf="isLoading"></nz-spin>
+    </ng-template>
   `,
   styles: [
     `
       nz-select {
         width: 100%;
       }
-
-      .loading-icon {
-        margin-right: 8px;
-      }
     `
   ]
 })

diff --git a/components/select/option.component.ts b/components/select/option.component.ts
@@ -52,7 +52,6 @@ export class NzOptionComponent implements OnChanges, OnInit, OnDestroy {
   ngOnInit(): void {
     if (this.nzOptionGroupComponent) {
       this.nzOptionGroupComponent.changes.pipe(startWith(true), takeUntil(this.destroy$)).subscribe(() => {
-        this.changes.next();
         this.groupLabel = this.nzOptionGroupComponent.nzLabel;
       });
     }

diff --git a/components/select/select-top-control.component.ts b/components/select/select-top-control.component.ts
@@ -41,6 +41,7 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
           *ngIf="isShowSingleLabel"
           [deletable]="false"
           [disabled]="false"
+          [removeIcon]="removeIcon"
           [label]="listOfTopItem[0].nzLabel"
           [contentTemplateOutlet]="customTemplate"
           [contentTemplateOutletContext]="listOfTopItem[0]"
@@ -63,6 +64,7 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f
           [@zoomMotion]
           [@.disabled]="noAnimation?.nzNoAnimation"
           [nzNoAnimation]="noAnimation?.nzNoAnimation"
+          [removeIcon]="removeIcon"
           [label]="item.nzLabel"
           [disabled]="item.nzDisabled || disabled"
           [contentTemplateOutlet]="item.contentTemplateOutlet"
@@ -102,6 +104,7 @@ export class NzSelectTopControlComponent implements OnChanges {
   @Input() mode: NzSelectModeType = 'default';
   @Input() customTemplate: TemplateRef<{ $implicit: NzSelectItemInterface }> | null = null;
   @Input() maxTagPlaceholder: TemplateRef<{ $implicit: NzSafeAny[] }> | null = null;
+  @Input() removeIcon: TemplateRef<NzSafeAny> | null = null;
   @Input() listOfTopItem: NzSelectItemInterface[] = [];
   @Input() tokenSeparators: string[] = [];
   @Output() readonly tokenize = new EventEmitter<string[]>();
@@ -227,7 +230,7 @@ export class NzSelectTopControlComponent implements OnChanges {
         };
       });
       if (this.listOfTopItem.length > this.maxTagCount) {
-        const exceededLabel = `+ ${this.listOfTopItem.length - this.maxTagCount} ...'`;
+        const exceededLabel = `+ ${this.listOfTopItem.length - this.maxTagCount} ...`;
         const listOfSelectedValue = this.listOfTopItem.map(item => item.nzValue);
         const exceededItem = {
           nzLabel: exceededLabel,

diff --git a/components/select/select.component.ts b/components/select/select.component.ts
@@ -35,7 +35,7 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { InputBoolean, NzNoAnimationDirective, slideMotion } from 'ng-zorro-antd/core';
-import { NzSafeAny, NzSizeLDSType, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
+import { NzSafeAny, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
 import { BehaviorSubject, combineLatest, merge, Subject } from 'rxjs';
 import { startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { NzOptionGroupComponent } from './option-group.component';
@@ -51,6 +51,8 @@ const defaultFilterOption: NzFilterOptionType = (searchValue: string, item: NzSe
   }
 };
 
+export type NzSelectSizeType = 'large' | 'default' | 'small';
+
 @Component({
   selector: 'nz-select',
   exportAs: 'nzSelect',
@@ -75,11 +77,13 @@ const defaultFilterOption: NzFilterOptionType = (searchValue: string, item: NzSe
       [@.disabled]="noAnimation?.nzNoAnimation"
       [nzNoAnimation]="noAnimation?.nzNoAnimation"
       [maxTagPlaceholder]="nzMaxTagPlaceholder"
+      [removeIcon]="nzRemoveIcon"
       [placeHolder]="nzPlaceHolder"
       [maxTagCount]="nzMaxTagCount"
       [customTemplate]="nzCustomTemplate"
       [tokenSeparators]="nzTokenSeparators"
       [showSearch]="nzShowSearch"
+      [autofocus]="nzAutoFocus"
       [listOfTopItem]="listOfTopItem"
       (inputValueChange)="onInputValueChange($event)"
       (tokenize)="onTokenSeparate($event)"
@@ -106,14 +110,14 @@ const defaultFilterOption: NzFilterOptionType = (searchValue: string, item: NzSe
       [cdkConnectedOverlayMinWidth]="nzDropdownMatchSelectWidth ? null : triggerWidth"
       [cdkConnectedOverlayWidth]="nzDropdownMatchSelectWidth ? triggerWidth : null"
       [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayPanelClass]="nzDropdownClassName"
       (backdropClick)="setOpenState(false)"
       (detach)="setOpenState(false)"
       (positionChange)="onPositionChange($event)"
       [cdkConnectedOverlayOpen]="nzOpen"
     >
       <nz-option-container
-        [class]="nzDropdownClassName"
-        [ngStyle]="nzDropdownStyle"
+        [style]="nzDropdownStyle"
         [class.ant-select-dropdown-placement-bottomLeft]="dropDownPosition === 'bottom'"
         [class.ant-select-dropdown-placement-topLeft]="dropDownPosition === 'top'"
         [@slideMotion]="dropDownPosition"
@@ -150,22 +154,22 @@ const defaultFilterOption: NzFilterOptionType = (searchValue: string, item: NzSe
   }
 })
 export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy, AfterContentInit, OnChanges {
-  @Input() nzSize: NzSizeLDSType = 'default';
-  @Input() nzDropdownClassName: string;
+  @Input() nzSize: NzSelectSizeType = 'default';
+  @Input() nzDropdownClassName: string | null = null;
   @Input() nzDropdownMatchSelectWidth = true;
-  @Input() nzDropdownStyle: { [key: string]: string };
-  @Input() nzNotFoundContent: string;
-  @Input() nzPlaceHolder: string;
-  @Input() nzMaxTagCount: number;
-  @Input() nzDropdownRender: TemplateRef<NzSafeAny>;
-  @Input() nzCustomTemplate: TemplateRef<{ $implicit: NzSelectItemInterface }>;
-  @Input() nzSuffixIcon: TemplateRef<void>;
-  @Input() nzClearIcon: TemplateRef<void>;
-  @Input() nzRemoveIcon: TemplateRef<void>;
-  @Input() nzMenuItemSelectedIcon: TemplateRef<void>;
+  @Input() nzDropdownStyle: { [key: string]: string } | null = null;
+  @Input() nzNotFoundContent: string | null = null;
+  @Input() nzPlaceHolder: string | TemplateRef<NzSafeAny> | null = null;
+  @Input() nzMaxTagCount = Infinity;
+  @Input() nzDropdownRender: TemplateRef<NzSafeAny> | null = null;
+  @Input() nzCustomTemplate: TemplateRef<{ $implicit: NzSelectItemInterface }> | null = null;
+  @Input() nzSuffixIcon: TemplateRef<NzSafeAny> | null = null;
+  @Input() nzClearIcon: TemplateRef<NzSafeAny> | null = null;
+  @Input() nzRemoveIcon: TemplateRef<NzSafeAny> | null = null;
+  @Input() nzMenuItemSelectedIcon: TemplateRef<NzSafeAny> | null = null;
   @Input() nzShowArrow = true;
   @Input() nzTokenSeparators: string[] = [];
-  @Input() nzMaxTagPlaceholder: TemplateRef<{ $implicit: NzSafeAny[] }>;
+  @Input() nzMaxTagPlaceholder: TemplateRef<{ $implicit: NzSafeAny[] }> | null = null;
   @Input() nzMaxMultipleCount = Infinity;
   @Input() nzMode: NzSelectModeType = 'default';
   @Input() nzFilterOption: NzFilterOptionType = defaultFilterOption;
@@ -266,7 +270,10 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
       listOfContainerItem = [tagItem, ...listOfContainerItem];
       this.activatedValue = tagItem.nzValue;
     }
-    if (listOfContainerItem.findIndex(item => this.compareWith(item.nzValue, this.activatedValue)) === -1) {
+    if (
+      this.listOfValue.length !== 0 &&
+      listOfContainerItem.findIndex(item => this.compareWith(item.nzValue, this.activatedValue)) === -1
+    ) {
       const activatedItem = listOfContainerItem.find(item => this.compareWith(item.nzValue, this.listOfValue[0])) || listOfContainerItem[0];
       this.activatedValue = (activatedItem && activatedItem.nzValue) || null;
     }
@@ -278,7 +285,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
         listOfContainerItem.splice(index, 0, groupItem);
       });
     }
-    this.listOfContainerItem = listOfContainerItem;
+    this.listOfContainerItem = [...listOfContainerItem];
     this.updateCdkConnectedOverlayPositions();
   }
 
@@ -496,7 +503,6 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
         this.listOfTopItem = this.listOfValue
           .map(v => [...this.listOfTagAndTemplateItem, ...this.listOfTopItem].find(item => this.compareWith(v, item.nzValue))!)
           .filter(item => !!item);
-        this.activatedValue = listOfSelectedValue[0] || null;
         this.updateListOfContainerItem();
       });
   }
@@ -506,13 +512,18 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
   }
 
   ngAfterContentInit(): void {
-    this.listOfNzOptionComponent.changes
+    merge(this.listOfNzOptionGroupComponent.changes, this.listOfNzOptionComponent.changes)
       .pipe(
         startWith(true),
         switchMap(() =>
-          merge(...[this.listOfNzOptionComponent.changes, ...this.listOfNzOptionComponent.map(option => option.changes)]).pipe(
-            startWith(true)
-          )
+          merge(
+            ...[
+              this.listOfNzOptionComponent.changes,
+              this.listOfNzOptionGroupComponent.changes,
+              ...this.listOfNzOptionComponent.map(option => option.changes),
+              ...this.listOfNzOptionGroupComponent.map(option => option.changes)
+            ]
+          ).pipe(startWith(true))
         )
       )
       .subscribe(() => {