From 49c0306bb53fcf0f986071ffd5854a54e2a7c03f Mon Sep 17 00:00:00 2001 From: thediaval Date: Tue, 5 Nov 2019 16:23:44 +0300 Subject: [PATCH 1/9] test(core): fix config plugin test --- .../core/src/lib/tests/config.plugin.spec.ts | 87 ++++++++++--------- 1 file changed, 48 insertions(+), 39 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/tests/config.plugin.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/config.plugin.spec.ts index da851a5369..1da813923d 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/config.plugin.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/config.plugin.spec.ts @@ -2,7 +2,7 @@ import { RouterTestingModule } from '@angular/router/testing'; import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest'; import { NgxsModule, NGXS_PLUGINS, Store } from '@ngxs/store'; import { environment } from '../../../../../apps/dev-app/src/environments/environment'; -import { LAYOUTS } from '../../../../theme-basic/src/public-api'; +import { LAYOUTS } from '@abp/ng.theme.basic'; import { RouterOutletComponent } from '../components'; import { CoreModule } from '../core.module'; import { eLayoutType } from '../enums/common'; @@ -68,27 +68,7 @@ const expectedState = { path: '', children: [], url: '/', - }, - { - name: 'AbpAccount::Menu:Account', - path: 'account', - invisible: true, - layout: 'application', - children: [ - { - path: 'login', - name: 'AbpAccount::Login', - order: 1, - url: '/account/login', - }, - { - path: 'register', - name: 'AbpAccount::Register', - order: 2, - url: '/account/register', - }, - ], - url: '/account', + order: 1, }, { name: 'AbpUiNavigation::Menu:Administration', @@ -137,17 +117,10 @@ const expectedState = { }, ], url: '/tenant-management', + order: 2, }, ], }, - ], - flattedRoutes: [ - { - name: '::Menu:Home', - path: '', - children: [], - url: '/', - }, { name: 'AbpAccount::Menu:Account', path: 'account', @@ -168,18 +141,16 @@ const expectedState = { }, ], url: '/account', + order: 2, }, + ], + flattedRoutes: [ { - path: 'login', - name: 'AbpAccount::Login', + name: '::Menu:Home', + path: '', + children: [], + url: '/', order: 1, - url: '/account/login', - }, - { - path: 'register', - name: 'AbpAccount::Register', - order: 2, - url: '/account/register', }, { name: 'AbpUiNavigation::Menu:Administration', @@ -228,6 +199,7 @@ const expectedState = { }, ], url: '/tenant-management', + order: 2, }, ], }, @@ -286,6 +258,7 @@ const expectedState = { }, ], url: '/tenant-management', + order: 2, }, { path: 'tenants', @@ -294,6 +267,40 @@ const expectedState = { requiredPolicy: 'AbpTenantManagement.Tenants', url: '/tenant-management/tenants', }, + { + name: 'AbpAccount::Menu:Account', + path: 'account', + invisible: true, + layout: 'application', + children: [ + { + path: 'login', + name: 'AbpAccount::Login', + order: 1, + url: '/account/login', + }, + { + path: 'register', + name: 'AbpAccount::Register', + order: 2, + url: '/account/register', + }, + ], + url: '/account', + order: 2, + }, + { + path: 'login', + name: 'AbpAccount::Login', + order: 1, + url: '/account/login', + }, + { + path: 'register', + name: 'AbpAccount::Register', + order: 2, + url: '/account/register', + }, ], }; @@ -340,5 +347,7 @@ describe('ConfigPlugin', () => { const store = spectator.get(Store); const state = store.selectSnapshot(ConfigState); expect(state).toEqual(expectedState); + + // console.log(JSON.stringify(state)); }); }); From 4b19e5c96688f95d299048be8e91e0671e0d809c Mon Sep 17 00:00:00 2001 From: thediaval Date: Tue, 5 Nov 2019 16:24:23 +0300 Subject: [PATCH 2/9] test(core): add debounce directive test --- .../src/lib/directives/debounce.directive.ts | 16 ++++---- .../src/lib/tests/debounce.directive.spec.ts | 39 +++++++++++++++++++ 2 files changed, 48 insertions(+), 7 deletions(-) create mode 100644 npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts diff --git a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts index fc29b5fd65..0e564fb953 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts @@ -1,27 +1,29 @@ -import { Directive, Output, Renderer2, ElementRef, OnInit, EventEmitter, Input } from '@angular/core'; -import { fromEvent } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; +import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; import { takeUntilDestroy } from '@ngx-validate/core'; +import { fromEvent } from 'rxjs'; +import { debounceTime, tap } from 'rxjs/operators'; @Directive({ // tslint:disable-next-line: directive-selector - selector: '[input.debounce]' + selector: '[input.debounce]', }) -export class InputEventDebounceDirective implements OnInit { +export class InputEventDebounceDirective implements OnInit, OnDestroy { @Input() debounce = 300; @Output('input.debounce') readonly debounceEvent = new EventEmitter(); - constructor(private renderer: Renderer2, private el: ElementRef) {} + constructor(private el: ElementRef) {} ngOnInit(): void { fromEvent(this.el.nativeElement, 'input') .pipe( debounceTime(this.debounce), - takeUntilDestroy(this) + takeUntilDestroy(this), ) .subscribe((event: Event) => { this.debounceEvent.emit(event); }); } + + ngOnDestroy(): void {} } diff --git a/npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts new file mode 100644 index 0000000000..8c34869a93 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts @@ -0,0 +1,39 @@ +import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/jest'; +import { InputEventDebounceDirective } from '../directives/debounce.directive'; +import { timer } from 'rxjs'; + +describe('InputEventDebounceDirective', () => { + let spectator: SpectatorDirective; + let directive: InputEventDebounceDirective; + let input: HTMLInputElement; + let inputEventFn = jest.fn(() => {}); + + const createDirective = createDirectiveFactory({ + directive: InputEventDebounceDirective, + }); + + beforeEach(() => { + spectator = createDirective('', { + hostProps: { inputEventFn }, + }); + directive = spectator.directive; + input = spectator.query('input'); + }); + + test('should be created', () => { + expect(directive).toBeTruthy(); + }); + + test('should have 1ms debounce time', () => { + expect(directive.debounce).toBe(20); + }); + + test('should call fromEvent with target element and target event', done => { + spectator.dispatchFakeEvent('input', 'input', true); + timer(0).subscribe(() => expect(inputEventFn).not.toHaveBeenCalled()); + timer(21).subscribe(() => { + expect(inputEventFn).toHaveBeenCalled(); + done(); + }); + }); +}); From 95f6262f675c235ac7e720781eb272bddc2b140f Mon Sep 17 00:00:00 2001 From: thediaval Date: Thu, 7 Nov 2019 17:27:18 +0300 Subject: [PATCH 3/9] improvement(core): add mockClear --- .../packages/core/src/lib/directives/debounce.directive.ts | 2 +- .../packages/core/src/lib/tests/debounce.directive.spec.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts index 0e564fb953..a5e3812cb4 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts @@ -1,7 +1,7 @@ import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; import { takeUntilDestroy } from '@ngx-validate/core'; import { fromEvent } from 'rxjs'; -import { debounceTime, tap } from 'rxjs/operators'; +import { debounceTime } from 'rxjs/operators'; @Directive({ // tslint:disable-next-line: directive-selector diff --git a/npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts index 8c34869a93..0c8b23e140 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts @@ -18,6 +18,7 @@ describe('InputEventDebounceDirective', () => { }); directive = spectator.directive; input = spectator.query('input'); + inputEventFn.mockClear(); }); test('should be created', () => { From d4b5bd93deadd06d45593ab1f0015f55abedf603 Mon Sep 17 00:00:00 2001 From: thediaval Date: Thu, 7 Nov 2019 17:28:19 +0300 Subject: [PATCH 4/9] feat(core): add stop-propagation directive test --- .../directives/stop-propagation.directive.ts | 10 +++-- .../tests/stop-propagation.directive.spec.ts | 40 +++++++++++++++++++ 2 files changed, 46 insertions(+), 4 deletions(-) create mode 100644 npm/ng-packs/packages/core/src/lib/tests/stop-propagation.directive.spec.ts diff --git a/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts index 7b9ae46e9c..16fc6e47d3 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts @@ -1,15 +1,15 @@ -import { Directive, ElementRef, EventEmitter, OnInit, Output, Renderer2 } from '@angular/core'; +import { Directive, ElementRef, EventEmitter, OnInit, Output, Renderer2, OnDestroy } from '@angular/core'; import { fromEvent } from 'rxjs'; import { takeUntilDestroy } from '@ngx-validate/core'; @Directive({ // tslint:disable-next-line: directive-selector - selector: '[click.stop]' + selector: '[click.stop]', }) -export class ClickEventStopPropagationDirective implements OnInit { +export class ClickEventStopPropagationDirective implements OnInit, OnDestroy { @Output('click.stop') readonly stopPropEvent = new EventEmitter(); - constructor(private renderer: Renderer2, private el: ElementRef) {} + constructor(private el: ElementRef) {} ngOnInit(): void { fromEvent(this.el.nativeElement, 'click') @@ -19,4 +19,6 @@ export class ClickEventStopPropagationDirective implements OnInit { this.stopPropEvent.emit(event); }); } + + ngOnDestroy(): void {} } diff --git a/npm/ng-packs/packages/core/src/lib/tests/stop-propagation.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/stop-propagation.directive.spec.ts new file mode 100644 index 0000000000..678025572e --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/stop-propagation.directive.spec.ts @@ -0,0 +1,40 @@ +import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/jest'; +import { ClickEventStopPropagationDirective } from '../directives/stop-propagation.directive'; + +describe('ClickEventStopPropagationDirective', () => { + let spectator: SpectatorDirective; + let directive: ClickEventStopPropagationDirective; + let link: HTMLAnchorElement; + let childClickEventFn = jest.fn(() => null); + let parentClickEventFn = jest.fn(() => null); + const createDirective = createDirectiveFactory({ + directive: ClickEventStopPropagationDirective, + }); + + beforeEach(() => { + spectator = createDirective( + '', + { + hostProps: { parentClickEventFn, childClickEventFn }, + }, + ); + directive = spectator.directive; + link = spectator.query('a'); + childClickEventFn.mockClear(); + parentClickEventFn.mockClear(); + }); + + test('should be created', () => { + spectator.click('a'); + expect(directive).toBeTruthy(); + }); + + test("should not call click event of parent when child element's click event is triggered", done => { + spectator.setHostInput({ parentClickEventFn, childClickEventFn }); + spectator.click('a'); + spectator.detectChanges(); + expect(childClickEventFn).toHaveBeenCalled(); + expect(parentClickEventFn).not.toHaveBeenCalled(); + done(); + }); +}); From 538f32cf57ea58fa54a3fc8e5a300f07a2ffef35 Mon Sep 17 00:00:00 2001 From: thediaval Date: Fri, 8 Nov 2019 11:41:00 +0300 Subject: [PATCH 5/9] style(core): change test description --- .../packages/core/src/lib/tests/debounce.directive.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts index 0c8b23e140..ef7d0ce608 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/debounce.directive.spec.ts @@ -25,7 +25,7 @@ describe('InputEventDebounceDirective', () => { expect(directive).toBeTruthy(); }); - test('should have 1ms debounce time', () => { + test('should have 20ms debounce time', () => { expect(directive.debounce).toBe(20); }); From af114e9a48c78282b4b5c05a3eff52b07b25e0bb Mon Sep 17 00:00:00 2001 From: thediaval Date: Fri, 8 Nov 2019 11:41:48 +0300 Subject: [PATCH 6/9] refactor(core): remove unwanted click event trigger --- .../core/src/lib/tests/stop-propagation.directive.spec.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/tests/stop-propagation.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/stop-propagation.directive.spec.ts index 678025572e..4b3667bbac 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/stop-propagation.directive.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/stop-propagation.directive.spec.ts @@ -25,11 +25,10 @@ describe('ClickEventStopPropagationDirective', () => { }); test('should be created', () => { - spectator.click('a'); expect(directive).toBeTruthy(); }); - test("should not call click event of parent when child element's click event is triggered", done => { + test('should not call click event of parent when child element is clicked', done => { spectator.setHostInput({ parentClickEventFn, childClickEventFn }); spectator.click('a'); spectator.detectChanges(); From a22d7a00e951f91bf39a40613aa1123cb501225c Mon Sep 17 00:00:00 2001 From: thediaval Date: Fri, 8 Nov 2019 11:42:39 +0300 Subject: [PATCH 7/9] test(core): add autofocus directive test --- .../src/lib/tests/autofocus.directive.spec.ts | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 npm/ng-packs/packages/core/src/lib/tests/autofocus.directive.spec.ts diff --git a/npm/ng-packs/packages/core/src/lib/tests/autofocus.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/autofocus.directive.spec.ts new file mode 100644 index 0000000000..6a44e0d83e --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/autofocus.directive.spec.ts @@ -0,0 +1,36 @@ +import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/jest'; +import { AutofocusDirective } from '../directives/autofocus.directive'; +import { timer } from 'rxjs'; + +describe('AutofocusDirective', () => { + let spectator: SpectatorDirective; + let directive: AutofocusDirective; + let input: HTMLInputElement; + const createDirective = createDirectiveFactory({ + directive: AutofocusDirective, + }); + + beforeEach(() => { + spectator = createDirective('', { + hostProps: {}, + }); + directive = spectator.directive; + input = spectator.query('input'); + }); + + test('should be created', () => { + expect(directive).toBeTruthy(); + }); + + test('should have 10ms delay', () => { + expect(directive.delay).toBe(10); + }); + + test('should focus element after given delay', done => { + timer(0).subscribe(() => expect('input').not.toBeFocused()); + timer(11).subscribe(() => { + expect('input').toBeFocused(); + done(); + }); + }); +}); From 8ab1693b396ef78b1c0158605f13b5223972d3fd Mon Sep 17 00:00:00 2001 From: thediaval Date: Fri, 8 Nov 2019 11:43:16 +0300 Subject: [PATCH 8/9] test(core): add ellipsis directive test --- .../src/lib/directives/ellipsis.directive.ts | 16 ++---- .../src/lib/tests/ellipsis.directive.spec.ts | 55 +++++++++++++++++++ 2 files changed, 60 insertions(+), 11 deletions(-) create mode 100644 npm/ng-packs/packages/core/src/lib/tests/ellipsis.directive.spec.ts diff --git a/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts index fbfba8edda..1837d1d8e1 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts @@ -1,9 +1,9 @@ -import { AfterContentInit, ChangeDetectorRef, Directive, ElementRef, HostBinding, Input } from '@angular/core'; +import { AfterViewInit, ChangeDetectorRef, Directive, ElementRef, HostBinding, Input } from '@angular/core'; @Directive({ selector: '[abpEllipsis]', }) -export class EllipsisDirective implements AfterContentInit { +export class EllipsisDirective implements AfterViewInit { @Input('abpEllipsis') width: string; @@ -31,14 +31,8 @@ export class EllipsisDirective implements AfterContentInit { constructor(private cdRef: ChangeDetectorRef, private elRef: ElementRef) {} - ngAfterContentInit() { - setTimeout(() => { - const title = this.title; - this.title = title || (this.elRef.nativeElement as HTMLElement).innerText; - - if (this.title !== title) { - this.cdRef.detectChanges(); - } - }, 0); + ngAfterViewInit() { + this.title = this.title || (this.elRef.nativeElement as HTMLElement).innerText; + this.cdRef.detectChanges(); } } diff --git a/npm/ng-packs/packages/core/src/lib/tests/ellipsis.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/ellipsis.directive.spec.ts new file mode 100644 index 0000000000..727a1c5312 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/ellipsis.directive.spec.ts @@ -0,0 +1,55 @@ +import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/jest'; +import { EllipsisDirective } from '../directives/ellipsis.directive'; + +describe('EllipsisDirective', () => { + let spectator: SpectatorDirective; + let directive: EllipsisDirective; + let el: HTMLDivElement; + const createDirective = createDirectiveFactory({ + directive: EllipsisDirective, + }); + + beforeEach(() => { + spectator = createDirective( + '
test content
', + { + hostProps: { + title: 'test title', + width: '100px', + }, + }, + ); + directive = spectator.directive; + el = spectator.query('div'); + }); + + test('should be created', () => { + expect(directive).toBeTruthy(); + }); + + test('should have 100px ellipsis width', () => { + expect(directive.width).toBe('100px'); + }); + + test('should be enabled if abpEllipsisEnabled input is true', () => { + expect(directive.enabled).toBe(true); + }); + + test('should have given title', () => { + expect(directive.title).toBe('test title'); + }); + + test('should have element innerText as title if not specified', () => { + spectator.setHostInput({ title: undefined }); + expect(directive.title).toBe(el.innerText); + }); + + test('should add abp-ellipsis-inline class to element if width is given', () => { + expect(el).toHaveClass('abp-ellipsis-inline'); + }); + + test('should add abp-ellipsis class to element if width is not given', () => { + spectator.setHostInput({ width: undefined }); + expect(el).toHaveClass('abp-ellipsis'); + }); +}); From 32048c226e779148cb04ee66e3e7c4a046ef75d1 Mon Sep 17 00:00:00 2001 From: thediaval Date: Fri, 8 Nov 2019 14:39:56 +0300 Subject: [PATCH 9/9] refactor(core): remove comment line --- npm/ng-packs/packages/core/src/lib/tests/config.plugin.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/tests/config.plugin.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/config.plugin.spec.ts index 1da813923d..85730a3d68 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/config.plugin.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/config.plugin.spec.ts @@ -347,7 +347,5 @@ describe('ConfigPlugin', () => { const store = spectator.get(Store); const state = store.selectSnapshot(ConfigState); expect(state).toEqual(expectedState); - - // console.log(JSON.stringify(state)); }); });