Skip to content

Commit 64e0fdc

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

File tree

8 files changed

+338
-90
lines changed

8 files changed

+338
-90
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-content.component.ts

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
import { FormsModule } from '@angular/forms';
1818

1919
import { NzButtonModule } from 'ng-zorro-antd/button';
20-
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
20+
import { NzCheckboxComponent } from 'ng-zorro-antd/checkbox';
2121
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
2222
import { NzCheckListI18nInterface } from 'ng-zorro-antd/i18n';
2323
import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -29,7 +29,15 @@ import { NzItemProps } from './typings';
2929
selector: 'nz-check-list-content',
3030
changeDetection: ChangeDetectionStrategy.OnPush,
3131
encapsulation: ViewEncapsulation.None,
32-
imports: [NzIconModule, NzProgressModule, NzOutletModule, NzButtonModule, NzCheckboxModule, FormsModule, DecimalPipe],
32+
imports: [
33+
NzIconModule,
34+
NzProgressModule,
35+
NzOutletModule,
36+
NzButtonModule,
37+
FormsModule,
38+
DecimalPipe,
39+
NzCheckboxComponent
40+
],
3341
template: `
3442
@if (isVisible) {
3543
@if (getPercent() === 100) {
@@ -128,13 +136,9 @@ export class NzCheckListContentComponent {
128136
isVisible: boolean = true;
129137

130138
getPercent(): number {
131-
if (this.index <= 1) {
132-
return 0;
133-
} else if (this.index > this.items.length) {
134-
return 100;
135-
} else {
136-
return ((this.index - 1) / this.items.length) * 100;
137-
}
139+
if (this.index <= 1) return 0;
140+
if (this.index > this.items.length) return 100;
141+
return ((this.index - 1) / this.items.length) * 100;
138142
}
139143

140144
constructor(private cdr: ChangeDetectorRef) {}

‎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 { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
9+
10+
import { NzCheckListComponent } from './check-list.component';
11+
import { NzCheckListModule } from './check-list.module';
12+
import { NzItemProps } from './typings';
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/check-list.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@ import {
1717
} from '@angular/core';
1818
import { takeUntil } from 'rxjs/operators';
1919

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

2524
import { NzCheckListButtonComponent } from './check-list-button.component';
2625
import { NzCheckListContentComponent } from './check-list-content.component';
26+
import { NzItemProps } from './typings';
2727

2828
@Component({
2929
selector: 'nz-check-list',

0 commit comments

Comments
 (0)