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

AAE-20146 Using Material Harness in process service cloud unit tests (#9517)

Browse Source 
* AAE-20146 Using Material Harness in process service cloud unit tests

* AAE-20146: Removed commented code

* AAE-20146: Fixing lint issues
This commit is contained in:
Ehsan Rezaei
2024-04-09 14:25:04 +02:00
committed by GitHub
parent bc07c09dda
commit b081800274
9 changed files with 288 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts
View File

@@ -24,11 +24,17 @@ import { DateCloudFilterType } from '../../models/date-cloud-filter.model';
import { DateRangeFilterService } from './date-range-filter.service'; import { DateRangeFilterService } from './date-range-filter.service';
import { mockFilterProperty } from '../mock/date-range-filter.mock'; import { mockFilterProperty } from '../mock/date-range-filter.mock';
import { add, endOfDay } from 'date-fns'; import { add, endOfDay } from 'date-fns';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatSelectHarness } from '@angular/material/select/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
import { MatDateRangeInputHarness } from '@angular/material/datepicker/testing';
describe('DateRangeFilterComponent', () => { describe('DateRangeFilterComponent', () => {
let component: DateRangeFilterComponent; let component: DateRangeFilterComponent;
let fixture: ComponentFixture<DateRangeFilterComponent>; let fixture: ComponentFixture<DateRangeFilterComponent>;
let service: DateRangeFilterService; let service: DateRangeFilterService;
let loader: HarnessLoader;
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
@@ -48,6 +54,7 @@ describe('DateRangeFilterComponent', () => {
type: 'dateRange', type: 'dateRange',
options: null options: null
}; };
loader = TestbedHarnessEnvironment.loader(fixture);
fixture.detectChanges(); fixture.detectChanges();
}); });
@@ -58,27 +65,21 @@ describe('DateRangeFilterComponent', () => {
it('should get on option change', async () => { it('should get on option change', async () => {
spyOn(service, 'getDateRange'); spyOn(service, 'getDateRange');
spyOn(component.dateTypeChange, 'emit'); spyOn(component.dateTypeChange, 'emit');
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-createdDate"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
const weekOption = document.querySelector('[data-automation-id="adf-cloud-edit-process-property-options-WEEK"]') as HTMLElement; const stateElement = await loader.getHarness(MatSelectHarness.with({ selector: '[data-automation-id="adf-cloud-edit-process-property-createdDate"]' }));
weekOption.click();
fixture.detectChanges(); await stateElement.clickOptions({ selector: '[data-automation-id="adf-cloud-edit-process-property-options-WEEK"]'});
await fixture.whenStable();
expect(service.getDateRange).not.toHaveBeenCalled(); expect(service.getDateRange).not.toHaveBeenCalled();
expect(component.dateTypeChange.emit).toHaveBeenCalled(); expect(component.dateTypeChange.emit).toHaveBeenCalled();
}); });
it('should not emit event on `RANGE` option change', async () => { it('should not emit event on `RANGE` option change', async () => {
spyOn(component.dateTypeChange, 'emit'); spyOn(component.dateTypeChange, 'emit');
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-createdDate"] .mat-select-trigger'); const stateElement = await loader.getHarness(MatSelectHarness.with({ selector: '[data-automation-id="adf-cloud-edit-process-property-createdDate"]' }));
stateElement.click();
fixture.detectChanges(); await stateElement.clickOptions({ selector: '[data-automation-id="adf-cloud-edit-process-property-options-RANGE"]'});
const rangeOption = document.querySelector('[data-automation-id="adf-cloud-edit-process-property-options-RANGE"]') as HTMLElement;
rangeOption.click();
fixture.detectChanges();
await fixture.whenStable();
expect(component.dateTypeChange.emit).not.toHaveBeenCalled(); expect(component.dateTypeChange.emit).not.toHaveBeenCalled();
}); });
@@ -131,11 +132,22 @@ describe('DateRangeFilterComponent', () => {
expect(component.dateRangeForm.get('to').value).toEqual(mockFilterProperty.value._startTo); expect(component.dateRangeForm.get('to').value).toEqual(mockFilterProperty.value._startTo);
}); });
it('should have floating labels when values are present', () => { it('should have floating labels when values are present', async () => {
const stateElement = await loader.getHarness(MatSelectHarness.with({ selector: '[data-automation-id="adf-cloud-edit-process-property-createdDate"]' }));
await stateElement.open();
const selectField = await loader.getHarness(MatFormFieldHarness.with({ selector: '[data-automation-id="createdDate"]' }));
expect(await selectField.isLabelFloating()).toBeTrue();
await stateElement.close();
component.type = DateCloudFilterType.RANGE;
fixture.detectChanges(); fixture.detectChanges();
const inputLabelsNodes = document.querySelectorAll('mat-form-field'); const dateRangeElement = await loader.getHarness(MatDateRangeInputHarness);
inputLabelsNodes.forEach(labelNode => { await dateRangeElement.openCalendar();
expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto'); const dateRangeField = await loader.getHarness(MatFormFieldHarness.with({ selector: '.adf-cloud-date-range-picker' }));
});
expect(await dateRangeField.isLabelFloating()).toBeTrue();
await dateRangeElement.closeCalendar();
}); });
}); });

63
lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.spec.ts
View File

