From 2921c869da5f9a22dd889928a0fc2f39956cac6a Mon Sep 17 00:00:00 2001 From: muhammedaltug Date: Tue, 28 Jun 2022 17:24:29 +0300 Subject: [PATCH] do not run change detection in extensible system components with using abp permission directive --- .../packages/core/src/lib/core.module.ts | 2 +- .../lib/directives/permission.directive.ts | 8 ++- .../lib/tests/permission.directive.spec.ts | 50 ++++++++++++++++++- .../extensible-form-prop.component.html | 6 ++- .../extensible-table.component.html | 2 +- .../grid-actions/grid-actions.component.html | 4 +- .../page-toolbar/page-toolbar.component.html | 8 ++- 7 files changed, 71 insertions(+), 9 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts index 58c128ac32..bcc071185f 100644 --- a/npm/ng-packs/packages/core/src/lib/core.module.ts +++ b/npm/ng-packs/packages/core/src/lib/core.module.ts @@ -136,6 +136,7 @@ export class CoreModule { return { ngModule: RootCoreModule, providers: [ + OAuthModule.forRoot().providers, LocaleProvider, CookieLanguageProvider, { @@ -190,7 +191,6 @@ export class CoreModule { useValue: localizationContributor(options.localizations), deps: [LocalizationService], }, - OAuthModule.forRoot().providers, ], }; } diff --git a/npm/ng-packs/packages/core/src/lib/directives/permission.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/permission.directive.ts index 2054a0d529..824b013843 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/permission.directive.ts +++ b/npm/ng-packs/packages/core/src/lib/directives/permission.directive.ts @@ -18,6 +18,8 @@ import { PermissionService } from '../services/permission.service'; export class PermissionDirective implements OnDestroy, OnChanges { @Input('abpPermission') condition: string | undefined; + @Input('abpPermissionRunChangeDetection') runChangeDetection = true; + subscription!: Subscription; constructor( @@ -38,7 +40,11 @@ export class PermissionDirective implements OnDestroy, OnChanges { .subscribe(isGranted => { this.vcRef.clear(); if (isGranted) this.vcRef.createEmbeddedView(this.templateRef); - this.cdRef.detectChanges(); + if (this.runChangeDetection) { + this.cdRef.detectChanges(); + } else { + this.cdRef.markForCheck(); + } }); } diff --git a/npm/ng-packs/packages/core/src/lib/tests/permission.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/permission.directive.spec.ts index d465a60fa3..37d792787c 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/permission.directive.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/permission.directive.spec.ts @@ -2,10 +2,12 @@ import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/je import { Subject } from 'rxjs'; import { PermissionDirective } from '../directives/permission.directive'; import { PermissionService } from '../services'; +import { ChangeDetectorRef } from '@angular/core'; describe('PermissionDirective', () => { let spectator: SpectatorDirective; let directive: PermissionDirective; + let cdr: ChangeDetectorRef; const grantedPolicy$ = new Subject(); const createDirective = createDirectiveFactory({ directive: PermissionDirective, @@ -30,7 +32,7 @@ describe('PermissionDirective', () => { grantedPolicy$.next(true); expect(spectator.query('#test-element')).toBeTruthy(); grantedPolicy$.next(false); - // expect(spectator.query('#test-element')).toBeFalsy(); // TODO: change detection problem should be fixed + expect(spectator.query('#test-element')).toBeFalsy(); }); }); @@ -41,6 +43,7 @@ describe('PermissionDirective', () => { { hostProps: { condition: '' } }, ); directive = spectator.directive; + cdr = (directive as any).cdRef as ChangeDetectorRef; }); it('should be created', () => { @@ -55,8 +58,22 @@ describe('PermissionDirective', () => { grantedPolicy$.next(false); expect(spectator.query('#test-element')).toBeFalsy(); grantedPolicy$.next(true); + expect(spectator.queryAll('#test-element')).toHaveLength(1); + }); + + it('should call detect changes method', () => { + const detectChanges = jest.spyOn(cdr, 'detectChanges'); + expect(spectator.query('#test-element')).toBeFalsy(); + spectator.setHostInput({ condition: 'test' }); + grantedPolicy$.next(true); + expect(spectator.query('#test-element')).toBeTruthy(); + expect(detectChanges).toHaveBeenCalled(); + grantedPolicy$.next(false); + expect(spectator.query('#test-element')).toBeFalsy(); + expect(detectChanges).toHaveBeenCalled(); grantedPolicy$.next(true); expect(spectator.queryAll('#test-element')).toHaveLength(1); + expect(detectChanges).toHaveBeenCalled(); }); describe('#subscription', () => { @@ -70,4 +87,35 @@ describe('PermissionDirective', () => { }); }); }); + describe('with runChangeDetection Input', () => { + beforeEach(() => { + spectator = createDirective( + '
Testing Permission Directive
', + { hostProps: { condition: '' } }, + ); + directive = spectator.directive; + cdr = (directive as any).cdRef as ChangeDetectorRef; + }); + it('should not call detectChanges method', () => { + const detectChanges = jest.spyOn(cdr, 'detectChanges'); + const markForCheck = jest.spyOn(cdr, 'markForCheck'); + expect(spectator.query('#test-element')).toBeFalsy(); + spectator.setHostInput({ condition: 'test' }); + + grantedPolicy$.next(true); + expect(spectator.query('#test-element')).toBeTruthy(); + expect(detectChanges).not.toHaveBeenCalled(); + expect(markForCheck).toHaveBeenCalled(); + + grantedPolicy$.next(false); + expect(spectator.query('#test-element')).toBeFalsy(); + expect(detectChanges).not.toHaveBeenCalled(); + expect(markForCheck).toHaveBeenCalled(); + + grantedPolicy$.next(true); + expect(spectator.queryAll('#test-element')).toHaveLength(1); + expect(detectChanges).not.toHaveBeenCalled(); + expect(markForCheck).toHaveBeenCalled(); + }); + }); }); diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html index 24fd4e0f54..4367bd098a 100644 --- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html +++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html @@ -1,4 +1,8 @@ -
+
- +