Skip to content

Commit

Permalink
AAE-20146 Using Material Harness in process service cloud unit tests (#…
Browse files Browse the repository at this point in the history 
…9517)

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

* AAE-20146: Removed commented code

* AAE-20146: Fixing lint issues
  • Loading branch information
@ehsan-2019
ehsan-2019 authored Apr 9, 2024
1 parent bc07c09 commit b081800
Show file tree
Hide file tree
Showing 9 changed files with 288 additions and 349 deletions.
50 changes: 31 additions & 19 deletions ...ocess-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<DateRangeFilterComponent>;
let service: DateRangeFilterService;
let loader: HarnessLoader;

beforeEach(() => {
TestBed.configureTestingModule({
Expand All @@ -48,6 +54,7 @@ describe('DateRangeFilterComponent', () => {
type: 'dateRange',
options: null
};
loader = TestbedHarnessEnvironment.loader(fixture);
fixture.detectChanges();
});

Expand All @@ -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();
});

Expand Down Expand Up @@ -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();
});
});
63 changes: 28 additions & 35 deletions ...s-services-cloud/src/lib/form/components/form-definition-selector-cloud.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<FormDefinitionSelectorCloudComponent>;
let service: FormDefinitionSelectorCloudService;
let element: HTMLElement;
let getFormsSpy: jasmine.Spy;
let loader: HarnessLoader;

beforeEach(() => {
TestBed.configureTestingModule({
Expand All @@ -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');
});
});
23 changes: 13 additions & 10 deletions ...ud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -123,6 +126,7 @@ describe('AttachFileCloudWidgetComponent', () => {
let localizedDataPipe: LocalizedDatePipe;
let newVersionUploaderService: NewVersionUploaderService;
let notificationService: NotificationService;
let loader: HarnessLoader;

const createUploadWidgetField = (
form: FormModel,
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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();
});
});
});
34 changes: 16 additions & 18 deletions lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {

Expand All @@ -31,6 +34,7 @@ describe('DateWidgetComponent', () => {
let element: HTMLElement;
let adapter: DateAdapter<Date>;
let form: FormModel;
let loader: HarnessLoader;

beforeEach(() => {
TestBed.configureTestingModule({
Expand All @@ -48,6 +52,7 @@ describe('DateWidgetComponent', () => {

widget = fixture.componentInstance;
element = fixture.nativeElement;
loader = TestbedHarnessEnvironment.loader(fixture);
});

it('should setup min value for date picker', () => {
Expand Down Expand Up @@ -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();
});
});

Expand Down
Loading

0 comments on commit b081800

Please sign in to comment.