feat(module:check-list): add Unit Testing

NG-ZORRO · Jan 17, 2025 · c08c341 · c08c341
1 parent 7c8889f
commit c08c341
Show file tree

Hide file tree

Showing 6 changed files with 324 additions and 80 deletions.
diff --git a/components/check-list/check-list-button.component.ts b/components/check-list/check-list-button.component.ts
@@ -29,6 +29,4 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 export class NzCheckListButtonComponent {
   @Input() triggerRender: TemplateRef<void> | string | null = '';
   @Input() locale!: NzCheckListI18nInterface;
-
-  constructor() {}
 }
diff --git a/components/check-list/check-list.component.spec.ts b/components/check-list/check-list.component.spec.ts
@@ -0,0 +1,277 @@
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { Component, DebugElement, TemplateRef } from '@angular/core';
+import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
+
+import { NzItemProps } from 'ng-zorro-antd/check-list/typings';
+import { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
+
+import { NzCheckListComponent } from './check-list.component';
+import { NzCheckListModule } from './check-list.module';
+
+describe('check-list', () => {
+  let fixture: ComponentFixture<NzTestCheckListBasicComponent>;
+  let testComponent: NzTestCheckListBasicComponent;
+  let resultEl: DebugElement;
+  let overlayContainer: OverlayContainer;
+  let overlayContainerElement: HTMLElement;
+
+  function waitingForTooltipToggling(): void {
+    fixture.detectChanges();
+    tick(500);
+    fixture.detectChanges();
+  }
+
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      providers: [provideNoopAnimations(), provideHttpClientTesting()]
+    });
+    fixture = TestBed.createComponent(NzTestCheckListBasicComponent);
+    fixture.detectChanges();
+    testComponent = fixture.debugElement.componentInstance;
+    resultEl = fixture.debugElement.query(By.directive(NzCheckListComponent));
+  }));
+
+  beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => {
+    overlayContainer = oc;
+    overlayContainerElement = oc.getContainerElement();
+  }));
+
+  afterEach(() => {
+    overlayContainer.ngOnDestroy();
+  });
+
+  it('basic', () => {
+    expect(resultEl.nativeElement.classList).toContain('ant-checklist');
+    expect(!!resultEl.nativeElement.querySelector('.ant-checklist-button .ant-checklist-icon')).toBeTrue();
+    expect(!!resultEl.nativeElement.querySelector('.ant-checklist-button .ant-checklist-description')).toBeTrue();
+  });
+
+  it('nzShow', () => {
+    testComponent.show = false;
+    fixture.detectChanges();
+    expect(resultEl.nativeElement.classList).toContain('ant-checklist-hide');
+  });
+
+  it('nzVisible', fakeAsync(() => {
+    testComponent.visible = true;
+    fixture.detectChanges();
+    waitingForTooltipToggling();
+    expect(!!overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeTrue();
+    expect(!!overlayContainerElement.querySelector('.ant-popover-inner-content .ant-checklist-header')).toBeTrue();
+    expect(
+      !!overlayContainerElement.querySelector(
+        '.ant-popover-inner-content .ant-checklist-header .ant-checklist-header-title'
+      )
+    ).toBeTrue();
+  }));
+
+  it('nzItems', fakeAsync(() => {
+    testComponent.visible = true;
+    testComponent.items = [
+      {
+        description: 'Step 1',
+        onClick: () => {}
+      }
+    ];
+    fixture.detectChanges();
+    waitingForTooltipToggling();
+    expect(!!overlayContainerElement.querySelector('.ant-checklist-steps')).toBeTrue();
+  }));
+
+  it('nzProgress', fakeAsync(() => {
+    testComponent.visible = true;
+    fixture.detectChanges();
+    waitingForTooltipToggling();
+    expect(!!overlayContainerElement.querySelector('.ant-checklist-progressBar')).toBeTrue();
+    testComponent.progress = false;
+    fixture.detectChanges();
+    expect(!overlayContainerElement.querySelector('.ant-checklist-progressBar')).toBeTrue();
+  }));
+
+  it('nzIndex', fakeAsync(() => {
+    testComponent.visible = true;
+    testComponent.items = [
+      {
+        description: 'Step 1',
+        onClick: () => {}
+      },
+      {
+        description: 'Step 2',
+        onClick: () => {}
+      }
+    ];
+    fixture.detectChanges();
+    waitingForTooltipToggling();
+    expect(overlayContainerElement.querySelectorAll('.ant-checklist-steps').length).toBe(2);
+    expect(
+      (
+        overlayContainerElement.querySelector(
+          '.ant-checklist-highlight .ant-checklist-steps-item-description'
+        ) as HTMLElement
+      ).innerText
+    ).toBe('Step 1');
+    expect((overlayContainerElement.querySelector('.ant-progress-text') as HTMLElement).innerText).toBe('0%');
+    expect(overlayContainerElement.querySelectorAll('.ant-checklist-steps-item-arrows').length).toBe(1);
+
+    testComponent.index = 2;
+    fixture.detectChanges();
+    expect(
+      (
+        overlayContainerElement.querySelector(
+          '.ant-checklist-checked .ant-checklist-steps-item-description'
+        ) as HTMLElement
+      ).innerText
+    ).toBe('Step 1');
+    expect(
+      (
+        overlayContainerElement.querySelector(
+          '.ant-checklist-highlight .ant-checklist-steps-item-description'
+        ) as HTMLElement
+      ).innerText
+    ).toBe('Step 2');
+    expect((overlayContainerElement.querySelector('.ant-progress-text') as HTMLElement).innerText).toBe('50%');
+
+    testComponent.index = 3;
+    fixture.detectChanges();
+    expect(!overlayContainerElement.querySelector('.ant-checklist-progressBar')).toBeTrue();
+    expect(!!overlayContainerElement.querySelector('.ant-checklist-header-finish')).toBeTrue();
+  }));
+
+  it('lose the list when you are finished', fakeAsync(() => {
+    testComponent.visible = true;
+    testComponent.items = [
+      {
+        description: 'Step 1',
+        onClick: () => {}
+      }
+    ];
+    testComponent.index = 2;
+    fixture.detectChanges();
+    waitingForTooltipToggling();
+    const dom = overlayContainerElement.querySelector('.ant-checklist-header-finish .ant-btn');
+    if (!!dom) {
+      dispatchMouseEvent(dom, 'click');
+      waitingForTooltipToggling();
+      expect(!overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeTrue();
+    }
+  }));
+
+  it('icon close List', fakeAsync(() => {
+    testComponent.visible = true;
+    fixture.detectChanges();
+    waitingForTooltipToggling();
+    const dom = overlayContainerElement.querySelector('.ant-checklist-header-extra .anticon');
+    if (!!dom) {
+      dispatchMouseEvent(dom, 'click');
+      waitingForTooltipToggling();
+      expect(!overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeTrue();
+    }
+  }));
+
+  it('actively close the list', fakeAsync(() => {
+    testComponent.visible = true;
+    fixture.detectChanges();
+    waitingForTooltipToggling();
+    const dom = overlayContainerElement.querySelector('.ant-checklist-footer');
+    if (!!dom) {
+      dispatchMouseEvent(dom, 'click');
+      waitingForTooltipToggling();
+      expect(!!overlayContainerElement.querySelector('.ant-checklist-close-check')).toBeTrue();
+      const btnDom = overlayContainerElement.querySelector('.ant-checklist-close-check-action .ant-btn');
+      if (btnDom) {
+        dispatchMouseEvent(btnDom, 'click');
+        waitingForTooltipToggling();
+        expect(!overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeTrue();
+      }
+    }
+  }));
+
+  it('actively close hidden lists', fakeAsync(() => {
+    testComponent.visible = true;
+    fixture.detectChanges();
+    waitingForTooltipToggling();
+    const dom = overlayContainerElement.querySelector('.ant-checklist-footer');
+    if (!!dom) {
+      dispatchMouseEvent(dom, 'click');
+      waitingForTooltipToggling();
+      expect(!!overlayContainerElement.querySelector('.ant-checklist-close-check')).toBeTrue();
+      expect(
+        !!overlayContainerElement.querySelector('.ant-checklist-close-check .ant-checklist-close-check-title')
+      ).toBeTrue();
+      expect(
+        !!overlayContainerElement.querySelector('.ant-checklist-close-check .ant-checklist-close-check-action')
+      ).toBeTrue();
+      expect(
+        !!overlayContainerElement.querySelector('.ant-checklist-close-check .ant-checklist-close-check-other')
+      ).toBeTrue();
+      const btnDom = overlayContainerElement.querySelector('.ant-checklist-close-check-action .ant-btn');
+      const labelDom = overlayContainerElement.querySelector('.ant-checklist-close-check-other .ant-checkbox-wrapper');
+      if (btnDom && labelDom) {
+        dispatchMouseEvent(labelDom, 'click');
+        waitingForTooltipToggling();
+        dispatchMouseEvent(btnDom, 'click');
+        waitingForTooltipToggling();
+        expect(!overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeTrue();
+        expect(!overlayContainerElement.querySelector('.ant-checklist')).toBeTrue();
+      }
+    }
+  }));
+
+  it('nzTriggerRender ', () => {
+    testComponent.show = true;
+    testComponent.triggerRender = 'Check List';
+    fixture.detectChanges();
+    expect((resultEl.nativeElement.querySelector('.ant-checklist-button') as HTMLElement).innerText).toBe('Check List');
+  });
+
+  it('nzTitle', fakeAsync(() => {
+    testComponent.title = 'Check List';
+    testComponent.visible = true;
+    fixture.detectChanges();
+    waitingForTooltipToggling();
+    expect((overlayContainerElement.querySelector('.ant-checklist-header-title') as HTMLElement).innerText).toBe(
+      'Check List'
+    );
+  }));
+
+  it('nzFooter', fakeAsync(() => {
+    testComponent.footer = 'Check List';
+    testComponent.visible = true;
+    fixture.detectChanges();
+    waitingForTooltipToggling();
+    expect((overlayContainerElement.querySelector('.ant-checklist-footer') as HTMLElement).innerText).toBe(
+      'Check List'
+    );
+  }));
+});
+
+@Component({
+  selector: 'nz-test-check-list-basic',
+  imports: [NzCheckListModule],
+  template: `
+    <nz-check-list
+      [nzShow]="show"
+      [nzVisible]="visible"
+      [nzItems]="items"
+      [nzIndex]="index"
+      [nzProgress]="progress"
+      [nzTriggerRender]="triggerRender"
+      [nzTitle]="title"
+      [nzFooter]="footer"
+    >
+    </nz-check-list>
+  `
+})
+export class NzTestCheckListBasicComponent {
+  show: boolean = true;
+  visible: boolean = false;
+  items: NzItemProps[] = [];
+  index: number = 1;
+  progress: boolean = true;
+  triggerRender: TemplateRef<void> | string | null = null;
+  title: TemplateRef<void> | string | null = null;
+  footer: TemplateRef<void> | string | null = null;
+}
diff --git a/components/check-list/demo/basic.ts b/components/check-list/demo/basic.ts
@@ -1,69 +1,38 @@
 import { Component } from '@angular/core';
 
-import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzCheckListModule, NzItemProps } from 'ng-zorro-antd/check-list';
-import { NzWaveDirective } from 'ng-zorro-antd/core/wave';
-import { NzModalModule } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-check-list-basic',
-  imports: [NzCheckListModule, NzButtonModule, NzWaveDirective, NzModalModule],
-  template: `
-    <nz-check-list [nzItems]="nzItems" [nzIndex]="index" (nzHideCallback)="hideCancel($event)"></nz-check-list>
-    <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-      <ng-container *nzModalContent>
-        <p>Content one</p>
-        <p>Content two</p>
-        <p>Content three</p>
-      </ng-container>
-      <ng-container *nzModalFooter>
-        <button nz-button nzType="default" (click)="handleCancel()">Cancel</button>
-        <button nz-button nzType="primary" (click)="handleOk()">Finish</button>
-      </ng-container>
-    </nz-modal>
-  `
+  imports: [NzCheckListModule],
+  template: ` <nz-check-list [nzItems]="nzItems" [nzIndex]="index"></nz-check-list> `
 })
 export class NzDemoCheckListBasicComponent {
   index: number = 1;
-  isVisible: boolean = false;
   nzItems: NzItemProps[] = [
     {
-      description: '第一步',
+      description: 'step 1',
       onClick: () => {
-        console.log(1);
         this.index++;
       }
     },
     {
-      description: '第二步',
+      description: 'step 2',
       onClick: () => {
-        this.isVisible = true;
         this.index++;
       }
     },
     {
-      description: '第三步',
+      description: 'step 3',
       onClick: () => {
         this.index++;
       }
     },
     {
-      description: '第四步',
+      description: 'step 4',
       onClick: () => {
         this.index++;
       }
     }
   ];
-
-  handleOk(): void {
-    this.isVisible = false;
-  }
-
-  handleCancel(): void {
-    this.isVisible = false;
-  }
-
-  hideCancel(check: boolean): void {
-    console.log(check);
-  }
 }