mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
[ADF-1608] Start Form - Improve the unit test cases. (#2390)
* * Covered more test case scenarios for start-form component * [ADF-1608] Start Form - Improve the unit test cases. * Refactored start-form.component.spec.ts * Covered more test case scenarios for start-form component
This commit is contained in:
siva kumar
committed by
Eugenio Romano
Eugenio Romano
parent
e9766a6090
commit
1629a99911
@@ -0,0 +1,42 @@
|
||||
/*!
|
||||
* @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 { NgModule } from '@angular/core';
|
||||
import {
|
||||
AmountWidgetComponent,
|
||||
ContainerWidgetComponent,
|
||||
DateWidgetComponent,
|
||||
DropdownWidgetComponent,
|
||||
NumberWidgetComponent,
|
||||
RadioButtonsWidgetComponent,
|
||||
TextWidgetComponent
|
||||
} from '../components/widgets/index';
|
||||
|
||||
@NgModule({
|
||||
declarations: [],
|
||||
entryComponents: [
|
||||
ContainerWidgetComponent,
|
||||
TextWidgetComponent,
|
||||
NumberWidgetComponent,
|
||||
DateWidgetComponent,
|
||||
DropdownWidgetComponent,
|
||||
RadioButtonsWidgetComponent,
|
||||
AmountWidgetComponent
|
||||
]
|
||||
})
|
||||
|
||||
export class EntryComponenteMockModule {}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -15,12 +15,16 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { SimpleChange } from '@angular/core';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
import { EntryComponenteMockModule } from '../assets/entry-module.mock';
|
||||
import { startFormDateWidgetMock, startFormDropdownDefinitionMock, startFormTextDefinitionMock, startMockForm, startMockFormWithTab } from '../assets/start-form.component.mock';
|
||||
import { startFormAmountWidgetMock, startFormNumberWidgetMock, startFormRadioButtonWidgetMock } from '../assets/start-form.component.mock';
|
||||
import { TranslationMock } from './../assets/translation.service.mock';
|
||||
import { EcmModelService } from './../services/ecm-model.service';
|
||||
import { FormRenderingService } from './../services/form-rendering.service';
|
||||
import { FormService } from './../services/form.service';
|
||||
import { WidgetVisibilityService } from './../services/widget-visibility.service';
|
||||
import { FormFieldComponent } from './form-field/form-field.component';
|
||||
@@ -29,11 +33,13 @@ import { StartFormComponent } from './start-form.component';
|
||||
import { ContentWidgetComponent } from './widgets/content/content.widget';
|
||||
import { MASK_DIRECTIVE } from './widgets/index';
|
||||
import { WIDGET_DIRECTIVES } from './widgets/index';
|
||||
import { FormModel, FormOutcomeModel } from './widgets/index';
|
||||
|
||||
describe('ActivitiStartForm', () => {
|
||||
|
||||
let formService: FormService;
|
||||
let component: StartFormComponent;
|
||||
let element: HTMLElement;
|
||||
let fixture: ComponentFixture<StartFormComponent>;
|
||||
let getStartFormSpy: jasmine.Spy;
|
||||
|
||||
@@ -44,6 +50,7 @@ describe('ActivitiStartForm', () => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
MaterialModule,
|
||||
EntryComponenteMockModule,
|
||||
CoreModule
|
||||
],
|
||||
declarations: [
|
||||
@@ -57,8 +64,10 @@ describe('ActivitiStartForm', () => {
|
||||
{ provide: AlfrescoTranslationService, useClass: TranslationMock },
|
||||
EcmModelService,
|
||||
FormService,
|
||||
FormRenderingService,
|
||||
WidgetVisibilityService
|
||||
]
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
@@ -67,6 +76,7 @@ describe('ActivitiStartForm', () => {
|
||||
fixture = TestBed.createComponent(StartFormComponent);
|
||||
component = fixture.componentInstance;
|
||||
formService = fixture.debugElement.injector.get(FormService);
|
||||
element = fixture.nativeElement;
|
||||
|
||||
getStartFormSpy = spyOn(formService, 'getStartFormDefinition').and.returnValue(Observable.of({
|
||||
processDefinitionName: 'my:process'
|
||||
@@ -130,4 +140,317 @@ describe('ActivitiStartForm', () => {
|
||||
expect(component.outcomesContainer).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should fetch start form detasils by processDefinitionId ', () => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startMockForm));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
expect(component.outcomesContainer).toBeTruthy();
|
||||
expect(getStartFormSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
describe('Disply widgets', () => {
|
||||
|
||||
it('should be able to display a textWidget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startFormTextDefinitionMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find(field => field.id === 'mocktext');
|
||||
const textWidget = fixture.debugElement.nativeElement.querySelector('text-widget');
|
||||
const textWidgetLabel = fixture.debugElement.nativeElement.querySelector('.adf-label');
|
||||
expect(labelField.type).toBe('text');
|
||||
expect(textWidget).toBeDefined();
|
||||
expect(textWidgetLabel.innerText).toBe('mockText');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to display a radioButtonWidget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startFormRadioButtonWidgetMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find(field => field.id === 'radio-but');
|
||||
const radioButtonWidget = fixture.debugElement.nativeElement.querySelector('radio-buttons-widget');
|
||||
const radioButtonWidgetLabel = fixture.debugElement.nativeElement.querySelector('.adf-input');
|
||||
expect(labelField.type).toBe('radio-buttons');
|
||||
expect(radioButtonWidget).toBeDefined();
|
||||
expect(radioButtonWidgetLabel.innerText).toBe('radio-buttons');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to display a amountWidget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startFormAmountWidgetMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find(field => field.id === 'amount');
|
||||
const amountWidget = fixture.debugElement.nativeElement.querySelector('amount-widget');
|
||||
const amountWidgetLabel = fixture.debugElement.nativeElement.querySelector('.adf-input');
|
||||
expect(labelField.type).toBe('amount');
|
||||
expect(amountWidget).toBeDefined();
|
||||
expect(amountWidgetLabel.innerText).toBe('amount');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to display a numberWidget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startFormNumberWidgetMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find(field => field.id === 'number');
|
||||
const numberWidget = fixture.debugElement.nativeElement.querySelector('number-widget');
|
||||
const numberWidgetLabel = fixture.debugElement.nativeElement.querySelector('.adf-input');
|
||||
expect(labelField.type).toBe('text');
|
||||
expect(numberWidget).toBeDefined();
|
||||
expect(numberWidgetLabel.innerText).toBe('number');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to display a dropDown Widget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startFormDropdownDefinitionMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find(field => field.id === 'mockTypeDropDown');
|
||||
const dropDownWidget = fixture.debugElement.nativeElement.querySelector('dropdown-widget');
|
||||
const selectElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget>md-select .mat-select-trigger');
|
||||
selectElement.click();
|
||||
expect(selectElement).toBeDefined();
|
||||
expect(dropDownWidget).toBeDefined();
|
||||
expect(selectElement.innerText).toBe('Choose one...');
|
||||
expect(labelField.type).toBe('dropdown');
|
||||
expect(labelField.options[0].name).toBe('Chooseone...');
|
||||
expect(labelField.options[1].name).toBe('Option-1');
|
||||
expect(labelField.options[2].name).toBe('Option-2');
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to display a date Widget from a process definition', () => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startFormDateWidgetMock));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find(field => field.id === 'date');
|
||||
const dateWidget = fixture.debugElement.nativeElement.querySelector('dropdown-widget');
|
||||
const dateLabelElement = fixture.debugElement.nativeElement.querySelector('#data-widget .mat-input-infix> .adf-label');
|
||||
expect(dateWidget).toBeDefined();
|
||||
expect(labelField.type).toBe('date');
|
||||
expect(dateLabelElement.innerText).toBe('date (D-M-YYYY)');
|
||||
});
|
||||
});
|
||||
|
||||
it('should fetch and define form fields with proper type', () => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startMockForm));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
const formFields = component.form.getFormFields();
|
||||
|
||||
const labelField = formFields.find(field => field.id === 'billdate');
|
||||
expect(labelField.type).toBe('date');
|
||||
|
||||
const formFields1 = component.form.getFormFields();
|
||||
const labelField1 = formFields1.find(field => field.id === 'claimtype');
|
||||
expect(labelField1.type).toBe('dropdown');
|
||||
});
|
||||
|
||||
it('should show dropdown options', () => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startMockForm));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find(field => field.id === 'claimtype');
|
||||
expect(labelField.type).toBe('dropdown');
|
||||
expect(labelField.options[0].name).toBe('Chooseone...');
|
||||
expect(labelField.options[1].name).toBe('Cashless');
|
||||
expect(labelField.options[2].name).toBe('Reimbursement');
|
||||
});
|
||||
});
|
||||
|
||||
it('should disply start form with fields ', async(() => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startMockForm));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formFieldsWidget = fixture.debugElement.nativeElement.querySelector('form-field');
|
||||
const inputElement = fixture.debugElement.nativeElement.querySelector('.adf-input');
|
||||
const inputLabelElement = fixture.debugElement.nativeElement.querySelector('.mat-input-infix > .adf-label');
|
||||
const dateElement = fixture.debugElement.nativeElement.querySelector('#billdate');
|
||||
const dateLabelElement = fixture.debugElement.nativeElement.querySelector('#data-widget .mat-input-infix> .adf-label');
|
||||
const selectElement = fixture.debugElement.nativeElement.querySelector('#claimtype');
|
||||
const selectLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget > .adf-label');
|
||||
expect(formFieldsWidget).toBeDefined();
|
||||
expect(inputElement).toBeDefined();
|
||||
expect(dateElement).toBeDefined();
|
||||
expect(selectElement).toBeDefined();
|
||||
expect(inputLabelElement.innerText).toBe('ClientName*');
|
||||
expect(dateLabelElement.innerText).toBe('BillDate (D-M-YYYY)');
|
||||
expect(selectLabelElement.innerText).toBe('ClaimType');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should refresh start form on click of refresh button ', async(() => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startMockForm));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.showRefreshButton = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
const refreshElement = fixture.debugElement.nativeElement.querySelector('.mat-card-actions>button');
|
||||
refreshElement.click();
|
||||
fixture.detectChanges();
|
||||
const selectElement = fixture.debugElement.nativeElement.querySelector('#claimtype');
|
||||
const selectLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget > .adf-label');
|
||||
expect(refreshElement).toBeDefined();
|
||||
expect(selectElement).toBeDefined();
|
||||
expect(selectLabelElement.innerText).toBe('ClaimType');
|
||||
});
|
||||
}));
|
||||
|
||||
it('should difine custom-tabs ', async(() => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startMockFormWithTab));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.showRefreshButton = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const formTabs = component.form.tabs;
|
||||
const tabField1 = formTabs.find(tab => tab.id === 'form1');
|
||||
const tabField2 = formTabs.find(tab => tab.id === 'form2');
|
||||
const tabsWidgetElement = fixture.debugElement.nativeElement.querySelector('tabs-widget');
|
||||
expect(tabField1.name).toBe('Tab 1');
|
||||
expect(tabField2.name).toBe('Tab 2');
|
||||
expect(tabsWidgetElement).toBeDefined();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should difine title and [custom-action-buttons]', async(() => {
|
||||
getStartFormSpy.and.returnValue(Observable.of(startMockFormWithTab));
|
||||
component.processDefinitionId = exampleId1;
|
||||
component.showOutcomeButtons = true;
|
||||
component.showRefreshButton = true;
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const titleIcon = fixture.debugElement.nativeElement.querySelector('md-card-title>md-icon');
|
||||
const titleElement = fixture.debugElement.nativeElement.querySelector('md-card-title>h2');
|
||||
const actionButtons = fixture.debugElement.nativeElement.querySelectorAll('.mat-button');
|
||||
expect(titleIcon).toBeDefined();
|
||||
expect(titleElement).toBeDefined();
|
||||
expect(actionButtons.length).toBe(4);
|
||||
expect(actionButtons[0].innerText).toBe('Save');
|
||||
expect(actionButtons[0].disabled).toBeFalsy();
|
||||
expect(actionButtons[1].innerText).toBe('Approve');
|
||||
expect(actionButtons[1].disabled).toBeTruthy();
|
||||
expect(actionButtons[2].innerText).toBe('Complete');
|
||||
expect(actionButtons[2].disabled).toBeTruthy();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
describe('OutCome Actions', () => {
|
||||
|
||||
it('should not enable outcome button when model missing', () => {
|
||||
expect(component.isOutcomeButtonVisible(null, false)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should enable custom outcome buttons', () => {
|
||||
const formModel = new FormModel();
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: 'action1', name: 'Action 1' });
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should allow controlling [complete] button visibility', () => {
|
||||
const formModel = new FormModel();
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$save', name: FormOutcomeModel.SAVE_ACTION });
|
||||
|
||||
component.showSaveButton = true;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeTruthy();
|
||||
|
||||
component.showSaveButton = false;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should show only [complete] button with readOnly form ', () => {
|
||||
const formModel = new FormModel();
|
||||
formModel.readOnly = true;
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$complete', name: FormOutcomeModel.COMPLETE_ACTION });
|
||||
|
||||
component.showCompleteButton = true;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should not show [save] button with readOnly form ', () => {
|
||||
const formModel = new FormModel();
|
||||
formModel.readOnly = true;
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$save', name: FormOutcomeModel.SAVE_ACTION });
|
||||
|
||||
component.showSaveButton = true;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should show [custom-outcome] button with readOnly form and selected custom-outcome', () => {
|
||||
const formModel = new FormModel({ selectedOutcome: 'custom-outcome' });
|
||||
formModel.readOnly = true;
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$customoutome', name: 'custom-outcome' });
|
||||
|
||||
component.showCompleteButton = true;
|
||||
component.showSaveButton = true;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeTruthy();
|
||||
|
||||
const outcome1 = new FormOutcomeModel(formModel, { id: '$customoutome2', name: 'custom-outcome2' });
|
||||
expect(component.isOutcomeButtonVisible(outcome1, component.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should allow controlling [save] button visibility', () => {
|
||||
const formModel = new FormModel();
|
||||
formModel.readOnly = false;
|
||||
component.form = formModel;
|
||||
const outcome = new FormOutcomeModel(formModel, { id: '$save', name: FormOutcomeModel.COMPLETE_ACTION });
|
||||
|
||||
component.showCompleteButton = true;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeTruthy();
|
||||
|
||||
component.showCompleteButton = false;
|
||||
expect(component.isOutcomeButtonVisible(outcome, component.form.readOnly)).toBeFalsy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user