fix(theme:yn): fix unable to select parameters (#866)

ng-alain · May 1, 2020 · fa9d0ea · fa9d0ea
1 parent 25cb0ee
commit fa9d0ea
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 52 deletions.
diff --git a/packages/theme/src/pipes/yn/yn.pipe.spec.ts b/packages/theme/src/pipes/yn/yn.pipe.spec.ts
@@ -13,68 +13,77 @@ describe('Pipe: yn', () => {
       imports: [AlainThemeModule.forRoot()],
       declarations: [TestComponent],
     });
-    fixture = TestBed.createComponent(TestComponent);
-    fixture.detectChanges();
   });
 
-  [
-    { value: true, result: `是` },
-    { value: false, result: `否` },
-    {
-      value: true,
-      result: `好`,
-      yes: '好',
-      no: '坏',
-    },
-    {
-      value: false,
-      result: `坏`,
-      yes: '好',
-      no: '坏',
-    },
-  ].forEach((item: any) => {
-    it(`${item.value.toString()} muse be ${item.result}`, () => {
-      fixture.componentInstance.value = item.value;
-      fixture.componentInstance.yes = item.yes;
-      fixture.componentInstance.no = item.no;
+  describe('', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(TestComponent);
       fixture.detectChanges();
-      expect((fixture.debugElement.query(By.css('#result')).nativeElement as HTMLElement).innerHTML).toContain(
-        item.result,
-      );
     });
-  });
 
-  describe('#mode', () => {
-    it('with text', () => {
-      fixture.componentInstance.mode = 'text';
-      fixture.componentInstance.value = true;
-      fixture.detectChanges();
-      expect(fixture.debugElement.queryAll(By.css('svg')).length).toBe(0);
-      fixture.componentInstance.value = false;
-      fixture.detectChanges();
-      expect(fixture.debugElement.queryAll(By.css('svg')).length).toBe(0);
+    [
+      { value: true, result: `是` },
+      { value: false, result: `否` },
+      {
+        value: true,
+        result: `好`,
+        yes: '好',
+        no: '坏',
+      },
+      {
+        value: false,
+        result: `坏`,
+        yes: '好',
+        no: '坏',
+      },
+    ].forEach((item: any) => {
+      it(`${item.value.toString()} muse be ${item.result}`, () => {
+        fixture.componentInstance.value = item.value;
+        fixture.componentInstance.yes = item.yes;
+        fixture.componentInstance.no = item.no;
+        fixture.detectChanges();
+        expect((fixture.debugElement.query(By.css('#result')).nativeElement as HTMLElement).innerHTML).toContain(item.result);
+      });
     });
-    it('with full', () => {
-      fixture.componentInstance.mode = 'full';
-      fixture.componentInstance.value = true;
-      fixture.detectChanges();
-      let html = (fixture.debugElement.query(By.css('#result')).nativeElement as HTMLElement).innerHTML;
-      expect(html).toContain('<svg');
-      expect(html).not.toContain(`title="`);
-      // when false
-      fixture.componentInstance.value = false;
-      fixture.detectChanges();
-      html = (fixture.debugElement.query(By.css('#result')).nativeElement as HTMLElement).innerHTML;
-      expect(html).toContain('<svg');
-      expect(html).not.toContain(`title="`);
+
+    describe('#mode', () => {
+      it('with text', () => {
+        fixture.componentInstance.mode = 'text';
+        fixture.componentInstance.value = true;
+        fixture.detectChanges();
+        expect(fixture.debugElement.queryAll(By.css('svg')).length).toBe(0);
+        fixture.componentInstance.value = false;
+        fixture.detectChanges();
+        expect(fixture.debugElement.queryAll(By.css('svg')).length).toBe(0);
+      });
+      it('with full', () => {
+        fixture.componentInstance.mode = 'full';
+        fixture.componentInstance.value = true;
+        fixture.detectChanges();
+        let html = (fixture.debugElement.query(By.css('#result')).nativeElement as HTMLElement).innerHTML;
+        expect(html).toContain('<svg');
+        expect(html).not.toContain(`title="`);
+        // when false
+        fixture.componentInstance.value = false;
+        fixture.detectChanges();
+        html = (fixture.debugElement.query(By.css('#result')).nativeElement as HTMLElement).innerHTML;
+        expect(html).toContain('<svg');
+        expect(html).not.toContain(`title="`);
+      });
     });
   });
+
+  it('should be used default config', () => {
+    TestBed.overrideTemplate(TestComponent, `<div id="result" [innerHTML]="value | yn"></div>`);
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+
+    expect((fixture.debugElement.query(By.css('#result')).nativeElement as HTMLElement).innerHTML).toContain(`是`);
+  });
 });
 
 @Component({
-  template: `
-    <div id="result" [innerHTML]="value | yn: yes:no:mode"></div>
-  `,
+  template: ` <div id="result" [innerHTML]="value | yn: yes:no:mode"></div> `,
 })
 class TestComponent {
   value = true;

diff --git a/packages/theme/src/pipes/yn/yn.pipe.ts b/packages/theme/src/pipes/yn/yn.pipe.ts
@@ -12,7 +12,7 @@ const CLS_NO = `class="yn__no"`;
 export class YNPipe implements PipeTransform {
   constructor(private dom: DomSanitizer) {}
 
-  transform(value: boolean, yes: string, no: string, mode: YNMode, isSafeHtml = true): SafeHtml {
+  transform(value: boolean, yes?: string, no?: string, mode?: YNMode, isSafeHtml = true): SafeHtml {
     let html = '';
     yes = yes || '是';
     no = no || '否';