test(spec): use zoneless test

NG-NEST · Jun 22, 2024 · 77f782d · 77f782d
1 parent 92f7b8f
commit 77f782d
Show file tree

Hide file tree

Showing 116 changed files with 1,313 additions and 970 deletions.
diff --git a/README.md b/README.md
@@ -39,6 +39,6 @@ npm 18.0.1
 
 ## 交流群号
 
-| <img src="https://ngnest.com/assets/img/tim.jpg" width="250" /> | <img src="https://ngnest.com/assets/img/weixin.jpg" width="250" /> |
+| <img src="https://ngnest.com/img/tim.jpg" width="250" /> | <img src="https://ngnest.com/img/weixin.jpg" width="250" /> |
 | --------------------------------------------------------------- | ------------------------------------------------------------------ |
 | QQ                                                              | 微信                                                               |
diff --git a/lib/ng-nest/ui/affix/affix.component.spec.ts b/lib/ng-nest/ui/affix/affix.component.spec.ts
@@ -1,25 +1,25 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { XAffixComponent } from '@ng-nest/ui/affix';
 import { XAffixPrefix } from './affix.property';
 import { XButtonComponent } from '@ng-nest/ui/button';
-import { XThemeComponent } from '@ng-nest/ui/theme';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe(XAffixPrefix, () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [TestXAffixComponent],
-    imports: [BrowserAnimationsModule,
-        XAffixComponent,
-        XButtonComponent,
-        XThemeComponent],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-}).compileComponents();
+      declarations: [TestXAffixComponent],
+      imports: [BrowserAnimationsModule, XAffixComponent, XButtonComponent],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+        provideExperimentalZonelessChangeDetection()
+      ]
+    }).compileComponents();
   });
   describe(`default.`, () => {
     let fixture: ComponentFixture<TestXAffixComponent>;
@@ -37,7 +37,6 @@ describe(XAffixPrefix, () => {
 
 @Component({
   template: `
-    <x-theme showDark></x-theme>
     <div class="row scroll">
       <x-affix top="0">
         <x-button>滚动条下滑，我将固定到顶部</x-button>

diff --git a/lib/ng-nest/ui/alert/alert.component.spec.ts b/lib/ng-nest/ui/alert/alert.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, DebugElement, ChangeDetectorRef } from '@angular/core';
+import { Component, DebugElement, ChangeDetectorRef, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { XAlertComponent } from '@ng-nest/ui/alert';
@@ -8,23 +8,27 @@ import { XAlertPrefix } from './alert.property';
 import { XCountdownComponent } from '@ng-nest/ui/statistic';
 import { XAddSeconds } from '@ng-nest/ui/core';
 import { XButtonComponent } from '@ng-nest/ui/button';
-import { XThemeComponent } from '@ng-nest/ui/theme';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe(XAlertPrefix, () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [TestXAlertComponent],
-    imports: [BrowserAnimationsModule,
+      declarations: [TestXAlertComponent],
+      imports: [
+        BrowserAnimationsModule,
         FormsModule,
         BrowserAnimationsModule,
         XButtonComponent,
         XAlertComponent,
-        XCountdownComponent,
-        XThemeComponent],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-}).compileComponents();
+        XCountdownComponent
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+        provideExperimentalZonelessChangeDetection()
+      ]
+    }).compileComponents();
   });
   describe(`default.`, () => {
     let fixture: ComponentFixture<TestXAlertComponent>;
@@ -42,7 +46,6 @@ describe(XAlertPrefix, () => {
 
 @Component({
   template: `
-    <x-theme showDark></x-theme>
     <div class="row">
       <x-alert title="成功提示" type="success"> </x-alert>
       <x-alert title="消息提示" type="info"> </x-alert>

diff --git a/lib/ng-nest/ui/anchor/anchor.component.spec.ts b/lib/ng-nest/ui/anchor/anchor.component.spec.ts
@@ -1,10 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { XAnchorComponent } from '@ng-nest/ui/anchor';
 import { XAnchorPrefix } from './anchor.property';
-import { XThemeComponent } from '@ng-nest/ui/theme';
 import { XButtonComponent } from '@ng-nest/ui/button';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
@@ -13,13 +12,14 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 describe(XAnchorPrefix, () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [TestXAnchorComponent],
-    imports: [BrowserAnimationsModule,
-        XAnchorComponent,
-        XThemeComponent,
-        XButtonComponent],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-}).compileComponents();
+      declarations: [TestXAnchorComponent],
+      imports: [BrowserAnimationsModule, XAnchorComponent, XButtonComponent],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+        provideExperimentalZonelessChangeDetection()
+      ]
+    }).compileComponents();
   });
   describe(`default.`, () => {
     let fixture: ComponentFixture<TestXAnchorComponent>;
@@ -168,7 +168,6 @@ const htmlTemplate = `
 
 @Component({
   template: `
-    <x-theme showDark></x-theme>
     <div #scroll class="row scroll">
       <x-anchor [scroll]="scroll" layout="left"> ${htmlTemplate} </x-anchor>
     </div>

diff --git a/lib/ng-nest/ui/api/api.component.spec.ts b/lib/ng-nest/ui/api/api.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { XApiComponent } from '@ng-nest/ui/api';
 import { XApiPrefix } from './api.property';
@@ -10,10 +10,14 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 describe(XApiPrefix, () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [TestXApiComponent],
-    imports: [XApiComponent],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-}).compileComponents();
+      declarations: [TestXApiComponent],
+      imports: [XApiComponent],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+        provideExperimentalZonelessChangeDetection()
+      ]
+    }).compileComponents();
   });
   describe(`default.`, () => {
     let fixture: ComponentFixture<TestXApiComponent>;

diff --git a/lib/ng-nest/ui/auto-complete/auto-complete.component.spec.ts b/lib/ng-nest/ui/auto-complete/auto-complete.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Component, DebugElement, ChangeDetectorRef } from '@angular/core';
+import { Component, DebugElement, ChangeDetectorRef, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { XAutoCompleteComponent } from '@ng-nest/ui/auto-complete';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -9,7 +9,6 @@ import { XRowComponent, XColComponent } from '@ng-nest/ui/layout';
 import { Observable, interval } from 'rxjs';
 import { XData } from '@ng-nest/ui/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { XThemeComponent } from '@ng-nest/ui/theme';
 import { XRadioComponent } from '@ng-nest/ui/radio';
 import { XInputComponent } from '@ng-nest/ui/input';
 import { XSelectComponent } from '@ng-nest/ui/select';
@@ -27,7 +26,7 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 describe(XAutoCompletePrefix, () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [
+      declarations: [
         TestXAutoCompleteComponent,
         TestXAutoCompleteAsyncComponent,
         TestXAutoCompleteLabelComponent,
@@ -37,9 +36,9 @@ describe(XAutoCompletePrefix, () => {
         TestXAutoCompleteBorderedComponent,
         TestXAutoCompleteBeforeAfterComponent,
         TestXAutoCompleteCustomComponent
-    ],
-    imports: [BrowserAnimationsModule,
-        XThemeComponent,
+      ],
+      imports: [
+        BrowserAnimationsModule,
         XAutoCompleteComponent,
         FormsModule,
         ReactiveFormsModule,
@@ -55,9 +54,14 @@ describe(XAutoCompletePrefix, () => {
         XTextareaComponent,
         XTimePickerModule,
         XDatePickerComponent,
-        XIconComponent],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-}).compileComponents();
+        XIconComponent
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+        provideExperimentalZonelessChangeDetection()
+      ]
+    }).compileComponents();
   });
   describe(`default.`, () => {
     let fixture: ComponentFixture<TestXAutoCompleteComponent>;
@@ -185,7 +189,6 @@ const data: XData<XAutoCompleteNode> = [
 
 @Component({
   template: `
-    <x-theme showDark></x-theme>
     <x-row>
       <x-col span="8">
         <x-auto-complete [data]="data1" [(ngModel)]="model1"></x-auto-complete>
@@ -221,7 +224,6 @@ class TestXAutoCompleteComponent {
 
 @Component({
   template: `
-    <x-theme showDark></x-theme>
     <x-row>
       <x-col>
         <x-auto-complete label="方式" [data]="data" [(ngModel)]="model"></x-auto-complete>
@@ -267,7 +269,6 @@ class TestXAutoCompleteLabelComponent {
 
 @Component({
   template: `
-    <x-theme showDark></x-theme>
     <x-row>
       <x-col>
         <x-auto-complete [data]="data" disabled></x-auto-complete>
@@ -303,7 +304,6 @@ class TestXAutoCompleteDisabledComponent {
 
 @Component({
   template: `
-    <x-theme showDark></x-theme>
     <x-row>
       <x-col>
         <x-auto-complete [data]="data" [(ngModel)]="model1" required></x-auto-complete>
@@ -339,7 +339,6 @@ class TestXAutoCompleteRequiredComponent {
 
 @Component({
   template: `
-    <x-theme showDark></x-theme>
     <x-row>
       <x-col>
         <x-auto-complete [data]="data" [(ngModel)]="model"></x-auto-complete>
@@ -721,7 +720,6 @@ class TestXAutoCompleteBeforeAfterComponent {
 
 @Component({
   template: `
-    <x-theme showDark></x-theme>
     <x-row>
       <x-col span="8">
         <x-auto-complete [data]="data1" [(ngModel)]="model1" [nodeTpl]="nodeTpl"></x-auto-complete>

diff --git a/lib/ng-nest/ui/avatar/avatar.component.html b/lib/ng-nest/ui/avatar/avatar.component.html
@@ -17,7 +17,7 @@
     <x-icon type="fto-image"></x-icon>
   }
   @if (label()) {
-    <span #labelRef [ngStyle]="labelStyleMap()" *xOutlet="label(); context: { $label: label() }">
+    <span #labelRef class="x-avatar-text" [ngStyle]="labelStyleMap()" *xOutlet="label(); context: { $label: label() }">
       {{ label() }}
     </span>
   }

diff --git a/lib/ng-nest/ui/avatar/avatar.component.spec.ts b/lib/ng-nest/ui/avatar/avatar.component.spec.ts
@@ -36,7 +36,7 @@ class XTestAvatarPropertyComponent {
   src = signal('');
   fit = signal<XAvatarFit>('cover');
   gap = signal('4px');
-  backgroundColor = signal('#999999');
+  backgroundColor = signal('rgb(153, 153, 153)');
 }
 
 describe(XAvatarPrefix, () => {
@@ -71,11 +71,69 @@ describe(XAvatarPrefix, () => {
   describe(`input.`, async () => {
     let fixture: ComponentFixture<XTestAvatarPropertyComponent>;
     let component: XTestAvatarPropertyComponent;
+    let avatar: DebugElement;
     beforeEach(async () => {
       fixture = TestBed.createComponent(XTestAvatarPropertyComponent);
       component = fixture.componentInstance;
+      avatar = fixture.debugElement.query(By.css('.x-avatar'));
+      fixture.detectChanges();
+    });
+    it('label.', () => {
+      component.label.set('Label');
+      fixture.detectChanges();
+      expect(avatar.nativeElement.textContent.trim()).toBe('Label');
+    });
+    it('size.', () => {
+      expect(avatar.nativeElement).toHaveClass('x-avatar-medium');
+      component.size.set('mini');
+      fixture.detectChanges();
+      expect(avatar.nativeElement).toHaveClass('x-avatar-mini');
+    });
+    it('icon.', () => {
+      component.icon.set('fto-x');
+      fixture.detectChanges();
+      const icon = fixture.debugElement.query(By.css('x-icon'));
+      expect(icon.nativeElement).toHaveClass('fto-x');
+    });
+    it('shape.', () => {
+      expect(avatar.nativeElement).toHaveClass('x-avatar-circle');
+      component.shape.set('square');
+      fixture.detectChanges();
+      expect(avatar.nativeElement).toHaveClass('x-avatar-square');
+    });
+    it('src.', () => {
+      const src = 'https://ngnest.com/img/logo/logo-144x144.png';
+      component.src.set(src);
+      fixture.detectChanges();
+      const img = fixture.debugElement.query(By.css('img'));
+      expect(img.nativeElement.getAttribute('src')).toBe(src);
+    });
+    it('fit.', () => {
+      component.src.set('https://ngnest.com/img/logo/logo-144x144.png');
+      fixture.detectChanges();
+      const img = fixture.debugElement.query(By.css('img'));
+      expect(img.nativeElement.style.objectFit).toBe('cover');
+
+      component.fit.set('fill');
+      fixture.detectChanges();
+      expect(img.nativeElement.style.objectFit).toBe('fill');
+    });
+    it('gap.', () => {
+      component.label.set('NEST');
+      fixture.detectChanges();
+      const label = fixture.debugElement.query(By.css('.x-avatar-text'));
+      expect(label.nativeElement.style.transform).toBe('scale(0.5)');
+
+      component.gap.set('1rem');
+      fixture.detectChanges();
+      expect(label.nativeElement.style.transform).toBe('scale(0.125)');
+    });
+    it('background color.', () => {
+      expect(avatar.nativeElement.style.backgroundColor).toBe('rgb(153, 153, 153)');
+
+      component.backgroundColor.set('rgb(0, 0, 0)');
       fixture.detectChanges();
+      expect(avatar.nativeElement.style.backgroundColor).toBe('rgb(0, 0, 0)');
     });
-    it('label.', () => {});
   });
 });