Skip to content

Commit

Permalink
feat(module:check-list): add Unit Testing
Browse files Browse the repository at this point in the history
  • Loading branch information
OriginRing committed Jan 20, 2025
1 parent 7c8889f commit 64e0fdc
Show file tree
Hide file tree
Showing 8 changed files with 338 additions and 90 deletions.
2 changes: 0 additions & 2 deletions components/check-list/check-list-button.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,4 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
export class NzCheckListButtonComponent {
@Input() triggerRender: TemplateRef<void> | string | null = '';
@Input() locale!: NzCheckListI18nInterface;

constructor() {}
}
22 changes: 13 additions & 9 deletions components/check-list/check-list-content.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
import { FormsModule } from '@angular/forms';

import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { NzCheckboxComponent } from 'ng-zorro-antd/checkbox';
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
import { NzCheckListI18nInterface } from 'ng-zorro-antd/i18n';
import { NzIconModule } from 'ng-zorro-antd/icon';
Expand All @@ -29,7 +29,15 @@ import { NzItemProps } from './typings';
selector: 'nz-check-list-content',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
imports: [NzIconModule, NzProgressModule, NzOutletModule, NzButtonModule, NzCheckboxModule, FormsModule, DecimalPipe],
imports: [
NzIconModule,
NzProgressModule,
NzOutletModule,
NzButtonModule,
FormsModule,
DecimalPipe,
NzCheckboxComponent
],
template: `
@if (isVisible) {
@if (getPercent() === 100) {
Expand Down Expand Up @@ -128,13 +136,9 @@ export class NzCheckListContentComponent {
isVisible: boolean = true;

getPercent(): number {
if (this.index <= 1) {
return 0;
} else if (this.index > this.items.length) {
return 100;
} else {
return ((this.index - 1) / this.items.length) * 100;
}
if (this.index <= 1) return 0;
if (this.index > this.items.length) return 100;
return ((this.index - 1) / this.items.length) * 100;
}

constructor(private cdr: ChangeDetectorRef) {}
Expand Down
277 changes: 277 additions & 0 deletions components/check-list/check-list.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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 { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';

import { NzCheckListComponent } from './check-list.component';
import { NzCheckListModule } from './check-list.module';
import { NzItemProps } from './typings';

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;
}
2 changes: 1 addition & 1 deletion components/check-list/check-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ import {
} from '@angular/core';
import { takeUntil } from 'rxjs/operators';

import { NzItemProps } from 'ng-zorro-antd/check-list/typings';
import { NzDestroyService } from 'ng-zorro-antd/core/services';
import { NzCheckListI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
import { NzPopoverModule } from 'ng-zorro-antd/popover';

import { NzCheckListButtonComponent } from './check-list-button.component';
import { NzCheckListContentComponent } from './check-list-content.component';
import { NzItemProps } from './typings';

@Component({
selector: 'nz-check-list',
Expand Down
Loading

0 comments on commit 64e0fdc

Please sign in to comment.