Skip to content

Commit

Permalink
test(spec): update carousel, checkbox, cascade and color-picker spec …
Browse files Browse the repository at this point in the history 
…file
  • Loading branch information
@ng-nest-moon
ng-nest-moon committed Oct 8, 2024
1 parent 929ebdb commit 30c71c9
Show file tree
Hide file tree
Showing 6 changed files with 288 additions and 67 deletions.
123 changes: 94 additions & 29 deletions lib/ng-nest/ui/carousel/carousel.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, provideExperimentalZonelessChangeDetection, signal } from '@angular/core';
import { Component, provideExperimentalZonelessChangeDetection, signal, viewChild } from '@angular/core';
import { By } from '@angular/platform-browser';
import {
XCarouselArrow,
Expand All @@ -12,6 +12,7 @@ import {
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { XSleep } from '@ng-nest/ui/core';

@Component({
standalone: true,
Expand All @@ -32,7 +33,7 @@ class XTestCarouselComponent {}
template: `
<x-carousel
[(active)]="active"
(activeChange)="activeChange($event)"
[height]="height()"
[trigger]="trigger()"
[arrow]="arrow()"
[direction]="direction()"
Expand All @@ -46,18 +47,13 @@ class XTestCarouselComponent {}
[current]="current()"
>
<x-carousel-panel>1</x-carousel-panel>
<x-carousel-panel [active]="panelActive()">2</x-carousel-panel>
<x-carousel-panel>2</x-carousel-panel>
<x-carousel-panel>3</x-carousel-panel>
</x-carousel>
`
})
class XTestCarouselPropertyComponent {
active = signal(0);

activeChangeResult = signal<number | null>(null);
actvieChange(index: number) {
this.activeChangeResult.set(index);
}
height = signal('15rem');
trigger = signal<XCarouselTrigger>('hover');
arrow = signal<XCarouselArrow>('hover');
Expand All @@ -71,7 +67,7 @@ class XTestCarouselPropertyComponent {
progressColor = signal('');
current = signal(false);

panelActive = signal(false);
carouselPanelActive = viewChild.required<XCarouselComponent>('carouselPanelActive');
}

describe(XCarouselPrefix, () => {
Expand Down Expand Up @@ -100,50 +96,119 @@ describe(XCarouselPrefix, () => {
});
describe(`input.`, async () => {
let fixture: ComponentFixture<XTestCarouselPropertyComponent>;
// let component: XTestCarouselPropertyComponent;
let component: XTestCarouselPropertyComponent;
beforeEach(async () => {
fixture = TestBed.createComponent(XTestCarouselPropertyComponent);
// component = fixture.componentInstance;
component = fixture.componentInstance;
fixture.detectChanges();
});
it('active.', () => {
expect(true).toBe(true);
const ul = fixture.debugElement.query(By.css('.x-carousel-indicator'));
const lis = ul.nativeElement.querySelectorAll('li');
expect(lis[0]).toHaveClass('x-activated');

component.active.set(1);
fixture.detectChanges();
expect(lis[1]).toHaveClass('x-activated');
});
it('height.', () => {
const content = fixture.debugElement.query(By.css('.x-carousel-content'));
expect(content.nativeElement.style.height).toBe('15rem');

component.height.set('20rem');
fixture.detectChanges();
expect(content.nativeElement.style.height).toBe('20rem');
});
it('trigger.', () => {
expect(true).toBe(true);
const ul = fixture.debugElement.query(By.css('.x-carousel-indicator'));
const lis = ul.nativeElement.querySelectorAll('li');
lis[1].dispatchEvent(new Event('mouseenter'));
fixture.detectChanges();
expect(lis[1]).toHaveClass('x-activated');

component.trigger.set('click');
fixture.detectChanges();
lis[2].dispatchEvent(new Event('click'));
fixture.detectChanges();
expect(lis[2]).toHaveClass('x-activated');
});
it('arrow.', async () => {
const arrow = fixture.debugElement.query(By.css('.arrow-left'));
let style = getComputedStyle(arrow.nativeElement);
expect(style.opacity).toBe('0');
});
it('arrow.', () => {
expect(true).toBe(true);
it('arrow always.', () => {
component.arrow.set('always');
fixture.detectChanges();
const arrow = fixture.debugElement.query(By.css('.arrow-left'));
let style = getComputedStyle(arrow.nativeElement);
expect(style.opacity).toBe('1');
});
it('direction.', () => {
expect(true).toBe(true);
const carousel = fixture.debugElement.query(By.css('.x-carousel'));
expect(carousel.nativeElement).toHaveClass('x-carousel-horizontal');

component.direction.set('vertical');
fixture.detectChanges();
expect(carousel.nativeElement).toHaveClass('x-carousel-vertical');
});
it('autoplay.', () => {
expect(true).toBe(true);
it('autoplay.', async () => {
await XSleep(component.interval() + 100);
const ul = fixture.debugElement.query(By.css('.x-carousel-indicator'));
const lis = ul.nativeElement.querySelectorAll('li');
expect(lis[1]).toHaveClass('x-activated');
});
it('interval.', () => {
expect(true).toBe(true);
it('interval.', async () => {
component.interval.set(4000);
fixture.detectChanges();
await XSleep(3000);
const ul = fixture.debugElement.query(By.css('.x-carousel-indicator'));
const lis = ul.nativeElement.querySelectorAll('li');
expect(lis[0]).toHaveClass('x-activated');
await XSleep(1000);
expect(lis[1]).toHaveClass('x-activated');
});
it('outside.', () => {
expect(true).toBe(true);
component.outside.set(true);
fixture.detectChanges();
const carousel = fixture.debugElement.query(By.css('.x-carousel'));
expect(carousel.nativeElement).toHaveClass('x-carousel-indicator-outside');
});
it('card.', () => {
expect(true).toBe(true);
component.card.set(true);
fixture.detectChanges();
const carousel = fixture.debugElement.query(By.css('.x-carousel'));
expect(carousel.nativeElement).toHaveClass('x-carousel-indicator-outside');

const panels = fixture.debugElement.queryAll(By.css('x-carousel-panel'));
panels.forEach((panel) => {
expect(panel.nativeElement).toHaveClass('x-carousel-card');
});
});
it('text.', () => {
expect(true).toBe(true);
component.text.set('text');
fixture.detectChanges();
const text = fixture.debugElement.query(By.css('.x-carousel-text'));
expect(text.nativeElement.innerText).toBe('text');
});
it('progress.', () => {
expect(true).toBe(true);
component.progress.set(true);
fixture.detectChanges();
const progress = fixture.debugElement.query(By.css('.x-carousel-progress'));
expect(progress).toBeDefined();
});
it('progressColor.', () => {
expect(true).toBe(true);
component.progress.set(true);
component.progressColor.set('rgb(0, 0, 0)');
fixture.detectChanges();
const progressBg = fixture.debugElement.query(By.css('.x-progress-bg'));
expect(progressBg.nativeElement.style.backgroundColor).toBe('rgb(0, 0, 0)');
});
it('current.', () => {
expect(true).toBe(true);
});
it('panelActive.', () => {
expect(true).toBe(true);
component.current.set(true);
fixture.detectChanges();
const current = fixture.debugElement.query(By.css('.x-carousel-current'));
expect(current).toBeDefined();
});
});
});
88 changes: 75 additions & 13 deletions lib/ng-nest/ui/cascade/cascade.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ class XTestCascadeComponent {}
<div>{{ value }} tpl</div>
</ng-template>
<ng-template #nodeTemplate let-node="$node">{{ node.label }}</ng-template>
<ng-template #nodeTemplate let-node="$node">{{ node.label }} tpl</ng-template>
<ng-template #beforeTemplate>before</ng-template>
<ng-template #afterTemplate>after</ng-template>
Expand All @@ -65,7 +65,7 @@ class XTestCascadePropertyComponent {
nodeTrigger = signal<XCascadeNodeTrigger>('click');
nodeHoverDelay = signal(200);
nodeTpl = signal<TemplateRef<any> | null>(null);
nodeTemplate = viewChild<TemplateRef<any>>('nodeTemplate');
nodeTemplate = viewChild.required<TemplateRef<any>>('nodeTemplate');
size = signal<XSize>('medium');
pointer = signal(false);
label = signal('');
Expand Down Expand Up @@ -128,23 +128,85 @@ describe(XCascadePrefix, () => {
component = fixture.componentInstance;
fixture.detectChanges();
});
it('data.', () => {
expect(true).toBe(true);
const showPortal = async () => {
const com = fixture.debugElement.query(By.directive(XCascadeComponent));
const instance = com.componentInstance as XCascadeComponent;
component.data.set([
{ id: 'aa', label: 'aa' },
{ id: 'bb', label: 'bb', pid: 'aa' }
]);
fixture.detectChanges();
const input = fixture.debugElement.query(By.css('.x-input-frame'));
input.nativeElement.click();
fixture.detectChanges();
await XSleep(100);
const list = fixture.debugElement.query(By.css('.x-list'));

return { input, list, instance, com };
};
it('data.', async () => {
const { list } = await showPortal();
expect(list.nativeElement.innerText).toBe('aa');
});
it('placement.', () => {
expect(true).toBe(true);
it('placement.', async () => {
const { com } = await showPortal();

const portal = fixture.debugElement.query(By.css('.x-cascade-portal'));
const comRect = com.nativeElement.getBoundingClientRect();
const portalRect = portal.nativeElement.getBoundingClientRect();
const leftDiff = comRect.left - portalRect.left;
const topDiff = comRect.top + comRect.height - portalRect.top;
// Pixels may be decimal points
expect(leftDiff >= -1 && leftDiff <= 1).toBe(true);
expect(topDiff >= -1 && topDiff <= 1).toBe(true);
});
it('bordered.', () => {
expect(true).toBe(true);
const input = fixture.debugElement.query(By.css('.x-input'));
expect(input.nativeElement).toHaveClass('x-input-bordered');

component.bordered.set(false);
fixture.detectChanges();
expect(input.nativeElement).not.toHaveClass('x-input-bordered');
});
it('nodeTrigger.', async () => {
const { list } = await showPortal();
const option = list.query(By.css('x-list-option'));
option.nativeElement.click();
fixture.detectChanges();
const list2 = fixture.debugElement.query(By.css('x-list:nth-child(2)'));
expect(list2.nativeElement.innerText).toBe('bb');
});
it('nodeTrigger.', () => {
expect(true).toBe(true);
it('nodeTrigger hover.', async () => {
component.nodeTrigger.set('hover');
fixture.detectChanges();
const { list } = await showPortal();
const option = list.query(By.css('x-list-option'));
option.nativeElement.dispatchEvent(new Event('mouseenter'));
fixture.detectChanges();
await XSleep(250);
const list2 = fixture.debugElement.query(By.css('x-list:nth-child(2)'));
expect(list2.nativeElement.innerText).toBe('bb');
});
it('nodeHoverDelay.', () => {
expect(true).toBe(true);
it('nodeHoverDelay.', async () => {
component.nodeTrigger.set('hover');
component.nodeHoverDelay.set(300);
fixture.detectChanges();
const { list } = await showPortal();
const option = list.query(By.css('x-list-option'));
option.nativeElement.dispatchEvent(new Event('mouseenter'));
fixture.detectChanges();
await XSleep(100);
let list2 = fixture.debugElement.query(By.css('x-list:nth-child(2)'));
expect(list2).toBeNull();
await XSleep(300);
list2 = fixture.debugElement.query(By.css('x-list:nth-child(2)'));
expect(list2).not.toBeNull();
});
it('nodeTpl.', () => {
expect(true).toBe(true);
it('nodeTpl.', async () => {
component.nodeTpl.set(component.nodeTemplate());
fixture.detectChanges();
const { list } = await showPortal();
expect(list.nativeElement.innerText).toBe('aa tpl');
});
it('size.', () => {
const input = fixture.debugElement.query(By.css('.x-input'));
Expand Down
Loading

0 comments on commit 30c71c9

Please sign in to comment.