Reset form when cancel button clicked

- Remove use of any in component and add types
- Small refactoring of method name
- Add many more tests

Refs #1066

ng2-components/ng2-activiti-processlist/src/assets/activiti-start-process.component.mock.ts

@@ -0,0 +1,172 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ProcessInstance } from './../models/process-instance.model';
+import { ProcessDefinitionRepresentation } from './../models/process-definition.model';
+
+export var newProcess = new ProcessInstance({
+    id: '32323',
+    name: 'Process'
+});
+
+export var fakeProcessDefs = [new ProcessDefinitionRepresentation({
+    id: 'my:process1',
+    name: 'My Process 1',
+    hasStartForm: false
+}), new ProcessDefinitionRepresentation({
+    id: 'my:process2',
+    name: 'My Process 2',
+    hasStartForm: false
+})];
+
+export var fakeProcessDefWithForm = [new ProcessDefinitionRepresentation({
+    id: 'my:process1',
+    name: 'My Process 1',
+    hasStartForm: true
+})];
+
+export var taskFormMock = {
+    'id': 4,
+    'name': 'Translation request',
+    'processDefinitionId': 'TranslationProcess:2:8',
+    'processDefinitionName': 'Translation Process',
+    'processDefinitionKey': 'TranslationProcess',
+    'taskId': '91',
+    'taskName': 'Request translation',
+    'taskDefinitionKey': 'sid-DDECD9E4-0299-433F-9193-C3D905C3EEBE',
+    'tabs': [],
+    'fields': [{
+        'fieldType': 'ContainerRepresentation',
+        'id': '1478093984155',
+        'name': 'Label',
+        'type': 'container',
+        'value': null,
+        'required': false,
+        'readOnly': false,
+        'overrideId': false,
+        'colspan': 1,
+        'placeholder': null,
+        'minLength': 0,
+        'maxLength': 0,
+        'minValue': null,
+        'maxValue': null,
+        'regexPattern': null,
+        'optionType': null,
+        'hasEmptyValue': null,
+        'options': null,
+        'restUrl': null,
+        'restResponsePath': null,
+        'restIdProperty': null,
+        'restLabelProperty': null,
+        'tab': null,
+        'className': null,
+        'dateDisplayFormat': null,
+        'layout': null,
+        'sizeX': 2,
+        'sizeY': 1,
+        'row': -1,
+        'col': -1,
+        'visibilityCondition': null,
+        'numberOfColumns': 2,
+        'fields': {
+            '1': [{
+                'fieldType': 'AttachFileFieldRepresentation',
+                'id': 'originalcontent',
+                'name': 'Original content',
+                'type': 'upload',
+                'value': [],
+                'required': true,
+                'readOnly': false,
+                'overrideId': false,
+                'colspan': 1,
+                'placeholder': null,
+                'minLength': 0,
+                'maxLength': 0,
+                'minValue': null,
+                'maxValue': null,
+                'regexPattern': null,
+                'optionType': null,
+                'hasEmptyValue': null,
+                'options': null,
+                'restUrl': null,
+                'restResponsePath': null,
+                'restIdProperty': null,
+                'restLabelProperty': null,
+                'tab': null,
+                'className': null,
+                'params': {
+                },
+                'dateDisplayFormat': null,
+                'layout': {'row': -1, 'column': -1, 'colspan': 1},
+                'sizeX': 1,
+                'sizeY': 1,
+                'row': -1,
+                'col': -1,
+                'visibilityCondition': null,
+                'metaDataColumnDefinitions': []
+            }],
+            '2': [{
+                'fieldType': 'RestFieldRepresentation',
+                'id': 'language',
+                'name': 'Language',
+                'type': 'dropdown',
+                'value': 'Choose one...',
+                'required': true,
+                'readOnly': false,
+                'overrideId': false,
+                'colspan': 1,
+                'placeholder': null,
+                'minLength': 0,
+                'maxLength': 0,
+                'minValue': null,
+                'maxValue': null,
+                'regexPattern': null,
+                'optionType': null,
+                'hasEmptyValue': true,
+                'options': [{'id': 'empty', 'name': 'Choose one...'}, {'id': 'fr', 'name': 'French'}, {
+                    'id': 'de',
+                    'name': 'German'
+                }, {'id': 'es', 'name': 'Spanish'}],
+                'restUrl': null,
+                'restResponsePath': null,
+                'restIdProperty': null,
+                'restLabelProperty': null,
+                'tab': null,
+                'className': null,
+                'params': {'existingColspan': 1, 'maxColspan': 1},
+                'dateDisplayFormat': null,
+                'layout': {'row': -1, 'column': -1, 'colspan': 1},
+                'sizeX': 1,
+                'sizeY': 1,
+                'row': -1,
+                'col': -1,
+                'visibilityCondition': null,
+                'endpoint': null,
+                'requestHeaders': null
+            }]
+        }
+    }],
+    'outcomes': [],
+    'javascriptEvents': [],
+    'className': '',
+    'style': '',
+    'customFieldTemplates': {},
+    'metadata': {},
+    'variables': [],
+    'gridsterForm': false,
+    'globalDateFormat': 'D-M-YYYY'
+};

ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.html

