test(spec): update test example file

include image, list, loading, menu, page-header, pagination and popconfirm component
NG-NEST · Oct 31, 2024 · 9357bdb · 9357bdb
1 parent 5a38caf
commit 9357bdb
Show file tree

Hide file tree

Showing 16 changed files with 756 additions and 217 deletions.
diff --git a/lib/ng-nest/ui/image/image.component.spec.ts b/lib/ng-nest/ui/image/image.component.spec.ts
@@ -115,7 +115,7 @@ describe(XImagePrefix, () => {
       component.src.set('error');
       component.fallback.set(src);
       fixture.detectChanges();
-      await XSleep(10);
+      await XSleep(300);
       const img = fixture.debugElement.query(By.css('.x-image-img:nth-child(2)'));
       expect(img.nativeElement.src).toBe(src);
     });
@@ -142,7 +142,7 @@ describe(XImagePrefix, () => {
     it('error.', async () => {
       component.src.set('error');
       fixture.detectChanges();
-      await XSleep(10);
+      await XSleep(300);
       expect(component.errorResult()?.type).toBe('error');
     });
     it('load.', async () => {

diff --git a/lib/ng-nest/ui/list/list.component.spec.ts b/lib/ng-nest/ui/list/list.component.spec.ts
@@ -247,7 +247,7 @@ describe(XListPrefix, () => {
       expect(header.innerText).toBe('header');
     });
     it('footer.', () => {
-      component.footer.set('header');
+      component.footer.set('footer');
       fixture.detectChanges();
       const footer = fixture.debugElement.query(By.css('.x-list-footer')).nativeElement;
       expect(footer.innerText).toBe('footer');
@@ -342,45 +342,94 @@ describe(XListPrefix, () => {
       component.heightAdaption.set(component.scrollElementRef().nativeElement);
       component.data.set(Array.from({ length: 100 }).map((_x, i) => `a${i + 1}`));
       fixture.detectChanges();
+      const content = fixture.debugElement.query(By.css('.x-list-content'));
+      expect(content.nativeElement.clientHeight).toBe(100);
     });
     it('minBufferPx.', () => {
+      // cdk scroll minBufferPx
       expect(true).toBe(true);
     });
     it('maxBufferPx.', () => {
+      // cdk scroll maxBufferPx
       expect(true).toBe(true);
     });
     it('keywordText.', () => {
-      expect(true).toBe(true);
+      component.data.set(['aabb', 'ccdd', 'eeff']);
+      component.keywordText.set(['aa']);
+      fixture.detectChanges();
+      const keywordText = fixture.debugElement.query(By.css('.x-keyword-text')).nativeElement;
+      expect(keywordText.innerText).toBe('aa');
     });
     it('caseSensitive.', () => {
-      expect(true).toBe(true);
+      component.data.set(['AAbb', 'aabb', 'eeff']);
+      component.keywordText.set(['aa']);
+      component.caseSensitive.set(false);
+      fixture.detectChanges();
+      const keywordText = fixture.debugElement.queryAll(By.css('.x-keyword-text'));
+      expect(keywordText[0].nativeElement.innerText).toBe('AA');
+      expect(keywordText[1].nativeElement.innerText).toBe('aa');
     });
     it('inPortal.', () => {
-      expect(true).toBe(true);
+      component.inPortal.set(true);
+      fixture.detectChanges();
+      const list = fixture.debugElement.query(By.css('.x-list')).nativeElement;
+      expect(list).toHaveClass('x-list-portal');
     });
     it('onSelectAll.', () => {
-      expect(true).toBe(true);
+      component.multiple.set(0);
+      component.selectAll.set(true);
+      component.data.set(['aa', 'bb', 'cc']);
+      fixture.detectChanges();
+
+      const selectAll = fixture.debugElement.query(By.css('.x-list-select-all x-list-option')).nativeElement;
+      selectAll.click();
+      fixture.detectChanges();
+      expect(component.onSelectAllResult()).toBe(true);
     });
     it('nodeMouseenter.', () => {
-      expect(true).toBe(true);
+      component.data.set(['aa', 'bb', 'cc']);
+      fixture.detectChanges();
+      const option = fixture.debugElement.query(By.css('.x-list-content x-list-option'));
+      option.nativeElement.dispatchEvent(new Event('mouseenter'));
+      fixture.detectChanges();
+      expect(component.nodeMouseenterResult()!.id).toBe('aa');
     });
     it('nodeMouseleave.', () => {
-      expect(true).toBe(true);
+      component.data.set(['aa', 'bb', 'cc']);
+      fixture.detectChanges();
+      const option = fixture.debugElement.query(By.css('.x-list-content x-list-option'));
+      option.nativeElement.dispatchEvent(new Event('mouseenter'));
+      fixture.detectChanges();
+      option.nativeElement.dispatchEvent(new Event('mouseleave'));
+      fixture.detectChanges();
+      expect(component.nodeMouseleaveResult()!.id).toBe('aa');
     });
     it('nodeClick.', () => {
-      expect(true).toBe(true);
+      component.data.set(['aa', 'bb', 'cc']);
+      fixture.detectChanges();
+      const option = fixture.debugElement.query(By.css('.x-list-content x-list-option'));
+      option.nativeElement.click();
+      fixture.detectChanges();
+      expect(component.nodeClickResult()!.id).toBe('aa');
     });
     it('dropListDropped.', () => {
+      // cdk drap drop
       expect(true).toBe(true);
     });
     it('keyManagerTabOut.', () => {
+      // cdk a11y KeyManager
       expect(true).toBe(true);
     });
     it('keyManagerChange.', () => {
+      // cdk a11y KeyManager
       expect(true).toBe(true);
     });
     it('size.', () => {
-      expect(true).toBe(true);
+      component.size.set('small');
+      component.data.set(['aa', 'bb', 'cc']);
+      fixture.detectChanges();
+      const option = fixture.debugElement.query(By.css('.x-list-content .x-list-option'));
+      expect(option.nativeElement).toHaveClass('x-list-option-small');
     });
   });
 });
diff --git a/lib/ng-nest/ui/list/list.component.ts b/lib/ng-nest/ui/list/list.component.ts
@@ -79,7 +79,7 @@ export class XListComponent extends XListProperty implements OnChanges {
   classMap = computed(() => ({
     [`${XListPrefix}-${this.size()}`]: this.size() ? true : false
   }));
-  private sizeChange: Subscription | null = null;
+  sizeChange: Subscription | null = null;
   private resizeObserver!: XResizeObserver;
 
   @HostBinding('attr.role') role = 'listbox';
@@ -163,6 +163,7 @@ export class XListComponent extends XListProperty implements OnChanges {
 
   setHeightAdaption() {
     this.setVirtualScrollHeight();
+    if (this.sizeChange) this.sizeChange.unsubscribe();
     this.sizeChange = XResize(this.heightAdaption() as HTMLElement)
       .pipe(debounceTime(30), takeUntil(this.unSubject))
       .subscribe((x) => {
@@ -195,6 +196,7 @@ export class XListComponent extends XListProperty implements OnChanges {
 
   private setVirtualScrollHeight() {
     this.scrollHeightSignal.set((this.heightAdaption() as HTMLElement).clientHeight);
+    if (!this.virtualBody()) return;
     this.virtualBody()!['_scrollStrategy']['_minBufferPx'] = this.minBufferPxSignal();
     this.virtualBody()!['_scrollStrategy']['_maxBufferPx'] = this.maxBufferPxSignal();
   }

diff --git a/lib/ng-nest/ui/loading/loading.component.spec.ts b/lib/ng-nest/ui/loading/loading.component.spec.ts
@@ -2,9 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Component, provideExperimentalZonelessChangeDetection, signal } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { XLoadingComponent, XLoadingPrefix } from '@ng-nest/ui/loading';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { XBoolean, XCorner, XSize } from '@ng-nest/ui/core';
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import { XBoolean, XComputedStyle, XCorner, XSize } from '@ng-nest/ui/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 
 @Component({
@@ -28,7 +27,9 @@ class XTestLoadingComponent {}
       [fullScreen]="fullScreen()"
       [radius]="radius()"
       [background]="background()"
-    ></div>
+    >
+      Text
+    </div>
   `
 })
 class XTestLoadingPropertyComponent {
@@ -47,12 +48,7 @@ describe(XLoadingPrefix, () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [XTestLoadingComponent, XTestLoadingPropertyComponent],
-      providers: [
-        provideAnimations(),
-        provideHttpClient(withInterceptorsFromDi()),
-        provideHttpClientTesting(),
-        provideExperimentalZonelessChangeDetection()
-      ],
+      providers: [provideAnimations(), provideHttpClient(withFetch()), provideExperimentalZonelessChangeDetection()],
       teardown: { destroyAfterEach: false }
     }).compileComponents();
   });
@@ -69,38 +65,79 @@ describe(XLoadingPrefix, () => {
   });
   describe(`input.`, async () => {
     let fixture: ComponentFixture<XTestLoadingPropertyComponent>;
-    // let component: XTestLoadingPropertyComponent;
+    let component: XTestLoadingPropertyComponent;
     beforeEach(async () => {
       fixture = TestBed.createComponent(XTestLoadingPropertyComponent);
-      // component = fixture.componentInstance;
+      component = fixture.componentInstance;
       fixture.detectChanges();
     });
     it('loading.', () => {
-      expect(true).toBe(true);
+      component.loading.set(true);
+      fixture.detectChanges();
+      const loading = fixture.debugElement.query(By.css('.x-loading'));
+      expect(loading).toBeTruthy();
     });
     it('zIndex.', () => {
-      expect(true).toBe(true);
+      component.loading.set(true);
+      component.zIndex.set(1000);
+      fixture.detectChanges();
+      const loading = fixture.debugElement.query(By.css('.x-loading'));
+      const zIndex = Number(XComputedStyle(loading.nativeElement, 'z-index'));
+      expect(zIndex).toBe(1000);
     });
     it('size.', () => {
-      expect(true).toBe(true);
+      component.loading.set(true);
+      component.size.set('small');
+      fixture.detectChanges();
+      const loading = fixture.debugElement.query(By.css('.x-loading'));
+      expect(loading.nativeElement).toHaveClass('x-loading-small');
     });
     it('text.', () => {
-      expect(true).toBe(true);
+      component.loading.set(true);
+      component.text.set('loading');
+      fixture.detectChanges();
+      const text = fixture.debugElement.query(By.css('.x-loading-text'));
+      expect(text.nativeElement.innerText).toBe('loading');
     });
     it('icon.', () => {
-      expect(true).toBe(true);
+      component.loading.set(true);
+      component.icon.set('fto-loader');
+      fixture.detectChanges();
+      const icon = fixture.debugElement.query(By.css('.x-loading-icon'));
+      expect(icon).toBeTruthy();
     });
     it('color.', () => {
-      expect(true).toBe(true);
+      component.loading.set(true);
+      component.color.set('rgb(0, 255, 0)');
+      fixture.detectChanges();
+      const spinner = fixture.debugElement.query(By.css('.x-loading-spinner'));
+      const color = XComputedStyle(spinner.nativeElement, 'color');
+      expect(color).toBe('rgb(0, 255, 0)');
     });
     it('fullScreen.', () => {
-      expect(true).toBe(true);
+      component.loading.set(true);
+      component.fullScreen.set(true);
+      fixture.detectChanges();
+      const loading = fixture.debugElement.query(By.css('.x-loading')).nativeElement;
+      const { clientWidth, clientHeight } = document.documentElement;
+      expect(loading.clientWidth).toBe(clientWidth);
+      expect(loading.clientHeight).toBe(clientHeight);
+      component.loading.set(false);
     });
     it('radius.', () => {
-      expect(true).toBe(true);
+      component.radius.set(true);
+      component.loading.set(true);
+      fixture.detectChanges();
+      const loading = fixture.debugElement.query(By.css('.x-loading'));
+      expect(loading.nativeElement).toHaveClass('x-loading-radius');
     });
     it('background.', () => {
-      expect(true).toBe(true);
+      component.background.set('rgb(0, 255, 0)');
+      component.loading.set(true);
+      fixture.detectChanges();
+      const loading = fixture.debugElement.query(By.css('.x-loading'));
+      const background = XComputedStyle(loading.nativeElement, 'background-color');
+      expect(background).toBe('rgb(0, 255, 0)');
     });
   });
 });
diff --git a/lib/ng-nest/ui/menu/menu-node.component.html b/lib/ng-nest/ui/menu/menu-node.component.html
@@ -10,9 +10,12 @@
   @if (icon()) {
     <x-icon class="x-menu-icon" [type]="icon()"></x-icon>
   }
-  @if (label()) {
-    <span class="x-menu-text">{{ label() }}</span>
+  @if (nodeTpl()) {
+    <ng-container *ngTemplateOutlet="nodeTpl()!; context: { $node: node()! }"></ng-container>
+  } @else if (label()) {
+    <span class="x-menu-text">{{ label() }} </span>
   }
+  @if (label()) {}
   @if (leaf()) {
     <x-icon class="x-menu-arrow" [class.is-open]="open()" type="fto-chevron-down"></x-icon>
   }

diff --git a/lib/ng-nest/ui/menu/menu-node.component.ts b/lib/ng-nest/ui/menu/menu-node.component.ts
@@ -5,18 +5,20 @@ import {
   ElementRef,
   inject,
   input,
-  effect
+  effect,
+  TemplateRef
 } from '@angular/core';
-import { XMenuNodeProperty, XMenuNodePrefix } from './menu.property';
+import { XMenuNodeProperty, XMenuNodePrefix, XMenuNode } from './menu.property';
 import { XIconComponent } from '@ng-nest/ui/icon';
 import { RouterModule } from '@angular/router';
 import { NgTemplateOutlet } from '@angular/common';
 import { XMenuComponent } from './menu.component';
+import { XOutletDirective } from '@ng-nest/ui/outlet';
 
 @Component({
   selector: `${XMenuNodePrefix}`,
   standalone: true,
-  imports: [NgTemplateOutlet, XIconComponent, RouterModule],
+  imports: [NgTemplateOutlet, XIconComponent, XOutletDirective, RouterModule],
   templateUrl: './menu-node.component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -29,6 +31,8 @@ export class XMenuNodeComponent extends XMenuNodeProperty {
   label = input<string>();
   open = input<boolean>();
   id = input<any>();
+  node = input<XMenuNode>();
+  nodeTpl = input<TemplateRef<any>>();
 
   private elementRef = inject(ElementRef);
 

diff --git a/lib/ng-nest/ui/menu/menu.component.html b/lib/ng-nest/ui/menu/menu.component.html
@@ -18,7 +18,7 @@
   }
 </div>
 
-<ng-template #nodeTpl let-node="$node">
+<ng-template #nodeTemplate let-node="$node">
   @if (node.level === 0 && collapsed()) {
     <x-dropdown
       [disabled]="!node.leaf"
@@ -38,6 +38,8 @@
         [label]="node.label"
         [open]="node.open"
         [id]="node.id"
+        [nodeTpl]="nodeTpl()"
+        [node]="node"
       ></x-menu-node>
     </x-dropdown>
   }
@@ -49,6 +51,8 @@
       [label]="node.label"
       [open]="node.open"
       [id]="node.id"
+      [nodeTpl]="nodeTpl()"
+      [node]="node"
     ></x-menu-node>
   }
 </ng-template>
@@ -65,7 +69,7 @@
     children
   >
     <div class="x-menu-node" [ngClass]="nodeClassMap()">
-      <ng-container *ngTemplateOutlet="nodeTpl; context: { $node: node }"></ng-container>
+      <ng-container *ngTemplateOutlet="nodeTemplate; context: { $node: node }"></ng-container>
     </div>
   </x-dropdown>
 </ng-template>
@@ -79,7 +83,7 @@
     (click)="onToggle($event, node)"
     [style.padding-left.rem]="(node.level + 1) * 0.875"
   >
-    <ng-container *ngTemplateOutlet="nodeTpl; context: { $node: node }"></ng-container>
+    <ng-container *ngTemplateOutlet="nodeTemplate; context: { $node: node }"></ng-container>
   </div>
   @if (node.childrenLoaded || (node.leaf && node.open)) {
     <div class="x-menu-nodes" [hidden]="!node.open">