inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-5422] remove deprecated "async()" from unit tests (#7109)

Browse Source 
* remove angualar async from content services

* upgrade more tests

* upgrade core tests

* upgrade tests

* fix deprecated constant

* fix tests

* fix after rebase
This commit is contained in:
Denys Vuika
2021-06-15 16:16:15 +01:00
committed by GitHub
parent ba03c60adb
commit 3079aa48c3
121 changed files with 5316 additions and 4780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/core/form/components/widgets/amount/amount.widget.spec.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormFieldModel } from './../core/form-field.model';
import { AmountWidgetComponent, ADF_AMOUNT_SETTINGS } from './amount.widget';
import { setupTestBed } from '../../../../testing/setup-test-bed';
@@ -147,7 +147,7 @@ describe('AmountWidgetComponent - rendering', () => {
expect(errorWidget.textContent).toBe('FORM.FIELD.VALIDATOR.INVALID_NUMBER');
});
it('should display tooltip when tooltip is set', async(() => {
it('should display tooltip when tooltip is set', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'TestAmount1',
name: 'Test Amount',
@@ -168,11 +168,13 @@ describe('AmountWidgetComponent - rendering', () => {
});
fixture.detectChanges();
await fixture.whenStable();
const ammountElement: any = fixture.nativeElement.querySelector('#TestAmount1');
const tooltip = ammountElement.getAttribute('ng-reflect-message');
expect(tooltip).toEqual(widget.field.tooltip);
}));
});
});
describe('AmountWidgetComponent settings', () => {

46
lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { FormFieldTypes } from '../core/form-field-types';
import { FormFieldModel } from '../core/form-field.model';
import { FormModel } from '../core/form.model';
@@ -54,6 +54,8 @@ describe('CheckboxWidgetComponent', () => {
element = fixture.nativeElement;
});
afterEach(() => fixture.destroy());
describe('when template is ready', () => {
beforeEach(() => {
@@ -67,14 +69,14 @@ describe('CheckboxWidgetComponent', () => {
});
});
it('should be marked as invalid when required', async(() => {
it('should be marked as invalid when required', async () => {
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(element.querySelector('.adf-invalid')).not.toBeNull();
});
}));
await fixture.whenStable();
it('should be checked if boolean true is passed', async(() => {
expect(element.querySelector('.adf-invalid')).not.toBeNull();
});
it('should be checked if boolean true is passed', fakeAsync(() => {
widget.field.value = true;
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -84,26 +86,26 @@ describe('CheckboxWidgetComponent', () => {
});
}));
it('should not be checked if false is passed', async(() => {
it('should not be checked if false is passed', async () => {
widget.field.value = false;
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input');
expect(checkbox.getAttribute('aria-checked')).toBe('false');
});
}));
it('should display tooltip when tooltip is set', async(() => {
fixture.detectChanges();
await fixture.whenStable();
const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input');
expect(checkbox.getAttribute('aria-checked')).toBe('false');
});
it('should display tooltip when tooltip is set', async () => {
widget.field.tooltip = 'checkbox widget';
fixture.detectChanges();
fixture.whenStable().then(() => {
const checkbox = fixture.debugElement.nativeElement.querySelector('#check-id');
const tooltip = checkbox.getAttribute('ng-reflect-message');
await fixture.whenStable();
expect(tooltip).toEqual(widget.field.tooltip);
});
}));
const checkbox = fixture.debugElement.nativeElement.querySelector('#check-id');
const tooltip = checkbox.getAttribute('ng-reflect-message');
expect(tooltip).toEqual(widget.field.tooltip);
});
});
});

73
lib/core/form/components/widgets/date-time/date-time.widget.spec.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import moment from 'moment-es6';
import { FormFieldModel } from './../core/form-field.model';
import { FormModel } from './../core/form.model';
@@ -109,7 +109,7 @@ describe('DateTimeWidgetComponent', () => {
describe('template check', () => {
it('should show visible date widget', async(() => {
it('should show visible date widget', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
@@ -117,37 +117,36 @@ describe('DateTimeWidgetComponent', () => {
type: 'datetime',
readOnly: 'false'
});
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toBe('30-11-9999 10:30 AM');
});
}));
it('should show the correct format type', async(() => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
value: '12-30-9999 10:30 AM',
dateDisplayFormat: 'MM-DD-YYYY HH:mm A',
type: 'datetime',
readOnly: 'false'
});
fixture.detectChanges();
fixture.whenStable()
.then(() => {
fixture.detectChanges();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toContain('12-30-9999 10:30 AM');
});
}));
it('should disable date button when is readonly', async(() => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toBe('30-11-9999 10:30 AM');
});
it('should show the correct format type', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
value: '12-30-9999 10:30 AM',
dateDisplayFormat: 'MM-DD-YYYY HH:mm A',
type: 'datetime',
readOnly: 'false'
});
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toContain('12-30-9999 10:30 AM');
});
it('should disable date button when is readonly', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
@@ -157,18 +156,20 @@ describe('DateTimeWidgetComponent', () => {
readOnly: 'false'
});
fixture.detectChanges();
await fixture.whenStable();
let dateButton = <HTMLButtonElement> element.querySelector('button');
expect(dateButton.disabled).toBeFalsy();
widget.field.readOnly = true;
fixture.detectChanges();
await fixture.whenStable();
dateButton = <HTMLButtonElement> element.querySelector('button');
expect(dateButton.disabled).toBeTruthy();
}));
});
it('should display tooltip when tooltip is set', async(() => {
it('should display tooltip when tooltip is set', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
@@ -180,11 +181,13 @@ describe('DateTimeWidgetComponent', () => {
});
fixture.detectChanges();
await fixture.whenStable();
const dateElement: any = element.querySelector('#date-field-id');
const tooltip = dateElement.getAttribute('ng-reflect-message');
expect(tooltip).toEqual(widget.field.tooltip);
}));
});
});
it('should display always the json value', () => {

53
lib/core/form/components/widgets/date/date.widget.spec.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import moment from 'moment-es6';
import { FormFieldModel } from './../core/form-field.model';
import { FormModel } from './../core/form.model';
@@ -105,7 +105,7 @@ describe('DateWidgetComponent', () => {
TestBed.resetTestingModule();
});
it('should show visible date widget', async(() => {
it('should show visible date widget', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
@@ -115,16 +115,17 @@ describe('DateWidgetComponent', () => {
});
widget.field.isVisible = true;
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toContain('9-9-9999');
});
}));
it('should show the correct format type', async(() => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toContain('9-9-9999');
});
it('should show the correct format type', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
@@ -135,17 +136,17 @@ describe('DateWidgetComponent', () => {
widget.field.isVisible = true;
widget.field.dateDisplayFormat = 'MM-DD-YYYY';
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable()
.then(() => {
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toContain('12-30-9999');
});
}));
it('should disable date button when is readonly', async(() => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#date-field-id')).toBeDefined();
expect(element.querySelector('#date-field-id')).not.toBeNull();
const dateElement: any = element.querySelector('#date-field-id');
expect(dateElement.value).toContain('12-30-9999');
});
it('should disable date button when is readonly', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
@@ -155,7 +156,9 @@ describe('DateWidgetComponent', () => {
});
widget.field.isVisible = true;
widget.field.readOnly = false;
fixture.detectChanges();
await fixture.whenStable();
let dateButton = <HTMLButtonElement> element.querySelector('button');
expect(dateButton.disabled).toBeFalsy();
@@ -165,9 +168,9 @@ describe('DateWidgetComponent', () => {
dateButton = <HTMLButtonElement> element.querySelector('button');
expect(dateButton.disabled).toBeTruthy();
}));
});
it('should set isValid to false when the value is not a correct date value', async(() => {
it('should set isValid to false when the value is not a correct date value', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'date-field-id',
name: 'date-name',
@@ -177,9 +180,11 @@ describe('DateWidgetComponent', () => {
});
widget.field.isVisible = true;
widget.field.readOnly = false;
fixture.detectChanges();
await fixture.whenStable();
expect(widget.field.isValid).toBeFalsy();
}));
});
});
});

