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 Feb 14, 2025
1 parent 442b816 commit fc61703
Show file tree
Hide file tree
Showing 9 changed files with 404 additions and 154 deletions.
8 changes: 3 additions & 5 deletions components/check-list/check-list-button.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,15 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
@if (!!triggerRender) {
<ng-container *nzStringTemplateOutlet="triggerRender">{{ triggerRender }}</ng-container>
} @else {
<span nz-icon nzType="check-circle" nzTheme="outline" class="ant-checklist-icon"></span>
<div class="ant-checklist-description">{{ locale.checkList }}</div>
<span nz-icon nzType="check-circle" nzTheme="outline" class="ant-check-list-icon"></span>
<div class="ant-check-list-description">{{ locale.checkList }}</div>
}
`,
host: {
class: 'ant-btn ant-btn-primary ant-checklist-button'
class: 'ant-btn ant-btn-primary ant-check-list-button'
}
})
export class NzCheckListButtonComponent {
@Input() triggerRender: TemplateRef<void> | string | null = '';
@Input() locale!: NzCheckListI18nInterface;

constructor() {}
}
70 changes: 37 additions & 33 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,89 +29,97 @@ 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) {
<div class="ant-checklist-header-finish">
<span nz-icon nzType="check-circle" nzTheme="outline" class="ant-checklist-header-finish-icon"></span>
<h3 class="ant-checklist-header-finish-title">{{ locale.checkListFinish }}</h3>
<div class="ant-check-list-header-finish">
<span nz-icon nzType="check-circle" nzTheme="outline" class="ant-check-list-header-finish-icon"></span>
<h3 class="ant-check-list-header-finish-title">{{ locale.checkListFinish }}</h3>
<button nz-button nzType="primary" style="margin: 24px" (click)="closePopover.emit(false)">{{
locale.checkListClose
}}</button>
</div>
} @else {
<div class="ant-checklist-header">
<div class="ant-checklist-header-title">
<div class="ant-check-list-header">
<div class="ant-check-list-header-title">
@if (!!title) {
<ng-container *nzStringTemplateOutlet="title">{{ title }}</ng-container>
} @else {
{{ locale.checkList }}
}
</div>
<div class="ant-checklist-header-extra">
<div class="ant-check-list-header-extra">
<span nz-icon nzType="down" nzTheme="outline" (click)="closePopover.emit(false)"></span>
</div>
</div>
@if (progress) {
<div class="ant-checklist-progressBar">
<div class="ant-checklist-progressBar-progress">
<div class="ant-check-list-progressBar">
<div class="ant-check-list-progressBar-progress">
<nz-progress [nzPercent]="getPercent() | number: '1.0-0'"></nz-progress>
</div>
</div>
}
}
<div class="ant-checklist-steps-content">
<div class="ant-check-list-steps-content">
@for (item of items; track item.key || item.description; let i = $index) {
<div
class="ant-checklist-steps"
[class.ant-checklist-highlight]="index === i + 1"
[class.ant-checklist-checked]="index > i + 1"
class="ant-check-list-steps"
[class.ant-check-list-highlight]="index === i + 1"
[class.ant-check-list-checked]="index > i + 1"
>
<div class="ant-checklist-steps-item">
<div class="ant-checklist-steps-item-circle">
<div class="ant-check-list-steps-item">
<div class="ant-check-list-steps-item-circle">
@if (index > i + 1) {
<span nz-icon nzType="check" nzTheme="outline" class="ant-checklist-steps-checkoutlined"></span>
<span nz-icon nzType="check" nzTheme="outline" class="ant-check-list-steps-checkoutlined"></span>
} @else {
<div class="ant-checklist-steps-number">{{ i + 1 }}</div>
<div class="ant-check-list-steps-number">{{ i + 1 }}</div>
}
</div>
<div class="ant-checklist-steps-item-description">{{ item.description }}</div>
<div class="ant-check-list-steps-item-description">{{ item.description }}</div>
</div>
@if (index === i + 1 && !!item.onClick) {
<span
nz-icon
nzType="arrow-right"
nzTheme="outline"
class="ant-checklist-steps-item-arrows"
class="ant-check-list-steps-item-arrows"
(click)="item.onClick()"
></span>
}
</div>
}
</div>
<div class="ant-checklist-footer" (click)="cancel(false)">
<div class="ant-check-list-footer" (click)="cancel(false)">
@if (!!footer) {
<ng-container *nzStringTemplateOutlet="footer">{{ footer }}</ng-container>
} @else {
{{ locale.checkListFooter }}
}
</div>
} @else {
<div class="ant-checklist-close-check">
<div class="ant-checklist-close-check-title">{{ locale.checkListCheck }}</div>
<div class="ant-checklist-close-check-action">
<div class="ant-check-list-close-check">
<div class="ant-check-list-close-check-title">{{ locale.checkListCheck }}</div>
<div class="ant-check-list-close-check-action">
<button nz-button nzType="primary" (click)="clearModel()">{{ locale.ok }}</button>
<button nz-button (click)="cancel(true)">{{ locale.cancel }}</button>
</div>
<div class="ant-checklist-close-check-other">
<div class="ant-check-list-close-check-other">
<label nz-checkbox [(ngModel)]="checked">{{ locale.checkListCheckOther }}</label>
</div>
</div>
}
`,
host: {
class: 'ant-checklist-content'
class: 'ant-check-list-content'
}
})
export class NzCheckListContentComponent {
Expand All @@ -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
Loading

0 comments on commit fc61703

Please sign in to comment.