[ADF-4530] StartTaskCloud - fix process definition list for empty names (#4790)

* [ADF-4530] - reset filtered process when value it's empty or invalid

* [ADF-4530] - lint

* [ADF-4530] - fix unit test

* [ADF-4530] StartTaskCloud - fix process definition list for empty names

* [ADF-4530] - lint

* [ADF-4530] - add unit test

* [ADF4530] StartProcess - revert changes

* [ADF-4530] - revert changes
This commit is contained in:
Silviu Popa
2019-05-31 13:48:19 +03:00
committed by Eugenio Romano
parent 6040f59391
commit 30c42d17d0
4 changed files with 64 additions and 35 deletions

View File

@@ -11,9 +11,9 @@
<form [formGroup]="processForm">
<mat-form-field class="adf-process-input-container">
<mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}</mat-label>
<input
<input
matInput
formControlName="processInstanceName"
formControlName="processInstanceName"
id="processName">
<mat-error id="adf-start-process-required-error" *ngIf="processInstanceName.hasError('required')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
@@ -25,16 +25,16 @@
<mat-form-field class="adf-process-input-container">
<mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate }}</mat-label>
<input
<input
#inputAutocomplete
matInput
formControlName="processDefinition"
[matAutocomplete]="auto"
matInput
formControlName="processDefinition"
[matAutocomplete]="auto"
id="processDefinitionName">
<div class="adf-process-input-autocomplete">
<mat-autocomplete #auto="matAutocomplete" id="processDefinitionOptions" [displayWith]="displayProcessNameOnDropdown">
<mat-option *ngFor="let processDef of filteredProcesses" [value]="processDef.name">
{{ processDef.name }}
<mat-option *ngFor="let processDef of filteredProcesses" [value]="getProcessDefinitionValue(processDef)">
{{ getProcessDefinitionValue(processDef) }}
</mat-option>
</mat-autocomplete>
<button id="adf-select-process-dropdown" *ngIf="showSelectProcessDropdown" mat-icon-button (click)="displayDropdown($event)">
@@ -55,16 +55,16 @@
</mat-card-subtitle>
</mat-card-content>
</ng-template>
<mat-card-actions>
<button mat-button (click)="cancelStartProcess()" id="cancel_process">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.CANCEL' | translate | uppercase}}
</button>
<button
color="primary"
mat-button
[disabled]="!processForm.valid || isLoading"
(click)="startProcess()"
<button
color="primary"
mat-button
[disabled]="!processForm.valid || isLoading"
(click)="startProcess()"
data-automation-id="btn-start"
id="button-start" class="btn-start">
{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.ACTION.START' | translate | uppercase}}

View File

@@ -24,7 +24,7 @@ import { StartProcessCloudService } from '../services/start-process-cloud.servic
import { StartProcessCloudComponent } from './start-process-cloud.component';
import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
import { ProcessCloudModule } from '../../process-cloud.module';
import { fakeProcessDefinitions, fakeProcessInstance, fakeProcessPayload } from '../mock/start-process.component.mock';
import { fakeProcessDefinitions, fakeProcessInstance, fakeProcessPayload, fakeNoNameProcessDefinitions } from '../mock/start-process.component.mock';
import { By } from '@angular/platform-browser';
describe('StartProcessCloudComponent', () => {
@@ -145,6 +145,20 @@ describe('StartProcessCloudComponent', () => {
});
});
it('should display the key when the processDefinition name is empty or null', () => {
component.processDefinitionList = fakeNoNameProcessDefinitions;
fixture.detectChanges();
fixture.whenStable().then(() => {
const selectElement = fixture.nativeElement.querySelector('mat-select > .mat-select-trigger');
const optionElement = fixture.nativeElement.querySelectorAll('mat-option');
selectElement.click();
expect(selectElement).not.toBeNull();
expect(selectElement).toBeDefined();
expect(optionElement).not.toBeNull();
expect(optionElement[0].textContent).toBe('NewProcess 1');
});
});
it('should indicate an error to the user if process defs cannot be loaded', async(() => {
getDefinitionsSpy = getDefinitionsSpy.and.returnValue(throwError({}));
const change = new SimpleChange('myApp', 'myApp1', true);
@@ -393,19 +407,6 @@ describe('StartProcessCloudComponent', () => {
component.startProcess();
});
it('should emit error when process name exceeds maximum length', () => {
component.maxNameLength = 2;
component.ngOnInit();
fixture.detectChanges();
const processInstanceName = component.processForm.controls['processInstanceName'];
processInstanceName.setValue('task');
fixture.detectChanges();
expect(processInstanceName.valid).toBeFalsy();
processInstanceName.setValue('ta');
fixture.detectChanges();
expect(processInstanceName.valid).toBeTruthy();
});
it('should emit error when process name field is empty', () => {
fixture.detectChanges();
const processInstanceName = component.processForm.controls['processInstanceName'];

View File

@@ -120,18 +120,20 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
StartProcessCloudComponent.MAX_NAME_LENGTH : this.maxNameLength;
}
setProcessDefinitionOnForm(processDefinitionName: string) {
this.filteredProcesses = this.getProcessDefinitionList(processDefinitionName);
const selectedProcess = this.getProcessIfExists(processDefinitionName);
setProcessDefinitionOnForm(processDefinition: string) {
this.filteredProcesses = this.getProcessDefinitionList(processDefinition);
const selectedProcess = this.getProcessIfExists(processDefinition);
this.processPayloadCloud.processDefinitionKey = selectedProcess.key;
}
private getProcessDefinitionList(processDefinitionName: string): ProcessDefinitionCloud[] {
return this.processDefinitionList.filter((option) => this.isValidName(option.name) && option.name.toLowerCase().includes(processDefinitionName.toLowerCase()));
private getProcessDefinitionList(processDefinition: string): ProcessDefinitionCloud[] {
return this.processDefinitionList.filter((option) => {
return !processDefinition || this.getProcessDefinition(option, processDefinition);
});
}
private getProcessIfExists(processDefinitionName: string): ProcessDefinitionCloud {
let matchedProcess = this.processDefinitionList.find((option) => this.isValidName(option.name) && option.name.toLowerCase() === processDefinitionName.toLowerCase());
private getProcessIfExists(processDefinition: string): ProcessDefinitionCloud {
let matchedProcess = this.processDefinitionList.find((option) => this.getProcessDefinition(option, processDefinition) );
if (!matchedProcess) {
matchedProcess = new ProcessDefinitionCloud();
}
@@ -172,6 +174,11 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
return !!name;
}
private getProcessDefinition(option: ProcessDefinitionCloud, processDefinition: string): boolean {
return (this.isValidName(option.name) && option.name.toLowerCase().includes(processDefinition.toLowerCase())) ||
(option.key.toLowerCase().includes(processDefinition.toLowerCase()));
}
isProcessDefinitionsEmpty(): boolean {
return this.processDefinitionList.length === 0;
}
@@ -246,6 +253,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
};
}
getProcessDefinitionValue(process: ProcessDefinitionCloud): string {
return !!process.name ? process.name : process.key;
}
public whitespaceValidator(control: FormControl) {
const isWhitespace = (control.value || '').trim().length === 0;
const isValid = !isWhitespace;

View File

@@ -48,6 +48,23 @@ export let fakeProcessDefinitions: ProcessDefinitionCloud[] = [
})
];
export let fakeNoNameProcessDefinitions: ProcessDefinitionCloud[] = [
new ProcessDefinitionCloud({
appName: 'myApp',
appVersion: 0,
id: 'NewProcess:1',
key: 'NewProcess 1',
name: ''
}),
new ProcessDefinitionCloud({
appName: 'myApp',
appVersion: 0,
id: 'NewProcess:2',
key: 'NewProcess 2',
name: null
})
];
export let fakeProcessPayload = new ProcessPayloadCloud({
processDefinitionKey: 'NewProcess:1',
name: 'NewProcess 1',