123
lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts
View File

@@ -132,28 +132,33 @@ describe('DropdownWidgetComponent', () => {
});
}));
it('should be able to display label with asterix', async(() => {
it('should be able to display label with asterix', async () => {
const label = 'MyLabel123';
widget.field.name = label;
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('label').innerText).toBe(label + '*');
}));
});
it('should be invalid if no default option', async(() => {
it('should be invalid if no default option', async () => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeDefined();
expect(element.querySelector('.adf-invalid')).not.toBeNull();
}));
});
it('should be valid if default option', async(() => {
it('should be valid if default option', async () => {
widget.field.options = fakeOptionList;
widget.field.value = fakeOptionList[0].id;
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeNull();
}));
});
});
describe('when template is ready', () => {
@@ -177,7 +182,7 @@ describe('DropdownWidgetComponent', () => {
fixture.detectChanges();
}));
it('should show visible dropdown widget', async(() => {
it('should show visible dropdown widget', async () => {
expect(element.querySelector('#dropdown-id')).toBeDefined();
expect(element.querySelector('#dropdown-id')).not.toBeNull();
@@ -190,36 +195,35 @@ describe('DropdownWidgetComponent', () => {
expect(optOne).not.toBeNull();
expect(optTwo).not.toBeNull();
expect(optThree).not.toBeNull();
}));
});
it('should select the default value when an option is chosen as default', async(() => {
it('should select the default value when an option is chosen as default', async () => {
widget.field.value = 'option_2';
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable()
.then(() => {
const dropDownElement: any = element.querySelector('#dropdown-id');
expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('option_2');
expect(dropDownElement.attributes['ng-reflect-model'].textContent).toBe('option_2');
});
}));
it('should select the empty value when no default is chosen', async(() => {
fixture.detectChanges();
await fixture.whenStable();
const dropDownElement: any = element.querySelector('#dropdown-id');
expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('option_2');
expect(dropDownElement.attributes['ng-reflect-model'].textContent).toBe('option_2');
});
it('should select the empty value when no default is chosen', async () => {
widget.field.value = 'empty';
widget.ngOnInit();
fixture.detectChanges();
await fixture.whenStable();
openSelect();
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable()
.then(() => {
const dropDownElement: any = element.querySelector('#dropdown-id');
expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('empty');
});
}));
const dropDownElement: any = element.querySelector('#dropdown-id');
expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('empty');
});
});
describe('and dropdown is populated via processDefinitionId', () => {
@@ -241,7 +245,7 @@ describe('DropdownWidgetComponent', () => {
fixture.detectChanges();
}));
it('should show visible dropdown widget', async(() => {
it('should show visible dropdown widget', () => {
expect(element.querySelector('#dropdown-id')).toBeDefined();
expect(element.querySelector('#dropdown-id')).not.toBeNull();
@@ -254,37 +258,37 @@ describe('DropdownWidgetComponent', () => {
expect(optOne).not.toBeNull();
expect(optTwo).not.toBeNull();
expect(optThree).not.toBeNull();
}));
});
it('should select the default value when an option is chosen as default', async(() => {
it('should select the default value when an option is chosen as default', async () => {
widget.field.value = 'option_2';
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable()
.then(() => {
const dropDownElement: any = element.querySelector('#dropdown-id');
expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('option_2');
expect(dropDownElement.attributes['ng-reflect-model'].textContent).toBe('option_2');
});
}));
it('should select the empty value when no default is chosen', async(() => {
fixture.detectChanges();
await fixture.whenStable();
const dropDownElement: any = element.querySelector('#dropdown-id');
expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('option_2');
expect(dropDownElement.attributes['ng-reflect-model'].textContent).toBe('option_2');
});
it('should select the empty value when no default is chosen', async () => {
widget.field.value = 'empty';
widget.ngOnInit();
fixture.detectChanges();
await fixture.whenStable();
openSelect();
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable()
.then(() => {
const dropDownElement: any = element.querySelector('#dropdown-id');
expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('empty');
});
}));
const dropDownElement: any = element.querySelector('#dropdown-id');
expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('empty');
});
it('should be disabled when the field is readonly', async(() => {
it('should be disabled when the field is readonly', async () => {
widget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), {
id: 'dropdown-id',
name: 'date-name',
@@ -294,15 +298,14 @@ describe('DropdownWidgetComponent', () => {
});
fixture.detectChanges();
fixture.whenStable()
.then(() => {
const dropDownElement: HTMLSelectElement = <HTMLSelectElement> element.querySelector('#dropdown-id');
expect(dropDownElement).not.toBeNull();
expect(dropDownElement.getAttribute('aria-disabled')).toBe('true');
});
}));
await fixture.whenStable();
it('should show the option value when the field is readonly', async(() => {
const dropDownElement: HTMLSelectElement = <HTMLSelectElement> element.querySelector('#dropdown-id');
expect(dropDownElement).not.toBeNull();
expect(dropDownElement.getAttribute('aria-disabled')).toBe('true');
});
it('should show the option value when the field is readonly', async () => {
widget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), {
id: 'dropdown-id',
name: 'date-name',
@@ -315,16 +318,14 @@ describe('DropdownWidgetComponent', () => {
openSelect();
fixture.detectChanges();
fixture.whenStable()
.then(() => {
fixture.detectChanges();
const options = fixture.debugElement.queryAll(By.css('.mat-option-text'));
expect(options.length).toBe(1);
await fixture.whenStable();
const option = options[0].nativeElement;
expect(option.innerText).toEqual('FakeValue');
});
}));
const options = fixture.debugElement.queryAll(By.css('.mat-option-text'));
expect(options.length).toBe(1);
const option = options[0].nativeElement;
expect(option.innerText).toEqual('FakeValue');
});
});
});
});

