permission tests for change detection & update readme

src/lib/help-mode/help-mode.directive.ts

@@ -1,6 +1,5 @@
 import { Directive, ElementRef, Input, OnInit, Optional, Renderer2 } from '@angular/core';
 import { HelpModeService, ScrollableParentView } from './help-mode.service';
-import { Router } from '@angular/router';
 
 @Directive({
     selector: '[iqserHelpMode]',
@@ -10,16 +9,12 @@ export class HelpModeDirective implements OnInit {
     @Input('iqserHelpMode') elementName!: string;
     @Input() scrollableParentView!: ScrollableParentView;
     @Input() dialogElement = false;
-    private _path: string;
 
     constructor(
         private readonly _elementRef: ElementRef,
         private readonly _renderer: Renderer2,
         @Optional() private readonly _helpModeService: HelpModeService,
-        private readonly _router: Router,
-    ) {
-        this._path = this._router.url.split('/').pop() as string;
-    }
+    ) {}
 
     ngOnInit(): void {
         if (this.elementName && this._helpModeService) {

src/lib/permissions/README.md

@@ -42,6 +42,7 @@ export class AppComponent implements OnInit {
 
 <ng-template
     [allow]="['MANAGER']"
+    [allowIf]="someObject.isEmpty"
     [allowThen]="thenBlock"
     [allowElse]="elseBlock">
 </ng-template>
@@ -56,7 +57,7 @@ export class AppComponent implements OnInit {
 
 ----------------------------------------------
 
-<div *allow="['THEN_BLOCK']; else elseBlock; then thenBlock">main</div>
+<div *allow="['can-read']; if: !someObject.isEmpty; else: elseBlock; then: thenBlock">main</div>
 
 <ng-template #elseBlock>
     <div>elseBlock</div>

src/lib/permissions/permissions.directive.spec.ts

@@ -1,4 +1,4 @@
-import { Component, Type } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Type } from '@angular/core';
 import { IqserPermissionsModule } from '.';
 import { ComponentFixture, ComponentFixtureAutoDetect, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { IqserPermissionsService } from './services/permissions.service';
@@ -935,3 +935,38 @@ describe('Permissions directive with then block and if condition', () => {
         expect(content.innerHTML).toEqual(`elseBlockContent`);
     }));
 });
+
+describe('Permission directive with false promise, if condition and change detection on push', () => {
+    @Component({
+        template: ` <div *allow="'ADMIN'; if: condition">
+            <div>123</div>
+        </div>`,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+    })
+    class TestComponent extends BaseTestComponent {
+        condition = new BehaviorSubject(false);
+    }
+
+    beforeEach(() => configureTestBed(TestComponent));
+
+    it('should hide the component when permission is present', fakeAsync(() => {
+        permissionsService.add(ADMIN);
+        tick();
+
+        expect(getFixtureContent()).toEqual(null);
+    }));
+
+    it('should hide the component when permission is absent', fakeAsync(() => {
+        expect(getFixtureContent()).toEqual(null);
+    }));
+
+    it('should show else block when permission is missing and condition is false', fakeAsync(() => {
+        permissionsService.add(ADMIN);
+        (fixture.componentInstance as TestComponent).condition.next(true);
+        tick();
+
+        const content = getFixtureContent();
+        expect(content).toBeTruthy();
+        expect(content.innerHTML).toEqual(`<div>123</div>`);
+    }));
+});

src/lib/permissions/permissions.directive.ts

@@ -57,14 +57,13 @@ export class IqserPermissionsDirective implements OnDestroy, OnInit {
     ) {
         this.#thenTemplateRef = templateRef;
 
-        const ifCondition$ = this.#if.pipe(
-            switchMap(condition => condition),
-            tap(console.log),
-        );
+        const ifCondition$ = this.#if.pipe(switchMap(condition => condition));
+
         this.#subscription = combineLatest([ifCondition$, this.#updateView])
             .pipe(
-                switchMap(([ifCondition]) => this.#waitForRolesAndPermissions().pipe(map(hasPermission => ifCondition && hasPermission))),
+                switchMap(([ifCondition]) => this.#validateRolesAndPermissions().pipe(map(hasPermission => ifCondition && hasPermission))),
                 tap(isAllowed => (isAllowed ? this.#showThenBlock() : this.#showElseBlock())),
+                tap(() => this._changeDetector.markForCheck()),
             )
             .subscribe();
     }
@@ -111,7 +110,7 @@ export class IqserPermissionsDirective implements OnDestroy, OnInit {
         this.#subscription.unsubscribe();
     }
 
-    #waitForRolesAndPermissions() {
+    #validateRolesAndPermissions() {
         return merge(this._permissionsService.permissions$, this._rolesService.roles$).pipe(switchMap(() => this.#validate()));
     }
 
@@ -134,7 +133,6 @@ export class IqserPermissionsDirective implements OnDestroy, OnInit {
         this.permissionsUnauthorized.emit();
         this.#thenViewRef = false;
         this.#elseViewRef = this.#showTemplate(this.#elseTemplateRef);
-        this._changeDetector.markForCheck();
     }
 
     #showThenBlock() {
@@ -145,7 +143,6 @@ export class IqserPermissionsDirective implements OnDestroy, OnInit {
         this.permissionsAuthorized.emit();
         this.#elseViewRef = false;
         this.#thenViewRef = this.#showTemplate(this.#thenTemplateRef);
-        this._changeDetector.markForCheck();
     }
 
     #showTemplate(template?: TemplateRef<unknown>) {