diff --git a/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts b/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts index dc88b14946d..897a11933a7 100644 --- a/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts +++ b/lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts @@ -24,11 +24,17 @@ import { DateCloudFilterType } from '../../models/date-cloud-filter.model'; import { DateRangeFilterService } from './date-range-filter.service'; import { mockFilterProperty } from '../mock/date-range-filter.mock'; 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', () => { let component: DateRangeFilterComponent; let fixture: ComponentFixture; let service: DateRangeFilterService; + let loader: HarnessLoader; beforeEach(() => { TestBed.configureTestingModule({ @@ -48,6 +54,7 @@ describe('DateRangeFilterComponent', () => { type: 'dateRange', options: null }; + loader = TestbedHarnessEnvironment.loader(fixture); fixture.detectChanges(); }); @@ -58,27 +65,21 @@ describe('DateRangeFilterComponent', () => { it('should get on option change', async () => { spyOn(service, 'getDateRange'); 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; - weekOption.click(); - fixture.detectChanges(); - await fixture.whenStable(); + const stateElement = await loader.getHarness(MatSelectHarness.with({ selector: '[data-automation-id="adf-cloud-edit-process-property-createdDate"]' })); + + await stateElement.clickOptions({ selector: '[data-automation-id="adf-cloud-edit-process-property-options-WEEK"]'}); + expect(service.getDateRange).not.toHaveBeenCalled(); expect(component.dateTypeChange.emit).toHaveBeenCalled(); }); it('should not emit event on `RANGE` option change', async () => { 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 rangeOption = document.querySelector('[data-automation-id="adf-cloud-edit-process-property-options-RANGE"]') as HTMLElement; - rangeOption.click(); - fixture.detectChanges(); - await fixture.whenStable(); + const stateElement = await loader.getHarness(MatSelectHarness.with({ selector: '[data-automation-id="adf-cloud-edit-process-property-createdDate"]' })); + + await stateElement.clickOptions({ selector: '[data-automation-id="adf-cloud-edit-process-property-options-RANGE"]'}); + expect(component.dateTypeChange.emit).not.toHaveBeenCalled(); }); @@ -131,11 +132,22 @@ describe('DateRangeFilterComponent', () => { 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(); - const inputLabelsNodes = document.querySelectorAll('mat-form-field'); - inputLabelsNodes.forEach(labelNode => { - expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto'); - }); + const dateRangeElement = await loader.getHarness(MatDateRangeInputHarness); + await dateRangeElement.openCalendar(); + const dateRangeField = await loader.getHarness(MatFormFieldHarness.with({ selector: '.adf-cloud-date-range-picker' })); + + expect(await dateRangeField.isLabelFloating()).toBeTrue(); + await dateRangeElement.closeCalendar(); }); }); diff --git a/lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.spec.ts index 47cba1b71ea..d10748ee5e7 100644 --- a/lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.spec.ts @@ -19,17 +19,19 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ProcessServiceCloudTestingModule } from '../../testing/process-service-cloud.testing.module'; import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { FormDefinitionSelectorCloudComponent } from './form-definition-selector-cloud.component'; -import { By } from '@angular/platform-browser'; import { of } from 'rxjs'; import { FormDefinitionSelectorCloudService } from '../services/form-definition-selector-cloud.service'; 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', () => { let fixture: ComponentFixture; let service: FormDefinitionSelectorCloudService; - let element: HTMLElement; let getFormsSpy: jasmine.Spy; + let loader: HarnessLoader; beforeEach(() => { TestBed.configureTestingModule({ @@ -40,54 +42,45 @@ describe('FormDefinitionCloudComponent', () => { schemas: [CUSTOM_ELEMENTS_SCHEMA] }); fixture = TestBed.createComponent(FormDefinitionSelectorCloudComponent); - element = fixture.nativeElement; service = TestBed.inject(FormDefinitionSelectorCloudService); 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 () => { - fixture.detectChanges(); - await fixture.whenStable(); - fixture.detectChanges(); - const clickMatSelect = fixture.debugElement.query(By.css(('.mat-select-trigger'))); - clickMatSelect.triggerEventHandler('click', null); - fixture.detectChanges(); - const options: any = fixture.debugElement.queryAll(By.css('mat-option')); - expect(options[0].nativeElement.innerText.trim()).toBe('ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.NONE'); - expect(options[1].nativeElement.innerText.trim()).toBe('fakeForm'); + const selectElement = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-form-selector-dropdown' })); + await selectElement.open(); + const options = await selectElement.getOptions(); + + expect(options.length).toBe(2); + expect(await options[0].getText()).toBe('ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.NONE'); + expect(await options[1].getText()).toBe('fakeForm'); expect(getFormsSpy).toHaveBeenCalled(); }); it('should load only None option when no forms exist', async () => { getFormsSpy.and.returnValue(of([])); - fixture.detectChanges(); - await fixture.whenStable(); - fixture.detectChanges(); - const clickMatSelect = fixture.debugElement.query(By.css(('.mat-select-trigger'))); - clickMatSelect.triggerEventHandler('click', null); - fixture.detectChanges(); - const options: any = fixture.debugElement.queryAll(By.css('mat-option')); + const selectElement = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-form-selector-dropdown' })); + await selectElement.open(); + + const options = await selectElement.getOptions(); + expect((options).length).toBe(1); }); - it('should not preselect any form by default', () => { - fixture.detectChanges(); - const formInput = element.querySelector('mat-select'); - expect(formInput).toBeDefined(); - expect(formInput.nodeValue).toBeNull(); + it('should not preselect any form by default', async () => { + const selectElement = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-form-selector-dropdown' })); + + expect(await selectElement.getValueText()).toBe(''); }); it('should display the name of the form that is selected', async () => { - fixture.detectChanges(); - await fixture.whenStable(); - const clickMatSelect = fixture.debugElement.query(By.css(('.mat-select-trigger'))); - clickMatSelect.triggerEventHandler('click', null); - fixture.detectChanges(); - const options: any = fixture.debugElement.queryAll(By.css('mat-option')); - options[1].triggerEventHandler('click', {}); - fixture.detectChanges(); - const selected = fixture.debugElement.query(By.css('mat-select')); - const selectedValue = ((selected).nativeElement.innerText); - expect(selectedValue.trim()).toBe('fakeForm'); + const selectElement = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-form-selector-dropdown' })); + await selectElement.open(); + const options = await selectElement.getOptions(); + + await options[1].click(); + + expect(await selectElement.getValueText()).toBe('fakeForm'); }); }); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts index 39426bee037..f3738e4730e 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts @@ -72,6 +72,9 @@ import { By } from '@angular/platform-browser'; import { of, throwError } from 'rxjs'; import { FormCloudModule } from '../../../form-cloud.module'; 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 = { isFile: true, @@ -123,6 +126,7 @@ describe('AttachFileCloudWidgetComponent', () => { let localizedDataPipe: LocalizedDatePipe; let newVersionUploaderService: NewVersionUploaderService; let notificationService: NotificationService; + let loader: HarnessLoader; const createUploadWidgetField = ( form: FormModel, @@ -166,6 +170,7 @@ describe('AttachFileCloudWidgetComponent', () => { contentNodeSelectorPanelService = TestBed.inject(ContentNodeSelectorPanelService); openUploadFileDialogSpy = spyOn(contentCloudNodeSelectorService, 'openUploadFileDialog').and.returnValue(of([fakeNode])); localizedDataPipe = new LocalizedDatePipe(); + loader = TestbedHarnessEnvironment.loader(fixture); }); afterEach(() => { @@ -935,26 +940,24 @@ describe('AttachFileCloudWidgetComponent', () => { it('should show tooltip', async () => { const attachButton = fixture.nativeElement.querySelector('button'); attachButton.dispatchEvent(new Event('mouseenter')); - await fixture.whenStable(); - fixture.detectChanges(); - const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement; - expect(tooltipElement).toBeTruthy(); - expect(tooltipElement.textContent.trim()).toBe('my custom tooltip'); + const tooltipElement = await loader.getHarness(MatTooltipHarness); + + expect(await tooltipElement.isOpen()).toBeTrue(); + expect(await tooltipElement.getTooltipText()).toBe('my custom tooltip'); }); 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')); - await fixture.whenStable(); fixture.detectChanges(); attachButton.dispatchEvent(new Event('mouseleave')); - await fixture.whenStable(); fixture.detectChanges(); - const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')); - expect(tooltipElement).toBeFalsy(); + const tooltipElement = await loader.getHarness(MatTooltipHarness); + + expect(await tooltipElement.isOpen()).toBeFalse(); }); }); }); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts index da8406b8582..60292af8f3a 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts @@ -20,9 +20,12 @@ import { DateCloudWidgetComponent } from './date-cloud.widget'; import { FormFieldModel, FormModel, FormFieldTypes, DateFieldValidator, MinDateFieldValidator, MaxDateFieldValidator } from '@alfresco/adf-core'; import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module'; import { TranslateModule } from '@ngx-translate/core'; -import { By } from '@angular/platform-browser'; import { DateAdapter } from '@angular/material/core'; 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', () => { @@ -31,6 +34,7 @@ describe('DateWidgetComponent', () => { let element: HTMLElement; let adapter: DateAdapter; let form: FormModel; + let loader: HarnessLoader; beforeEach(() => { TestBed.configureTestingModule({ @@ -48,6 +52,7 @@ describe('DateWidgetComponent', () => { widget = fixture.componentInstance; element = fixture.nativeElement; + loader = TestbedHarnessEnvironment.loader(fixture); }); it('should setup min value for date picker', () => { @@ -497,28 +502,21 @@ describe('DateWidgetComponent', () => { }); it('should show tooltip', async () => { - const dateCloudInput = fixture.nativeElement.querySelector('input'); - dateCloudInput.dispatchEvent(new Event('mouseenter')); - await fixture.whenStable(); - fixture.detectChanges(); + const dateCloudInput = await loader.getHarness(MatInputHarness); + await (await dateCloudInput.host()).dispatchEvent('mouseenter'); - const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement; - expect(tooltipElement).toBeTruthy(); - expect(tooltipElement.textContent.trim()).toBe('my custom tooltip'); + const tooltipElement = await loader.getHarness(MatTooltipHarness); + expect(await tooltipElement.isOpen()).toBeTruthy(); + expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip'); }); it('should hide tooltip', async () => { - const dateCloudInput = fixture.nativeElement.querySelector('input'); - dateCloudInput.dispatchEvent(new Event('mouseenter')); - await fixture.whenStable(); - fixture.detectChanges(); - - dateCloudInput.dispatchEvent(new Event('mouseleave')); - await fixture.whenStable(); - fixture.detectChanges(); + const dateCloudInput = await loader.getHarness(MatInputHarness); + await (await dateCloudInput.host()).dispatchEvent('mouseenter'); + await (await dateCloudInput.host()).dispatchEvent('mouseleave'); - const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')); - expect(tooltipElement).toBeFalsy(); + const tooltipElement = await loader.getHarness(MatTooltipHarness); + expect(await tooltipElement.isOpen()).toBeFalsy(); }); }); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts index ed96719b4c8..47185bf3415 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts @@ -41,8 +41,12 @@ import { mockVariablesWithDefaultJson, mockProcessVariablesWithJson } from '../../../mocks/dropdown.mock'; -import { OverlayContainer } from '@angular/cdk/overlay'; 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', () => { @@ -50,17 +54,9 @@ describe('DropdownCloudWidgetComponent', () => { let widget: DropdownCloudWidgetComponent; let formCloudService: FormCloudService; let logService: LogService; - let overlayContainer: OverlayContainer; let fixture: ComponentFixture; let element: HTMLElement; - - const openSelect = async (_selector?: string) => { - const dropdown: HTMLElement = element.querySelector('.mat-select-trigger'); - dropdown.click(); - fixture.detectChanges(); - await fixture.whenStable(); - fixture.detectChanges(); - }; + let loader: HarnessLoader; beforeEach(() => { TestBed.configureTestingModule({ @@ -75,8 +71,8 @@ describe('DropdownCloudWidgetComponent', () => { formService = TestBed.inject(FormService); formCloudService = TestBed.inject(FormCloudService); - overlayContainer = TestBed.inject(OverlayContainer); logService = TestBed.inject(LogService); + loader = TestbedHarnessEnvironment.loader(fixture); }); afterEach(() => fixture.destroy()); @@ -89,9 +85,9 @@ describe('DropdownCloudWidgetComponent', () => { name: 'date-name', type: 'dropdown', 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; fixture.detectChanges(); }); @@ -109,25 +105,16 @@ describe('DropdownCloudWidgetComponent', () => { it('should select the default value when an option is chosen as default', async () => { widget.field.value = 'option_2'; - widget.ngOnInit(); - 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'); + expect(widget.fieldValue).toEqual('option_2'); }); it('should select the empty value when no default is chosen', async () => { widget.field.value = 'empty'; - widget.ngOnInit(); - fixture.detectChanges(); - - await openSelect('#dropdown-id'); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); - const dropDownElement = element.querySelector('#dropdown-id'); - expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('empty'); + expect(widget.fieldValue).toEqual('empty'); }); it('should load data from restUrl and populate options', async () => { @@ -137,24 +124,16 @@ describe('DropdownCloudWidgetComponent', () => { widget.field.restIdProperty = 'name'; widget.ngOnInit(); - fixture.detectChanges(); - await fixture.whenStable(); - - const dropdown = fixture.debugElement.query(By.css('mat-select')); - dropdown.nativeElement.click(); - 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 dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); + const allOptions = await dropdown.getOptions(); expect(jsonDataSpy).toHaveBeenCalled(); expect(allOptions.length).toEqual(3); - expect(optOne.nativeElement.innerText).toEqual('option_1'); - expect(optTwo.nativeElement.innerText).toEqual('option_2'); - expect(optThree.nativeElement.innerText).toEqual('option_3'); + expect(await allOptions[0].getText()).toEqual('option_1'); + expect(await allOptions[1].getText()).toEqual('option_2'); + expect(await allOptions[2].getText()).toEqual('option_3'); }); it('should show error message if the restUrl failed to fetch options', async () => { @@ -165,13 +144,10 @@ describe('DropdownCloudWidgetComponent', () => { widget.field.restIdProperty = 'name'; widget.ngOnInit(); - fixture.detectChanges(); - await fixture.whenStable(); - const dropdown = fixture.debugElement.query(By.css('mat-select')); - dropdown.nativeElement.click(); - fixture.detectChanges(); - await fixture.whenStable(); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); + const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message')); expect(jsonDataSpy).toHaveBeenCalled(); expect(widget.isRestApiFailed).toBe(true); @@ -199,12 +175,11 @@ describe('DropdownCloudWidgetComponent', () => { ] as any)); 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(option.nativeElement.innerText).toBe('default1_value'); + expect((await (await dropdown.getOptions())[0].getText())).toEqual('default1_value'); }); it('should preselect dropdown widget value when String (defined value) passed ', async () => { @@ -224,11 +199,10 @@ describe('DropdownCloudWidgetComponent', () => { ] as any)); widget.ngOnInit(); - fixture.detectChanges(); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); - await openSelect(); - const options = fixture.debugElement.queryAll(By.css('.mat-option-text')); - expect(options[0].nativeElement.innerText).toBe('default1_value'); + expect((await (await dropdown.getOptions())[0].getText())).toEqual('default1_value'); expect(widget.field.form.values['dropdown-id']).toEqual({ id: 'opt1', name: 'default1_value' }); }); @@ -239,12 +213,11 @@ describe('DropdownCloudWidgetComponent', () => { ]; widget.ngOnInit(); - fixture.detectChanges(); - await openSelect(); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); + await dropdown.clickOptions({ selector: '[id="empty"]' }); - const defaultOption: any = fixture.debugElement.query(By.css('[id="empty"]')); widget.touched = true; - defaultOption.triggerEventHandler('click', null); fixture.detectChanges(); const requiredErrorElement = fixture.debugElement.query(By.css('.adf-dropdown-required-message .adf-error-text')); @@ -259,13 +232,11 @@ describe('DropdownCloudWidgetComponent', () => { ]; widget.ngOnInit(); - fixture.detectChanges(); - await openSelect(); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); - const optionOne: any = fixture.debugElement.query(By.css('[id="opt_1"]')); widget.touched = true; - optionOne.triggerEventHandler('click', null); - fixture.detectChanges(); + await dropdown.clickOptions({ selector: '[id="opt_1"]' }); const requiredErrorElement = fixture.debugElement.query(By.css('.adf-dropdown-required-message .adf-error-text')); expect(requiredErrorElement).toBeFalsy(); @@ -278,32 +249,23 @@ describe('DropdownCloudWidgetComponent', () => { ]; widget.ngOnInit(); - fixture.detectChanges(); - await openSelect(); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); - const optionOne = fixture.debugElement.query(By.css('[id="opt_1"]')); - optionOne.triggerEventHandler('click', null); - - fixture.detectChanges(); - await fixture.whenStable(); - let selectedValueElement = fixture.debugElement.query(By.css('.mat-select-value-text')); + await dropdown.clickOptions({ selector: '[id="opt_1"]' }); - expect(selectedValueElement.nativeElement.innerText).toEqual('option_1'); + expect(await dropdown.getValueText()).toEqual('option_1'); expect(widget.fieldValue).toEqual('opt_1'); - await openSelect(); - const defaultOption: any = fixture.debugElement.query(By.css('[id="empty"]')); - defaultOption.triggerEventHandler('click', null); + await dropdown.open(); + await dropdown.clickOptions({ selector: '[id="empty"]' }); - fixture.detectChanges(); - await fixture.whenStable(); + const formField = await loader.getHarness(MatFormFieldHarness); + const dropdownLabel = await formField.getLabel(); - const dropdownLabel = fixture.debugElement.query(By.css('.adf-dropdown-widget mat-label')); - selectedValueElement = fixture.debugElement.query(By.css('.mat-select-value-text')); - - expect(dropdownLabel.nativeNode.innerText).toEqual('This is a mock none option'); + expect(dropdownLabel).toEqual('This is a mock none option'); expect(widget.fieldValue).toEqual(undefined); - expect(selectedValueElement).toBeFalsy(); + expect(await dropdown.getValueText()).toEqual(''); }); }); @@ -318,28 +280,25 @@ describe('DropdownCloudWidgetComponent', () => { }); it('should show tooltip', async () => { - const dropdownInput = fixture.debugElement.query(By.css('mat-select')).nativeElement; - dropdownInput.dispatchEvent(new Event('mouseenter')); - await fixture.whenStable(); - fixture.detectChanges(); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + const dropdownInput = await dropdown.host(); + dropdownInput.dispatchEvent('mouseenter'); - 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.getTooltipText()).toBe('my custom tooltip'); + expect(await tooltipElement.isOpen()).toBeTruthy(); }); it('should hide tooltip', async () => { - const dropdownInput = fixture.debugElement.query(By.css('mat-select')).nativeElement; - dropdownInput.dispatchEvent(new Event('mouseenter')); - await fixture.whenStable(); - fixture.detectChanges(); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + const dropdownInput = await dropdown.host(); + await dropdownInput.dispatchEvent('mouseenter'); - dropdownInput.dispatchEvent(new Event('mouseleave')); - await fixture.whenStable(); - fixture.detectChanges(); + await dropdownInput.dispatchEvent('mouseleave'); - const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')); - expect(tooltipElement).toBeFalsy(); + const tooltipElement = await loader.getHarness(MatTooltipHarness); + expect(await tooltipElement.isOpen()).toBeFalsy(); }); }); @@ -396,15 +355,18 @@ describe('DropdownCloudWidgetComponent', () => { }); 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')); expect(filter.nativeElement).toBeDefined('Filter is not visible'); }); 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); const filter = fixture.debugElement.query(By.css('.adf-select-filter-input input')); @@ -412,17 +374,19 @@ describe('DropdownCloudWidgetComponent', () => { filter.nativeElement.dispatchEvent(new Event('input')); fixture.detectChanges(); - options = Array.from(overlayContainer.getContainerElement().querySelectorAll('mat-option')); + options = await dropdown.getOptions(); 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 () => { - 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); - options[0].click(); + + await options[0].click(); expect(widget.field.value).toEqual('opt_1'); expect(widget.field.form.values['dropdown-id']).toEqual(filterOptionList[0]); }); @@ -443,18 +407,10 @@ describe('DropdownCloudWidgetComponent', () => { { 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')); - expect(selectedPlaceHolder.nativeElement.getInnerHTML()).toEqual('option_1, option_2'); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); - 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_1', 'option_2']); + expect(await dropdown.getValueText()).toEqual('option_1, option_2'); }); it('should support multiple options', async () => { @@ -466,13 +422,10 @@ describe('DropdownCloudWidgetComponent', () => { selectionType: 'multiple', options: fakeOptionList }); - fixture.detectChanges(); - await openSelect('#dropdown-id'); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + 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([ { id: 'opt_1', name: 'option_1' }, { id: 'opt_2', name: 'option_2' } @@ -512,18 +465,9 @@ describe('DropdownCloudWidgetComponent', () => { } ] as any)); - fixture.detectChanges(); - await fixture.whenStable(); - fixture.detectChanges(); - - const selectedPlaceHolder = fixture.debugElement.query(By.css('.mat-select-value-text span')); - expect(selectedPlaceHolder.nativeElement.getInnerHTML()).toEqual('option_3, option_4'); - - await openSelect('#dropdown-id'); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); - const options = fixture.debugElement.queryAll(By.css('.mat-selected span')); - expect(Array.from(options).map(({ nativeElement }) => nativeElement.getInnerHTML().trim())) - .toEqual(['option_3', 'option_4']); + expect(await dropdown.getValueText()).toEqual('option_3, option_4'); }); it('should support multiple options for rest options', async () => { @@ -556,13 +500,10 @@ describe('DropdownCloudWidgetComponent', () => { } ] as any)); - fixture.detectChanges(); - await openSelect('#dropdown-id'); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + 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([ { id: 'opt_2', name: 'option_2' }, { id: 'opt_4', name: 'option_4' } @@ -596,13 +537,12 @@ describe('DropdownCloudWidgetComponent', () => { 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; parentDropdown.value = undefined; widget.selectionChangedForField(parentDropdown); fixture.detectChanges(); - await openSelect('child-dropdown-id'); expect(widget.field.options).toEqual([]); }); @@ -615,16 +555,15 @@ describe('DropdownCloudWidgetComponent', () => { widget.selectionChangedForField(parentDropdown); fixture.detectChanges(); - await openSelect('child-dropdown-id'); - - const optOne: any = fixture.debugElement.query(By.css('[id="LO"]')); - const optTwo: any = fixture.debugElement.query(By.css('[id="MA"]')); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); + const allOptions = await dropdown.getOptions(); expect(jsonDataSpy).toHaveBeenCalledWith('fake-form-id', 'child-dropdown-id', { parentDropdown: 'mock-value' }); - expect(optOne.context.value).toBe('LO'); - expect(optOne.context.viewValue).toBe('LONDON'); - expect(optTwo.context.value).toBe('MA'); - expect(optTwo.context.viewValue).toBe('MANCHESTER'); + expect(await (await allOptions[0].host()).getAttribute('id')).toEqual('LO'); + expect(await allOptions[0].getText()).toEqual('LONDON'); + expect(await (await allOptions[1].host()).getAttribute('id')).toEqual('MA'); + expect(await allOptions[1].getText()).toEqual('MANCHESTER'); }); it('should reset previous child options if the rest url failed for a linked dropdown', async () => { @@ -640,7 +579,8 @@ describe('DropdownCloudWidgetComponent', () => { }; 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')); expect(widget.isRestApiFailed).toBe(false); @@ -649,7 +589,6 @@ describe('DropdownCloudWidgetComponent', () => { jsonDataSpy.and.returnValue(throwError('Failed to fetch options')); selectParentOption('GR'); - await openSelect('child-dropdown-id'); const failedErrorMsgElement2 = fixture.debugElement.query(By.css('.adf-dropdown-failed-message')); expect(widget.isRestApiFailed).toBe(true); @@ -658,7 +597,6 @@ describe('DropdownCloudWidgetComponent', () => { jsonDataSpy.and.returnValue(of(mockSecondRestDropdownOptions)); selectParentOption('IT'); - await openSelect('child-dropdown-id'); const failedErrorMsgElement3 = fixture.debugElement.query(By.css('.adf-dropdown-failed-message')); expect(widget.isRestApiFailed).toBe(false); @@ -708,28 +646,27 @@ describe('DropdownCloudWidgetComponent', () => { parentDropdown.value = 'GR'; widget.selectionChangedForField(parentDropdown); fixture.detectChanges(); - await openSelect('child-dropdown-id'); - const optOne: any = fixture.debugElement.query(By.css('[id="empty"]')); - const optTwo: any = fixture.debugElement.query(By.css('[id="ATH"]')); - const optThree: any = fixture.debugElement.query(By.css('[id="SKG"]')); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); + const allOptions = await dropdown.getOptions(); expect(widget.field.options).toEqual(mockConditionalEntries[0].options); - expect(optOne.context.value).toBe(undefined); - expect(optOne.context.viewValue).toBe('Choose one...'); - expect(optTwo.context.value).toBe('ATH'); - expect(optTwo.context.viewValue).toBe('Athens'); - expect(optThree.context.value).toBe('SKG'); - expect(optThree.context.viewValue).toBe('Thessaloniki'); + + expect(await (await allOptions[0].host()).getAttribute('id')).toEqual('empty'); + expect(await allOptions[0].getText()).toEqual('Choose one...'); + expect(await (await allOptions[1].host()).getAttribute('id')).toEqual('ATH'); + expect(await allOptions[1].getText()).toEqual('Athens'); + 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; parentDropdown.value = undefined; widget.selectionChangedForField(parentDropdown); fixture.detectChanges(); - await openSelect('child-dropdown-id'); expect(widget.field.options).toEqual([]); }); @@ -930,55 +867,49 @@ describe('DropdownCloudWidgetComponent', () => { it('should display options persisted from process variable', async () => { widget.field = getVariableDropdownWidget('variables.json-variable', 'response.people.players', 'playerId', 'playerFullName', mockProcessVariablesWithJson); fixture.detectChanges(); - await openSelect('variable-dropdown-id'); - - const optOne: any = fixture.debugElement.query(By.css('[id="player-1"]')); - const optTwo: any = fixture.debugElement.query(By.css('[id="player-2"]')); - const optThree: any = fixture.debugElement.query(By.css('[id="player-3"]')); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); + const allOptions = await dropdown.getOptions(); expect(widget.field.options.length).toEqual(3); - expect(optOne.context.value).toBe('player-1'); - expect(optOne.context.viewValue).toBe('Lionel Messi'); - expect(optTwo.context.value).toBe('player-2'); - expect(optTwo.context.viewValue).toBe('Cristiano Ronaldo'); - expect(optThree.context.value).toBe('player-3'); - expect(optThree.context.viewValue).toBe('Robert Lewandowski'); + expect(await (await allOptions[0].host()).getAttribute('id')).toEqual('player-1'); + expect(await allOptions[0].getText()).toEqual('Lionel Messi'); + expect(await (await allOptions[1].host()).getAttribute('id')).toEqual('player-2'); + expect(await allOptions[1].getText()).toEqual('Cristiano Ronaldo'); + expect(await (await allOptions[2].host()).getAttribute('id')).toEqual('player-3'); + expect(await allOptions[2].getText()).toEqual('Robert Lewandowski'); }); 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); fixture.detectChanges(); - await openSelect('variable-dropdown-id'); - - const optOne: any = fixture.debugElement.query(By.css('[id="PL"]')); - const optTwo: any = fixture.debugElement.query(By.css('[id="UK"]')); - const optThree: any = fixture.debugElement.query(By.css('[id="GR"]')); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); + const allOptions = await dropdown.getOptions(); expect(widget.field.options.length).toEqual(3); - expect(optOne.context.value).toBe('PL'); - expect(optOne.context.viewValue).toBe('Poland'); - expect(optTwo.context.value).toBe('UK'); - expect(optTwo.context.viewValue).toBe('United Kingdom'); - expect(optThree.context.value).toBe('GR'); - expect(optThree.context.viewValue).toBe('Greece'); + expect(await (await allOptions[0].host()).getAttribute('id')).toEqual('PL'); + expect(await allOptions[0].getText()).toEqual('Poland'); + expect(await (await allOptions[1].host()).getAttribute('id')).toEqual('UK'); + expect(await allOptions[1].getText()).toEqual('United Kingdom'); + expect(await (await allOptions[2].host()).getAttribute('id')).toEqual('GR'); + expect(await allOptions[2].getText()).toEqual('Greece'); }); it('should display default options if config options are NOT provided', async () => { widget.field = getVariableDropdownWidget('variables.json-default-variable', null, null, null, mockVariablesWithDefaultJson); fixture.detectChanges(); - await openSelect('variable-dropdown-id'); - - const optOne: any = fixture.debugElement.query(By.css('[id="default-pet-1"]')); - const optTwo: any = fixture.debugElement.query(By.css('[id="default-pet-2"]')); - const optThree: any = fixture.debugElement.query(By.css('[id="default-pet-3"]')); + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '.adf-select' })); + await dropdown.open(); + const allOptions = await dropdown.getOptions(); expect(widget.field.options.length).toEqual(3); - expect(optOne.context.value).toBe('default-pet-1'); - expect(optOne.context.viewValue).toBe('Dog'); - expect(optTwo.context.value).toBe('default-pet-2'); - expect(optTwo.context.viewValue).toBe('Cat'); - expect(optThree.context.value).toBe('default-pet-3'); - expect(optThree.context.viewValue).toBe('Parrot'); + expect(await (await allOptions[0].host()).getAttribute('id')).toEqual('default-pet-1'); + expect(await allOptions[0].getText()).toEqual('Dog'); + expect(await (await allOptions[1].host()).getAttribute('id')).toEqual('default-pet-2'); + expect(await allOptions[1].getText()).toEqual('Cat'); + expect(await (await allOptions[2].host()).getAttribute('id')).toEqual('default-pet-3'); + expect(await allOptions[2].getText()).toEqual('Parrot'); }); it('should return empty array and display error when path is incorrect', () => { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts index 5f71cb0f3d5..1bc3eb5f393 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts @@ -21,12 +21,17 @@ import { GroupCloudWidgetComponent } from './group-cloud.widget'; import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module'; import { TranslateModule } from '@ngx-translate/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', () => { let fixture: ComponentFixture; let widget: GroupCloudWidgetComponent; let element: HTMLElement; + let loader: HarnessLoader; beforeEach(() => { TestBed.configureTestingModule({ @@ -44,6 +49,7 @@ describe('GroupCloudWidgetComponent', () => { fixture = TestBed.createComponent(GroupCloudWidgetComponent); widget = fixture.componentInstance; element = fixture.nativeElement; + loader = TestbedHarnessEnvironment.loader(fixture); }); afterEach(() => { @@ -77,9 +83,9 @@ describe('GroupCloudWidgetComponent', () => { await fixture.whenStable(); fixture.detectChanges(); - const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement; - expect(tooltipElement).toBeTruthy(); - expect(tooltipElement.textContent.trim()).toBe('my custom tooltip'); + const tooltipElement = await loader.getHarness(MatTooltipHarness); + expect(await tooltipElement.isOpen()).toBeTruthy(); + expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip'); }); it('should hide tooltip', async () => { @@ -92,8 +98,8 @@ describe('GroupCloudWidgetComponent', () => { await fixture.whenStable(); fixture.detectChanges(); - const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')); - expect(tooltipElement).toBeFalsy(); + const tooltipElement = await loader.getHarness(MatTooltipHarness); + expect(await tooltipElement.isOpen()).toBeFalsy(); }); }); @@ -167,14 +173,11 @@ describe('GroupCloudWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const disabledFormField: HTMLElement = element.querySelector('.mat-form-field-disabled'); - expect(disabledFormField).toBeTruthy(); + const formField = await loader.getHarness(MatFormFieldHarness); + expect(await formField.isDisabled()).toBeTrue(); - fixture.detectChanges(); - await fixture.whenStable(); - - const disabledGroupChip: HTMLElement = element.querySelector('.mat-chip-disabled'); - expect(disabledGroupChip).toBeTruthy(); + const gtoupChip = await loader.getHarness(MatChipHarness); + expect(await gtoupChip.isDisabled()).toBeTrue(); }); it('should multi chips be disabled', async () => { @@ -191,15 +194,12 @@ describe('GroupCloudWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const disabledFormField: HTMLElement = element.querySelector('.mat-form-field-disabled'); - expect(disabledFormField).toBeTruthy(); - - fixture.detectChanges(); - await fixture.whenStable(); + const formField = await loader.getHarness(MatFormFieldHarness); + expect(await formField.isDisabled()).toBeTrue(); - const disabledGroupChips = element.querySelectorAll('.mat-chip-disabled'); - expect(disabledGroupChips.item(0)).toBeTruthy(); - expect(disabledGroupChips.item(1)).toBeTruthy(); + const groupChips = await loader.getAllHarnesses(MatChipHarness); + expect(await groupChips[0].isDisabled()).toBeTrue(); + expect(await groupChips[1].isDisabled()).toBeTrue(); }); it('should have disabled validation', () => { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts index 62cbc4f74f5..f436c0e1e80 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts @@ -23,13 +23,18 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module'; import { IdentityUserService } from '../../../../people/services/identity-user.service'; 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', () => { let fixture: ComponentFixture; let widget: PeopleCloudWidgetComponent; let element: HTMLElement; let identityUserService: IdentityUserService; + let loader: HarnessLoader; beforeEach(() => { TestBed.configureTestingModule({ @@ -49,6 +54,7 @@ describe('PeopleCloudWidgetComponent', () => { widget = fixture.componentInstance; element = fixture.nativeElement; spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(mockShepherdsPie); + loader = TestbedHarnessEnvironment.loader(fixture); }); afterEach(() => { @@ -105,9 +111,9 @@ describe('PeopleCloudWidgetComponent', () => { await fixture.whenStable(); fixture.detectChanges(); - const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')).nativeElement; - expect(tooltipElement).toBeTruthy(); - expect(tooltipElement.textContent.trim()).toBe('my custom tooltip'); + const tooltipElement = await loader.getHarness(MatTooltipHarness); + expect(await tooltipElement.isOpen()).toBeTruthy(); + expect(await tooltipElement.getTooltipText()).toEqual('my custom tooltip'); }); it('should hide tooltip', async () => { @@ -120,8 +126,8 @@ describe('PeopleCloudWidgetComponent', () => { await fixture.whenStable(); fixture.detectChanges(); - const tooltipElement = fixture.debugElement.query(By.css('.mat-tooltip')); - expect(tooltipElement).toBeFalsy(); + const tooltipElement = await loader.getHarness(MatTooltipHarness); + expect(await tooltipElement.isOpen()).toBeFalsy(); }); }); @@ -194,16 +200,12 @@ describe('PeopleCloudWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); - const disabledFormField: HTMLElement = element.querySelector('.mat-form-field-disabled'); - expect(disabledFormField).toBeTruthy(); + const formField = await loader.getHarness(MatFormFieldHarness); + expect(await formField.isDisabled()).toBeTrue(); - fixture.detectChanges(); - await fixture.whenStable(); - - const disabledPeopleChip: HTMLElement = element.querySelector('.mat-chip-disabled'); - expect(disabledPeopleChip).toBeTruthy(); + const peopleChip = await loader.getHarness(MatChipHarness); + expect(await peopleChip.isDisabled()).toBeTrue(); }); it('should multi chips be disabled', async () => { @@ -218,17 +220,12 @@ describe('PeopleCloudWidgetComponent', () => { }); fixture.detectChanges(); - await fixture.whenStable(); - - const disabledFormField: HTMLElement = element.querySelector('.mat-form-field-disabled'); - expect(disabledFormField).toBeTruthy(); - - fixture.detectChanges(); - await fixture.whenStable(); + const formField = await loader.getHarness(MatFormFieldHarness); + expect(await formField.isDisabled()).toBeTrue(); - const disabledPeopleChips = element.querySelectorAll('.mat-chip-disabled'); - expect(disabledPeopleChips.item(0)).toBeTruthy(); - expect(disabledPeopleChips.item(1)).toBeTruthy(); + const peopleChip = await loader.getAllHarnesses(MatChipHarness); + expect(await peopleChip[0].isDisabled()).toBeTrue(); + expect(await peopleChip[1].isDisabled()).toBeTrue(); }); it('should have disabled validation', () => { diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.spec.ts index a6e4cc278fc..3997de89c04 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-assignment-filter/task-assignment-filter.component.spec.ts @@ -28,11 +28,16 @@ import { By } from '@angular/platform-browser'; import { DebugElement, SimpleChange } from '@angular/core'; import { mockFoodUsers } from '../../../../people/mock/people-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', () => { let component: TaskAssignmentFilterCloudComponent; let fixture: ComponentFixture; let identityUserService: IdentityUserService; + let loader: HarnessLoader; /** * select the assignment type @@ -79,24 +84,24 @@ describe('TaskAssignmentFilterComponent', () => { type: 'assignment', attributes: { assignedUsers: 'assignedUsers', candidateGroups: 'candidateGroups' } }; + loader = TestbedHarnessEnvironment.loader(fixture); fixture.detectChanges(); }); afterEach(() => fixture.destroy()); - it('should display all available assignment types', () => { - const assignmentTypeSelect: DebugElement = fixture.debugElement.query(By.css(`[data-automation-id="adf-task-assignment-filter-select"]`)); - assignmentTypeSelect.nativeElement.click(); - fixture.detectChanges(); + it('should display all available assignment types', async () => { + const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '[data-automation-id="adf-task-assignment-filter-select"]' })); + await dropdown.open(); - const assignmentTypeOptions: DebugElement[] = fixture.debugElement.queryAll(By.css('mat-option')); + const assignmentTypeOptions = await dropdown.getOptions(); expect(assignmentTypeOptions.length).toEqual(5); - expect(assignmentTypeOptions[0].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.NONE'); - expect(assignmentTypeOptions[1].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.UNASSIGNED'); - expect(assignmentTypeOptions[2].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.ASSIGNED_TO'); - expect(assignmentTypeOptions[3].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.CURRENT_USER'); - expect(assignmentTypeOptions[4].nativeElement.innerText).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.CANDIDATE_GROUPS'); + expect(await assignmentTypeOptions[0].getText()).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.NONE'); + expect(await assignmentTypeOptions[1].getText()).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.UNASSIGNED'); + expect(await assignmentTypeOptions[2].getText()).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.ASSIGNED_TO'); + expect(await assignmentTypeOptions[3].getText()).toEqual('ADF_CLOUD_TASK_ASSIGNMENT_FILTER.CURRENT_USER'); + 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', () => { @@ -124,11 +129,11 @@ describe('TaskAssignmentFilterComponent', () => { expect(candidateGroups).toBeTruthy(); }); - it('should have floating labels when values are present', () => { - const inputLabelsNodes = document.querySelectorAll('mat-form-field'); + it('should have floating labels when values are present', async () => { + const inputLabelsNodes = await loader.getAllHarnesses(MatFormFieldHarness); - inputLabelsNodes.forEach(labelNode => { - expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto'); + inputLabelsNodes.forEach(async labelNode => { + expect(await labelNode.isLabelFloating()).toBeTruthy(); }); }); }); diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts index ab8e5401994..e0958549f24 100644 --- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts @@ -33,6 +33,9 @@ import { } from '../mocks/task-details-cloud.mock'; import { TranslateModule } from '@ngx-translate/core'; 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', () => { let component: TaskHeaderCloudComponent; @@ -44,6 +47,7 @@ describe('TaskHeaderCloudComponent', () => { let getCandidateUsersSpy: jasmine.Spy; let isTaskEditableSpy: jasmine.Spy; let alfrescoApiService: AlfrescoApiService; + let loader: HarnessLoader; const mockCandidateUsers = ['mockuser1', 'mockuser2', 'mockuser3']; const mockCandidateGroups = ['mockgroup1', 'mockgroup2', 'mockgroup3']; @@ -82,6 +86,7 @@ describe('TaskHeaderCloudComponent', () => { isTaskEditableSpy = spyOn(taskCloudService, 'isTaskEditable').and.returnValue(true); getCandidateUsersSpy = spyOn(taskCloudService, 'getCandidateUsers').and.returnValue(of(mockCandidateUsers)); getCandidateGroupsSpy = spyOn(taskCloudService, 'getCandidateGroups').and.returnValue(of(mockCandidateGroups)); + loader = TestbedHarnessEnvironment.loader(fixture); }); afterEach(() => { @@ -130,19 +135,14 @@ describe('TaskHeaderCloudComponent', () => { it('should display priority with default values', async () => { 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'); - expect(priorityEl).toBeDefined(); - expect(priorityEl).not.toBeNull(); - - priorityEl.click(); - 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'); + const options = await dropdown.getOptions(); + expect(await options[0].getText()).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.NONE'); + 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'); + expect(await options[3].getText()).toEqual('ADF_CLOUD_TASK_LIST.PROPERTIES.PRIORITY_VALUES.HIGH'); }); it('should display due date', async () => {