26
lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.spec.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LogService } from '../../../../services';
import { FormService } from './../../../services/form.service';
import { FormFieldModel, FormFieldTypes, FormModel } from './../core/index';
@@ -338,7 +338,7 @@ describe('DynamicTableWidgetComponent', () => {
TestBed.resetTestingModule();
});
it('should select a row when press space bar', async(() => {
it('should select a row when press space bar', async () => {
const rowElement = element.querySelector('#fake-dynamic-table-row-0');
expect(element.querySelector('#dynamic-table-fake-dynamic-table')).not.toBeNull();
@@ -348,15 +348,15 @@ describe('DynamicTableWidgetComponent', () => {
const event: any = new Event('keyup');
event.keyCode = 32;
rowElement.dispatchEvent(event);
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(() => {
const selectedRow = element.querySelector('#fake-dynamic-table-row-0');
expect(selectedRow.className).toContain('adf-dynamic-table-widget__row-selected');
});
}));
const selectedRow = element.querySelector('#fake-dynamic-table-row-0');
expect(selectedRow.className).toContain('adf-dynamic-table-widget__row-selected');
});
it('should focus on add button when a new row is saved', async(() => {
it('should focus on add button when a new row is saved', async () => {
const addNewRowButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#fake-dynamic-table-add-row');
expect(element.querySelector('#dynamic-table-fake-dynamic-table')).not.toBeNull();
@@ -364,11 +364,11 @@ describe('DynamicTableWidgetComponent', () => {
widget.addNewRow();
widget.onSaveChanges();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(document.activeElement.id).toBe('fake-dynamic-table-add-row');
});
}));
fixture.detectChanges();
await fixture.whenStable();
expect(document.activeElement.id).toBe('fake-dynamic-table-add-row');
});
});
});

