mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-10-08 14:51:32 +00:00
[ADF-3797] Task management view - Task with Form (#4534)
* [ADF-4248] Created form cloud service * [ADF-4248] Created form cloud model * [ADF-4248] Created new cloud form * [ADF-4248] Exported cloud from module * [ADF-4248] Added form saving feature * [ADF-4248] Added form to task details * [ADF-4248] Added services to save form * [ADF-4248] Added data support * [ADF-4248] Added outcome support in form model * [ADF-4248] Modified demo component to show form * [ADF-4248] Copied tests * [ADF-4248] Added form parsing service * [ADF-4248] Added form cloud demo * [ADF-4248] Added form input to fom-cloud * [ADF-4248] Added tests for form cloud model * [ADF-4248] Improved form model json parsing * [ADF-4248] Added test for form could * [ADF-4248] Refactored types in the form model * [ADF-4248] Improved tests * [ADF-4248] Added tests for form cloud service * [ADF-4248] Added tests for form services * [ADF-4248] Refactored form services * [ADF-4248] Handled form events in demo shell * [ADF-4248] Improved form value parsing * [ADF-4248] Added form-cloud demo to routing * [ADF-4248] Added field validation without handler * [ADF-4248] Added task variable model * [ADF-4248] Added adf-cloud prefix to css classes * [ADF-4248] Translated name of nameless task * [ADF-4248] Added docs for cloud form component * [ADF-4248] Added docs for cloud form service * create base component * [ADF-4248] Created formBase and formModelbase * [ADF-4248] Used base classes in cloud package * Update form-cloud.component.md * Update form-cloud.service.md * [ADF-4248] Created form cloud service * [ADF-4248] Created form cloud model * [ADF-4248] Created new cloud form * [ADF-4248] Exported cloud from module * [ADF-4248] Added form saving feature * [ADF-4248] Added form to task details * [ADF-4248] Added services to save form * [ADF-4248] Added data support * [ADF-4248] Added outcome support in form model * [ADF-4248] Modified demo component to show form * [ADF-4248] Copied tests * [ADF-4248] Added form parsing service * [ADF-4248] Added form cloud demo * [ADF-4248] Added form input to fom-cloud * [ADF-4248] Added tests for form cloud model * [ADF-4248] Improved form model json parsing * [ADF-4248] Added test for form could * [ADF-4248] Refactored types in the form model * [ADF-4248] Improved tests * [ADF-4248] Added tests for form cloud service * [ADF-4248] Added tests for form services * [ADF-4248] Refactored form services * [ADF-4248] Handled form events in demo shell * [ADF-4248] Improved form value parsing * [ADF-4248] Added form-cloud demo to routing * [ADF-4248] Added field validation without handler * [ADF-4248] Added task variable model * [ADF-4248] Added adf-cloud prefix to css classes * [ADF-4248] Translated name of nameless task * [ADF-4248] Added docs for cloud form component * [ADF-4248] Added docs for cloud form service * create base component * [ADF-4248] Created formBase and formModelbase * [ADF-4248] Used base classes in cloud package * [ADF-4248] Moved documentation to process services * [ADF-4248] Removed duplicate import * [ADF-4248] Fixed wrong imports * [ADF-4248] Renamed form renderer input * [ADF-4248] Show translated name for nameless form * Enable the uploadWidget * Make the form great again! * Move the class style on the parent * Fix the debugMode
This commit is contained in:
Deepak Paul
committed by
Eugenio Romano
Eugenio Romano
parent
61ee1f1d53
commit
558ee4c031
244
lib/process-services/form/form.component.visibility.spec.ts
Normal file
244
lib/process-services/form/form.component.visibility.spec.ts
Normal file
@@ -0,0 +1,244 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 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 { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { SimpleChange } from '@angular/core';
|
||||
import { of } from 'rxjs';
|
||||
|
||||
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
|
||||
import { formDefinitionDropdownField, formDefinitionTwoTextFields,
|
||||
formDefinitionRequiredField, FormService, setupTestBed, CoreModule,
|
||||
formDefVisibilitiFieldDependsOnNextOne, formDefVisibilitiFieldDependsOnPreviousOne,
|
||||
formReadonlyTwoTextFields } from '@alfresco/adf-core';
|
||||
import { FormComponent } from './form.component';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
/** Duration of the select opening animation. */
|
||||
const SELECT_OPEN_ANIMATION = 200;
|
||||
|
||||
/** Duration of the select closing animation and the timeout interval for the backdrop. */
|
||||
const SELECT_CLOSE_ANIMATION = 500;
|
||||
|
||||
describe('FormComponent UI and visibility', () => {
|
||||
let component: FormComponent;
|
||||
let service: FormService;
|
||||
let fixture: ComponentFixture<FormComponent>;
|
||||
|
||||
function openSelect() {
|
||||
let trigger: HTMLElement;
|
||||
trigger = fixture.debugElement.query(By.css('[class="mat-select-trigger"]')).nativeElement;
|
||||
trigger.click();
|
||||
fixture.detectChanges();
|
||||
}
|
||||
|
||||
setupTestBed({
|
||||
imports: [
|
||||
NoopAnimationsModule,
|
||||
CoreModule.forRoot()
|
||||
],
|
||||
declarations: [
|
||||
FormComponent
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FormComponent);
|
||||
component = fixture.componentInstance;
|
||||
service = TestBed.get(FormService);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
TestBed.resetTestingModule();
|
||||
});
|
||||
|
||||
it('should create instance of FormComponent', () => {
|
||||
expect(fixture.componentInstance instanceof FormComponent).toBe(true, 'should create FormComponent');
|
||||
});
|
||||
|
||||
describe('Validation icon', () => {
|
||||
|
||||
it('should display valid icon for valid form', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefinitionTwoTextFields));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).toBeDefined();
|
||||
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).not.toBeNull();
|
||||
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).toBeNull();
|
||||
});
|
||||
|
||||
it('should display invalid icon for valid form', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefinitionRequiredField));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).toBeNull();
|
||||
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).toBeDefined();
|
||||
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).not.toBeNull();
|
||||
});
|
||||
|
||||
it('should NOT display validation icon when [showValidationIcon] is false', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefinitionTwoTextFields));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
component.showValidationIcon = false;
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).toBeNull();
|
||||
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('form definition', () => {
|
||||
|
||||
it('should display two text fields form definition', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefinitionTwoTextFields));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
const firstNameEl = fixture.debugElement.query(By.css('#firstname'));
|
||||
expect(firstNameEl).not.toBeNull();
|
||||
expect(firstNameEl).toBeDefined();
|
||||
|
||||
const lastNameEl = fixture.debugElement.query(By.css('#lastname'));
|
||||
expect(lastNameEl).not.toBeNull();
|
||||
expect(lastNameEl).toBeDefined();
|
||||
});
|
||||
|
||||
it('should display dropdown field', fakeAsync(() => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefinitionDropdownField));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
openSelect();
|
||||
tick(SELECT_OPEN_ANIMATION);
|
||||
|
||||
const dropdown = fixture.debugElement.queryAll(By.css('#country'));
|
||||
expect(dropdown).toBeDefined();
|
||||
expect(dropdown).not.toBeNull();
|
||||
const options = fixture.debugElement.queryAll(By.css('mat-option'));
|
||||
const optOne = options[1];
|
||||
const optTwo = options[2];
|
||||
const optThree = options[3];
|
||||
|
||||
expect(optOne.nativeElement.innerText.trim()).toEqual('united kingdom');
|
||||
expect(optTwo.nativeElement.innerText.trim()).toEqual('italy');
|
||||
expect(optThree.nativeElement.innerText.trim()).toEqual('france');
|
||||
|
||||
optTwo.nativeElement.click();
|
||||
fixture.detectChanges();
|
||||
expect(dropdown[0].nativeElement.innerText.trim()).toEqual('italy');
|
||||
tick(SELECT_CLOSE_ANIMATION);
|
||||
}));
|
||||
|
||||
describe('Visibility conditions', () => {
|
||||
|
||||
it('should hide the field based on the next one', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefVisibilitiFieldDependsOnNextOne));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
const firstEl = fixture.debugElement.query(By.css('#field-country-container'));
|
||||
expect(firstEl.nativeElement.hidden).toBeTruthy();
|
||||
|
||||
const secondEl = fixture.debugElement.query(By.css('#name'));
|
||||
expect(secondEl).not.toBeNull();
|
||||
expect(secondEl).toBeDefined();
|
||||
expect(fixture.nativeElement.querySelector('#field-name-container').hidden).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should hide the field based on the previous one', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefVisibilitiFieldDependsOnPreviousOne));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
const firstEl = fixture.debugElement.query(By.css('#name'));
|
||||
expect(firstEl).not.toBeNull();
|
||||
expect(firstEl).toBeDefined();
|
||||
expect(fixture.nativeElement.querySelector('#field-name-container').hidden).toBeFalsy();
|
||||
|
||||
const secondEl = fixture.debugElement.query(By.css('#field-country-container'));
|
||||
expect(secondEl.nativeElement.hidden).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should show the hidden field when the visibility condition change to true', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formDefVisibilitiFieldDependsOnNextOne));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
let firstEl = fixture.debugElement.query(By.css('#field-country-container'));
|
||||
expect(firstEl.nativeElement.hidden).toBeTruthy();
|
||||
|
||||
const secondEl = fixture.debugElement.query(By.css('#field-name-container'));
|
||||
expect(secondEl.nativeElement.hidden).toBeFalsy();
|
||||
|
||||
const inputElement = fixture.nativeElement.querySelector('#name');
|
||||
inputElement.value = 'italy';
|
||||
inputElement.dispatchEvent(new Event('input'));
|
||||
fixture.detectChanges();
|
||||
|
||||
firstEl = fixture.debugElement.query(By.css('#field-country-container'));
|
||||
expect(firstEl.nativeElement.hidden).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Readonly Form', () => {
|
||||
it('should display two text fields readonly', () => {
|
||||
spyOn(service, 'getTask').and.returnValue(of({}));
|
||||
spyOn(service, 'getTaskForm').and.returnValue(of(formReadonlyTwoTextFields));
|
||||
|
||||
const change = new SimpleChange(null, 1, true);
|
||||
component.ngOnChanges({ 'taskId': change });
|
||||
fixture.detectChanges();
|
||||
|
||||
const firstNameEl = fixture.debugElement.query(By.css('#firstname'));
|
||||
expect(firstNameEl).not.toBeNull();
|
||||
expect(firstNameEl).toBeDefined();
|
||||
expect(firstNameEl.nativeElement.value).toEqual('fakeFirstName');
|
||||
|
||||
const lastNameEl = fixture.debugElement.query(By.css('#lastname'));
|
||||
expect(lastNameEl).not.toBeNull();
|
||||
expect(lastNameEl).toBeDefined();
|
||||
expect(lastNameEl.nativeElement.value).toEqual('fakeLastName');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user