mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
Restore original functionality of node-permission directive (#2698)
This commit is contained in:
Popovics András
committed by
Eugenio Romano
Eugenio Romano
parent
5f9efdb900
commit
7d25d84850
@@ -15,94 +15,150 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, DebugElement } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { ChangeDetectorRef, Component, ElementRef, SimpleChange } from '@angular/core';
|
||||
import { ContentService } from './../services/content.service';
|
||||
import { NodePermissionDirective } from './node-permission.directive';
|
||||
import { NodePermissionDirective, NodePermissionSubject } from './node-permission.directive';
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<div [adf-node-permission]="'delete'" [adf-nodes]="selection">
|
||||
</div>`
|
||||
selector: 'adf-text-subject'
|
||||
})
|
||||
class TestComponent {
|
||||
selection = [];
|
||||
disabled = false;
|
||||
done = jasmine.createSpy('done');
|
||||
class TestComponent implements NodePermissionSubject {
|
||||
disabled: boolean = false;
|
||||
}
|
||||
|
||||
describe('NodePermissionDirective', () => {
|
||||
let fixture: ComponentFixture<TestComponent>;
|
||||
let element: DebugElement;
|
||||
let component: TestComponent;
|
||||
let alfrescoContentService: ContentService;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
let changeDetectorMock: ChangeDetectorRef;
|
||||
|
||||
declarations: [
|
||||
TestComponent
|
||||
]
|
||||
})
|
||||
.compileComponents()
|
||||
.then(() => {
|
||||
fixture = TestBed.createComponent(TestComponent);
|
||||
alfrescoContentService = TestBed.get(ContentService);
|
||||
component = fixture.componentInstance;
|
||||
element = fixture.debugElement.query(By.directive(NodePermissionDirective));
|
||||
});
|
||||
}));
|
||||
|
||||
it('Should be disabled if no nodes are passed', () => {
|
||||
component.selection = undefined;
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
component.selection = null;
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(element.nativeElement.disabled).toEqual(true);
|
||||
beforeEach(() => {
|
||||
changeDetectorMock = <ChangeDetectorRef> { detectChanges: () => {} };
|
||||
});
|
||||
|
||||
it('Should be disabled if nodes is an empty array', () => {
|
||||
component.selection = null;
|
||||
describe('HTML nativeElement as subject', () => {
|
||||
|
||||
fixture.detectChanges();
|
||||
it('updates element once it is loaded', () => {
|
||||
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
|
||||
spyOn(directive, 'updateElement').and.stub();
|
||||
|
||||
component.selection = [];
|
||||
const nodes = [{}, {}];
|
||||
const change = new SimpleChange([], nodes, false);
|
||||
directive.ngOnChanges({ nodes: change });
|
||||
|
||||
fixture.detectChanges();
|
||||
expect(directive.updateElement).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
expect(element.nativeElement.disabled).toEqual(true);
|
||||
it('updates element on nodes change', () => {
|
||||
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
|
||||
spyOn(directive, 'updateElement').and.stub();
|
||||
|
||||
const nodes = [{}, {}];
|
||||
const change = new SimpleChange([], nodes, false);
|
||||
directive.ngOnChanges({ nodes: change });
|
||||
|
||||
expect(directive.updateElement).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('updates element only on subsequent change', () => {
|
||||
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
|
||||
spyOn(directive, 'updateElement').and.stub();
|
||||
|
||||
const nodes = [{}, {}];
|
||||
const change = new SimpleChange([], nodes, true);
|
||||
directive.ngOnChanges({ nodes: change });
|
||||
|
||||
expect(directive.updateElement).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('enables decorated element', () => {
|
||||
const renderer = jasmine.createSpyObj('renderer', ['removeAttribute']);
|
||||
const elementRef = new ElementRef({});
|
||||
const directive = new NodePermissionDirective(elementRef, renderer, null, changeDetectorMock);
|
||||
|
||||
directive.enableElement();
|
||||
|
||||
expect(renderer.removeAttribute).toHaveBeenCalledWith(elementRef.nativeElement, 'disabled');
|
||||
});
|
||||
|
||||
it('disables decorated element', () => {
|
||||
const renderer = jasmine.createSpyObj('renderer', ['setAttribute']);
|
||||
const elementRef = new ElementRef({});
|
||||
const directive = new NodePermissionDirective(elementRef, renderer, null, changeDetectorMock);
|
||||
|
||||
directive.disableElement();
|
||||
|
||||
expect(renderer.setAttribute).toHaveBeenCalledWith(elementRef.nativeElement, 'disabled', 'true');
|
||||
});
|
||||
|
||||
it('disables element when nodes not available', () => {
|
||||
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
|
||||
spyOn(directive, 'disableElement').and.stub();
|
||||
|
||||
directive.nodes = null;
|
||||
expect(directive.updateElement()).toBeFalsy();
|
||||
|
||||
directive.nodes = [];
|
||||
expect(directive.updateElement()).toBeFalsy();
|
||||
});
|
||||
|
||||
it('enables element when all nodes have expected permission', () => {
|
||||
spyOn(alfrescoContentService, 'hasPermission').and.returnValue(true);
|
||||
const contentService = new ContentService(null, null, null, null);
|
||||
spyOn(contentService, 'hasPermission').and.returnValue(true);
|
||||
|
||||
component.selection = null;
|
||||
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock);
|
||||
spyOn(directive, 'enableElement').and.stub();
|
||||
|
||||
fixture.detectChanges();
|
||||
directive.nodes = <any> [{}, {}];
|
||||
|
||||
component.selection = <any> [{entry: {id: '1', name: 'name1'}}];
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(element.nativeElement.disabled).toEqual(false);
|
||||
expect(directive.updateElement()).toBeTruthy();
|
||||
expect(directive.enableElement).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('disables element when one of the nodes have no permission', () => {
|
||||
spyOn(alfrescoContentService, 'hasPermission').and.returnValue(false);
|
||||
const contentService = new ContentService(null, null, null, null);
|
||||
spyOn(contentService, 'hasPermission').and.returnValue(false);
|
||||
|
||||
component.selection = null;
|
||||
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock);
|
||||
spyOn(directive, 'disableElement').and.stub();
|
||||
|
||||
fixture.detectChanges();
|
||||
directive.nodes = <any> [{}, {}];
|
||||
|
||||
component.selection = <any> [{entry: {id: '1', name: 'name1'}}];
|
||||
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(element.nativeElement.disabled).toEqual(true);
|
||||
expect(directive.updateElement()).toBeFalsy();
|
||||
expect(directive.disableElement).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Angular component as subject', () => {
|
||||
|
||||
it('disables decorated component', () => {
|
||||
const contentService = new ContentService(null, null, null, null);
|
||||
spyOn(contentService, 'hasPermission').and.returnValue(false);
|
||||
spyOn(changeDetectorMock, 'detectChanges');
|
||||
|
||||
let testComponent = new TestComponent();
|
||||
testComponent.disabled = false;
|
||||
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock, testComponent);
|
||||
directive.nodes = <any> [{}, {}];
|
||||
|
||||
directive.updateElement();
|
||||
|
||||
expect(testComponent.disabled).toBeTruthy();
|
||||
expect(changeDetectorMock.detectChanges).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('enables decorated component', () => {
|
||||
const contentService = new ContentService(null, null, null, null);
|
||||
spyOn(contentService, 'hasPermission').and.returnValue(true);
|
||||
spyOn(changeDetectorMock, 'detectChanges');
|
||||
|
||||
let testComponent = new TestComponent();
|
||||
testComponent.disabled = true;
|
||||
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock, testComponent);
|
||||
directive.nodes = <any> [{}, {}];
|
||||
|
||||
directive.updateElement();
|
||||
|
||||
expect(testComponent.disabled).toBeFalsy();
|
||||
expect(changeDetectorMock.detectChanges).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -15,9 +15,10 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { ChangeDetectorRef, Directive, ElementRef, Host, Inject, Input, OnChanges, Optional, Renderer2, SimpleChanges } from '@angular/core';
|
||||
import { MinimalNodeEntity } from 'alfresco-js-api';
|
||||
import { ContentService } from './../services/content.service';
|
||||
import { EXTENDIBLE_COMPONENT } from './../interface/injection.tokens';
|
||||
|
||||
export interface NodePermissionSubject {
|
||||
disabled: boolean;
|
||||
@@ -35,7 +36,13 @@ export class NodePermissionDirective implements OnChanges {
|
||||
nodes: MinimalNodeEntity[] = [];
|
||||
|
||||
constructor(private elementRef: ElementRef,
|
||||
private contentService: ContentService) {
|
||||
private renderer: Renderer2,
|
||||
private contentService: ContentService,
|
||||
private changeDetector: ChangeDetectorRef,
|
||||
|
||||
@Host()
|
||||
@Optional()
|
||||
@Inject(EXTENDIBLE_COMPONENT) private parentComponent?: NodePermissionSubject) {
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
@@ -45,17 +52,57 @@ export class NodePermissionDirective implements OnChanges {
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates disabled state for the decorated element
|
||||
* Updates disabled state for the decorated elememtn
|
||||
*
|
||||
* @returns {boolean} True if decorated element got disabled, otherwise False
|
||||
* @memberof NodePermissionDirective
|
||||
*/
|
||||
updateElement(): boolean {
|
||||
let enable = this.hasPermission(this.nodes, this.permission);
|
||||
|
||||
if (enable) {
|
||||
this.enable();
|
||||
} else {
|
||||
this.disable();
|
||||
}
|
||||
|
||||
return enable;
|
||||
}
|
||||
|
||||
private enable(): void {
|
||||
if (this.parentComponent) {
|
||||
this.parentComponent.disabled = false;
|
||||
this.changeDetector.detectChanges();
|
||||
} else {
|
||||
this.enableElement();
|
||||
}
|
||||
}
|
||||
|
||||
private disable(): void {
|
||||
if (this.parentComponent) {
|
||||
this.parentComponent.disabled = true;
|
||||
this.changeDetector.detectChanges();
|
||||
} else {
|
||||
this.disableElement();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables decorated element
|
||||
*
|
||||
* @memberof NodePermissionDirective
|
||||
*/
|
||||
updateElement(): void {
|
||||
let hasPermission = this.hasPermission(this.nodes, this.permission);
|
||||
this.setDisableAttribute(!hasPermission);
|
||||
enableElement(): void {
|
||||
this.renderer.removeAttribute(this.elementRef.nativeElement, 'disabled');
|
||||
}
|
||||
|
||||
private setDisableAttribute(disable: boolean) {
|
||||
this.elementRef.nativeElement.disabled = disable;
|
||||
/**
|
||||
* Disables decorated element
|
||||
*
|
||||
* @memberof NodePermissionDirective
|
||||
*/
|
||||
disableElement(): void {
|
||||
this.renderer.setAttribute(this.elementRef.nativeElement, 'disabled', 'true');
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -73,5 +120,4 @@ export class NodePermissionDirective implements OnChanges {
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user