Skip to content

Commit

Permalink
test(spec): update test example file
Browse files Browse the repository at this point in the history 
include popover and progress component
  • Loading branch information
@ng-nest-moon
ng-nest-moon committed Nov 2, 2024
1 parent 9357bdb commit 1a6c208
Show file tree
Hide file tree
Showing 2 changed files with 214 additions and 51 deletions.
125 changes: 101 additions & 24 deletions lib/ng-nest/ui/popover/popover.directive.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import { By } from '@angular/platform-browser';
import { XPopoverDirective, XPopoverPrefix, XPopoverTrigger } from '@ng-nest/ui/popover';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { XPlacement, XSleep, XTemplate } from '@ng-nest/ui/core';
import { XComputedStyle, XPlacement, XSleep, XTemplate } from '@ng-nest/ui/core';
import { provideAnimations } from '@angular/platform-browser/animations';

@Component({
Expand All @@ -25,6 +25,7 @@ class XTestPopoverComponent {}
imports: [XPopoverDirective],
template: `
<div
style="position: absolute; left: 0; top: 0; width: 30px"
x-popover
[title]="title()"
[content]="content()"
Expand All @@ -43,6 +44,7 @@ class XTestPopoverComponent {}
>
text
</div>
<div #connectToRef style="position: absolute; left: 0; top: 0; width: 50px">connect to</div>
<ng-template #footerTemplate>footer tpl</ng-template>
`
Expand All @@ -54,6 +56,7 @@ class XTestPopoverPropertyComponent {
footerTemplate = viewChild.required<TemplateRef<any>>('footerTemplate');
panelClass = signal<string | string[]>('');
connectTo = signal<ElementRef<HTMLElement> | HTMLElement | null>(null);
connectToRef = viewChild.required<ElementRef<HTMLElement>>('connectToRef');
placement = signal<XPlacement>('top');
trigger = signal<XPopoverTrigger>('hover');
width = signal('');
Expand Down Expand Up @@ -107,6 +110,9 @@ describe(XPopoverPrefix, () => {
if (type === 'hover') {
portal.nativeElement.dispatchEvent(new Event('mouseenter'));
portal.nativeElement.dispatchEvent(new Event('mouseleave'));
} else if (type === 'click') {
const back = document.querySelector('.cdk-overlay-connected-position-bounding-box')! as HTMLDivElement;
back.click();
}
fixture.detectChanges();
await XSleep(300);
Expand Down Expand Up @@ -139,39 +145,110 @@ describe(XPopoverPrefix, () => {
component.panelClass.set('panel-class');
fixture.detectChanges();
await showPortal();
const panel = fixture.debugElement.query(By.css('.cdk-overlay-pane'));
expect(panel.nativeElement).toHaveClass('panel-class');
const panel = document.querySelector('.cdk-overlay-pane');
expect(panel).toHaveClass('panel-class');
await closePortal();
});
it('connectTo.', () => {
expect(true).toBe(true);
});
it('placement.', () => {
expect(true).toBe(true);
it('connectTo.', async () => {
component.connectTo.set(component.connectToRef());
fixture.detectChanges();
await showPortal();
const panel = document.querySelector('.cdk-overlay-pane')!;
expect(panel.getBoundingClientRect().left).toBe(50);
await closePortal();
});
it('trigger.', () => {
expect(true).toBe(true);
it('placement.', async () => {
component.placement.set('right');
fixture.detectChanges();
await showPortal();
const panel = document.querySelector('.cdk-overlay-pane')!;
expect(panel.getBoundingClientRect().left).toBe(30);
await closePortal();
});
it('width.', () => {
expect(true).toBe(true);
it('trigger.', async () => {
component.trigger.set('click');
fixture.detectChanges();
await showPortal('click');
const popover = fixture.debugElement.query(By.css('.x-popover-portal'));
expect(popover).toBeTruthy();
await closePortal('click');
});
it('width.', async () => {
component.width.set('250px');
component.minWidth.set('250px');
fixture.detectChanges();
await showPortal();
const inner = fixture.debugElement.query(By.css('.x-popover-portal-inner')).nativeElement;
expect(inner.clientWidth).toBe(250);
await closePortal();
});
it('maxWidth.', () => {
expect(true).toBe(true);
it('maxWidth.', async () => {
component.maxWidth.set('300px');
fixture.detectChanges();
await showPortal();
const inner = fixture.debugElement.query(By.css('.x-popover-portal-inner')).nativeElement;
const maxWidth = Number(XComputedStyle(inner, 'max-width'));
expect(maxWidth).toBe(300);
await closePortal();
});
it('minWidth.', () => {
expect(true).toBe(true);
it('minWidth.', async () => {
component.minWidth.set('300px');
fixture.detectChanges();
await showPortal();
const inner = fixture.debugElement.query(By.css('.x-popover-portal-inner')).nativeElement;
const minWidth = Number(XComputedStyle(inner, 'min-width'));
expect(minWidth).toBe(300);
await closePortal();
});
it('visible.', () => {
expect(true).toBe(true);
it('visible.', async () => {
component.visible.set(true);
fixture.detectChanges();
await XSleep(300);
let popover = fixture.debugElement.query(By.css('.x-popover-portal'));
expect(popover).toBeTruthy();

component.visible.set(false);
fixture.detectChanges();
await XSleep(300);
popover = fixture.debugElement.query(By.css('.x-popover-portal'));
expect(popover).toBeFalsy();
});
it('condition.', () => {
expect(true).toBe(true);
it('condition.', async () => {
component.condition.set(true);
fixture.detectChanges();
await showPortal();
let popover = fixture.debugElement.query(By.css('.x-popover-portal'));
expect(popover).toBeFalsy();
component.condition.set(false);
fixture.detectChanges();
await showPortal();
popover = fixture.debugElement.query(By.css('.x-popover-portal'));
expect(popover).toBeTruthy();
await closePortal();
});
it('mouseEnterDelay.', () => {
expect(true).toBe(true);
it('mouseEnterDelay.', async () => {
const com = fixture.debugElement.query(By.directive(XPopoverDirective));
com.nativeElement.dispatchEvent(new Event('mouseenter'));
fixture.detectChanges();
let popover = fixture.debugElement.query(By.css('.x-popover-portal'));
expect(popover).toBeFalsy();
await XSleep(200);
popover = fixture.debugElement.query(By.css('.x-popover-portal'));
expect(popover).toBeTruthy();
await closePortal();
});
it('mouseLeaveDelay.', () => {
expect(true).toBe(true);
it('mouseLeaveDelay.', async () => {
const com = fixture.debugElement.query(By.directive(XPopoverDirective));
com.nativeElement.dispatchEvent(new Event('mouseenter'));
fixture.detectChanges();
await XSleep(200);
com.nativeElement.dispatchEvent(new Event('mouseleave'));
await XSleep(50);
let popover = fixture.debugElement.query(By.css('.x-popover-portal'));
expect(popover).toBeTruthy();
await XSleep(150);
popover = fixture.debugElement.query(By.css('.x-popover-portal'));
expect(popover).toBeFalsy();
});
});
});
140 changes: 113 additions & 27 deletions lib/ng-nest/ui/progress/progress.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import {
XProgressStatus,
XProgressType
} from '@ng-nest/ui/progress';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { XComputedStyle } from '../core';

@Component({
standalone: true,
Expand Down Expand Up @@ -70,12 +70,8 @@ describe(XProgressPrefix, () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [XTestProgressComponent, XTestProgressPropertyComponent],
providers: [
provideAnimations(),
provideHttpClient(withInterceptorsFromDi()),
provideHttpClientTesting(),
provideExperimentalZonelessChangeDetection()
]
providers: [provideAnimations(), provideHttpClient(withFetch()), provideExperimentalZonelessChangeDetection()],
teardown: { destroyAfterEach: false }
}).compileComponents();
});
describe('default.', () => {
Expand All @@ -91,62 +87,152 @@ describe(XProgressPrefix, () => {
});
describe(`input.`, async () => {
let fixture: ComponentFixture<XTestProgressPropertyComponent>;
// let component: XTestProgressPropertyComponent;
let component: XTestProgressPropertyComponent;
beforeEach(async () => {
fixture = TestBed.createComponent(XTestProgressPropertyComponent);
// component = fixture.componentInstance;
component = fixture.componentInstance;
fixture.detectChanges();
});
it('type.', () => {
expect(true).toBe(true);
const progress = fixture.debugElement.query(By.css('.x-progress')).nativeElement;
expect(progress).toHaveClass('x-progress-line');
component.type.set('circle');
fixture.detectChanges();
expect(progress).toHaveClass('x-progress-circle');
component.type.set('dashboard');
fixture.detectChanges();
expect(progress).toHaveClass('x-progress-dashboard');
});
it('percent.', () => {
expect(true).toBe(true);
component.percent.set(80);
fixture.detectChanges();
const text = fixture.debugElement.query(By.css('.x-progress-text')).nativeElement;
const bg = fixture.debugElement.query(By.css('.x-progress-bg')).nativeElement;
const rail = fixture.debugElement.query(By.css('.x-progress-rail')).nativeElement;
expect(text.innerText).toBe('80%');
const diff = Math.floor((bg.clientWidth / rail.clientWidth) * 100) - 80;
expect(diff >= -1 && diff <= 1).toBe(true);
});
it('height.', () => {
expect(true).toBe(true);
component.height.set('100px');
fixture.detectChanges();
const bg = fixture.debugElement.query(By.css('.x-progress-bg')).nativeElement;
expect(bg.clientHeight).toBe(100);
});
it('status.', () => {
expect(true).toBe(true);
component.status.set('success');
fixture.detectChanges();
const progress = fixture.debugElement.query(By.css('.x-progress')).nativeElement;
expect(progress).toHaveClass('x-progress-success');
});
it('info.', () => {
expect(true).toBe(true);
component.info.set(false);
fixture.detectChanges();
const text = fixture.debugElement.query(By.css('.x-progress-text')).nativeElement;
expect(text).toBeFalsy();
});
it('infoWidth.', () => {
expect(true).toBe(true);
component.infoWidth.set('100px');
fixture.detectChanges();
const text = fixture.debugElement.query(By.css('.x-progress-text')).nativeElement;
expect(text.clientWidth).toBe(100);
});
it('inside.', () => {
expect(true).toBe(true);
component.inside.set(true);
component.height.set('50px');
fixture.detectChanges();
const text = fixture.debugElement.query(By.css('.x-progress-bg .x-progress-text'));
expect(text).toBeTruthy();
});
it('format.', () => {
expect(true).toBe(true);
component.format.set((percent: number) => {
return percent === 100 ? 'ÒÑÍê³É' : '¼ÓÔØÖÐ' + percent + '%';
});
fixture.detectChanges();
const text = fixture.debugElement.query(By.css('.x-progress-text')).nativeElement;
expect(text.innerText).toBe('¼ÓÔØÖÐ0%');
});
it('color.', () => {
expect(true).toBe(true);
component.color.set('rgb(0, 255, 0)');
fixture.detectChanges();
const bg = fixture.debugElement.query(By.css('.x-progress-bg')).nativeElement;
expect(XComputedStyle(bg, 'color')).toBe('rgb(0, 255, 0)');
});
it('gradient.', () => {
expect(true).toBe(true);
component.gradient.set({ from: '#3B82F6', to: '#f56c6c' });
component.percent.set(80);
fixture.detectChanges();
const bg = fixture.debugElement.query(By.css('.x-progress-bg')).nativeElement;
expect(XComputedStyle(bg, 'background-image')).toBe(`linear-gradient(to right, #3B82F6, #f56c6c)`);
});
it('steps.', () => {
expect(true).toBe(true);
component.percent.set(50);
component.steps.set(5);
fixture.detectChanges();
const progress = fixture.debugElement.query(By.css('.x-progress')).nativeElement;
expect(progress).toHaveClass('x-progress-steps');
const steps = fixture.debugElement.queryAll(By.css('.x-progress-step'));
expect(steps.length).toBe(5);
const actives = fixture.debugElement.queryAll(By.css('.x-progress-step.x-progress-step-active'));
expect(actives.length).toBe(3);
});
it('stepWidth.', () => {
expect(true).toBe(true);
component.percent.set(50);
component.steps.set(5);
component.stepWidth.set('100px');
fixture.detectChanges();
const step = fixture.debugElement.query(By.css('.x-progress-step'));
expect(step.nativeElement.clientWidth).toBe(100);
});
it('stepFlex.', () => {
expect(true).toBe(true);
component.stepFlex.set(true);
component.percent.set(50);
component.steps.set(5);
fixture.detectChanges();
const steps = fixture.debugElement.queryAll(By.css('.x-progress-step'));
for (let step of steps) {
expect(XComputedStyle(step.nativeElement, 'flex')).toBe('1');
}
});
it('thickness.', () => {
expect(true).toBe(true);
component.type.set('circle');
component.thickness.set('50px');
component.percent.set(50);
fixture.detectChanges();
const rail = fixture.debugElement.query(By.css('.x-progress-ring-rail')).nativeElement;
const bg = fixture.debugElement.query(By.css('.x-progress-ring-bg')).nativeElement;
expect(XComputedStyle(rail, 'border-width')).toBe('50px');
expect(XComputedStyle(bg, 'border-width')).toBe('50px');
});
it('size.', () => {
expect(true).toBe(true);
component.size.set('200px');
component.type.set('circle');
component.percent.set(50);
fixture.detectChanges();
const ring = fixture.debugElement.query(By.css('.x-progress-ring')).nativeElement;
expect(ring.clientHeight).toBe(200);
expect(ring.clientWidth).toBe(200);
});
it('notchAngle.', () => {
expect(true).toBe(true);
component.type.set('dashboard');
component.notchAngle.set(40);
component.percent.set(50);
fixture.detectChanges();
const rail = fixture.debugElement.query(By.css('.x-progress-ring-rail')).nativeElement;
const bg = fixture.debugElement.query(By.css('.x-progress-ring-bg')).nativeElement;
console.log(rail, bg);
});
it('subsection.', () => {
expect(true).toBe(true);
component.subsection.set(true);
component.color.set([
{ color: '#f56c6c', percent: 20 },
{ color: '#e6a23c', percent: 40 },
{ color: '#5cb87a', percent: 60 },
{ color: '#1989fa', percent: 80 }
]);
fixture.detectChanges();
const rail = fixture.debugElement.query(By.css('.x-progress-rail'));
expect(rail.nativeElement).toHaveClass('x-progress-mask');
});
});
});

0 comments on commit 1a6c208

Please sign in to comment.