Added test case for container header visibility

ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts

@@ -20,13 +20,17 @@ import { FormModel } from './../core/form.model';
 import { ContainerModel } from './../core/container.model';
 import { FormFieldTypes } from './../core/form-field-types';
 import { FormFieldModel } from './../core/form-field.model';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
+import { WIDGET_DIRECTIVES } from '../index';
+import { fakeFormJson } from '../../../services/assets/widget-visibility.service.mock';
 
 describe('ContainerWidget', () => {
 
     let componentHandler;
 
     beforeEach(() => {
-        componentHandler =  jasmine.createSpyObj('componentHandler', [
+        componentHandler = jasmine.createSpyObj('componentHandler', [
             'upgradeAllRegistered'
         ]);
 
@@ -49,7 +53,7 @@ describe('ContainerWidget', () => {
 
     it('should toggle underlying group container', () => {
         let container = new ContainerModel(new FormModel(), {
-            type:  FormFieldTypes.GROUP,
+            type: FormFieldTypes.GROUP,
             params: {
                 allowCollapse: true
             }
@@ -67,7 +71,7 @@ describe('ContainerWidget', () => {
 
     it('should toggle only collapsible container', () => {
         let container = new ContainerModel(new FormModel(), {
-            type:  FormFieldTypes.GROUP
+            type: FormFieldTypes.GROUP
         });
 
         let widget = new ContainerWidget();
@@ -80,7 +84,7 @@ describe('ContainerWidget', () => {
 
     it('should toggle only group container', () => {
         let container = new ContainerModel(new FormModel(), {
-            type:  FormFieldTypes.CONTAINER,
+            type: FormFieldTypes.CONTAINER,
             params: {
                 allowCollapse: true
             }
@@ -108,4 +112,100 @@ describe('ContainerWidget', () => {
         widget.fieldChanged(fakeField);
     });
 
+    describe('when template is ready', () => {
+        let containerWidgetComponent: ContainerWidget;
+        let fixture: ComponentFixture<ContainerWidget>;
+        let element: HTMLElement;
+        let fakeContainerVisible: ContainerModel;
+        let fakeContainerInvisible: ContainerModel;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                imports: [CoreModule],
+                declarations: [WIDGET_DIRECTIVES]
+            }).compileComponents().then(() => {
+                fixture = TestBed.createComponent(ContainerWidget);
+                containerWidgetComponent = fixture.componentInstance;
+                element = fixture.nativeElement;
+            });
+        }));
+
+        beforeEach(() => {
+            componentHandler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered', 'upgradeElement']);
+            window['componentHandler'] = componentHandler;
+            fakeContainerVisible = new ContainerModel(new FormModel(fakeFormJson), {
+                fieldType: FormFieldTypes.GROUP,
+                id: 'fake-cont-id-1',
+                name: 'fake-cont-1-name',
+                type: FormFieldTypes.GROUP
+            });
+            fakeContainerInvisible = new ContainerModel(new FormModel(fakeFormJson), {
+                fieldType: FormFieldTypes.GROUP,
+                id: 'fake-cont-id-2',
+                name: 'fake-cont-2-name',
+                type: FormFieldTypes.GROUP
+            });
+            fakeContainerVisible.isVisible = true;
+            fakeContainerInvisible.isVisible = false;
+        });
+
+        afterEach(() => {
+            fixture.destroy();
+            TestBed.resetTestingModule();
+        });
+
+        it('should show the container header when it is visible', () => {
+            containerWidgetComponent.content = fakeContainerVisible;
+            fixture.detectChanges();
+            fixture.whenStable()
+                .then(() => {
+                    expect(element.querySelector('#container-header')).toBeDefined();
+                    expect(element.querySelector('#container-header')).not.toBeNull();
+                    expect(element.querySelector('#container-header-label')).toBeDefined();
+                    expect(element.querySelector('#container-header-label').innerHTML).toContain('fake-cont-1-name');
+                });
+        });
+
+        it('should not show the container header when it is not visible', () => {
+            containerWidgetComponent.content = fakeContainerInvisible;
+            fixture.detectChanges();
+            fixture.whenStable()
+                .then(() => {
+                    expect(element.querySelector('#container-header')).toBeNull();
+                    expect(element.querySelector('#container-header-label')).toBeNull();
+                });
+        });
+
+        it('should hide header when it becomes not visible', () => {
+            containerWidgetComponent.content = fakeContainerVisible;
+            containerWidgetComponent.fieldChanged(null);
+            containerWidgetComponent.formValueChanged.subscribe((res) => {
+                containerWidgetComponent.content.isVisible = false;
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        expect(element.querySelector('#container-header')).toBeNull();
+                        expect(element.querySelector('#container-header-label')).toBeNull();
+                    });
+            });
+        });
+
+        it('should show header when it becomes visible', () => {
+            containerWidgetComponent.content = fakeContainerInvisible;
+            containerWidgetComponent.fieldChanged(null);
+            containerWidgetComponent.formValueChanged.subscribe((res) => {
+                containerWidgetComponent.content.isVisible = true;
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        expect(element.querySelector('#container-header')).toBeDefined();
+                        expect(element.querySelector('#container-header')).not.toBeNull();
+                        expect(element.querySelector('#container-header-label')).toBeDefined();
+                        expect(element.querySelector('#container-header-label').innerHTML).toContain('fake-cont-2-name');
+                    });
+            });
+        });
+
+    });
+
 });

ng2-components/ng2-activiti-form/src/components/widgets/core/container.model.spec.ts

@@ -51,7 +51,8 @@ describe('ContainerModel', () => {
             type: '<type>',
             tab: '<tab>',
             numberOfColumns: 2,
-            params: {}
+            params: {},
+            visibilityCondition: {}
         };
         let container = new ContainerModel(null, json);
         Object.keys(json).forEach(key => {
@@ -69,6 +70,7 @@ describe('ContainerModel', () => {
             tab: '<tab>',
             numberOfColumns: 3,
             params: {},
+            visibilityCondition: {},
             fields: {
                 '1': [
                     { id: 'field-1' },

ng2-components/ng2-activiti-form/src/services/widget-visibility.service.spec.ts

@@ -27,7 +27,7 @@ import { WidgetVisibilityService } from './widget-visibility.service';
 import { AlfrescoSettingsService, AlfrescoAuthenticationService, AlfrescoApiService } from 'ng2-alfresco-core';
 import { TaskProcessVariableModel } from '../models/task-process-variable.model';
 import { WidgetVisibilityModel } from '../models/widget-visibility.model';
-import { FormModel, FormFieldModel, TabModel } from '../components/widgets/core/index';
+import { FormModel, FormFieldModel, TabModel, ContainerModel } from '../components/widgets/core/index';
 
 declare let jasmine: any;
 
@@ -637,5 +637,36 @@ describe('WidgetVisibilityService (mockBackend)', () => {
 
             expect(tab.isVisible).toBeFalsy();
         });
+
+        it('should refresh the visibility for container in forms', () => {
+            visibilityObjTest.leftFormFieldId = 'FIELD_TEST';
+            visibilityObjTest.operator = '!=';
+            visibilityObjTest.rightFormFieldId = 'RIGHT_FORM_FIELD_ID';
+            let contModel = new ContainerModel(fakeFormWithField, {
+                id: 'fake-container-id',
+                name: 'fake-container-name',
+                isVisible: true
+            });
+            contModel.visibilityCondition = visibilityObjTest;
+            fakeFormWithField.fields[0].visibilityCondition = visibilityObjTest;
+            service.refreshVisibility(fakeFormWithField);
+
+            expect(fakeFormWithField.fields[0].isVisible).toBeFalsy();
+        });
+
+        it('should refresh the visibility for single container', () => {
+            visibilityObjTest.leftFormFieldId = 'FIELD_TEST';
+            visibilityObjTest.operator = '!=';
+            visibilityObjTest.rightFormFieldId = 'RIGHT_FORM_FIELD_ID';
+            let contModel = new ContainerModel(fakeFormWithField, {
+                id: 'fake-container-id',
+                name: 'fake-container-name',
+                isVisible: true
+            });
+            contModel.visibilityCondition = visibilityObjTest;
+            service.refreshContainerVisibility(contModel);
+
+            expect(contModel.isVisible).toBeFalsy();
+        });
     });
 });