Skip to content

Commit c08c341

Browse files
author
OriginRing
committed
feat(module:check-list): add Unit Testing
1 parent 7c8889f commit c08c341

File tree

6 files changed

+324
-80
lines changed

6 files changed

+324
-80
lines changed

‎components/check-list/check-list-button.component.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,4 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
2929
export class NzCheckListButtonComponent {
3030
@Input() triggerRender: TemplateRef<void> | string | null = '';
3131
@Input() locale!: NzCheckListI18nInterface;
32-
33-
constructor() {}
3432
}

‎components/check-list/check-list.component.spec.ts

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
import { OverlayContainer } from '@angular/cdk/overlay';
2+
import { provideHttpClientTesting } from '@angular/common/http/testing';
3+
import { Component, DebugElement, TemplateRef } from '@angular/core';
4+
import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
5+
import { By } from '@angular/platform-browser';
6+
import { provideNoopAnimations } from '@angular/platform-browser/animations';
7+
8+
import { NzItemProps } from 'ng-zorro-antd/check-list/typings';
9+
import { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
10+
11+
import { NzCheckListComponent } from './check-list.component';
12+
import { NzCheckListModule } from './check-list.module';
13+
14+
describe('check-list', () => {
15+
let fixture: ComponentFixture<NzTestCheckListBasicComponent>;
16+
let testComponent: NzTestCheckListBasicComponent;
17+
let resultEl: DebugElement;
18+
let overlayContainer: OverlayContainer;
19+
let overlayContainerElement: HTMLElement;
20+
21+
function waitingForTooltipToggling(): void {
22+
fixture.detectChanges();
23+
tick(500);
24+
fixture.detectChanges();
25+
}
26+
27+
beforeEach(fakeAsync(() => {
28+
TestBed.configureTestingModule({
29+
providers: [provideNoopAnimations(), provideHttpClientTesting()]
30+
});
31+
fixture = TestBed.createComponent(NzTestCheckListBasicComponent);
32+
fixture.detectChanges();
33+
testComponent = fixture.debugElement.componentInstance;
34+
resultEl = fixture.debugElement.query(By.directive(NzCheckListComponent));
35+
}));
36+
37+
beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => {
38+
overlayContainer = oc;
39+
overlayContainerElement = oc.getContainerElement();
40+
}));
41+
42+
afterEach(() => {
43+
overlayContainer.ngOnDestroy();
44+
});
45+
46+
it('basic', () => {
47+
expect(resultEl.nativeElement.classList).toContain('ant-checklist');
48+
expect(!!resultEl.nativeElement.querySelector('.ant-checklist-button .ant-checklist-icon')).toBeTrue();
49+
expect(!!resultEl.nativeElement.querySelector('.ant-checklist-button .ant-checklist-description')).toBeTrue();
50+
});
51+
52+
it('nzShow', () => {
53+
testComponent.show = false;
54+
fixture.detectChanges();
55+
expect(resultEl.nativeElement.classList).toContain('ant-checklist-hide');
56+
});
57+
58+
it('nzVisible', fakeAsync(() => {
59+
testComponent.visible = true;
60+
fixture.detectChanges();
61+
waitingForTooltipToggling();
62+
expect(!!overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeTrue();
63+
expect(!!overlayContainerElement.querySelector('.ant-popover-inner-content .ant-checklist-header')).toBeTrue();
64+
expect(
65+
!!overlayContainerElement.querySelector(
66+
'.ant-popover-inner-content .ant-checklist-header .ant-checklist-header-title'
67+
)
68+
).toBeTrue();
69+
}));
70+
71+
it('nzItems', fakeAsync(() => {
72+
testComponent.visible = true;
73+
testComponent.items = [
74+
{
75+
description: 'Step 1',
76+
onClick: () => {}
77+
}
78+
];
79+
fixture.detectChanges();
80+
waitingForTooltipToggling();
81+
expect(!!overlayContainerElement.querySelector('.ant-checklist-steps')).toBeTrue();
82+
}));
83+
84+
it('nzProgress', fakeAsync(() => {
85+
testComponent.visible = true;
86+
fixture.detectChanges();
87+
waitingForTooltipToggling();
88+
expect(!!overlayContainerElement.querySelector('.ant-checklist-progressBar')).toBeTrue();
89+
testComponent.progress = false;
90+
fixture.detectChanges();
91+
expect(!overlayContainerElement.querySelector('.ant-checklist-progressBar')).toBeTrue();
92+
}));
93+
94+
it('nzIndex', fakeAsync(() => {
95+
testComponent.visible = true;
96+
testComponent.items = [
97+
{
98+
description: 'Step 1',
99+
onClick: () => {}
100+
},
101+
{
102+
description: 'Step 2',
103+
onClick: () => {}
104+
}
105+
];
106+
fixture.detectChanges();
107+
waitingForTooltipToggling();
108+
expect(overlayContainerElement.querySelectorAll('.ant-checklist-steps').length).toBe(2);
109+
expect(
110+
(
111+
overlayContainerElement.querySelector(
112+
'.ant-checklist-highlight .ant-checklist-steps-item-description'
113+
) as HTMLElement
114+
).innerText
115+
).toBe('Step 1');
116+
expect((overlayContainerElement.querySelector('.ant-progress-text') as HTMLElement).innerText).toBe('0%');
117+
expect(overlayContainerElement.querySelectorAll('.ant-checklist-steps-item-arrows').length).toBe(1);
118+
119+
testComponent.index = 2;
120+
fixture.detectChanges();
121+
expect(
122+
(
123+
overlayContainerElement.querySelector(
124+
'.ant-checklist-checked .ant-checklist-steps-item-description'
125+
) as HTMLElement
126+
).innerText
127+
).toBe('Step 1');
128+
expect(
129+
(
130+
overlayContainerElement.querySelector(
131+
'.ant-checklist-highlight .ant-checklist-steps-item-description'
132+
) as HTMLElement
133+
).innerText
134+
).toBe('Step 2');
135+
expect((overlayContainerElement.querySelector('.ant-progress-text') as HTMLElement).innerText).toBe('50%');
136+
137+
testComponent.index = 3;
138+
fixture.detectChanges();
139+
expect(!overlayContainerElement.querySelector('.ant-checklist-progressBar')).toBeTrue();
140+
expect(!!overlayContainerElement.querySelector('.ant-checklist-header-finish')).toBeTrue();
141+
}));
142+
143+
it('lose the list when you are finished', fakeAsync(() => {
144+
testComponent.visible = true;
145+
testComponent.items = [
146+
{
147+
description: 'Step 1',
148+
onClick: () => {}
149+
}
150+
];
151+
testComponent.index = 2;
152+
fixture.detectChanges();
153+
waitingForTooltipToggling();
154+
const dom = overlayContainerElement.querySelector('.ant-checklist-header-finish .ant-btn');
155+
if (!!dom) {
156+
dispatchMouseEvent(dom, 'click');
157+
waitingForTooltipToggling();
158+
expect(!overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeTrue();
159+
}
160+
}));
161+
162+
it('icon close List', fakeAsync(() => {
163+
testComponent.visible = true;
164+
fixture.detectChanges();
165+
waitingForTooltipToggling();
166+
const dom = overlayContainerElement.querySelector('.ant-checklist-header-extra .anticon');
167+
if (!!dom) {
168+
dispatchMouseEvent(dom, 'click');
169+
waitingForTooltipToggling();
170+
expect(!overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeTrue();
171+
}
172+
}));
173+
174+
it('actively close the list', fakeAsync(() => {
175+
testComponent.visible = true;
176+
fixture.detectChanges();
177+
waitingForTooltipToggling();
178+
const dom = overlayContainerElement.querySelector('.ant-checklist-footer');
179+
if (!!dom) {
180+
dispatchMouseEvent(dom, 'click');
181+
waitingForTooltipToggling();
182+
expect(!!overlayContainerElement.querySelector('.ant-checklist-close-check')).toBeTrue();
183+
const btnDom = overlayContainerElement.querySelector('.ant-checklist-close-check-action .ant-btn');
184+
if (btnDom) {
185+
dispatchMouseEvent(btnDom, 'click');
186+
waitingForTooltipToggling();
187+
expect(!overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeTrue();
188+
}
189+
}
190+
}));
191+
192+
it('actively close hidden lists', fakeAsync(() => {
193+
testComponent.visible = true;
194+
fixture.detectChanges();
195+
waitingForTooltipToggling();
196+
const dom = overlayContainerElement.querySelector('.ant-checklist-footer');
197+
if (!!dom) {
198+
dispatchMouseEvent(dom, 'click');
199+
waitingForTooltipToggling();
200+
expect(!!overlayContainerElement.querySelector('.ant-checklist-close-check')).toBeTrue();
201+
expect(
202+
!!overlayContainerElement.querySelector('.ant-checklist-close-check .ant-checklist-close-check-title')
203+
).toBeTrue();
204+
expect(
205+
!!overlayContainerElement.querySelector('.ant-checklist-close-check .ant-checklist-close-check-action')
206+
).toBeTrue();
207+
expect(
208+
!!overlayContainerElement.querySelector('.ant-checklist-close-check .ant-checklist-close-check-other')
209+
).toBeTrue();
210+
const btnDom = overlayContainerElement.querySelector('.ant-checklist-close-check-action .ant-btn');
211+
const labelDom = overlayContainerElement.querySelector('.ant-checklist-close-check-other .ant-checkbox-wrapper');
212+
if (btnDom && labelDom) {
213+
dispatchMouseEvent(labelDom, 'click');
214+
waitingForTooltipToggling();
215+
dispatchMouseEvent(btnDom, 'click');
216+
waitingForTooltipToggling();
217+
expect(!overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeTrue();
218+
expect(!overlayContainerElement.querySelector('.ant-checklist')).toBeTrue();
219+
}
220+
}
221+
}));
222+
223+
it('nzTriggerRender ', () => {
224+
testComponent.show = true;
225+
testComponent.triggerRender = 'Check List';
226+
fixture.detectChanges();
227+
expect((resultEl.nativeElement.querySelector('.ant-checklist-button') as HTMLElement).innerText).toBe('Check List');
228+
});
229+
230+
it('nzTitle', fakeAsync(() => {
231+
testComponent.title = 'Check List';
232+
testComponent.visible = true;
233+
fixture.detectChanges();
234+
waitingForTooltipToggling();
235+
expect((overlayContainerElement.querySelector('.ant-checklist-header-title') as HTMLElement).innerText).toBe(
236+
'Check List'
237+
);
238+
}));
239+
240+
it('nzFooter', fakeAsync(() => {
241+
testComponent.footer = 'Check List';
242+
testComponent.visible = true;
243+
fixture.detectChanges();
244+
waitingForTooltipToggling();
245+
expect((overlayContainerElement.querySelector('.ant-checklist-footer') as HTMLElement).innerText).toBe(
246+
'Check List'
247+
);
248+
}));
249+
});
250+
251+
@Component({
252+
selector: 'nz-test-check-list-basic',
253+
imports: [NzCheckListModule],
254+
template: `
255+
<nz-check-list
256+
[nzShow]="show"
257+
[nzVisible]="visible"
258+
[nzItems]="items"
259+
[nzIndex]="index"
260+
[nzProgress]="progress"
261+
[nzTriggerRender]="triggerRender"
262+
[nzTitle]="title"
263+
[nzFooter]="footer"
264+
>
265+
</nz-check-list>
266+
`
267+
})
268+
export class NzTestCheckListBasicComponent {
269+
show: boolean = true;
270+
visible: boolean = false;
271+
items: NzItemProps[] = [];
272+
index: number = 1;
273+
progress: boolean = true;
274+
triggerRender: TemplateRef<void> | string | null = null;
275+
title: TemplateRef<void> | string | null = null;
276+
footer: TemplateRef<void> | string | null = null;
277+
}

‎components/check-list/demo/basic.ts

Lines changed: 6 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,38 @@
11
import { Component } from '@angular/core';
22

3-
import { NzButtonModule } from 'ng-zorro-antd/button';
43
import { NzCheckListModule, NzItemProps } from 'ng-zorro-antd/check-list';
5-
import { NzWaveDirective } from 'ng-zorro-antd/core/wave';
6-
import { NzModalModule } from 'ng-zorro-antd/modal';
74

85
@Component({
96
selector: 'nz-demo-check-list-basic',
10-
imports: [NzCheckListModule, NzButtonModule, NzWaveDirective, NzModalModule],
11-
template: `
12-
<nz-check-list [nzItems]="nzItems" [nzIndex]="index" (nzHideCallback)="hideCancel($event)"></nz-check-list>
13-
<nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
14-
<ng-container *nzModalContent>
15-
<p>Content one</p>
16-
<p>Content two</p>
17-
<p>Content three</p>
18-
</ng-container>
19-
<ng-container *nzModalFooter>
20-
<button nz-button nzType="default" (click)="handleCancel()">Cancel</button>
21-
<button nz-button nzType="primary" (click)="handleOk()">Finish</button>
22-
</ng-container>
23-
</nz-modal>
24-
`
7+
imports: [NzCheckListModule],
8+
template: ` <nz-check-list [nzItems]="nzItems" [nzIndex]="index"></nz-check-list> `
259
})
2610
export class NzDemoCheckListBasicComponent {
2711
index: number = 1;
28-
isVisible: boolean = false;
2912
nzItems: NzItemProps[] = [
3013
{
31-
description: '第一步',
14+
description: 'step 1',
3215
onClick: () => {
33-
console.log(1);
3416
this.index++;
3517
}
3618
},
3719
{
38-
description: '第二步',
20+
description: 'step 2',
3921
onClick: () => {
40-
this.isVisible = true;
4122
this.index++;
4223
}
4324
},
4425
{
45-
description: '第三步',
26+
description: 'step 3',
4627
onClick: () => {
4728
this.index++;
4829
}
4930
},
5031
{
51-
description: '第四步',
32+
description: 'step 4',
5233
onClick: () => {
5334
this.index++;
5435
}
5536
}
5637
];
57-
58-
handleOk(): void {
59-
this.isVisible = false;
60-
}
61-
62-
handleCancel(): void {
63-
this.isVisible = false;
64-
}
65-
66-
hideCancel(check: boolean): void {
67-
console.log(check);
68-
}
6938
}

0 commit comments

Comments
 (0)