@@ -4,7 +4,7 @@
     <h4 class="mdl-dialog__title">{{'START_PROCESS.DIALOG.TITLE'|translate}}</h4>
     <div class="mdl-dialog__content">
         <div class="mdl-textfield mdl-js-textfield alf-mdl-selectfield">
-            <select name="processDefinition" [(ngModel)]="currentProcessDef.id" (ngModelChange)="onChange($event)" id="processDefinition">
+            <select name="processDefinition" [(ngModel)]="currentProcessDef.id" (ngModelChange)="onProcessDefChange($event)" id="processDefinition" required>
                 <option value="" selected="selected">{{'START_PROCESS.DIALOG.TYPE_PLACEHOLDER'|translate}}</option>
                 <option *ngFor="let processDef of processDefinitions" [value]="processDef.id">
                     {{processDef.name}}
@@ -14,7 +14,7 @@
         </div>
         <br>
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input class="mdl-textfield__input" type="text" [(ngModel)]="name" id="processName" />
+            <input class="mdl-textfield__input" type="text" [(ngModel)]="name" id="processName" required />
             <label class="mdl-textfield__label" for="processName">{{'START_PROCESS.DIALOG.LABEL.NAME'|translate}}</label>
         </div>
         <activiti-start-form *ngIf="hasStartForm()" [processDefinitionId]="currentProcessDef.id"
@@ -26,7 +26,7 @@
         </activiti-start-form>
     </div>
     <div class="mdl-dialog__actions">
-        <button type="button" [disabled]="!validateForm()" (click)="startProcess()" class="mdl-button">{{'START_PROCESS.DIALOG.ACTION.START'|translate}}</button>
+        <button type="button" [disabled]="!validateForm()" (click)="startProcess()" class="mdl-button" data-automation-id="btn-start">{{'START_PROCESS.DIALOG.ACTION.START'|translate}}</button>
-        <button type="button" (click)="cancel()" class="mdl-button close">{{'START_PROCESS.DIALOG.ACTION.CANCEL'|translate}}</button>
+        <button type="button" (click)="cancel()" class="mdl-button close" data-automation-id="btn-close">{{'START_PROCESS.DIALOG.ACTION.CANCEL'|translate}}</button>
     </div>
 </dialog>

ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.spec.ts

@@ -17,12 +17,13 @@
 
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
+import { DebugElement, SimpleChange } from '@angular/core';
 import { Observable } from 'rxjs/Rx';
-import { ActivitiFormModule } from 'ng2-activiti-form';
 import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
-import { FormService } from 'ng2-activiti-form';
+import { ActivitiFormModule, FormService } from 'ng2-activiti-form';
+
 import { TranslationMock } from './../assets/translation.service.mock';
+import { newProcess, fakeProcessDefs, fakeProcessDefWithForm, taskFormMock } from './../assets/activiti-start-process.component.mock';
 import { ActivitiStartProcessButton } from './activiti-start-process.component';
 import { ActivitiProcessService } from '../services/activiti-process.service';
 
