fix(module:sf:autocomplete): fix missing value (#291)

* fix(module:sf:autocomplete): fix missing value - #290 * fix: test
ng-alain · Nov 21, 2018 · ac17fb3 · ac17fb3
1 parent 6d5a110
commit ac17fb3
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 75 deletions.
diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.spec.ts b/packages/form/src/widgets/autocomplete/autocomplete.widget.spec.ts
@@ -2,7 +2,10 @@ import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
 import { of } from 'rxjs';
-import { NzAutocompleteComponent } from 'ng-zorro-antd';
+import {
+ NzAutocompleteComponent,
+ NzAutocompleteOptionComponent,
+} from 'ng-zorro-antd';
 import { deepCopy } from '@delon/util';
 
 import {
@@ -22,97 +25,89 @@ describe('form: widget: autocomplete', () => {
  let page: SFPage;
  const widget = 'autocomplete';
 
- beforeEach(() =>
- ({ fixture, dl, context, page } = builder({ detectChanges: false })));
+ beforeEach(
+ () => ({ fixture, dl, context, page } = builder({ detectChanges: false })),
+ );
 
  describe('[data source]', () => {
- it(
- 'with enum',
- fakeAsync(() => {
- const data = ['aaa', 'bbb', 'ccc'];
- const s: SFSchema = {
- properties: {
- a: { type: 'string', ui: { widget }, enum: data },
- },
- };
- const typeValue = 'a';
- page
- .newSchema(s)
- .typeEvent('focusin')
- .checkCount('nz-auto-option', data.length)
- .click('nz-auto-option')
- .checkValue('a', `aaa`)
- .asyncEnd(500);
- }),
- );
+ it('with enum', fakeAsync(() => {
+ const data = ['aaa', 'bbb', 'ccc'];
+ const s: SFSchema = {
+ properties: {
+ a: { type: 'string', ui: { widget }, enum: data },
+ },
+ };
+ page
+ .newSchema(s)
+ .typeEvent('focusin')
+ .checkCount('nz-auto-option', data.length)
+ .click('nz-auto-option')
+ .checkValue('a', `aaa`)
+ .asyncEnd(500);
+ }));
  it('with async data', () => {
  const s: SFSchema = {
  properties: {
  a: {
  type: 'string',
- ui: { widget, asyncData: () => of(['asdf']), debounceTime: 1 },
+ ui: {
+ widget,
+ asyncData: () => of([{ label: 'label1', value: '1' }]),
+ debounceTime: 1,
+ },
  },
  },
  };
  page.newSchema(s);
  const comp = page.getWidget<AutoCompleteWidget>('sf-autocomplete');
- comp.list.subscribe(res => expect(res[0].label).toBe('asdf'));
+ comp.list.subscribe(res => {
+ expect(res[0].value).toBe('1');
+ });
  });
- it(
- 'with email of format',
- fakeAsync(() => {
- const s: SFSchema = {
- properties: {
- a: {
- type: 'string',
- format: 'email',
- },
+ it('with email of format', fakeAsync(() => {
+ const s: SFSchema = {
+ properties: {
+ a: {
+ type: 'string',
+ format: 'email',
  },
- };
- const typeValue = 'a';
- page
- .newSchema(s)
- .typeChar(typeValue)
- .checkCount('nz-auto-option', EMAILSUFFIX.length)
- .click('nz-auto-option')
- .checkValue('a', `${typeValue}@${EMAILSUFFIX[0]}`)
- .asyncEnd(150);
- // TIP: 一个非常不要脸的校验数据正确性的代码
- // 当测试用例需要依赖第三方组件时，如何更好的校验这是一个问题？
- // const autoComp = page.getWidget<NzAutocompleteComponent>('nz-autocomplete');
- // expect(autoComp.options.length).toBeGreaterThan(0);
- // expect(autoComp.options.first.nzValue).toBe('asdf@qq.com');
- }),
- );
+ },
+ };
+ const typeValue = 'a';
+ page
+ .newSchema(s)
+ .typeChar(typeValue)
+ .checkCount('nz-auto-option', EMAILSUFFIX.length)
+ .click('nz-auto-option')
+ .checkValue('a', `${typeValue}@${EMAILSUFFIX[0]}`)
+ .asyncEnd(150);
+ }));
  });
 
  describe('[ui]', () => {
- it(
- 'should be custom filterOption',
- fakeAsync(() => {
- const data = ['a1', 'a11', 'a111'];
- const s: SFSchema = {
- properties: {
- a: {
- type: 'string',
- ui: {
- widget,
- filterOption: (input: string, option: SFSchemaEnum) =>
- option.label === 'a11',
- },
- enum: data,
+ it('should be custom filterOption', fakeAsync(() => {
+ const data = ['a1', 'a11', 'a111'];
+ const s: SFSchema = {
+ properties: {
+ a: {
+ type: 'string',
+ ui: {
+ widget,
+ filterOption: (input: string, option: SFSchemaEnum) =>
+ option.label === 'a11',
  },
+ enum: data,
  },
- };
-  const typeValue = 'a';
-  page
-  .newSchema(s)
-  .typeChar('a1')
-  .checkCount('nz-auto-option', 1)
-  .typeChar('a11')
-  .checkCount('nz-auto-option', 1)
-  .asyncEnd(500);
- }),
- );
+ },
+ };
+ const typeValue = 'a';
+ page
+ .newSchema(s)
+ .typeChar('a1')
+ .checkCount('nz-auto-option', 1)
+ .typeChar('a11')
+ .checkCount('nz-auto-option', 1)
+  .asyncEnd(500);
+ }));
  });
 });
diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.ts b/packages/form/src/widgets/autocomplete/autocomplete.widget.ts
@@ -32,7 +32,7 @@ export const EMAILSUFFIX = [
  [nzDefaultActiveFirstOption]="i.defaultActiveFirstOption"
  [nzWidth]="i.width"
  (selectionChange)="setValue($event?.nzValue)">
- <nz-auto-option *ngFor="let i of list | async" [nzValue]="i.label">{{i.label}}</nz-auto-option>
+ <nz-auto-option *ngFor="let i of list | async" [nzValue]="i.value">{{i.label}}</nz-auto-option>
  </nz-autocomplete>
  </sf-item-wrap>
  `,