23
lib/core/form/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Observable, of, throwError } from 'rxjs';
import { FormService } from './../../../../../services/form.service';
@@ -195,11 +195,11 @@ describe('DropdownEditorComponent', () => {
fixture.detectChanges();
}
beforeEach(async(() => {
beforeEach(() => {
fixture = TestBed.createComponent(DropdownEditorComponent);
dropDownEditorComponent = fixture.componentInstance;
element = fixture.nativeElement;
}));
});
afterEach(() => {
fixture.destroy();
@@ -207,7 +207,7 @@ describe('DropdownEditorComponent', () => {
describe('and dropdown is populated via taskId', () => {
beforeEach(async(() => {
beforeEach(() => {
stubFormService = fixture.debugElement.injector.get(FormService);
spyOn(stubFormService, 'getRestFieldValuesColumn').and.returnValue(of(fakeOptionList));
row = <DynamicTableRow> {value: {dropdown: 'one'}};
@@ -235,9 +235,9 @@ describe('DropdownEditorComponent', () => {
});
dropDownEditorComponent.table.field.isVisible = true;
fixture.detectChanges();
}));
});
it('should show visible dropdown widget', async(() => {
it('should show visible dropdown widget', () => {
expect(element.querySelector('#column-id')).toBeDefined();
expect(element.querySelector('#column-id')).not.toBeNull();
@@ -250,12 +250,12 @@ describe('DropdownEditorComponent', () => {
expect(optOne).not.toBeNull();
expect(optTwo).not.toBeNull();
expect(optThree).not.toBeNull();
}));
});
});
describe('and dropdown is populated via processDefinitionId', () => {
beforeEach(async(() => {
beforeEach(() => {
stubFormService = fixture.debugElement.injector.get(FormService);
spyOn(stubFormService, 'getRestFieldValuesColumnByProcessId').and.returnValue(of(fakeOptionList));
row = <DynamicTableRow> {value: {dropdown: 'one'}};
@@ -283,9 +283,9 @@ describe('DropdownEditorComponent', () => {
});
dropDownEditorComponent.table.field.isVisible = true;
fixture.detectChanges();
}));
});
it('should show visible dropdown widget', async(() => {
it('should show visible dropdown widget', () => {
expect(element.querySelector('#column-id')).toBeDefined();
expect(element.querySelector('#column-id')).not.toBeNull();
@@ -298,8 +298,7 @@ describe('DropdownEditorComponent', () => {
expect(optOne).not.toBeNull();
expect(optTwo).not.toBeNull();
expect(optThree).not.toBeNull();
}));
});
});
});
});

102
lib/core/form/components/widgets/people/people.widget.spec.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { UserProcessModel } from '../../../../models';
import { Observable, of } from 'rxjs';
@@ -83,28 +83,23 @@ describe('PeopleWidgetComponent', () => {
expect(widget.getDisplayName(model)).toBe('John');
});
it('should init value from the field', async(() => {
it('should init value from the field', async () => {
widget.field.value = new UserProcessModel({
id: 'people-id',
firstName: 'John',
lastName: 'Doe'
});
spyOn(formService, 'getWorkflowUsers').and.returnValue(
new Observable((observer) => {
observer.next(null);
observer.complete();
})
);
spyOn(formService, 'getWorkflowUsers').and.returnValue(of(null));
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect((element.querySelector('input') as HTMLInputElement).value).toBe('John Doe');
});
}));
await fixture.whenStable();
it('should show the readonly value when the form is readonly', async(() => {
expect((element.querySelector('input') as HTMLInputElement).value).toBe('John Doe');
});
it('should show the readonly value when the form is readonly', async () => {
widget.field.value = new UserProcessModel({
id: 'people-id',
firstName: 'John',
@@ -113,20 +108,15 @@ describe('PeopleWidgetComponent', () => {
widget.field.readOnly = true;
widget.field.form.readOnly = true;
spyOn(formService, 'getWorkflowUsers').and.returnValue(
new Observable((observer) => {
observer.next(null);
observer.complete();
})
);
spyOn(formService, 'getWorkflowUsers').and.returnValue(of(null));
widget.ngOnInit();
fixture.detectChanges();
fixture.whenStable().then(() => {
expect((element.querySelector('input') as HTMLInputElement).value).toBe('John Doe');
expect((element.querySelector('input') as HTMLInputElement).disabled).toBeTruthy();
});
}));
await fixture.whenStable();
expect((element.querySelector('input') as HTMLInputElement).value).toBe('John Doe');
expect((element.querySelector('input') as HTMLInputElement).disabled).toBeTruthy();
});
it('should require form field to setup values on init', () => {
widget.field.value = null;
@@ -175,7 +165,7 @@ describe('PeopleWidgetComponent', () => {
{ id: 1001, firstName: 'Test01', lastName: 'Test01', email: 'test' },
{ id: 1002, firstName: 'Test02', lastName: 'Test02', email: 'test2' }];
beforeEach(async(() => {
beforeEach(() => {
spyOn(formService, 'getWorkflowUsers').and.returnValue(new Observable((observer) => {
observer.next(fakeUserResult);
observer.complete();
@@ -188,7 +178,7 @@ describe('PeopleWidgetComponent', () => {
});
fixture.detectChanges();
element = fixture.nativeElement;
}));
});
afterAll(() => {
if (fixture) {
@@ -201,32 +191,33 @@ describe('PeopleWidgetComponent', () => {
expect(element.querySelector('#people-widget-content')).not.toBeNull();
});
it('should show an error message if the user is invalid', async(() => {
it('should show an error message if the user is invalid', async () => {
const peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
peopleHTMLElement.focus();
peopleHTMLElement.value = 'K';
peopleHTMLElement.dispatchEvent(new Event('keyup'));
peopleHTMLElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(element.querySelector('.adf-error-text')).not.toBeNull();
expect(element.querySelector('.adf-error-text').textContent).toContain('FORM.FIELD.VALIDATOR.INVALID_VALUE');
});
}));
it('should show the people if the typed result match', async(() => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-error-text')).not.toBeNull();
expect(element.querySelector('.adf-error-text').textContent).toContain('FORM.FIELD.VALIDATOR.INVALID_VALUE');
});
it('should show the people if the typed result match', async () => {
const peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
peopleHTMLElement.focus();
peopleHTMLElement.value = 'T';
peopleHTMLElement.dispatchEvent(new Event('keyup'));
peopleHTMLElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('#adf-people-widget-user-0'))).not.toBeNull();
expect(fixture.debugElement.query(By.css('#adf-people-widget-user-1'))).not.toBeNull();
});
}));
await fixture.whenStable();
expect(fixture.debugElement.query(By.css('#adf-people-widget-user-0'))).not.toBeNull();
expect(fixture.debugElement.query(By.css('#adf-people-widget-user-1'))).not.toBeNull();
});
it('should hide result list if input is empty', () => {
const peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
@@ -241,19 +232,22 @@ describe('PeopleWidgetComponent', () => {
});
});
it('should display two options if we tap one letter', async(() => {
it('should display two options if we tap one letter', async () => {
fixture.detectChanges();
await fixture.whenStable();
const peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
peopleHTMLElement.focus();
peopleHTMLElement.value = 'T';
peopleHTMLElement.dispatchEvent(new Event('keyup'));
peopleHTMLElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('#adf-people-widget-user-0'))).not.toBeNull();
expect(fixture.debugElement.query(By.css('#adf-people-widget-user-1'))).not.toBeNull();
});
}));
await fixture.whenStable();
expect(fixture.debugElement.query(By.css('#adf-people-widget-user-0'))).not.toBeNull();
expect(fixture.debugElement.query(By.css('#adf-people-widget-user-1'))).not.toBeNull();
});
it('should emit peopleSelected if option is valid', async () => {
const selectEmitSpy = spyOn(widget.peopleSelected, 'emit');
@@ -262,21 +256,23 @@ describe('PeopleWidgetComponent', () => {
peopleHTMLElement.value = 'Test01 Test01';
peopleHTMLElement.dispatchEvent(new Event('keyup'));
peopleHTMLElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(selectEmitSpy).toHaveBeenCalledWith(1001);
});
await fixture.whenStable();
expect(selectEmitSpy).toHaveBeenCalledWith(1001);
});
it('should display tooltip when tooltip is set', async(() => {
it('should display tooltip when tooltip is set', async () => {
widget.field.tooltip = 'people widget';
fixture.detectChanges();
await fixture.whenStable();
const radioButtonsElement: any = element.querySelector('#people-id');
const tooltip = radioButtonsElement.getAttribute('ng-reflect-message');
expect(tooltip).toEqual(widget.field.tooltip);
}));
});
});
});

46
lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.spec.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { Observable, of } from 'rxjs';
import { FormService } from '../../../services/form.service';
import { ContainerModel } from '../core/container.model';
@@ -150,12 +150,12 @@ describe('RadioButtonsWidgetComponent', () => {
name: 'opt-name-2'
}];
beforeEach(async(() => {
beforeEach(() => {
fixture = TestBed.createComponent(RadioButtonsWidgetComponent);
radioButtonWidget = fixture.componentInstance;
element = fixture.nativeElement;
stubFormService = fixture.debugElement.injector.get(FormService);
}));
});
it('should show radio buttons as text when is readonly', async () => {
radioButtonWidget.field = new FormFieldModel(new FormModel({}), {
@@ -230,7 +230,7 @@ describe('RadioButtonsWidgetComponent', () => {
expect(radioButtonWidget.field.isValid).toBe(true);
});
it('should display tooltip when tooltip is set', async(() => {
it('should display tooltip when tooltip is set', async () => {
radioButtonWidget.field = new FormFieldModel(new FormModel(), {
id: 'radio-id',
name: 'radio-name-label',
@@ -244,15 +244,17 @@ describe('RadioButtonsWidgetComponent', () => {
});
fixture.detectChanges();
await fixture.whenStable();
const radioButtonsElement: any = element.querySelector('#radio-id-opt-1');
const tooltip = radioButtonsElement.getAttribute('ng-reflect-message');
expect(tooltip).toEqual(radioButtonWidget.field.tooltip);
}));
});
describe('and radioButton is populated via taskId', () => {
beforeEach(async(() => {
beforeEach(() => {
spyOn(stubFormService, 'getRestFieldValues').and.returnValue(of(restOption));
radioButtonWidget.field = new FormFieldModel(new FormModel({ taskId: 'task-id' }), {
id: 'radio-id',
@@ -264,17 +266,17 @@ describe('RadioButtonsWidgetComponent', () => {
const fakeContainer = new ContainerModel(radioButtonWidget.field);
radioButtonWidget.field.form.fields.push(fakeContainer);
fixture.detectChanges();
}));
});
it('should show radio buttons', async(() => {
it('should show radio buttons', () => {
expect(element.querySelector('#radio-id')).toBeDefined();
expect(element.querySelector('#radio-id-opt-1-input')).not.toBeNull();
expect(element.querySelector('#radio-id-opt-1')).not.toBeNull();
expect(element.querySelector('#radio-id-opt-2-input')).not.toBeNull();
expect(element.querySelector('#radio-id-opt-2')).not.toBeNull();
}));
});
it('should trigger field changed event on click', async(() => {
it('should trigger field changed event on click', fakeAsync(() => {
const option: HTMLElement = <HTMLElement> element.querySelector('#radio-id-opt-1-input');
expect(element.querySelector('#radio-id')).not.toBeNull();
expect(option).not.toBeNull();
@@ -287,35 +289,35 @@ describe('RadioButtonsWidgetComponent', () => {
describe('and radioButton is readonly', () => {
beforeEach(async(() => {
beforeEach(() => {
radioButtonWidget.field.readOnly = true;
fixture.detectChanges();
}));
});
it('should show radio buttons disabled', async(() => {
it('should show radio buttons disabled', () => {
expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-1"]')).toBeDefined();
expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-1"]')).not.toBeNull();
expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-2"]')).toBeDefined();
expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-2"]')).not.toBeNull();
}));
});
describe('and a value is selected', () => {
beforeEach(async(() => {
beforeEach(() => {
radioButtonWidget.field.value = restOption[0].id;
fixture.detectChanges();
}));
});
it('should check the selected value', async(() => {
it('should check the selected value', () => {
expect(element.querySelector('.mat-radio-checked')).toBe(element.querySelector('mat-radio-button[ng-reflect-id="radio-id-opt-1"]'));
}));
});
});
});
});
describe('and radioButton is populated via processDefinitionId', () => {
beforeEach(async(() => {
beforeEach(() => {
radioButtonWidget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'proc-id' }), {
id: 'radio-id',
name: 'radio-name',
@@ -325,15 +327,15 @@ describe('RadioButtonsWidgetComponent', () => {
spyOn(stubFormService, 'getRestFieldValuesByProcessId').and.returnValue(of(restOption));
radioButtonWidget.field.isVisible = true;
fixture.detectChanges();
}));
});
it('should show visible radio buttons', async(() => {
it('should show visible radio buttons', () => {
expect(element.querySelector('#radio-id')).toBeDefined();
expect(element.querySelector('#radio-id-opt-1-input')).not.toBeNull();
expect(element.querySelector('#radio-id-opt-1')).not.toBeNull();
expect(element.querySelector('#radio-id-opt-2-input')).not.toBeNull();
expect(element.querySelector('#radio-id-opt-2')).not.toBeNull();
}));
});
});
});
});

87
lib/core/form/components/widgets/text/text.widget.spec.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { FormFieldTypes } from '../core/form-field-types';
import { FormFieldModel } from '../core/form-field.model';
import { FormModel } from '../core/form.model';
@@ -203,7 +203,7 @@ describe('TextWidgetComponent', () => {
expect(widget.field.isValid).toBe(false);
});
it('should display tooltip when tooltip is set', async(() => {
it('should display tooltip when tooltip is set', async () => {
widget.field = new FormFieldModel(new FormModel(), {
id: 'text-id',
name: 'text-name',
@@ -213,11 +213,13 @@ describe('TextWidgetComponent', () => {
});
fixture.detectChanges();
await fixture.whenStable();
const textElement: any = element.querySelector('#text-id');
const tooltip = textElement.getAttribute('ng-reflect-message');
expect(tooltip).toEqual(widget.field.tooltip);
}));
});
});
describe('and no mask is configured on text element', () => {
@@ -237,7 +239,7 @@ describe('TextWidgetComponent', () => {
inputElement = element.querySelector<HTMLInputElement>('#text-id');
});
it('should be disabled on readonly forms', async(() => {
it('should be disabled on readonly forms', fakeAsync(() => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(inputElement).toBeDefined();
@@ -286,7 +288,7 @@ describe('TextWidgetComponent', () => {
expect(label.innerText).toBe('simple placeholder');
});
it('should prevent text to be written if is not allowed by the mask on keyUp event', async(() => {
it('should prevent text to be written if is not allowed by the mask on keyUp event', async () => {
expect(element.querySelector('#text-id')).not.toBeNull();
inputElement.value = 'F';
@@ -294,31 +296,32 @@ describe('TextWidgetComponent', () => {
const event: any = new Event('keyup');
event.keyCode = '70';
inputElement.dispatchEvent(event);
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(() => {
fixture.detectChanges();
inputElement = element.querySelector<HTMLInputElement>('#text-id');
expect(inputElement.value).toBe('');
});
}));
inputElement = element.querySelector<HTMLInputElement>('#text-id');
expect(inputElement.value).toBe('');
});
it('should prevent text to be written if is not allowed by the mask on input event', async(() => {
it('should prevent text to be written if is not allowed by the mask on input event', async () => {
expect(element.querySelector('#text-id')).not.toBeNull();
inputElement.value = 'F';
widget.field.value = 'F';
inputElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(() => {
fixture.detectChanges();
inputElement = element.querySelector<HTMLInputElement>('#text-id');
expect(inputElement.value).toBe('');
});
}));
inputElement = element.querySelector<HTMLInputElement>('#text-id');
expect(inputElement.value).toBe('');
});
it('should allow masked configured value on keyUp event', async () => {
fixture.detectChanges();
await fixture.whenStable();
it('should allow masked configured value on keyUp event', async(() => {
expect(element.querySelector('#text-id')).not.toBeNull();
inputElement.value = '1';
@@ -327,14 +330,17 @@ describe('TextWidgetComponent', () => {
event.keyCode = '49';
inputElement.dispatchEvent(event);
fixture.whenStable().then(() => {
fixture.detectChanges();
const textEle = element.querySelector<HTMLInputElement>('#text-id');
expect(textEle.value).toBe('1');
});
}));
fixture.detectChanges();
await fixture.whenStable();
const textEle = element.querySelector<HTMLInputElement>('#text-id');
expect(textEle.value).toBe('1');
});
it('should auto-fill masked configured value on keyUp event', async () => {
fixture.detectChanges();
await fixture.whenStable();
it('should auto-fill masked configured value on keyUp event', async(() => {
expect(element.querySelector('#text-id')).not.toBeNull();
inputElement.value = '12345678';
@@ -343,12 +349,12 @@ describe('TextWidgetComponent', () => {
event.keyCode = '49';
inputElement.dispatchEvent(event);
fixture.whenStable().then(() => {
fixture.detectChanges();
const textEle = element.querySelector<HTMLInputElement>('#text-id');
expect(textEle.value).toBe('12-345,67%');
});
}));
fixture.detectChanges();
await fixture.whenStable();
const textEle = element.querySelector<HTMLInputElement>('#text-id');
expect(textEle.value).toBe('12-345,67%');
});
});
describe('when the mask is reversed ', () => {
@@ -374,7 +380,10 @@ describe('TextWidgetComponent', () => {
TestBed.resetTestingModule();
});
it('should be able to apply the mask reversed', async(() => {
it('should be able to apply the mask reversed', async () => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('#text-id')).not.toBeNull();
inputElement.value = '1234';
@@ -383,12 +392,12 @@ describe('TextWidgetComponent', () => {
event.keyCode = '49';
inputElement.dispatchEvent(event);
fixture.whenStable().then(() => {
fixture.detectChanges();
const textEle = element.querySelector<HTMLInputElement>('#text-id');
expect(textEle.value).toBe('12,34%');
});
}));
fixture.detectChanges();
await fixture.whenStable();
const textEle = element.querySelector<HTMLInputElement>('#text-id');
expect(textEle.value).toBe('12,34%');
});
});
describe('and a mask placeholder is configured', () => {

123
lib/core/form/components/widgets/typeahead/typeahead.widget.spec.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Observable, of, throwError } from 'rxjs';
import { By } from '@angular/platform-browser';
@@ -234,11 +234,11 @@ describe('TypeaheadWidgetComponent', () => {
name: 'Fake Name 2'
}, { id: '3', name: 'Fake Name 3' }];
beforeEach(async(() => {
beforeEach(() => {
fixture = TestBed.createComponent(TypeaheadWidgetComponent);
typeaheadWidgetComponent = fixture.componentInstance;
element = fixture.nativeElement;
}));
});
afterEach(() => {
fixture.destroy();
@@ -247,7 +247,7 @@ describe('TypeaheadWidgetComponent', () => {
describe ('and typeahead is in readonly mode', () => {
it('should show typeahead value with input disabled', async(() => {
it('should show typeahead value with input disabled', async () => {
typeaheadWidgetComponent.field = new FormFieldModel(
new FormModel({ processVariables: [{ name: 'typeahead-id_LABEL', value: 'FakeProcessValue' }] }), {
id: 'typeahead-id',
@@ -255,15 +255,15 @@ describe('TypeaheadWidgetComponent', () => {
type: 'readonly',
params: { field: { id: 'typeahead-id', name: 'typeahead-name', type: 'typeahead' } }
});
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
const readonlyInput: HTMLInputElement = <HTMLInputElement> element.querySelector('#typeahead-id');
expect(readonlyInput.disabled).toBeTruthy();
expect(readonlyInput).not.toBeNull();
expect(readonlyInput.value).toBe('FakeProcessValue');
});
}));
await fixture.whenStable();
const readonlyInput = element.querySelector<HTMLInputElement>('#typeahead-id');
expect(readonlyInput.disabled).toBeTruthy();
expect(readonlyInput).not.toBeNull();
expect(readonlyInput.value).toBe('FakeProcessValue');
});
afterEach(() => {
fixture.destroy();
@@ -273,7 +273,7 @@ describe('TypeaheadWidgetComponent', () => {
describe('and typeahead is populated via taskId', () => {
beforeEach(async(() => {
beforeEach(() => {
stubFormService = fixture.debugElement.injector.get(FormService);
spyOn(stubFormService, 'getRestFieldValues').and.returnValue(of(fakeOptionList));
typeaheadWidgetComponent.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
@@ -285,73 +285,73 @@ describe('TypeaheadWidgetComponent', () => {
});
typeaheadWidgetComponent.field.isVisible = true;
fixture.detectChanges();
}));
});
it('should show visible typeahead widget', async(() => {
it('should show visible typeahead widget', () => {
expect(element.querySelector('#typeahead-id')).toBeDefined();
expect(element.querySelector('#typeahead-id')).not.toBeNull();
}));
});
it('should show typeahead options', async(() => {
it('should show typeahead options', async () => {
const typeaheadElement = fixture.debugElement.query(By.css('#typeahead-id'));
const typeaheadHTMLElement: HTMLInputElement = <HTMLInputElement> typeaheadElement.nativeElement;
const typeaheadHTMLElement = <HTMLInputElement> typeaheadElement.nativeElement;
typeaheadHTMLElement.focus();
typeaheadWidgetComponent.value = 'F';
typeaheadHTMLElement.value = 'F';
typeaheadHTMLElement.dispatchEvent(new Event('keyup'));
typeaheadHTMLElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).not.toBeNull();
expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-1"] span'))).not.toBeNull();
expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-2"] span'))).not.toBeNull();
});
}));
it('should hide the option when the value is empty', async(() => {
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).not.toBeNull();
expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-1"] span'))).not.toBeNull();
expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-2"] span'))).not.toBeNull();
});
it('should hide the option when the value is empty', async () => {
const typeaheadElement = fixture.debugElement.query(By.css('#typeahead-id'));
const typeaheadHTMLElement: HTMLInputElement = <HTMLInputElement> typeaheadElement.nativeElement;
const typeaheadHTMLElement = <HTMLInputElement> typeaheadElement.nativeElement;
typeaheadHTMLElement.focus();
typeaheadWidgetComponent.value = 'F';
typeaheadHTMLElement.value = 'F';
typeaheadHTMLElement.dispatchEvent(new Event('keyup'));
typeaheadHTMLElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).not.toBeNull();
typeaheadHTMLElement.focus();
typeaheadWidgetComponent.value = '';
typeaheadHTMLElement.dispatchEvent(new Event('keyup'));
typeaheadHTMLElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).toBeNull();
});
});
}));
it('should show error message when the value is not valid', async(() => {
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).not.toBeNull();
typeaheadHTMLElement.focus();
typeaheadWidgetComponent.value = '';
typeaheadHTMLElement.dispatchEvent(new Event('keyup'));
typeaheadHTMLElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).toBeNull();
});
it('should show error message when the value is not valid', async () => {
typeaheadWidgetComponent.value = 'Fake Name';
typeaheadWidgetComponent.field.value = 'Fake Name';
typeaheadWidgetComponent.field.options = fakeOptionList;
expect(element.querySelector('.adf-error-text')).toBeNull();
const keyboardEvent = new KeyboardEvent('keypress');
typeaheadWidgetComponent.onKeyUp(keyboardEvent);
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('.adf-error-text')).not.toBeNull();
expect(element.querySelector('.adf-error-text').textContent).toContain('FORM.FIELD.VALIDATOR.INVALID_VALUE');
});
}));
await fixture.whenStable();
expect(element.querySelector('.adf-error-text')).not.toBeNull();
expect(element.querySelector('.adf-error-text').textContent).toContain('FORM.FIELD.VALIDATOR.INVALID_VALUE');
});
});
describe('and typeahead is populated via processDefinitionId', () => {
beforeEach(async(() => {
beforeEach(() => {
stubFormService = fixture.debugElement.injector.get(FormService);
spyOn(stubFormService, 'getRestFieldValuesByProcessId').and.returnValue(of(fakeOptionList));
typeaheadWidgetComponent.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), {
@@ -363,24 +363,25 @@ describe('TypeaheadWidgetComponent', () => {
typeaheadWidgetComponent.field.emptyOption = { id: 'empty', name: 'Choose one...' };
typeaheadWidgetComponent.field.isVisible = true;
fixture.detectChanges();
}));
});
it('should show visible typeahead widget', async(() => {
it('should show visible typeahead widget', () => {
expect(element.querySelector('#typeahead-id')).toBeDefined();
expect(element.querySelector('#typeahead-id')).not.toBeNull();
}));
});
it('should show typeahead options', async(() => {
it('should show typeahead options', async () => {
const keyboardEvent = new KeyboardEvent('keypress');
typeaheadWidgetComponent.value = 'F';
typeaheadWidgetComponent.onKeyUp(keyboardEvent);
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-0"] span'))).toBeDefined();
expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-1"] span'))).toBeDefined();
expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-2"] span'))).toBeDefined();
});
}));
await fixture.whenStable();
expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-0"] span'))).toBeDefined();
expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-1"] span'))).toBeDefined();
expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-2"] span'))).toBeDefined();
});
});
});
});

265
lib/core/form/components/widgets/upload/upload.widget.spec.ts
View File

@@ -16,7 +16,7 @@
*/
import { DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { of } from 'rxjs';
import { FormService } from '../../../services/form.service';
@@ -60,7 +60,7 @@ const fakeJpgAnswer = {
describe('UploadWidgetComponent', () => {
function fakeCreationFile (name, id) {
function fakeCreationFile (name: string, id: string | number) {
return {
'id': id,
'name': name,
@@ -96,13 +96,13 @@ describe('UploadWidgetComponent', () => {
let inputElement: HTMLInputElement;
let formServiceInstance: FormService;
beforeEach(async(() => {
beforeEach(() => {
fixture = TestBed.createComponent(UploadWidgetComponent);
uploadWidgetComponent = fixture.componentInstance;
element = fixture.nativeElement;
debugElement = fixture.debugElement;
contentService = TestBed.inject(ProcessContentService);
}));
});
it('should setup with field data', () => {
const fileName = 'hello world';
@@ -152,57 +152,60 @@ describe('UploadWidgetComponent', () => {
uploadWidgetComponent.field.value = [];
});
it('should be not present in readonly forms', async(() => {
it('should be not present in readonly forms', async () => {
uploadWidgetComponent.field.form.readOnly = true;
fixture.detectChanges();
inputElement = <HTMLInputElement> element.querySelector('#upload-id');
inputElement = element.querySelector<HTMLInputElement>('#upload-id');
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(inputElement).toBeNull();
});
}));
fixture.detectChanges();
await fixture.whenStable();
it('should have the multiple attribute when is selected in parameters', async(() => {
expect(inputElement).toBeNull();
});
it('should have the multiple attribute when is selected in parameters', async () => {
uploadWidgetComponent.field.params.multiple = true;
fixture.detectChanges();
inputElement = <HTMLInputElement> element.querySelector('#upload-id');
inputElement = element.querySelector<HTMLInputElement>('#upload-id');
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(inputElement).toBeDefined();
expect(inputElement).not.toBeNull();
expect(inputElement.getAttributeNode('multiple')).toBeTruthy();
});
}));
fixture.detectChanges();
await fixture.whenStable();
it('should not have the multiple attribute if multiple is false', async(() => {
expect(inputElement).toBeDefined();
expect(inputElement).not.toBeNull();
expect(inputElement.getAttributeNode('multiple')).toBeTruthy();
});
it('should not have the multiple attribute if multiple is false', async () => {
uploadWidgetComponent.field.params.multiple = false;
fixture.detectChanges();
inputElement = <HTMLInputElement> element.querySelector('#upload-id');
inputElement = element.querySelector<HTMLInputElement>('#upload-id');
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(inputElement).toBeDefined();
expect(inputElement).not.toBeNull();
expect(inputElement.getAttributeNode('multiple')).toBeFalsy();
});
}));
fixture.detectChanges();
await fixture.whenStable();
it('should show the list file after upload a new content', async(() => {
expect(inputElement).toBeDefined();
expect(inputElement).not.toBeNull();
expect(inputElement.getAttributeNode('multiple')).toBeFalsy();
});
it('should show the list file after upload a new content', async () => {
spyOn(contentService, 'createTemporaryRawRelatedContent').and.returnValue(of(fakePngAnswer));
uploadWidgetComponent.field.params.multiple = false;
fixture.detectChanges();
await fixture.whenStable();
const inputDebugElement = fixture.debugElement.query(By.css('#upload-id'));
inputDebugElement.triggerEventHandler('change', { target: { files: [filJpgFake] } });
const filesList = fixture.debugElement.query(By.css('#file-1156'));
expect(filesList).toBeDefined();
}));
});
it('should update the form after deleted a file', async(() => {
it('should update the form after deleted a file', async () => {
spyOn(contentService, 'createTemporaryRawRelatedContent').and.callFake((file: any) => {
if (file.name === 'file-fake.png') {
return of(fakePngAnswer);
@@ -218,21 +221,23 @@ describe('UploadWidgetComponent', () => {
uploadWidgetComponent.field.params.multiple = true;
spyOn(uploadWidgetComponent.field, 'updateForm');
fixture.detectChanges();
await fixture.whenStable();
const inputDebugElement = fixture.debugElement.query(By.css('#upload-id'));
inputDebugElement.triggerEventHandler('change', { target: { files: [filePngFake, filJpgFake] } });
fixture.whenStable().then(() => {
fixture.detectChanges();
const deleteButton = <HTMLInputElement> element.querySelector('#file-1155-remove');
deleteButton.click();
fixture.detectChanges();
await fixture.whenStable();
expect(uploadWidgetComponent.field.updateForm).toHaveBeenCalled();
});
const deleteButton = <HTMLInputElement> element.querySelector('#file-1155-remove');
deleteButton.click();
}));
expect(uploadWidgetComponent.field.updateForm).toHaveBeenCalled();
});
it('should set has field value all the files uploaded', async(() => {
it('should set has field value all the files uploaded', async () => {
spyOn(contentService, 'createTemporaryRawRelatedContent').and.callFake((file: any) => {
if (file.name === 'file-fake.png') {
return of(fakePngAnswer);
@@ -246,149 +251,141 @@ describe('UploadWidgetComponent', () => {
});
uploadWidgetComponent.field.params.multiple = true;
fixture.detectChanges();
await fixture.whenStable();
const inputDebugElement = fixture.debugElement.query(By.css('#upload-id'));
inputDebugElement.triggerEventHandler('change', { target: { files: [filePngFake, filJpgFake] } });
fixture.whenStable().then(() => {
fixture.detectChanges();
inputElement = <HTMLInputElement> element.querySelector('#upload-id');
expect(inputElement).toBeDefined();
expect(inputElement).not.toBeNull();
expect(uploadWidgetComponent.field.value).not.toBeNull();
expect(uploadWidgetComponent.field.value.length).toBe(2);
expect(uploadWidgetComponent.field.value[0].id).toBe(1155);
expect(uploadWidgetComponent.field.value[1].id).toBe(1156);
expect(uploadWidgetComponent.field.json.value.length).toBe(2);
});
}));
fixture.detectChanges();
await fixture.whenStable();
it('should show all the file uploaded on multiple field', async(() => {
inputElement = <HTMLInputElement> element.querySelector('#upload-id');
expect(inputElement).toBeDefined();
expect(inputElement).not.toBeNull();
expect(uploadWidgetComponent.field.value).not.toBeNull();
expect(uploadWidgetComponent.field.value.length).toBe(2);
expect(uploadWidgetComponent.field.value[0].id).toBe(1155);
expect(uploadWidgetComponent.field.value[1].id).toBe(1156);
expect(uploadWidgetComponent.field.json.value.length).toBe(2);
});
it('should show all the file uploaded on multiple field', async () => {
uploadWidgetComponent.field.params.multiple = true;
uploadWidgetComponent.field.value.push(fakeJpgAnswer);
uploadWidgetComponent.field.value.push(fakePngAnswer);
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(() => {
fixture.detectChanges();
const jpegElement = element.querySelector('#file-1156');
const pngElement = element.querySelector('#file-1155');
expect(jpegElement).not.toBeNull();
expect(pngElement).not.toBeNull();
expect(jpegElement.textContent).toBe('a_jpg_file.jpg');
expect(pngElement.textContent).toBe('a_png_file.png');
});
}));
const jpegElement = element.querySelector('#file-1156');
const pngElement = element.querySelector('#file-1155');
expect(jpegElement).not.toBeNull();
expect(pngElement).not.toBeNull();
expect(jpegElement.textContent).toBe('a_jpg_file.jpg');
expect(pngElement.textContent).toBe('a_png_file.png');
});
it('should show correctly the file name when is formed with special characters', async(() => {
it('should show correctly the file name when is formed with special characters', async () => {
uploadWidgetComponent.field.value.push(fakeCreationFile('±!@#$%^&*()_+{}:”|<>?§™£-=[];’\\,./.jpg', 10));
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(() => {
fixture.detectChanges();
const jpegElement = element.querySelector('#file-10');
expect(jpegElement).not.toBeNull();
expect(jpegElement.textContent).toBe(`±!@#$%^&*()_+{}:”|<>?§™£-=[];’\\,./.jpg`);
});
}));
const jpegElement = element.querySelector('#file-10');
expect(jpegElement).not.toBeNull();
expect(jpegElement.textContent).toBe(`±!@#$%^&*()_+{}:”|<>?§™£-=[];’\\,./.jpg`);
});
it('should show correctly the file name when is formed with Arabic characters', async(() => {
it('should show correctly the file name when is formed with Arabic characters', async () => {
const name = 'غ ظ ض ذ خ ث ت ش ر ق ص ف ع س ن م ل ك ي ط ح ز و ه د ج ب ا.jpg';
uploadWidgetComponent.field.value.push(fakeCreationFile(name, 11));
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(() => {
fixture.detectChanges();
const jpegElement = element.querySelector('#file-11');
expect(jpegElement).not.toBeNull();
expect(jpegElement.textContent).toBe('غ ظ ض ذ خ ث ت ش ر ق ص ف ع س ن م ل ك ي ط ح ز و ه د ج ب ا.jpg');
});
}));
const jpegElement = element.querySelector('#file-11');
expect(jpegElement).not.toBeNull();
expect(jpegElement.textContent).toBe('غ ظ ض ذ خ ث ت ش ر ق ص ف ع س ن م ل ك ي ط ح ز و ه د ج ب ا.jpg');
});
it('should show correctly the file name when is formed with French characters', async(() => {
it('should show correctly the file name when is formed with French characters', async () => {
// cspell: disable-next
uploadWidgetComponent.field.value.push(fakeCreationFile('Àâæçéèêëïîôœùûüÿ.jpg', 12));
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(() => {
fixture.detectChanges();
const jpegElement = element.querySelector('#file-12');
expect(jpegElement).not.toBeNull();
// cspell: disable-next
expect(jpegElement.textContent).toBe('Àâæçéèêëïîôœùûüÿ.jpg');
});
}));
const jpegElement = element.querySelector('#file-12');
expect(jpegElement).not.toBeNull();
// cspell: disable-next
expect(jpegElement.textContent).toBe('Àâæçéèêëïîôœùûüÿ.jpg');
});
it('should show correctly the file name when is formed with Greek characters', async(() => {
it('should show correctly the file name when is formed with Greek characters', async () => {
// cspell: disable-next
uploadWidgetComponent.field.value.push(fakeCreationFile('άέήίϊϊΐόύϋΰώθωερτψυιοπασδφγηςκλζχξωβνμ.jpg', 13));
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(() => {
fixture.detectChanges();
const jpegElement = element.querySelector('#file-13');
expect(jpegElement).not.toBeNull();
// cspell: disable-next
expect(jpegElement.textContent).toBe('άέήίϊϊΐόύϋΰώθωερτψυιοπασδφγηςκλζχξωβνμ.jpg');
});
}));
const jpegElement = element.querySelector('#file-13');
expect(jpegElement).not.toBeNull();
// cspell: disable-next
expect(jpegElement.textContent).toBe('άέήίϊϊΐόύϋΰώθωερτψυιοπασδφγηςκλζχξωβνμ.jpg');
});
it('should show correctly the file name when is formed with Polish accented characters', async(() => {
it('should show correctly the file name when is formed with Polish accented characters', async () => {
uploadWidgetComponent.field.value.push(fakeCreationFile('Ą Ć Ę Ł Ń Ó Ś Ź Żą ć ę ł ń ó ś ź ż.jpg', 14));
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(() => {
fixture.detectChanges();
const jpegElement = element.querySelector('#file-14');
expect(jpegElement).not.toBeNull();
expect(jpegElement.textContent).toBe('Ą Ć Ę Ł Ń Ó Ś Ź Żą ć ę ł ń ó ś ź ż.jpg');
});
}));
const jpegElement = element.querySelector('#file-14');
expect(jpegElement).not.toBeNull();
expect(jpegElement.textContent).toBe('Ą Ć Ę Ł Ń Ó Ś Ź Żą ć ę ł ń ó ś ź ż.jpg');
});
it('should show correctly the file name when is formed with Spanish accented characters', async(() => {
it('should show correctly the file name when is formed with Spanish accented characters', async () => {
uploadWidgetComponent.field.value.push(fakeCreationFile('á, é, í, ó, ú, ñ, Ñ, ü, Ü, ¿, ¡. Á, É, Í, Ó, Ú.jpg', 15));
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(() => {
fixture.detectChanges();
const jpegElement = element.querySelector('#file-15');
expect(jpegElement).not.toBeNull();
expect(jpegElement.textContent).toBe('á, é, í, ó, ú, ñ, Ñ, ü, Ü, ¿, ¡. Á, É, Í, Ó, Ú.jpg');
});
}));
const jpegElement = element.querySelector('#file-15');
expect(jpegElement).not.toBeNull();
expect(jpegElement.textContent).toBe('á, é, í, ó, ú, ñ, Ñ, ü, Ü, ¿, ¡. Á, É, Í, Ó, Ú.jpg');
});
it('should show correctly the file name when is formed with Swedish characters', async(() => {
it('should show correctly the file name when is formed with Swedish characters', async () => {
// cspell: disable-next
uploadWidgetComponent.field.value.push(fakeCreationFile('Äåéö.jpg', 16));
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(() => {
fixture.detectChanges();
const jpegElement = element.querySelector('#file-16');
expect(jpegElement).not.toBeNull();
// cspell: disable-next
expect(jpegElement.textContent).toBe('Äåéö.jpg');
});
}));
const jpegElement = element.querySelector('#file-16');
expect(jpegElement).not.toBeNull();
// cspell: disable-next
expect(jpegElement.textContent).toBe('Äåéö.jpg');
});
it('should remove file from field value', async(() => {
it('should remove file from field value', async () => {
uploadWidgetComponent.field.params.multiple = true;
uploadWidgetComponent.field.value.push(fakeJpgAnswer);
uploadWidgetComponent.field.value.push(fakePngAnswer);
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
const buttonElement = <HTMLButtonElement> element.querySelector('#file-1156-remove');
buttonElement.click();
fixture.detectChanges();
const jpegElement = element.querySelector('#file-1156');
expect(jpegElement).toBeNull();
expect(uploadWidgetComponent.field.value.length).toBe(1);
});
}));
fixture.detectChanges();
await fixture.whenStable();
const buttonElement = <HTMLButtonElement> element.querySelector('#file-1156-remove');
buttonElement.click();
fixture.detectChanges();
const jpegElement = element.querySelector('#file-1156');
expect(jpegElement).toBeNull();
expect(uploadWidgetComponent.field.value.length).toBe(1);
});
it('should emit form content clicked event on icon click', (done) => {
spyOn(contentService, 'getContentPreview').and.returnValue(of(new Blob()));