@@ -19,17 +19,19 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module'; import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormDefinitionSelectorCloudComponent } from './form-definition-selector-cloud.component'; import { FormDefinitionSelectorCloudComponent } from './form-definition-selector-cloud.component';
import { By } from '@angular/platform-browser';
import { of } from 'rxjs'; import { of } from 'rxjs';
import { FormDefinitionSelectorCloudService } from '../services/form-definition-selector-cloud.service'; import { FormDefinitionSelectorCloudService } from '../services/form-definition-selector-cloud.service';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatSelectHarness } from '@angular/material/select/testing';
describe('FormDefinitionCloudComponent', () => { describe('FormDefinitionCloudComponent', () => {
let fixture: ComponentFixture<FormDefinitionSelectorCloudComponent>; let fixture: ComponentFixture<FormDefinitionSelectorCloudComponent>;
let service: FormDefinitionSelectorCloudService; let service: FormDefinitionSelectorCloudService;
let element: HTMLElement;
let getFormsSpy: jasmine.Spy; let getFormsSpy: jasmine.Spy;
let loader: HarnessLoader;
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
@@ -40,54 +42,45 @@ describe('FormDefinitionCloudComponent', () => {
schemas: [CUSTOM_ELEMENTS_SCHEMA] schemas: [CUSTOM_ELEMENTS_SCHEMA]
}); });
fixture = TestBed.createComponent(FormDefinitionSelectorCloudComponent); fixture = TestBed.createComponent(FormDefinitionSelectorCloudComponent);
element = fixture.nativeElement;
service = TestBed.inject(FormDefinitionSelectorCloudService); service = TestBed.inject(FormDefinitionSelectorCloudService);
getFormsSpy = spyOn(service, 'getStandAloneTaskForms').and.returnValue(of([{ id: 'fake-form', name: 'fakeForm' } as any])); getFormsSpy = spyOn(service, 'getStandAloneTaskForms').and.returnValue(of([{ id: 'fake-form', name: 'fakeForm' } as any]));
loader = TestbedHarnessEnvironment.loader(fixture);
}); });
it('should load the forms by default', async () => { it('should load the forms by default', async () => {
fixture.detectChanges(); const selectElement = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-form-selector-dropdown' }));
await fixture.whenStable(); await selectElement.open();
fixture.detectChanges(); const options = await selectElement.getOptions();
const clickMatSelect = fixture.debugElement.query(By.css(('.mat-select-trigger')));
clickMatSelect.triggerEventHandler('click', null); expect(options.length).toBe(2);
fixture.detectChanges(); expect(await options[0].getText()).toBe('ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.NONE');
const options: any = fixture.debugElement.queryAll(By.css('mat-option')); expect(await options[1].getText()).toBe('fakeForm');
expect(options[0].nativeElement.innerText.trim()).toBe('ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.NONE');
expect(options[1].nativeElement.innerText.trim()).toBe('fakeForm');
expect(getFormsSpy).toHaveBeenCalled(); expect(getFormsSpy).toHaveBeenCalled();
}); });
it('should load only None option when no forms exist', async () => { it('should load only None option when no forms exist', async () => {
getFormsSpy.and.returnValue(of([])); getFormsSpy.and.returnValue(of([]));
fixture.detectChanges(); const selectElement = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-form-selector-dropdown' }));
await fixture.whenStable(); await selectElement.open();
fixture.detectChanges();
const clickMatSelect = fixture.debugElement.query(By.css(('.mat-select-trigger'))); const options = await selectElement.getOptions();
clickMatSelect.triggerEventHandler('click', null);
fixture.detectChanges();
const options: any = fixture.debugElement.queryAll(By.css('mat-option'));
expect((options).length).toBe(1); expect((options).length).toBe(1);
}); });
it('should not preselect any form by default', () => { it('should not preselect any form by default', async () => {
fixture.detectChanges(); const selectElement = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-form-selector-dropdown' }));
const formInput = element.querySelector('mat-select');
expect(formInput).toBeDefined(); expect(await selectElement.getValueText()).toBe('');
expect(formInput.nodeValue).toBeNull();
}); });
it('should display the name of the form that is selected', async () => { it('should display the name of the form that is selected', async () => {
fixture.detectChanges(); const selectElement = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-form-selector-dropdown' }));
await fixture.whenStable(); await selectElement.open();
const clickMatSelect = fixture.debugElement.query(By.css(('.mat-select-trigger'))); const options = await selectElement.getOptions();
clickMatSelect.triggerEventHandler('click', null);
fixture.detectChanges(); await options[1].click();
const options: any = fixture.debugElement.queryAll(By.css('mat-option'));
options[1].triggerEventHandler('click', {}); expect(await selectElement.getValueText()).toBe('fakeForm');
fixture.detectChanges();
const selected = fixture.debugElement.query(By.css('mat-select'));
const selectedValue = ((selected).nativeElement.innerText);
expect(selectedValue.trim()).toBe('fakeForm');
}); });
}); });

23
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts
View File

