refactor(module:cron-expression): migrate demo to standalone mode (#8761

)

components/cron-expression/cron-expression.spec.ts

@@ -1,30 +1,23 @@
-import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, fakeAsync, flush } from '@angular/core/testing';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 
-import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/component-bed';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzCronExpressionComponent } from 'ng-zorro-antd/cron-expression/cron-expression.component';
 import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression/cron-expression.module';
 import { NzCronExpressionSize } from 'ng-zorro-antd/cron-expression/typings';
-import { NzFormModule } from 'ng-zorro-antd/form';
 
-describe('nz-cron-expression', () => {
+describe('cron-expression', () => {
   describe('basic', () => {
-    let testBed: ComponentBed<NzTestCronExpressionComponent>;
     let fixture: ComponentFixture<NzTestCronExpressionComponent>;
     let testComponent: NzTestCronExpressionComponent;
     let resultEl: DebugElement;
 
     beforeEach(() => {
-      testBed = createComponentBed(NzTestCronExpressionComponent, {
-        imports: [NzCronExpressionModule],
-        providers: [provideHttpClientTesting()]
-      });
-      fixture = testBed.fixture;
+      fixture = TestBed.createComponent(NzTestCronExpressionComponent);
       fixture.detectChanges();
-      testComponent = testBed.component;
+      testComponent = fixture.debugElement.componentInstance;
       resultEl = fixture.debugElement.query(By.directive(NzCronExpressionComponent));
     });
 
@@ -81,16 +74,11 @@ describe('nz-cron-expression', () => {
   });
 
   describe('type', () => {
-    let testBed: ComponentBed<NzTestCronExpressionTypeComponent>;
     let fixture: ComponentFixture<NzTestCronExpressionTypeComponent>;
     let resultEl: DebugElement;
 
     beforeEach(() => {
-      testBed = createComponentBed(NzTestCronExpressionTypeComponent, {
-        imports: [NzCronExpressionModule],
-        providers: [provideHttpClientTesting()]
-      });
-      fixture = testBed.fixture;
+      fixture = TestBed.createComponent(NzTestCronExpressionTypeComponent);
       fixture.detectChanges();
       resultEl = fixture.debugElement.query(By.directive(NzCronExpressionComponent));
     });
@@ -108,19 +96,14 @@ describe('nz-cron-expression', () => {
   });
 
   describe('form', () => {
-    let testBed: ComponentBed<NzTestCronExpressionFormComponent>;
     let fixture: ComponentFixture<NzTestCronExpressionFormComponent>;
     let testComponent: NzTestCronExpressionFormComponent;
     let resultEl: DebugElement;
 
     beforeEach(() => {
-      testBed = createComponentBed(NzTestCronExpressionFormComponent, {
-        imports: [NzCronExpressionModule, FormsModule, ReactiveFormsModule, NzFormModule],
-        providers: [provideHttpClientTesting()]
-      });
-      fixture = testBed.fixture;
+      fixture = TestBed.createComponent(NzTestCronExpressionFormComponent);
       fixture.detectChanges();
-      testComponent = testBed.component;
+      testComponent = fixture.debugElement.componentInstance;
       resultEl = fixture.debugElement.query(By.directive(NzCronExpressionComponent));
     });
 
@@ -140,6 +123,8 @@ describe('nz-cron-expression', () => {
 });
 
 @Component({
+  standalone: true,
+  imports: [NzButtonModule, NzCronExpressionModule],
   template: `
     <nz-cron-expression
       [nzSize]="nzSize"
@@ -163,13 +148,17 @@ export class NzTestCronExpressionComponent {
 }
 
 @Component({
-  template: ` <nz-cron-expression [nzType]="nzType"></nz-cron-expression> `
+  standalone: true,
+  imports: [NzCronExpressionModule],
+  template: `<nz-cron-expression [nzType]="nzType"></nz-cron-expression>`
 })
 export class NzTestCronExpressionTypeComponent {
   nzType: 'linux' | 'spring' = 'spring';
 }
 
 @Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, NzCronExpressionModule],
   template: `<nz-cron-expression [formControl]="formControl"></nz-cron-expression>`
 })
 export class NzTestCronExpressionFormComponent {

components/cron-expression/demo/basic.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression';
+
 @Component({
   selector: 'nz-demo-cron-expression-basic',
+  standalone: true,
+  imports: [NzCronExpressionModule],
   template: `
     <nz-cron-expression></nz-cron-expression>
     <br />

components/cron-expression/demo/borderless.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression';
+
 @Component({
   selector: 'nz-demo-cron-expression-borderless',
+  standalone: true,
+  imports: [NzCronExpressionModule],
   template: ` <nz-cron-expression nzBorderless></nz-cron-expression> `
 })
 export class NzDemoCronExpressionBorderlessComponent {}

components/cron-expression/demo/collapse.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression';
+
 @Component({
   selector: 'nz-demo-cron-expression-collapse',
+  standalone: true,
+  imports: [NzCronExpressionModule],
   template: ` <nz-cron-expression [nzCollapseDisable]="true"></nz-cron-expression> `
 })
 export class NzDemoCronExpressionCollapseComponent {}

components/cron-expression/demo/semantic.ts

@@ -1,17 +1,24 @@
+import { DatePipe } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { parseExpression } from 'cron-parser';
 
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression';
 
 @Component({
   selector: 'nz-demo-cron-expression-semantic',
-  template: ` <nz-cron-expression
+  standalone: true,
+  imports: [FormsModule, NzCronExpressionModule, DatePipe],
+  template: `
+    <nz-cron-expression
       [nzSemantic]="semanticTemplate"
       [ngModel]="value"
       (ngModelChange)="getValue($event)"
     ></nz-cron-expression>
-    <ng-template #semanticTemplate>Next Time: {{ semantic | date: 'YYYY-MM-dd HH:mm:ss' }}</ng-template>`
+    <ng-template #semanticTemplate>Next Time: {{ semantic | date: 'YYYY-MM-dd HH:mm:ss' }}</ng-template>
+  `
 })
 export class NzDemoCronExpressionSemanticComponent {
   value: string = '10 * * * *';

components/cron-expression/demo/shortcuts.ts

@@ -1,7 +1,15 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 @Component({
   selector: 'nz-demo-cron-expression-shortcuts',
+  standalone: true,
+  imports: [FormsModule, NzButtonModule, NzCronExpressionModule, NzDropDownModule, NzIconModule],
   template: `
     <nz-cron-expression
       [nzExtra]="shortcuts"

components/cron-expression/demo/size.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression';
+
 @Component({
   selector: 'nz-demo-cron-expression-size',
+  standalone: true,
+  imports: [NzCronExpressionModule],
   template: `
     <div class="example-cron-expression">
       <nz-cron-expression nzSize="small"></nz-cron-expression>

components/cron-expression/demo/type.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression';
+
 @Component({
   selector: 'nz-demo-cron-expression-type',
+  standalone: true,
+  imports: [NzCronExpressionModule],
   template: `
     <div class="example-cron-expression">
       <nz-cron-expression nzType="linux"></nz-cron-expression>

components/cron-expression/demo/use.ts

@@ -1,8 +1,15 @@
 import { Component } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzCronExpressionModule } from 'ng-zorro-antd/cron-expression';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
 
 @Component({
   selector: 'nz-demo-cron-expression-use',
+  standalone: true,
+  imports: [ReactiveFormsModule, NzButtonModule, NzCronExpressionModule, NzFormModule, NzInputModule],
   template: `
     <form nz-form [nzLayout]="'vertical'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
       <nz-form-item>