chore(module:result): refactor (#4724)

NG-ZORRO · Feb 25, 2020 · 6534fd3 · 6534fd3
1 parent c7a8b37
commit 6534fd3
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 62 deletions.
diff --git a/components/result/nz-result.component.html b/components/result/nz-result.component.html
diff --git a/components/result/public-api.ts b/components/result/public-api.ts
@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-result.module';
-export * from './nz-result.component';
-export * from './nz-result-cells';
+export * from './result.module';
+export * from './result.component';
+export * from './result-cells';
 
 // Making these partial components not visible to users but comprehensible to ng-packagr.
 export { NzResultNotFoundComponent as ɵNzResultNotFoundComponent } from './partial/not-found';

diff --git a/components/result/nz-result-cells.ts → components/result/result-cells.ts b/components/result/nz-result-cells.ts → components/result/result-cells.ts
diff --git a/components/result/nz-result.component.ts → components/result/result.component.ts b/components/result/nz-result.component.ts → components/result/result.component.ts
@@ -26,8 +26,46 @@ const ExceptionStatus = ['404', '500', '403'];
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-result',
   exportAs: 'nzResult',
-  templateUrl: './nz-result.component.html',
   providers: [NzUpdateHostClassService],
+  template: `
+    <div class="ant-result-icon">
+      <ng-container *ngIf="!isException; else exceptionTpl">
+        <ng-container *ngIf="icon">
+          <ng-container *nzStringTemplateOutlet="icon">
+            <i nz-icon [nzType]="icon" nzTheme="fill"></i>
+          </ng-container>
+        </ng-container>
+        <ng-content *ngIf="!icon" select="[nz-result-icon]"></ng-content>
+      </ng-container>
+    </div>
+    <ng-container *ngIf="nzTitle">
+      <div class="ant-result-title" *nzStringTemplateOutlet="nzTitle">
+        {{ nzTitle }}
+      </div>
+    </ng-container>
+    <ng-content *ngIf="!nzTitle" select="div[nz-result-title]"></ng-content>
+    <ng-container *ngIf="nzSubTitle">
+      <div class="ant-result-subtitle" *nzStringTemplateOutlet="nzSubTitle">
+        {{ nzSubTitle }}
+      </div>
+    </ng-container>
+    <ng-content *ngIf="!nzSubTitle" select="div[nz-result-subtitle]"></ng-content>
+    <ng-content select="nz-result-content, [nz-result-content]"></ng-content>
+    <div class="ant-result-extra" *ngIf="nzExtra">
+      <ng-container *nzStringTemplateOutlet="nzExtra">
+        {{ nzExtra }}
+      </ng-container>
+    </div>
+    <ng-content *ngIf="!nzExtra" select="div[nz-result-extra]"></ng-content>
+
+    <ng-template #exceptionTpl>
+      <ng-container [ngSwitch]="nzStatus">
+        <nz-result-not-found *ngSwitchCase="'404'"></nz-result-not-found>
+        <nz-result-server-error *ngSwitchCase="'500'"></nz-result-server-error>
+        <nz-result-unauthorized *ngSwitchCase="'403'"></nz-result-unauthorized>
+      </ng-container>
+    </ng-template>
+  `,
   styles: [
     `
       nz-result {

diff --git a/components/result/nz-result.module.ts → components/result/result.module.ts b/components/result/nz-result.module.ts → components/result/result.module.ts
@@ -18,8 +18,8 @@ import {
   NzResultIconDirective,
   NzResultSubtitleDirective,
   NzResultTitleDirective
-} from './nz-result-cells';
-import { NzResultComponent } from './nz-result.component';
+} from './result-cells';
+import { NzResultComponent } from './result.component';
 
 import { NzResultNotFoundComponent } from './partial/not-found';
 import { NzResultServerErrorComponent } from './partial/server-error.component';

diff --git a/components/result/nz-result.spec.ts → components/result/result.spec.ts b/components/result/nz-result.spec.ts → components/result/result.spec.ts
@@ -1,12 +1,12 @@
-import { CommonModule } from '@angular/common';
 import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/componet-bed';
 
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
-import { NzResultComponent } from './nz-result.component';
-import { NzResultModule } from './nz-result.module';
+import { NzResultComponent } from './result.component';
+import { NzResultModule } from './result.module';
 
 @Component({
   template: `
@@ -30,19 +30,18 @@ export class NzTestResultBasicComponent {
 }
 
 describe('nz-result', () => {
+  let testBed: ComponentBed<NzTestResultBasicComponent>;
   let fixture: ComponentFixture<NzTestResultBasicComponent>;
   let testComponent: NzTestResultBasicComponent;
   let resultEl: DebugElement;
 
   describe('basic', () => {
     beforeEach(() => {
-      TestBed.configureTestingModule({
-        imports: [CommonModule, NzResultModule, NzIconModule],
-        declarations: [NzTestResultBasicComponent]
-      }).compileComponents();
-
-      fixture = TestBed.createComponent(NzTestResultBasicComponent);
-      testComponent = fixture.debugElement.componentInstance;
+      testBed = createComponentBed(NzTestResultBasicComponent, {
+        imports: [NzResultModule, NzIconModule]
+      });
+      fixture = testBed.fixture;
+      testComponent = testBed.component;
       resultEl = fixture.debugElement.query(By.directive(NzResultComponent));
     });