@@ -72,6 +72,9 @@ import { By } from '@angular/platform-browser';
import { of, throwError } from 'rxjs'; import { of, throwError } from 'rxjs';
import { FormCloudModule } from '../../../form-cloud.module'; import { FormCloudModule } from '../../../form-cloud.module';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
const mockNodeToBeVersioned: any = { const mockNodeToBeVersioned: any = {
isFile: true, isFile: true,
@@ -123,6 +126,7 @@ describe('AttachFileCloudWidgetComponent', () => {
let localizedDataPipe: LocalizedDatePipe; let localizedDataPipe: LocalizedDatePipe;
let newVersionUploaderService: NewVersionUploaderService; let newVersionUploaderService: NewVersionUploaderService;
let notificationService: NotificationService; let notificationService: NotificationService;
let loader: HarnessLoader;
const createUploadWidgetField = ( const createUploadWidgetField = (
form: FormModel, form: FormModel,
@@ -166,6 +170,7 @@ describe('AttachFileCloudWidgetComponent', () => {
contentNodeSelectorPanelService = TestBed.inject(ContentNodeSelectorPanelService); contentNodeSelectorPanelService = TestBed.inject(ContentNodeSelectorPanelService);
openUploadFileDialogSpy = spyOn(contentCloudNodeSelectorService, 'openUploadFileDialog').and.returnValue(of([fakeNode])); openUploadFileDialogSpy = spyOn(contentCloudNodeSelectorService, 'openUploadFileDialog').and.returnValue(of([fakeNode]));
localizedDataPipe = new LocalizedDatePipe(); localizedDataPipe = new LocalizedDatePipe();
loader = TestbedHarnessEnvironment.loader(fixture);
}); });
afterEach(() => { afterEach(() => {
@@ -935,26 +940,24 @@ describe('AttachFileCloudWidgetComponent', () => {
it('should show tooltip', async () => { it('should show tooltip', async () => {
const attachButton = fixture.nativeElement.querySelector('button'); const attachButton = fixture.nativeElement.querySelector('button');
attachButton.dispatchEvent(new Event('mouseenter')); attachButton.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement; const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(tooltipElement).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip'); expect(await tooltipElement.isOpen()).toBeTrue();
expect(await tooltipElement.getTooltipText()).toBe('my custom tooltip');
}); });
it('should hide tooltip', async () => { it('should hide tooltip', async () => {
const attachButton = fixture.nativeElement.querySelector('button'); const attachButton = fixture.nativeElement.querySelector('.adf-attach-widget__menu-upload__button');
attachButton.dispatchEvent(new Event('mouseenter')); attachButton.dispatchEvent(new Event('mouseenter'));
await fixture.whenStable();
fixture.detectChanges(); fixture.detectChanges();
attachButton.dispatchEvent(new Event('mouseleave')); attachButton.dispatchEvent(new Event('mouseleave'));
await fixture.whenStable();
fixture.detectChanges(); fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')); const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(tooltipElement).toBeFalsy();
expect(await tooltipElement.isOpen()).toBeFalse();
}); });
}); });
}); });

34
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
View File

@@ -20,9 +20,12 @@ import { DateCloudWidgetComponent } from './date-cloud.widget';
import { FormFieldModel, FormModel, FormFieldTypes, DateFieldValidator, MinDateFieldValidator, MaxDateFieldValidator } from '@alfresco/adf-core'; import { FormFieldModel, FormModel, FormFieldTypes, DateFieldValidator, MinDateFieldValidator, MaxDateFieldValidator } from '@alfresco/adf-core';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module'; import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { By } from '@angular/platform-browser';
import { DateAdapter } from '@angular/material/core'; import { DateAdapter } from '@angular/material/core';
import { isEqual, subDays, addDays } from 'date-fns'; import { isEqual, subDays, addDays } from 'date-fns';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { MatInputHarness } from '@angular/material/input/testing';
describe('DateWidgetComponent', () => { describe('DateWidgetComponent', () => {
@@ -31,6 +34,7 @@ describe('DateWidgetComponent', () => {
let element: HTMLElement; let element: HTMLElement;
let adapter: DateAdapter<Date>; let adapter: DateAdapter<Date>;
let form: FormModel; let form: FormModel;
let loader: HarnessLoader;
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
@@ -48,6 +52,7 @@ describe('DateWidgetComponent', () => {
widget = fixture.componentInstance; widget = fixture.componentInstance;
element = fixture.nativeElement; element = fixture.nativeElement;
loader = TestbedHarnessEnvironment.loader(fixture);
}); });
it('should setup min value for date picker', () => { it('should setup min value for date picker', () => {
@@ -497,28 +502,21 @@ describe('DateWidgetComponent', () => {
}); });
it('should show tooltip', async () => { it('should show tooltip', async () => {
const dateCloudInput = fixture.nativeElement.querySelector('input'); const dateCloudInput = await loader.getHarness(MatInputHarness);
dateCloudInput.dispatchEvent(new Event('mouseenter')); await (await dateCloudInput.host()).dispatchEvent('mouseenter');
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement; const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(tooltipElement).toBeTruthy(); expect(await tooltipElement.isOpen()).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip'); expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip');
}); });
it('should hide tooltip', async () => { it('should hide tooltip', async () => {
const dateCloudInput = fixture.nativeElement.querySelector('input'); const dateCloudInput = await loader.getHarness(MatInputHarness);
dateCloudInput.dispatchEvent(new Event('mouseenter')); await (await dateCloudInput.host()).dispatchEvent('mouseenter');
await fixture.whenStable(); await (await dateCloudInput.host()).dispatchEvent('mouseleave');
fixture.detectChanges();
dateCloudInput.dispatchEvent(new Event('mouseleave')); const tooltipElement = await loader.getHarness(MatTooltipHarness);
await fixture.whenStable(); expect(await tooltipElement.isOpen()).toBeFalsy();
fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip'));
expect(tooltipElement).toBeFalsy();
}); });
}); });

323
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
View File

@@ -41,8 +41,12 @@ import {
mockVariablesWithDefaultJson, mockVariablesWithDefaultJson,
mockProcessVariablesWithJson mockProcessVariablesWithJson
} from '../../../mocks/dropdown.mock'; } from '../../../mocks/dropdown.mock';
import { OverlayContainer } from '@angular/cdk/overlay';
import { TaskVariableCloud } from '../../../models/task-variable-cloud.model'; import { TaskVariableCloud } from '../../../models/task-variable-cloud.model';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatSelectHarness } from '@angular/material/select/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
describe('DropdownCloudWidgetComponent', () => { describe('DropdownCloudWidgetComponent', () => {
@@ -50,17 +54,9 @@ describe('DropdownCloudWidgetComponent', () => {
let widget: DropdownCloudWidgetComponent; let widget: DropdownCloudWidgetComponent;
let formCloudService: FormCloudService; let formCloudService: FormCloudService;
let logService: LogService; let logService: LogService;
let overlayContainer: OverlayContainer;
let fixture: ComponentFixture<DropdownCloudWidgetComponent>; let fixture: ComponentFixture<DropdownCloudWidgetComponent>;
let element: HTMLElement; let element: HTMLElement;
let loader: HarnessLoader;
const openSelect = async (_selector?: string) => {
const dropdown: HTMLElement = element.querySelector('.mat-select-trigger');
dropdown.click();
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
};
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
@@ -75,8 +71,8 @@ describe('DropdownCloudWidgetComponent', () => {
formService = TestBed.inject(FormService); formService = TestBed.inject(FormService);
formCloudService = TestBed.inject(FormCloudService); formCloudService = TestBed.inject(FormCloudService);
overlayContainer = TestBed.inject(OverlayContainer);
logService = TestBed.inject(LogService); logService = TestBed.inject(LogService);
loader = TestbedHarnessEnvironment.loader(fixture);
}); });
afterEach(() => fixture.destroy()); afterEach(() => fixture.destroy());
@@ -89,9 +85,9 @@ describe('DropdownCloudWidgetComponent', () => {
name: 'date-name', name: 'date-name',
type: 'dropdown', type: 'dropdown',
readOnly: false, readOnly: false,
restUrl: 'https://fake-rest-url' restUrl: 'https://fake-rest-url',
options: [{ id: 'empty', name: 'Choose one...' }]
}); });
widget.field.emptyOption = { id: 'empty', name: 'Choose one...' };
widget.field.isVisible = true; widget.field.isVisible = true;
fixture.detectChanges(); fixture.detectChanges();
}); });
@@ -109,25 +105,16 @@ describe('DropdownCloudWidgetComponent', () => {
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.field.value = 'option_2';
widget.ngOnInit();
fixture.detectChanges(); expect(widget.fieldValue).toEqual('option_2');
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 () => { it('should select the empty value when no default is chosen', async () => {
widget.field.value = 'empty'; widget.field.value = 'empty';
widget.ngOnInit(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
fixture.detectChanges(); await dropdown.open();
await openSelect('#dropdown-id'); expect(widget.fieldValue).toEqual('empty');
const dropDownElement = element.querySelector('#dropdown-id');
expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('empty');
}); });
it('should load data from restUrl and populate options', async () => { it('should load data from restUrl and populate options', async () => {
@@ -137,24 +124,16 @@ describe('DropdownCloudWidgetComponent', () => {
widget.field.restIdProperty = 'name'; widget.field.restIdProperty = 'name';
widget.ngOnInit(); widget.ngOnInit();
fixture.detectChanges();
await fixture.whenStable();
const dropdown = fixture.debugElement.query(By.css('mat-select')); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
dropdown.nativeElement.click(); await dropdown.open();
fixture.detectChanges();
await fixture.whenStable();
const optOne = fixture.debugElement.query(By.css('[id="opt_1"]'));
const optTwo = fixture.debugElement.query(By.css('[id="opt_2"]'));
const optThree = fixture.debugElement.query(By.css('[id="opt_3"]'));
const allOptions = fixture.debugElement.queryAll(By.css('mat-option'));
const allOptions = await dropdown.getOptions();
expect(jsonDataSpy).toHaveBeenCalled(); expect(jsonDataSpy).toHaveBeenCalled();
expect(allOptions.length).toEqual(3); expect(allOptions.length).toEqual(3);
expect(optOne.nativeElement.innerText).toEqual('option_1'); expect(await allOptions[0].getText()).toEqual('option_1');
expect(optTwo.nativeElement.innerText).toEqual('option_2'); expect(await allOptions[1].getText()).toEqual('option_2');
expect(optThree.nativeElement.innerText).toEqual('option_3'); expect(await allOptions[2].getText()).toEqual('option_3');
}); });
it('should show error message if the restUrl failed to fetch options', async () => { it('should show error message if the restUrl failed to fetch options', async () => {
@@ -165,13 +144,10 @@ describe('DropdownCloudWidgetComponent', () => {
widget.field.restIdProperty = 'name'; widget.field.restIdProperty = 'name';
widget.ngOnInit(); widget.ngOnInit();
fixture.detectChanges();
await fixture.whenStable();
const dropdown = fixture.debugElement.query(By.css('mat-select')); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
dropdown.nativeElement.click(); await dropdown.open();
fixture.detectChanges();
await fixture.whenStable();
const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message')); const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message'));
expect(jsonDataSpy).toHaveBeenCalled(); expect(jsonDataSpy).toHaveBeenCalled();
expect(widget.isRestApiFailed).toBe(true); expect(widget.isRestApiFailed).toBe(true);
@@ -199,12 +175,11 @@ describe('DropdownCloudWidgetComponent', () => {
] as any)); ] as any));
widget.ngOnInit(); widget.ngOnInit();
fixture.detectChanges();
await openSelect(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await dropdown.open();
const option = fixture.debugElement.query(By.css('.mat-option-text')); expect((await (await dropdown.getOptions())[0].getText())).toEqual('default1_value');
expect(option.nativeElement.innerText).toBe('default1_value');
}); });
it('should preselect dropdown widget value when String (defined value) passed ', async () => { it('should preselect dropdown widget value when String (defined value) passed ', async () => {
@@ -224,11 +199,10 @@ describe('DropdownCloudWidgetComponent', () => {
] as any)); ] as any));
widget.ngOnInit(); widget.ngOnInit();
fixture.detectChanges(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await dropdown.open();
await openSelect(); expect((await (await dropdown.getOptions())[0].getText())).toEqual('default1_value');
const options = fixture.debugElement.queryAll(By.css('.mat-option-text'));
expect(options[0].nativeElement.innerText).toBe('default1_value');
expect(widget.field.form.values['dropdown-id']).toEqual({ id: 'opt1', name: 'default1_value' }); expect(widget.field.form.values['dropdown-id']).toEqual({ id: 'opt1', name: 'default1_value' });
}); });
@@ -239,12 +213,11 @@ describe('DropdownCloudWidgetComponent', () => {
]; ];
widget.ngOnInit(); widget.ngOnInit();
fixture.detectChanges(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await openSelect(); await dropdown.open();
await dropdown.clickOptions({ selector: '[id="empty"]' });
const defaultOption: any = fixture.debugElement.query(By.css('[id="empty"]'));
widget.touched = true; widget.touched = true;
defaultOption.triggerEventHandler('click', null);
fixture.detectChanges(); fixture.detectChanges();
const requiredErrorElement = fixture.debugElement.query(By.css('.adf-dropdown-required-message .adf-error-text')); const requiredErrorElement = fixture.debugElement.query(By.css('.adf-dropdown-required-message .adf-error-text'));
@@ -259,13 +232,11 @@ describe('DropdownCloudWidgetComponent', () => {
]; ];
widget.ngOnInit(); widget.ngOnInit();
fixture.detectChanges(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await openSelect(); await dropdown.open();
const optionOne: any = fixture.debugElement.query(By.css('[id="opt_1"]'));
widget.touched = true; widget.touched = true;
optionOne.triggerEventHandler('click', null); await dropdown.clickOptions({ selector: '[id="opt_1"]' });
fixture.detectChanges();
const requiredErrorElement = fixture.debugElement.query(By.css('.adf-dropdown-required-message .adf-error-text')); const requiredErrorElement = fixture.debugElement.query(By.css('.adf-dropdown-required-message .adf-error-text'));
expect(requiredErrorElement).toBeFalsy(); expect(requiredErrorElement).toBeFalsy();
@@ -278,32 +249,23 @@ describe('DropdownCloudWidgetComponent', () => {
]; ];
widget.ngOnInit(); widget.ngOnInit();
fixture.detectChanges(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await openSelect(); await dropdown.open();
const optionOne = fixture.debugElement.query(By.css('[id="opt_1"]')); await dropdown.clickOptions({ selector: '[id="opt_1"]' });
optionOne.triggerEventHandler('click', null);
fixture.detectChanges(); expect(await dropdown.getValueText()).toEqual('option_1');
await fixture.whenStable();
let selectedValueElement = fixture.debugElement.query(By.css('.mat-select-value-text'));
expect(selectedValueElement.nativeElement.innerText).toEqual('option_1');
expect(widget.fieldValue).toEqual('opt_1'); expect(widget.fieldValue).toEqual('opt_1');
await openSelect(); await dropdown.open();
const defaultOption: any = fixture.debugElement.query(By.css('[id="empty"]')); await dropdown.clickOptions({ selector: '[id="empty"]' });
defaultOption.triggerEventHandler('click', null);
fixture.detectChanges(); const formField = await loader.getHarness(MatFormFieldHarness);
await fixture.whenStable(); const dropdownLabel = await formField.getLabel();
const dropdownLabel = fixture.debugElement.query(By.css('.adf-dropdown-widget mat-label')); expect(dropdownLabel).toEqual('This is a mock none option');
selectedValueElement = fixture.debugElement.query(By.css('.mat-select-value-text'));
expect(dropdownLabel.nativeNode.innerText).toEqual('This is a mock none option');
expect(widget.fieldValue).toEqual(undefined); expect(widget.fieldValue).toEqual(undefined);
expect(selectedValueElement).toBeFalsy(); expect(await dropdown.getValueText()).toEqual('');
}); });
}); });
@@ -318,28 +280,25 @@ describe('DropdownCloudWidgetComponent', () => {
}); });
it('should show tooltip', async () => { it('should show tooltip', async () => {
const dropdownInput = fixture.debugElement.query(By.css('mat-select')).nativeElement; const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
dropdownInput.dispatchEvent(new Event('mouseenter')); const dropdownInput = await dropdown.host();
await fixture.whenStable(); dropdownInput.dispatchEvent('mouseenter');
fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement; const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(tooltipElement).toBeTruthy(); expect(tooltipElement).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip'); expect(await tooltipElement.getTooltipText()).toBe('my custom tooltip');
expect(await tooltipElement.isOpen()).toBeTruthy();
}); });
it('should hide tooltip', async () => { it('should hide tooltip', async () => {
const dropdownInput = fixture.debugElement.query(By.css('mat-select')).nativeElement; const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
dropdownInput.dispatchEvent(new Event('mouseenter')); const dropdownInput = await dropdown.host();
await fixture.whenStable(); await dropdownInput.dispatchEvent('mouseenter');
fixture.detectChanges();
dropdownInput.dispatchEvent(new Event('mouseleave')); await dropdownInput.dispatchEvent('mouseleave');
await fixture.whenStable();
fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')); const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(tooltipElement).toBeFalsy(); expect(await tooltipElement.isOpen()).toBeFalsy();
}); });
}); });
@@ -396,15 +355,18 @@ describe('DropdownCloudWidgetComponent', () => {
}); });
it('should show filter if more than 5 options found', async () => { it('should show filter if more than 5 options found', async () => {
await openSelect(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await dropdown.open();
const filter = fixture.debugElement.query(By.css('.adf-select-filter-input input')); const filter = fixture.debugElement.query(By.css('.adf-select-filter-input input'));
expect(filter.nativeElement).toBeDefined('Filter is not visible'); expect(filter.nativeElement).toBeDefined('Filter is not visible');
}); });
it('should be able to filter the options by search', async () => { it('should be able to filter the options by search', async () => {
await openSelect(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await dropdown.open();
let options: HTMLElement[] = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option')); let options = await dropdown.getOptions();
expect(options.length).toBe(6); expect(options.length).toBe(6);
const filter = fixture.debugElement.query(By.css('.adf-select-filter-input input')); const filter = fixture.debugElement.query(By.css('.adf-select-filter-input input'));
@@ -412,17 +374,19 @@ describe('DropdownCloudWidgetComponent', () => {
filter.nativeElement.dispatchEvent(new Event('input')); filter.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges(); fixture.detectChanges();
options = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option')); options = await dropdown.getOptions();
expect(options.length).toBe(1); expect(options.length).toBe(1);
expect(options[0].innerText).toEqual('option_1'); expect(await options[0].getText()).toEqual('option_1');
}); });
it('should be able to select the options if filter present', async () => { it('should be able to select the options if filter present', async () => {
await openSelect(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await dropdown.open();
const options: HTMLElement[] = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option')); const options = await dropdown.getOptions();
expect(options.length).toBe(6); expect(options.length).toBe(6);
options[0].click();
await options[0].click();
expect(widget.field.value).toEqual('opt_1'); expect(widget.field.value).toEqual('opt_1');
expect(widget.field.form.values['dropdown-id']).toEqual(filterOptionList[0]); expect(widget.field.form.values['dropdown-id']).toEqual(filterOptionList[0]);
}); });
@@ -443,18 +407,10 @@ describe('DropdownCloudWidgetComponent', () => {
{ id: 'opt_2', name: 'option_2' } { id: 'opt_2', name: 'option_2' }
] ]
}); });
fixture.detectChanges();
await fixture.whenStable();
fixture.detectChanges();
const selectedPlaceHolder = fixture.debugElement.query(By.css('.mat-select-value-text span')); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
expect(selectedPlaceHolder.nativeElement.getInnerHTML()).toEqual('option_1, option_2');
await openSelect('#dropdown-id'); expect(await dropdown.getValueText()).toEqual('option_1, option_2');
const options = fixture.debugElement.queryAll(By.css('.mat-selected span'));
expect(Array.from(options).map(({ nativeElement }) => nativeElement.getInnerHTML().trim()))
.toEqual(['option_1', 'option_2']);
}); });
it('should support multiple options', async () => { it('should support multiple options', async () => {
@@ -466,13 +422,10 @@ describe('DropdownCloudWidgetComponent', () => {
selectionType: 'multiple', selectionType: 'multiple',
options: fakeOptionList options: fakeOptionList
}); });
fixture.detectChanges(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await openSelect('#dropdown-id'); await dropdown.clickOptions({ selector: '[id="opt_1"]' });
await dropdown.clickOptions({ selector: '[id="opt_2"]' });
const optionOne = fixture.debugElement.query(By.css('[id="opt_1"]'));
const optionTwo = fixture.debugElement.query(By.css('[id="opt_2"]'));
optionOne.triggerEventHandler('click', null);
optionTwo.triggerEventHandler('click', null);
expect(widget.field.value).toEqual([ expect(widget.field.value).toEqual([
{ id: 'opt_1', name: 'option_1' }, { id: 'opt_1', name: 'option_1' },
{ id: 'opt_2', name: 'option_2' } { id: 'opt_2', name: 'option_2' }
@@ -512,18 +465,9 @@ describe('DropdownCloudWidgetComponent', () => {
} }
] as any)); ] as any));
fixture.detectChanges(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await fixture.whenStable();
fixture.detectChanges();
const selectedPlaceHolder = fixture.debugElement.query(By.css('.mat-select-value-text span')); expect(await dropdown.getValueText()).toEqual('option_3, option_4');
expect(selectedPlaceHolder.nativeElement.getInnerHTML()).toEqual('option_3, option_4');
await openSelect('#dropdown-id');
const options = fixture.debugElement.queryAll(By.css('.mat-selected span'));
expect(Array.from(options).map(({ nativeElement }) => nativeElement.getInnerHTML().trim()))
.toEqual(['option_3', 'option_4']);
}); });
it('should support multiple options for rest options', async () => { it('should support multiple options for rest options', async () => {
@@ -556,13 +500,10 @@ describe('DropdownCloudWidgetComponent', () => {
} }
] as any)); ] as any));
fixture.detectChanges(); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await openSelect('#dropdown-id'); await dropdown.clickOptions({ selector: '[id="opt_2"]' });
await dropdown.clickOptions({ selector: '[id="opt_4"]' });
const optionOne = fixture.debugElement.query(By.css('[id="opt_2"]'));
const optionTwo = fixture.debugElement.query(By.css('[id="opt_4"]'));
optionOne.triggerEventHandler('click', null);
optionTwo.triggerEventHandler('click', null);
expect(widget.field.value).toEqual([ expect(widget.field.value).toEqual([
{ id: 'opt_2', name: 'option_2' }, { id: 'opt_2', name: 'option_2' },
{ id: 'opt_4', name: 'option_4' } { id: 'opt_4', name: 'option_4' }
@@ -596,13 +537,12 @@ describe('DropdownCloudWidgetComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
}); });
it('should reset the options for a linked dropdown with restUrl when the parent dropdown selection changes to empty', async () => { it('should reset the options for a linked dropdown with restUrl when the parent dropdown selection changes to empty', () => {
widget.field.options = mockConditionalEntries[1].options; widget.field.options = mockConditionalEntries[1].options;
parentDropdown.value = undefined; parentDropdown.value = undefined;
widget.selectionChangedForField(parentDropdown); widget.selectionChangedForField(parentDropdown);
fixture.detectChanges(); fixture.detectChanges();
await openSelect('child-dropdown-id');
expect(widget.field.options).toEqual([]); expect(widget.field.options).toEqual([]);
}); });
@@ -615,16 +555,15 @@ describe('DropdownCloudWidgetComponent', () => {
widget.selectionChangedForField(parentDropdown); widget.selectionChangedForField(parentDropdown);
fixture.detectChanges(); fixture.detectChanges();
await openSelect('child-dropdown-id'); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await dropdown.open();
const optOne: any = fixture.debugElement.query(By.css('[id="LO"]')); const allOptions = await dropdown.getOptions();
const optTwo: any = fixture.debugElement.query(By.css('[id="MA"]'));
expect(jsonDataSpy).toHaveBeenCalledWith('fake-form-id', 'child-dropdown-id', { parentDropdown: 'mock-value' }); expect(jsonDataSpy).toHaveBeenCalledWith('fake-form-id', 'child-dropdown-id', { parentDropdown: 'mock-value' });
expect(optOne.context.value).toBe('LO'); expect(await (await allOptions[0].host()).getAttribute('id')).toEqual('LO');
expect(optOne.context.viewValue).toBe('LONDON'); expect(await allOptions[0].getText()).toEqual('LONDON');
expect(optTwo.context.value).toBe('MA'); expect(await (await allOptions[1].host()).getAttribute('id')).toEqual('MA');
expect(optTwo.context.viewValue).toBe('MANCHESTER'); expect(await allOptions[1].getText()).toEqual('MANCHESTER');
}); });
it('should reset previous child options if the rest url failed for a linked dropdown', async () => { it('should reset previous child options if the rest url failed for a linked dropdown', async () => {
@@ -640,7 +579,8 @@ describe('DropdownCloudWidgetComponent', () => {
}; };
selectParentOption('UK'); selectParentOption('UK');
await openSelect('child-dropdown-id'); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await dropdown.open();
const failedErrorMsgElement1 = fixture.debugElement.query(By.css('.adf-dropdown-failed-message')); const failedErrorMsgElement1 = fixture.debugElement.query(By.css('.adf-dropdown-failed-message'));
expect(widget.isRestApiFailed).toBe(false); expect(widget.isRestApiFailed).toBe(false);
@@ -649,7 +589,6 @@ describe('DropdownCloudWidgetComponent', () => {
jsonDataSpy.and.returnValue(throwError('Failed to fetch options')); jsonDataSpy.and.returnValue(throwError('Failed to fetch options'));
selectParentOption('GR'); selectParentOption('GR');
await openSelect('child-dropdown-id');
const failedErrorMsgElement2 = fixture.debugElement.query(By.css('.adf-dropdown-failed-message')); const failedErrorMsgElement2 = fixture.debugElement.query(By.css('.adf-dropdown-failed-message'));
expect(widget.isRestApiFailed).toBe(true); expect(widget.isRestApiFailed).toBe(true);
@@ -658,7 +597,6 @@ describe('DropdownCloudWidgetComponent', () => {
jsonDataSpy.and.returnValue(of(mockSecondRestDropdownOptions)); jsonDataSpy.and.returnValue(of(mockSecondRestDropdownOptions));
selectParentOption('IT'); selectParentOption('IT');
await openSelect('child-dropdown-id');
const failedErrorMsgElement3 = fixture.debugElement.query(By.css('.adf-dropdown-failed-message')); const failedErrorMsgElement3 = fixture.debugElement.query(By.css('.adf-dropdown-failed-message'));
expect(widget.isRestApiFailed).toBe(false); expect(widget.isRestApiFailed).toBe(false);
@@ -708,28 +646,27 @@ describe('DropdownCloudWidgetComponent', () => {
parentDropdown.value = 'GR'; parentDropdown.value = 'GR';
widget.selectionChangedForField(parentDropdown); widget.selectionChangedForField(parentDropdown);
fixture.detectChanges(); fixture.detectChanges();
await openSelect('child-dropdown-id');
const optOne: any = fixture.debugElement.query(By.css('[id="empty"]')); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
const optTwo: any = fixture.debugElement.query(By.css('[id="ATH"]')); await dropdown.open();
const optThree: any = fixture.debugElement.query(By.css('[id="SKG"]')); const allOptions = await dropdown.getOptions();
expect(widget.field.options).toEqual(mockConditionalEntries[0].options); expect(widget.field.options).toEqual(mockConditionalEntries[0].options);
expect(optOne.context.value).toBe(undefined);
expect(optOne.context.viewValue).toBe('Choose one...'); expect(await (await allOptions[0].host()).getAttribute('id')).toEqual('empty');
expect(optTwo.context.value).toBe('ATH'); expect(await allOptions[0].getText()).toEqual('Choose one...');
expect(optTwo.context.viewValue).toBe('Athens'); expect(await (await allOptions[1].host()).getAttribute('id')).toEqual('ATH');
expect(optThree.context.value).toBe('SKG'); expect(await allOptions[1].getText()).toEqual('Athens');
expect(optThree.context.viewValue).toBe('Thessaloniki'); expect(await (await allOptions[2].host()).getAttribute('id')).toEqual('SKG');
expect(await allOptions[2].getText()).toEqual('Thessaloniki');
}); });
it('should reset the options for a linked dropdown when the parent dropdown selection changes to empty', async () => { it('should reset the options for a linked dropdown when the parent dropdown selection changes to empty', () => {
widget.field.options = mockConditionalEntries[1].options; widget.field.options = mockConditionalEntries[1].options;
parentDropdown.value = undefined; parentDropdown.value = undefined;
widget.selectionChangedForField(parentDropdown); widget.selectionChangedForField(parentDropdown);
fixture.detectChanges(); fixture.detectChanges();
await openSelect('child-dropdown-id');
expect(widget.field.options).toEqual([]); expect(widget.field.options).toEqual([]);
}); });
@@ -930,55 +867,49 @@ describe('DropdownCloudWidgetComponent', () => {
it('should display options persisted from process variable', async () => { it('should display options persisted from process variable', async () => {
widget.field = getVariableDropdownWidget('variables.json-variable', 'response.people.players', 'playerId', 'playerFullName', mockProcessVariablesWithJson); widget.field = getVariableDropdownWidget('variables.json-variable', 'response.people.players', 'playerId', 'playerFullName', mockProcessVariablesWithJson);
fixture.detectChanges(); fixture.detectChanges();
await openSelect('variable-dropdown-id'); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await dropdown.open();
const optOne: any = fixture.debugElement.query(By.css('[id="player-1"]')); const allOptions = await dropdown.getOptions();
const optTwo: any = fixture.debugElement.query(By.css('[id="player-2"]'));
const optThree: any = fixture.debugElement.query(By.css('[id="player-3"]'));
expect(widget.field.options.length).toEqual(3); expect(widget.field.options.length).toEqual(3);
expect(optOne.context.value).toBe('player-1'); expect(await (await allOptions[0].host()).getAttribute('id')).toEqual('player-1');
expect(optOne.context.viewValue).toBe('Lionel Messi'); expect(await allOptions[0].getText()).toEqual('Lionel Messi');
expect(optTwo.context.value).toBe('player-2'); expect(await (await allOptions[1].host()).getAttribute('id')).toEqual('player-2');
expect(optTwo.context.viewValue).toBe('Cristiano Ronaldo'); expect(await allOptions[1].getText()).toEqual('Cristiano Ronaldo');
expect(optThree.context.value).toBe('player-3'); expect(await (await allOptions[2].host()).getAttribute('id')).toEqual('player-3');
expect(optThree.context.viewValue).toBe('Robert Lewandowski'); expect(await allOptions[2].getText()).toEqual('Robert Lewandowski');
}); });
it('should display options persisted from form variable if there are NO process variables', async () => { it('should display options persisted from form variable if there are NO process variables', async () => {
widget.field = getVariableDropdownWidget('json-form-variable', 'countries', 'id', 'name', [], mockFormVariableWithJson); widget.field = getVariableDropdownWidget('json-form-variable', 'countries', 'id', 'name', [], mockFormVariableWithJson);
fixture.detectChanges(); fixture.detectChanges();
await openSelect('variable-dropdown-id'); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await dropdown.open();
const optOne: any = fixture.debugElement.query(By.css('[id="PL"]')); const allOptions = await dropdown.getOptions();
const optTwo: any = fixture.debugElement.query(By.css('[id="UK"]'));
const optThree: any = fixture.debugElement.query(By.css('[id="GR"]'));
expect(widget.field.options.length).toEqual(3); expect(widget.field.options.length).toEqual(3);
expect(optOne.context.value).toBe('PL'); expect(await (await allOptions[0].host()).getAttribute('id')).toEqual('PL');
expect(optOne.context.viewValue).toBe('Poland'); expect(await allOptions[0].getText()).toEqual('Poland');
expect(optTwo.context.value).toBe('UK'); expect(await (await allOptions[1].host()).getAttribute('id')).toEqual('UK');
expect(optTwo.context.viewValue).toBe('United Kingdom'); expect(await allOptions[1].getText()).toEqual('United Kingdom');
expect(optThree.context.value).toBe('GR'); expect(await (await allOptions[2].host()).getAttribute('id')).toEqual('GR');
expect(optThree.context.viewValue).toBe('Greece'); expect(await allOptions[2].getText()).toEqual('Greece');
}); });
it('should display default options if config options are NOT provided', async () => { it('should display default options if config options are NOT provided', async () => {
widget.field = getVariableDropdownWidget('variables.json-default-variable', null, null, null, mockVariablesWithDefaultJson); widget.field = getVariableDropdownWidget('variables.json-default-variable', null, null, null, mockVariablesWithDefaultJson);
fixture.detectChanges(); fixture.detectChanges();
await openSelect('variable-dropdown-id'); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' }));
await dropdown.open();
const optOne: any = fixture.debugElement.query(By.css('[id="default-pet-1"]')); const allOptions = await dropdown.getOptions();
const optTwo: any = fixture.debugElement.query(By.css('[id="default-pet-2"]'));
const optThree: any = fixture.debugElement.query(By.css('[id="default-pet-3"]'));
expect(widget.field.options.length).toEqual(3); expect(widget.field.options.length).toEqual(3);
expect(optOne.context.value).toBe('default-pet-1'); expect(await (await allOptions[0].host()).getAttribute('id')).toEqual('default-pet-1');
expect(optOne.context.viewValue).toBe('Dog'); expect(await allOptions[0].getText()).toEqual('Dog');
expect(optTwo.context.value).toBe('default-pet-2'); expect(await (await allOptions[1].host()).getAttribute('id')).toEqual('default-pet-2');
expect(optTwo.context.viewValue).toBe('Cat'); expect(await allOptions[1].getText()).toEqual('Cat');
expect(optThree.context.value).toBe('default-pet-3'); expect(await (await allOptions[2].host()).getAttribute('id')).toEqual('default-pet-3');
expect(optThree.context.viewValue).toBe('Parrot'); expect(await allOptions[2].getText()).toEqual('Parrot');
}); });
it('should return empty array and display error when path is incorrect', () => { it('should return empty array and display error when path is incorrect', () => {

42
lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts
View File

@@ -21,12 +21,17 @@ import { GroupCloudWidgetComponent } from './group-cloud.widget';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module'; import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { By } from '@angular/platform-browser'; import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { MatChipHarness } from '@angular/material/chips/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
describe('GroupCloudWidgetComponent', () => { describe('GroupCloudWidgetComponent', () => {
let fixture: ComponentFixture<GroupCloudWidgetComponent>; let fixture: ComponentFixture<GroupCloudWidgetComponent>;
let widget: GroupCloudWidgetComponent; let widget: GroupCloudWidgetComponent;
let element: HTMLElement; let element: HTMLElement;
let loader: HarnessLoader;
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
@@ -44,6 +49,7 @@ describe('GroupCloudWidgetComponent', () => {
fixture = TestBed.createComponent(GroupCloudWidgetComponent); fixture = TestBed.createComponent(GroupCloudWidgetComponent);
widget = fixture.componentInstance; widget = fixture.componentInstance;
element = fixture.nativeElement; element = fixture.nativeElement;
loader = TestbedHarnessEnvironment.loader(fixture);
}); });
afterEach(() => { afterEach(() => {
@@ -77,9 +83,9 @@ describe('GroupCloudWidgetComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
fixture.detectChanges(); fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement; const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(tooltipElement).toBeTruthy(); expect(await tooltipElement.isOpen()).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip'); expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip');
}); });
it('should hide tooltip', async () => { it('should hide tooltip', async () => {
@@ -92,8 +98,8 @@ describe('GroupCloudWidgetComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
fixture.detectChanges(); fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')); const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(tooltipElement).toBeFalsy(); expect(await tooltipElement.isOpen()).toBeFalsy();
}); });
}); });
@@ -167,14 +173,11 @@ describe('GroupCloudWidgetComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
const disabledFormField: HTMLElement = element.querySelector('.mat-form-field-disabled'); const formField = await loader.getHarness(MatFormFieldHarness);
expect(disabledFormField).toBeTruthy(); expect(await formField.isDisabled()).toBeTrue();
fixture.detectChanges(); const gtoupChip = await loader.getHarness(MatChipHarness);
await fixture.whenStable(); expect(await gtoupChip.isDisabled()).toBeTrue();
const disabledGroupChip: HTMLElement = element.querySelector('.mat-chip-disabled');
expect(disabledGroupChip).toBeTruthy();
}); });
it('should multi chips be disabled', async () => { it('should multi chips be disabled', async () => {
@@ -191,15 +194,12 @@ describe('GroupCloudWidgetComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
const disabledFormField: HTMLElement = element.querySelector('.mat-form-field-disabled'); const formField = await loader.getHarness(MatFormFieldHarness);
expect(disabledFormField).toBeTruthy(); expect(await formField.isDisabled()).toBeTrue();
fixture.detectChanges(); const groupChips = await loader.getAllHarnesses(MatChipHarness);
await fixture.whenStable(); expect(await groupChips[0].isDisabled()).toBeTrue();
expect(await groupChips[1].isDisabled()).toBeTrue();
const disabledGroupChips = element.querySelectorAll('.mat-chip-disabled');
expect(disabledGroupChips.item(0)).toBeTruthy();
expect(disabledGroupChips.item(1)).toBeTruthy();
}); });
it('should have disabled validation', () => { it('should have disabled validation', () => {

45
lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts
View File

@@ -23,13 +23,18 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module'; import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { IdentityUserService } from '../../../../people/services/identity-user.service'; import { IdentityUserService } from '../../../../people/services/identity-user.service';
import { mockShepherdsPie, mockYorkshirePudding } from '../../../../people/mock/people-cloud.mock'; import { mockShepherdsPie, mockYorkshirePudding } from '../../../../people/mock/people-cloud.mock';
import { By } from '@angular/platform-browser'; import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
import { MatChipHarness } from '@angular/material/chips/testing';
describe('PeopleCloudWidgetComponent', () => { describe('PeopleCloudWidgetComponent', () => {
let fixture: ComponentFixture<PeopleCloudWidgetComponent>; let fixture: ComponentFixture<PeopleCloudWidgetComponent>;
let widget: PeopleCloudWidgetComponent; let widget: PeopleCloudWidgetComponent;
let element: HTMLElement; let element: HTMLElement;
let identityUserService: IdentityUserService; let identityUserService: IdentityUserService;
let loader: HarnessLoader;
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
@@ -49,6 +54,7 @@ describe('PeopleCloudWidgetComponent', () => {
widget = fixture.componentInstance; widget = fixture.componentInstance;
element = fixture.nativeElement; element = fixture.nativeElement;
spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(mockShepherdsPie); spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(mockShepherdsPie);
loader = TestbedHarnessEnvironment.loader(fixture);
}); });
afterEach(() => { afterEach(() => {
@@ -105,9 +111,9 @@ describe('PeopleCloudWidgetComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
fixture.detectChanges(); fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement; const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(tooltipElement).toBeTruthy(); expect(await tooltipElement.isOpen()).toBeTruthy();
expect(tooltipElement.textContent.trim()).toBe('my custom tooltip'); expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip');
}); });
it('should hide tooltip', async () => { it('should hide tooltip', async () => {
@@ -120,8 +126,8 @@ describe('PeopleCloudWidgetComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
fixture.detectChanges(); fixture.detectChanges();
const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')); const tooltipElement = await loader.getHarness(MatTooltipHarness);
expect(tooltipElement).toBeFalsy(); expect(await tooltipElement.isOpen()).toBeFalsy();
}); });
}); });
@@ -194,16 +200,12 @@ describe('PeopleCloudWidgetComponent', () => {
}); });
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable();
const disabledFormField: HTMLElement = element.querySelector('.mat-form-field-disabled'); const formField = await loader.getHarness(MatFormFieldHarness);
expect(disabledFormField).toBeTruthy(); expect(await formField.isDisabled()).toBeTrue();
fixture.detectChanges(); const peopleChip = await loader.getHarness(MatChipHarness);
await fixture.whenStable(); expect(await peopleChip.isDisabled()).toBeTrue();
const disabledPeopleChip: HTMLElement = element.querySelector('.mat-chip-disabled');
expect(disabledPeopleChip).toBeTruthy();
}); });
it('should multi chips be disabled', async () => { it('should multi chips be disabled', async () => {
@@ -218,17 +220,12 @@ describe('PeopleCloudWidgetComponent', () => {
}); });
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); const formField = await loader.getHarness(MatFormFieldHarness);
expect(await formField.isDisabled()).toBeTrue();
const disabledFormField: HTMLElement = element.querySelector('.mat-form-field-disabled'); const peopleChip = await loader.getAllHarnesses(MatChipHarness);
expect(disabledFormField).toBeTruthy(); expect(await peopleChip[0].isDisabled()).toBeTrue();
expect(await peopleChip[1].isDisabled()).toBeTrue();
fixture.detectChanges();
await fixture.whenStable();
const disabledPeopleChips = element.querySelectorAll('.mat-chip-disabled');
expect(disabledPeopleChips.item(0)).toBeTruthy();
expect(disabledPeopleChips.item(1)).toBeTruthy();
}); });
it('should have disabled validation', () => { it('should have disabled validation', () => {

33
lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.spec.ts
View File

@@ -28,11 +28,16 @@ import { By } from '@angular/platform-browser';
import { DebugElement, SimpleChange } from '@angular/core'; import { DebugElement, SimpleChange } from '@angular/core';
import { mockFoodUsers } from '../../../../people/mock/people-cloud.mock'; import { mockFoodUsers } from '../../../../people/mock/people-cloud.mock';
import { mockFoodGroups } from '../../../../group/mock/group-cloud.mock'; import { mockFoodGroups } from '../../../../group/mock/group-cloud.mock';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatSelectHarness } from '@angular/material/select/testing';
import { MatFormFieldHarness } from '@angular/material/form-field/testing';
describe('TaskAssignmentFilterComponent', () => { describe('TaskAssignmentFilterComponent', () => {
let component: TaskAssignmentFilterCloudComponent; let component: TaskAssignmentFilterCloudComponent;
let fixture: ComponentFixture<TaskAssignmentFilterCloudComponent>; let fixture: ComponentFixture<TaskAssignmentFilterCloudComponent>;
let identityUserService: IdentityUserService; let identityUserService: IdentityUserService;
let loader: HarnessLoader;
/** /**
* select the assignment type * select the assignment type
@@ -79,24 +84,24 @@ describe('TaskAssignmentFilterComponent', () => {
type: 'assignment', type: 'assignment',
attributes: { assignedUsers: 'assignedUsers', candidateGroups: 'candidateGroups' } attributes: { assignedUsers: 'assignedUsers', candidateGroups: 'candidateGroups' }
}; };
loader = TestbedHarnessEnvironment.loader(fixture);
fixture.detectChanges(); fixture.detectChanges();
}); });
afterEach(() => fixture.destroy()); afterEach(() => fixture.destroy());
it('should display all available assignment types', () => { it('should display all available assignment types', async () => {
const assignmentTypeSelect: DebugElement = fixture.debugElement.query(By.css(`[data-automation-id="adf-task-assignment-filter-select"]`)); const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '[data-automation-id="adf-task-assignment-filter-select"]' }));
assignmentTypeSelect.nativeElement.click(); await dropdown.open();
fixture.detectChanges();
const assignmentTypeOptions: DebugElement[] = fixture.debugElement.queryAll(By.css('mat-option')); const assignmentTypeOptions = await dropdown.getOptions();
expect(assignmentTypeOptions.length).toEqual(5); expect(assignmentTypeOptions.length).toEqual(5);
expect(assignmentTypeOptions[0].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.NONE'); expect(await assignmentTypeOptions[0].getText()).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.NONE');
expect(assignmentTypeOptions[1].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.UNASSIGNED'); expect(await assignmentTypeOptions[1].getText()).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.UNASSIGNED');
expect(assignmentTypeOptions[2].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.ASSIGNED_TO'); expect(await assignmentTypeOptions[2].getText()).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.ASSIGNED_TO');
expect(assignmentTypeOptions[3].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.CURRENT_USER'); expect(await assignmentTypeOptions[3].getText()).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.CURRENT_USER');
expect(assignmentTypeOptions[4].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.CANDIDATE_GROUPS'); expect(await assignmentTypeOptions[4].getText()).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.CANDIDATE_GROUPS');
}); });
it('should emit the current user info when assignment is the current user', () => { it('should emit the current user info when assignment is the current user', () => {
@@ -124,11 +129,11 @@ describe('TaskAssignmentFilterComponent', () => {
expect(candidateGroups).toBeTruthy(); expect(candidateGroups).toBeTruthy();
}); });
it('should have floating labels when values are present', () => { it('should have floating labels when values are present', async () => {
const inputLabelsNodes = document.querySelectorAll('mat-form-field'); const inputLabelsNodes = await loader.getAllHarnesses(MatFormFieldHarness);
inputLabelsNodes.forEach(labelNode => { inputLabelsNodes.forEach(async labelNode => {
expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto'); expect(await labelNode.isLabelFloating()).toBeTruthy();
}); });
}); });
}); });

24
lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
View File

@@ -33,6 +33,9 @@ import {
} from '../mocks/task-details-cloud.mock'; } from '../mocks/task-details-cloud.mock';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { MatSelectModule } from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatSelectHarness } from '@angular/material/select/testing';
describe('TaskHeaderCloudComponent', () => { describe('TaskHeaderCloudComponent', () => {
let component: TaskHeaderCloudComponent; let component: TaskHeaderCloudComponent;
@@ -44,6 +47,7 @@ describe('TaskHeaderCloudComponent', () => {
let getCandidateUsersSpy: jasmine.Spy; let getCandidateUsersSpy: jasmine.Spy;
let isTaskEditableSpy: jasmine.Spy; let isTaskEditableSpy: jasmine.Spy;
let alfrescoApiService: AlfrescoApiService; let alfrescoApiService: AlfrescoApiService;
let loader: HarnessLoader;
const mockCandidateUsers = ['mockuser1', 'mockuser2', 'mockuser3']; const mockCandidateUsers = ['mockuser1', 'mockuser2', 'mockuser3'];
const mockCandidateGroups = ['mockgroup1', 'mockgroup2', 'mockgroup3']; const mockCandidateGroups = ['mockgroup1', 'mockgroup2', 'mockgroup3'];
@@ -82,6 +86,7 @@ describe('TaskHeaderCloudComponent', () => {
isTaskEditableSpy = spyOn(taskCloudService, 'isTaskEditable').and.returnValue(true); isTaskEditableSpy = spyOn(taskCloudService, 'isTaskEditable').and.returnValue(true);
getCandidateUsersSpy = spyOn(taskCloudService, 'getCandidateUsers').and.returnValue(of(mockCandidateUsers)); getCandidateUsersSpy = spyOn(taskCloudService, 'getCandidateUsers').and.returnValue(of(mockCandidateUsers));
getCandidateGroupsSpy = spyOn(taskCloudService, 'getCandidateGroups').and.returnValue(of(mockCandidateGroups)); getCandidateGroupsSpy = spyOn(taskCloudService, 'getCandidateGroups').and.returnValue(of(mockCandidateGroups));
loader = TestbedHarnessEnvironment.loader(fixture);
}); });
afterEach(() => { afterEach(() => {
@@ -130,19 +135,14 @@ describe('TaskHeaderCloudComponent', () => {
it('should display priority with default values', async () => { it('should display priority with default values', async () => {
fixture.detectChanges(); fixture.detectChanges();
const dropdown = await loader.getHarness(MatSelectHarness);
await dropdown.open();
const priorityEl = fixture.debugElement.nativeElement.querySelector('[data-automation-id="header-priority"] .mat-select-trigger'); const options = await dropdown.getOptions();
expect(priorityEl).toBeDefined(); expect(await options[0].getText()).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NONE');
expect(priorityEl).not.toBeNull(); expect(await options[1].getText()).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.LOW');
expect(await options[2].getText()).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NORMAL');
priorityEl.click(); expect(await options[3].getText()).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.HIGH');
fixture.detectChanges();
const options: any = fixture.debugElement.queryAll(By.css('mat-option'));
expect(options[0].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NONE');
expect(options[1].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.LOW');
expect(options[2].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NORMAL');
expect(options[3].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.HIGH');
}); });
it('should display due date', async () => { it('should display due date', async () => {