@@ -34,14 +35,10 @@ describe('ActivitiStartProcessButton', () => {
     let processService: ActivitiProcessService;
     let formService: FormService;
     let getDefinitionsSpy: jasmine.Spy;
+    let getStartFormDefinitionSpy: jasmine.Spy;
     let startProcessSpy: jasmine.Spy;
     let debugElement: DebugElement;
 
-    let newProcess = {
-        id: '32323',
-        name: 'Process'
-    };
-
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [ CoreModule, ActivitiFormModule ],
@@ -64,14 +61,9 @@ describe('ActivitiStartProcessButton', () => {
         processService = fixture.debugElement.injector.get(ActivitiProcessService);
         formService = fixture.debugElement.injector.get(FormService);
 
-        getDefinitionsSpy = spyOn(processService, 'getProcessDefinitions').and.returnValue(Observable.of([{
+        getDefinitionsSpy = spyOn(processService, 'getProcessDefinitions').and.returnValue(Observable.of(fakeProcessDefs));
-            id: 'my:process1',
-            name: 'My Process 1'
-        }, {
-            id: 'my:process2',
-            name: 'My Process 2'
-        }]));
         startProcessSpy = spyOn(processService, 'startProcess').and.returnValue(Observable.of(newProcess));
+        getStartFormDefinitionSpy = spyOn(formService, 'getStartFormDefinition').and.returnValue(Observable.of(taskFormMock));
 
         componentHandler = jasmine.createSpyObj('componentHandler', [
             'upgradeAllRegistered',
@@ -80,79 +72,217 @@ describe('ActivitiStartProcessButton', () => {
         window['componentHandler'] = componentHandler;
     });
 
-    it('should display the correct number of processes in the select list', () => {
+    describe('process definitions list', () => {
-        fixture.detectChanges();
+
-        let selectElement = debugElement.query(By.css('select'));
+        it('should call service to fetch process definitions', () => {
-        expect(selectElement.children.length).toBe(3);
+            fixture.detectChanges();
+            expect(getDefinitionsSpy).toHaveBeenCalled();
+        });
+
+        it('should call service to fetch process definitions with appId when provided', () => {
+            let appId = '123';
+            component.appId = appId;
+            fixture.detectChanges();
+            expect(getDefinitionsSpy).toHaveBeenCalledWith(appId);
+        });
+
+        it('should display the correct number of processes in the select list', () => {
+            fixture.detectChanges();
+            let selectElement = debugElement.query(By.css('select'));
+            expect(selectElement.children.length).toBe(3);
+        });
+
+        it('should display the correct process def details', (done) => {
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                let optionEl: HTMLOptionElement = debugElement.queryAll(By.css('select option'))[1].nativeElement;
+                expect(optionEl.value).toBe('my:process1');
+                expect(optionEl.textContent.trim()).toBe('My Process 1');
+                done();
+            });
+        });
+
     });
 
-    it('should display the correct process def details', (done) => {
+    describe('input changes', () => {
-        fixture.detectChanges();
+
-        fixture.whenStable().then(() => {
+        let change = new SimpleChange('123', '456');
-            let optionEl: HTMLOptionElement = debugElement.queryAll(By.css('select option'))[1].nativeElement;
+        let nullChange = new SimpleChange('123', null);
-            expect(optionEl.value).toBe('my:process1');
+
-            expect(optionEl.textContent.trim()).toBe('My Process 1');
+        beforeEach(async(() => {
-            done();
+            component.appId = '123';
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                getDefinitionsSpy.calls.reset();
+            });
+        }));
+
+        it('should reload processes when appId input changed', () => {
+            component.ngOnChanges({ appId: change });
+            expect(getDefinitionsSpy).toHaveBeenCalledWith('456');
         });
+
+        it('should reload processes when appId input changed to null', () => {
+            component.ngOnChanges({ appId: nullChange });
+            expect(getDefinitionsSpy).toHaveBeenCalledWith(null);
+        });
+
+        it('should not reload processes when changes do not include appId input', () => {
+            component.ngOnChanges({});
+            expect(getDefinitionsSpy).not.toHaveBeenCalled();
+        });
+
     });
 
-    it('should call service to start process if required fields provided', (done) => {
+    describe('start process', () => {
-        component.name = 'My new process';
+
-        component.showDialog();
+        beforeEach(() => {
-        fixture.detectChanges();
+            component.name = 'My new process';
-        component.onChange('my:process1');
+            component.showDialog();
-        component.startProcess();
+            fixture.detectChanges();
-        fixture.whenStable().then(() => {
-            expect(startProcessSpy).toHaveBeenCalled();
-            done();
         });
+
+        it('should call service to start process if required fields provided', async(() => {
+            component.onProcessDefChange('my:process1');
+            component.startProcess();
+            fixture.whenStable().then(() => {
+                expect(startProcessSpy).toHaveBeenCalled();
+            });
+        }));
+
+        it('should avoid calling service to start process if required fields NOT provided', async(() => {
+            component.name = '';
+            component.startProcess();
+            fixture.whenStable().then(() => {
+                expect(startProcessSpy).not.toHaveBeenCalled();
+            });
+        }));
+
+        it('should call service to start process with the correct parameters', async(() => {
+            component.onProcessDefChange('my:process1');
+            component.startProcess();
+            fixture.whenStable().then(() => {
+                expect(startProcessSpy).toHaveBeenCalledWith('my:process1', 'My new process', undefined);
+            });
+        }));
+
+        it('should output start event when process started successfully', async(() => {
+            let emitSpy = spyOn(component.start, 'emit');
+            component.onProcessDefChange('my:process1');
+            component.startProcess();
+            fixture.whenStable().then(() => {
+                expect(emitSpy).toHaveBeenCalledWith(newProcess);
+            });
+        }));
+
     });
 
-    it('should avoid calling service to start process if required fields NOT provided', (done) => {
+    describe('start forms', () => {
-        component.showDialog();
+
-        fixture.detectChanges();
+        describe('without start form', () => {
-        component.startProcess();
+
-        fixture.whenStable().then(() => {
+            beforeEach(async(() => {
-            expect(startProcessSpy).not.toHaveBeenCalled();
+                component.name = 'My new process';
-            done();
+                component.showDialog();
+                fixture.detectChanges();
+                component.onProcessDefChange('my:process1');
+                fixture.whenStable();
+            }));
+
+            it('should indicate start form is missing', async(() => {
+                expect(component.isStartFormMissingOrValid()).toBe(true);
+            }));
+
+            it('should enable start button when name and process filled out', async(() => {
+                fixture.detectChanges();
+                let startBtn = debugElement.query(By.css('[data-automation-id="btn-start"]'));
+                expect(startBtn.properties['disabled']).toBe(false);
+            }));
+
         });
+
+        describe('with start form', () => {
+
+            beforeEach(() => {
+                getDefinitionsSpy.and.returnValue(Observable.of(fakeProcessDefWithForm));
+                component.showDialog();
+                fixture.detectChanges();
+                component.onProcessDefChange('my:process1');
+                fixture.detectChanges();
+                fixture.whenStable();
+            });
+
+            it('should initialize start form', () => {
+                expect(component.startForm).toBeDefined();
+                expect(component.startForm).not.toBeNull();
+            });
+
+            it('should load start form from service', () => {
+                expect(getStartFormDefinitionSpy).toHaveBeenCalled();
+            });
+
+            it('should indicate start form is invalid', async(() => {
+                expect(component.isStartFormMissingOrValid()).toBe(false);
+            }));
+
+            it('should leave start button disabled when mandatory fields not filled out', async(() => {
+                component.name = 'My new process';
+                fixture.detectChanges();
+                let startBtn = debugElement.query(By.css('[data-automation-id="btn-start"]'));
+                expect(startBtn.properties['disabled']).toBe(true);
+            }));
+
+        });
+
     });
 
-    it('should call service to start process with the correct parameters', (done) => {
+    describe('cancel dialog', () => {
-        component.name = 'My new process';
-        component.showDialog();
-        fixture.detectChanges();
-        component.onChange('my:process1');
-        component.startProcess();
-        fixture.whenStable().then(() => {
-            expect(startProcessSpy).toHaveBeenCalledWith('my:process1', 'My new process', undefined);
-            done();
-        });
-    });
 
-    it('should output start event when process started successfully', (done) => {
+        let setupDialog = (definitions?: any) => {
-        let emitSpy = spyOn(component.start, 'emit');
+            if (definitions) {
-        component.name = 'My new process';
+                getDefinitionsSpy.and.returnValue(Observable.of(definitions));
-        component.showDialog();
+            }
-        fixture.detectChanges();
+            component.showDialog();
-        component.onChange('my:process1');
+            fixture.detectChanges();
-        component.startProcess();
+            component.onProcessDefChange('my:process1');
-        fixture.whenStable().then(() => {
+            fixture.detectChanges();
-            expect(emitSpy).toHaveBeenCalledWith(newProcess);
+        };
-            done();
+
-        });
+        let clickCancelButton = () => {
-    });
+            let closeButton: DebugElement = debugElement.query(By.css('[data-automation-id="btn-close"]'));
+            closeButton.triggerEventHandler('click', null);
+        };
+
+        it('should close dialog when cancel button clicked', async(() => {
+            let closeSpy = spyOn(component.dialog.nativeElement, 'close');
+            component.showDialog();
+            fixture.detectChanges();
+            clickCancelButton();
+            expect(closeSpy).toHaveBeenCalled();
+        }));
+
+        it('should clear processId and name when dialog cancelled', async(() => {
+            setupDialog();
+            clickCancelButton();
+            expect(component.currentProcessDef.id).toBeNull();
+            expect(component.name).toBe('');
+        }));
+
+        it('should clear form values when dialog cancelled', async(() => {
+            setupDialog(fakeProcessDefWithForm);
+            fixture.whenStable().then(() => {
+                component.startForm.data = {
+                    language: 'fr',
+                    upload: {}
+                };
+                fixture.detectChanges();
+                clickCancelButton();
+                expect(component.startForm.data['language']).toBeUndefined();
+                expect(component.startForm.data['upload']).toBeUndefined();
+            });
+        }));
 
-    it('should indicate start form is missing when process does not have a start form', (done) => {
-        component.name = 'My new process';
-        component.showDialog();
-        fixture.detectChanges();
-        component.onChange('my:process1');
-        component.startProcess();
-        fixture.whenStable().then(() => {
-            expect(component.isStartFormMissingOrValid()).toBe(true);
-            done();
-        });
     });
 
 });

ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts

@@ -18,6 +18,8 @@
 import { Component, EventEmitter, Input, Output, OnInit, ViewChild, DebugElement, OnChanges, SimpleChanges } from '@angular/core';
 import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 import { ActivitiStartForm } from 'ng2-activiti-form';
+import { ProcessInstance } from './../models/process-instance.model';
+import { ProcessDefinitionRepresentation } from './../models/process-definition.model';
 import { ActivitiProcessService } from './../services/activiti-process.service';
 
 declare let componentHandler: any;
@@ -35,7 +37,7 @@ export class ActivitiStartProcessButton implements OnInit, OnChanges {
     appId: string;
 
     @Output()
-    start: EventEmitter<any> = new EventEmitter<any>();
+    start: EventEmitter<ProcessInstance> = new EventEmitter<ProcessInstance>();
 
     @ViewChild('dialog')
     dialog: DebugElement;
@@ -43,11 +45,11 @@ export class ActivitiStartProcessButton implements OnInit, OnChanges {
     @ViewChild('startForm')
     startForm: ActivitiStartForm;
 
-    processDefinitions: any[] = [];
+    processDefinitions: ProcessDefinitionRepresentation[] = [];
 
     name: string;
 
-    currentProcessDef: any;
+    currentProcessDef: ProcessDefinitionRepresentation = new ProcessDefinitionRepresentation();
 
     constructor(private translate: AlfrescoTranslationService,
                 private activitiProcess: ActivitiProcessService) {
@@ -70,9 +72,9 @@ export class ActivitiStartProcessButton implements OnInit, OnChanges {
     }
 
     public load(appId: string) {
-        this.reset();
+        this.resetSelectedProcessDefinition();
-        this.activitiProcess.getProcessDefinitions(this.appId).subscribe(
+        this.activitiProcess.getProcessDefinitions(appId).subscribe(
-            (res: any[]) => {
+            (res) => {
                 this.processDefinitions = res;
             },
             (err) => {
@@ -92,7 +94,7 @@ export class ActivitiStartProcessButton implements OnInit, OnChanges {
         if (this.currentProcessDef.id && this.name) {
             let formValues = this.startForm ? this.startForm.form.values : undefined;
             this.activitiProcess.startProcess(this.currentProcessDef.id, this.name, formValues).subscribe(
-                (res: any) => {
+                (res) => {
                     this.name = '';
                     this.start.emit(res);
                     this.cancel();
@@ -105,10 +107,11 @@ export class ActivitiStartProcessButton implements OnInit, OnChanges {
     }
 
     public cancel() {
+        this.reset();
         this.dialog.nativeElement.close();
     }
 
-    onChange(processDefinitionId) {
+    onProcessDefChange(processDefinitionId) {
         let processDef = this.processDefinitions.find((processDefinition) => {
             return processDefinition.id === processDefinitionId;
         });
@@ -128,7 +131,15 @@ export class ActivitiStartProcessButton implements OnInit, OnChanges {
         return this.currentProcessDef.id && this.name && this.isStartFormMissingOrValid();
     }
 
-    reset() {
+    private resetSelectedProcessDefinition() {
-        this.currentProcessDef = {};
+        this.currentProcessDef = new ProcessDefinitionRepresentation();
+    }
+
+    private reset() {
+        this.resetSelectedProcessDefinition();
+        this.name = '';
+        if (this.startForm) {
+            this.startForm.data = {};
+        }
     }
 }