Skip to content

Commit fc61703

Browse files
author
OriginRing
committed
feat(module:check-list): add Unit Testing
1 parent 442b816 commit fc61703

File tree

9 files changed

+404
-154
lines changed

9 files changed

+404
-154
lines changed

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,15 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
1818
@if (!!triggerRender) {
1919
<ng-container *nzStringTemplateOutlet="triggerRender">{{ triggerRender }}</ng-container>
2020
} @else {
21-
<span nz-icon nzType="check-circle" nzTheme="outline" class="ant-checklist-icon"></span>
22-
<div class="ant-checklist-description">{{ locale.checkList }}</div>
21+
<span nz-icon nzType="check-circle" nzTheme="outline" class="ant-check-list-icon"></span>
22+
<div class="ant-check-list-description">{{ locale.checkList }}</div>
2323
}
2424
`,
2525
host: {
26-
class: 'ant-btn ant-btn-primary ant-checklist-button'
26+
class: 'ant-btn ant-btn-primary ant-check-list-button'
2727
}
2828
})
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: 37 additions & 33 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,89 +29,97 @@ 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) {
36-
<div class="ant-checklist-header-finish">
37-
<span nz-icon nzType="check-circle" nzTheme="outline" class="ant-checklist-header-finish-icon"></span>
38-
<h3 class="ant-checklist-header-finish-title">{{ locale.checkListFinish }}</h3>
44+
<div class="ant-check-list-header-finish">
45+
<span nz-icon nzType="check-circle" nzTheme="outline" class="ant-check-list-header-finish-icon"></span>
46+
<h3 class="ant-check-list-header-finish-title">{{ locale.checkListFinish }}</h3>
3947
<button nz-button nzType="primary" style="margin: 24px" (click)="closePopover.emit(false)">{{
4048
locale.checkListClose
4149
}}</button>
4250
</div>
4351
} @else {
44-
<div class="ant-checklist-header">
45-
<div class="ant-checklist-header-title">
52+
<div class="ant-check-list-header">
53+
<div class="ant-check-list-header-title">
4654
@if (!!title) {
4755
<ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
4856
} @else {
4957
{{ locale.checkList }}
5058
}
5159
</div>
52-
<div class="ant-checklist-header-extra">
60+
<div class="ant-check-list-header-extra">
5361
<span nz-icon nzType="down" nzTheme="outline" (click)="closePopover.emit(false)"></span>
5462
</div>
5563
</div>
5664
@if (progress) {
57-
<div class="ant-checklist-progressBar">
58-
<div class="ant-checklist-progressBar-progress">
65+
<div class="ant-check-list-progressBar">
66+
<div class="ant-check-list-progressBar-progress">
5967
<nz-progress [nzPercent]="getPercent() | number: '1.0-0'"></nz-progress>
6068
</div>
6169
</div>
6270
}
6371
}
64-
<div class="ant-checklist-steps-content">
72+
<div class="ant-check-list-steps-content">
6573
@for (item of items; track item.key || item.description; let i = $index) {
6674
<div
67-
class="ant-checklist-steps"
68-
[class.ant-checklist-highlight]="index === i + 1"
69-
[class.ant-checklist-checked]="index > i + 1"
75+
class="ant-check-list-steps"
76+
[class.ant-check-list-highlight]="index === i + 1"
77+
[class.ant-check-list-checked]="index > i + 1"
7078
>
71-
<div class="ant-checklist-steps-item">
72-
<div class="ant-checklist-steps-item-circle">
79+
<div class="ant-check-list-steps-item">
80+
<div class="ant-check-list-steps-item-circle">
7381
@if (index > i + 1) {
74-
<span nz-icon nzType="check" nzTheme="outline" class="ant-checklist-steps-checkoutlined"></span>
82+
<span nz-icon nzType="check" nzTheme="outline" class="ant-check-list-steps-checkoutlined"></span>
7583
} @else {
76-
<div class="ant-checklist-steps-number">{{ i + 1 }}</div>
84+
<div class="ant-check-list-steps-number">{{ i + 1 }}</div>
7785
}
7886
</div>
79-
<div class="ant-checklist-steps-item-description">{{ item.description }}</div>
87+
<div class="ant-check-list-steps-item-description">{{ item.description }}</div>
8088
</div>
8189
@if (index === i + 1 && !!item.onClick) {
8290
<span
8391
nz-icon
8492
nzType="arrow-right"
8593
nzTheme="outline"
86-
class="ant-checklist-steps-item-arrows"
94+
class="ant-check-list-steps-item-arrows"
8795
(click)="item.onClick()"
8896
></span>
8997
}
9098
</div>
9199
}
92100
</div>
93-
<div class="ant-checklist-footer" (click)="cancel(false)">
101+
<div class="ant-check-list-footer" (click)="cancel(false)">
94102
@if (!!footer) {
95103
<ng-container *nzStringTemplateOutlet="footer">{{ footer }}</ng-container>
96104
} @else {
97105
{{ locale.checkListFooter }}
98106
}
99107
</div>
100108
} @else {
101-
<div class="ant-checklist-close-check">
102-
<div class="ant-checklist-close-check-title">{{ locale.checkListCheck }}</div>
103-
<div class="ant-checklist-close-check-action">
109+
<div class="ant-check-list-close-check">
110+
<div class="ant-check-list-close-check-title">{{ locale.checkListCheck }}</div>
111+
<div class="ant-check-list-close-check-action">
104112
<button nz-button nzType="primary" (click)="clearModel()">{{ locale.ok }}</button>
105113
<button nz-button (click)="cancel(true)">{{ locale.cancel }}</button>
106114
</div>
107-
<div class="ant-checklist-close-check-other">
115+
<div class="ant-check-list-close-check-other">
108116
<label nz-checkbox [(ngModel)]="checked">{{ locale.checkListCheckOther }}</label>
109117
</div>
110118
</div>
111119
}
112120
`,
113121
host: {
114-
class: 'ant-checklist-content'
122+
class: 'ant-check-list-content'
115123
}
116124
})
117125
export class NzCheckListContentComponent {
@@ -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) {}

0 commit comments

Comments
 (0)