From 5357bc6c0e009b35fedcbcfbd2618443255c12e7 Mon Sep 17 00:00:00 2001 From: Wojciech Duda <69160975+wojd0@users.noreply.github.com> Date: Tue, 9 Jan 2024 13:28:46 +0100 Subject: [PATCH] remaining unit test fixes for the Angular 15 update (#9218) * removing excludes from working tests * test fixes for CategoriesManagementComponent * [ci:force] reenabling tests / fixes * fixes in process-services-cloud * change html element type * fix selector in StartProcessComponent --- .../categories-management.component.spec.ts | 43 +++++++++---------- .../date-cell/date-cell.component.spec.ts | 8 ++-- .../date-time/date-time.widget.spec.ts | 4 +- .../rich-text-editor.component.spec.ts | 3 +- .../task-header-cloud.component.spec.ts | 24 +++++------ .../start-form/start-form.component.spec.ts | 4 +- .../start-process.component.spec.ts | 3 +- 7 files changed, 43 insertions(+), 46 deletions(-) diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts index 908f90bb873..5efb1455fce 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts @@ -19,7 +19,7 @@ import { Category, CategoryPaging, ResultNode, ResultSetPaging } from '@alfresco import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { Validators } from '@angular/forms'; import { MatError } from '@angular/material/form-field'; -import { MatList } from '@angular/material/list'; +import { MatSelectionList } from '@angular/material/list'; import { By } from '@angular/platform-browser'; import { of, Subject } from 'rxjs'; import { ContentTestingModule } from '../../testing/content.testing.module'; @@ -29,6 +29,7 @@ import { CategoriesManagementComponent } from './categories-management.component import { HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; import { MatProgressSpinnerHarness } from '@angular/material/progress-spinner/testing'; +import { MatListOptionHarness } from '@angular/material/list/testing'; describe('CategoriesManagementComponent', () => { let loader: HarnessLoader; @@ -90,8 +91,8 @@ describe('CategoriesManagementComponent', () => { * * @returns list of material option element */ - function getExistingCategoriesList(): HTMLElement[] { - return fixture.debugElement.queryAll(By.css('.adf-category'))?.map((debugElem) => debugElem.nativeElement); + function getExistingCategoriesList(): Promise { + return loader.getAllHarnesses(MatListOptionHarness); } /** @@ -158,7 +159,7 @@ describe('CategoriesManagementComponent', () => { * @returns native element */ function getCreateCategoryLabel(): HTMLSpanElement { - return fixture.debugElement.query(By.css('.adf-create-category-label'))?.nativeElement; + return fixture.debugElement.query(By.css('.adf-existing-categories-panel span.adf-create-category-label'))?.nativeElement; } /** @@ -303,8 +304,8 @@ describe('CategoriesManagementComponent', () => { it('should have no required validator set for category control', () => { expect(component.categoryNameControl.hasValidator(Validators.required)).toBeFalse(); }); - //eslint-disable-next-line - xit('should display validation error when searching for empty category', fakeAsync(() => { + + it('should display validation error when searching for empty category', fakeAsync(() => { typeCategory(' '); expect(getFirstError()).toBe('CATEGORIES_MANAGEMENT.ERRORS.EMPTY_CATEGORY'); @@ -319,11 +320,12 @@ describe('CategoriesManagementComponent', () => { expect(component.categoryNameControlVisible).toBeFalse(); expect(component.categories).toEqual([]); }); - // eslint-disable-next-line - xit('should not display create category label', fakeAsync(() => { + + it('should not display create category label', fakeAsync(async () => { typeCategory('test'); fixture.detectChanges(); expect(getCreateCategoryLabel()).toBeUndefined(); + })); it('should not disable existing categories', fakeAsync(() => { @@ -332,12 +334,11 @@ describe('CategoriesManagementComponent', () => { expect(getSelectionList().disabled).toBeFalse(); })); // eslint-disable-next-line - xit('should add selected category to categories list and remove from existing categories', fakeAsync(() => { + it('should add selected category to categories list and remove from existing categories', fakeAsync(async () => { const categoriesChangeSpy = spyOn(component.categoriesChange, 'emit').and.callThrough(); typeCategory('test'); - // const options = getExistingCategoriesList(); - // eslint-disable-next-line no-underscore-dangle - options[0].click(); + const options = await getExistingCategoriesList(); + await options[0].select(); expect(component.categories.length).toBe(3); expect(component.categories[2].name).toBe('testCat'); @@ -346,13 +347,12 @@ describe('CategoriesManagementComponent', () => { discardPeriodicTasks(); flush(); })); - // eslint-disable-next-line - xit('should remove selected category from categories list and add it back to existing categories', fakeAsync(() => { + + it('should remove selected category from categories list and add it back to existing categories', fakeAsync(async () => { typeCategory('test'); - // const options = getExistingCategoriesList(); - // eslint-disable-next-line no-underscore-dangle - options[0].click(); - fixture.detectChanges(); + + const options = await getExistingCategoriesList(); + await options[0].select(); const categoriesChangeSpy = spyOn(component.categoriesChange, 'emit').and.callThrough(); const removeCategoryButtons = getRemoveCategoryButtons(); @@ -454,9 +454,9 @@ describe('CategoriesManagementComponent', () => { expect(categoriesChangeSpy).toHaveBeenCalledOnceWith(component.categories); })); - it('should clear input after category is created', fakeAsync(() => { + it('should clear input after category is created', fakeAsync(async () => { createCategory('test'); - expect(getExistingCategoriesList()).toEqual([]); + expect(await getExistingCategoriesList()).toEqual([]); expect(component.categoryNameControl.value).toBe(''); expect(component.categoryNameControl.untouched).toBeTrue(); })); @@ -475,8 +475,7 @@ describe('CategoriesManagementComponent', () => { })); describe('Errors', () => { - //eslint-disable-next-line - xit('should display validation error when searching for empty category', fakeAsync(() => { + it('should display validation error when searching for empty category', fakeAsync(() => { typeCategory(' '); component.categoryNameControl.markAsTouched(); fixture.detectChanges(); diff --git a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts index 32634902bf6..4d158e8d166 100644 --- a/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts +++ b/lib/core/src/lib/datatable/components/date-cell/date-cell.component.spec.ts @@ -110,8 +110,8 @@ describe('DateCellComponent', () => { checkDisplayedDate(expectedDate); checkDisplayedTooltip(expectedTooltip); }); - //eslint-disable-next-line - xit('should display date and tooltip with based on appConfig values if dateConfig is NOT provided', () => { + + it('should display date and tooltip with based on appConfig values if dateConfig is NOT provided', () => { const mockDateConfig: DateConfig = {}; const expectedDate = 'Oct 25, 2023'; const expectedTooltip = 'October 25, 2023 at 12:00:00 AM GMT+0'; @@ -164,8 +164,8 @@ describe('DateCellComponent', () => { renderDateCell(mockDateConfig, yesterday, mockTooltip); checkDisplayedDate(expectedDate); }); - //eslint-disable-next-line - xit('should display date with column format if dateConfig format is not provided', () => { + + it('should display date with column format if dateConfig format is not provided', () => { component.column = mockColumn; const mockDateConfig: DateConfig = { tooltipFormat: 'short' diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts index f615058e5be..c7fd5ae311b 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts @@ -191,8 +191,8 @@ describe('DateTimeWidgetComponent', () => { expect(field.isValid).toBeFalse(); expect(field.validationSummary.message).toBe('D-M-YYYY hh:mm A'); }); - // eslint-disable-next-line - xit('should process direct keyboard input', async () => { + + it('should process direct keyboard input', async () => { const field = new FormFieldModel(form, { id: 'date-field-id', name: 'date-name', diff --git a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.spec.ts b/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.spec.ts index 3bea180e3fc..a60c73c8de5 100644 --- a/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.spec.ts +++ b/lib/process-services-cloud/src/lib/rich-text-editor/rich-text-editor.component.spec.ts @@ -20,6 +20,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { RichTextEditorComponent } from './rich-text-editor.component'; +import { take } from 'rxjs'; describe('RichTextEditorComponent', () => { let component: RichTextEditorComponent; @@ -56,9 +57,7 @@ describe('RichTextEditorComponent', () => { await TestBed.configureTestingModule({ declarations: [RichTextEditorComponent] }).compileComponents(); - }); - beforeEach(() => { fixture = TestBed.createComponent(RichTextEditorComponent); component = fixture.componentInstance; debugElement = fixture.debugElement; 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 f8252e0a907..c834899c062 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 @@ -125,8 +125,8 @@ describe('TaskHeaderCloudComponent', () => { const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]')); expect(statusEl.nativeElement.value).toBe('ASSIGNED'); }); - //eslint-disable-next-line - xit('should display priority with default values', async () => { + + it('should display priority with default values', async () => { fixture.detectChanges(); const dropdown = await loader.getHarness(MatSelectHarness); await dropdown.open(); @@ -413,23 +413,23 @@ describe('TaskHeaderCloudComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const candidateGroup1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockgroup1"] span'); - const candidateGroup2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockgroup2"] span'); + const candidateGroup1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockgroup1"]'); + const candidateGroup2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockgroup2"]'); expect(getCandidateGroupsSpy).toHaveBeenCalled(); - expect(candidateGroup1.innerText).toBe('mockgroup1'); - expect(candidateGroup2.innerText).toBe('mockgroup2'); + expect(candidateGroup1.innerText).toContain('mockgroup1'); + expect(candidateGroup2.innerText).toContain('mockgroup2'); }); - //eslint-disable-next-line - xit('should display candidate user', async () => { + + it('should display candidate user', async () => { component.ngOnChanges(); fixture.detectChanges(); await fixture.whenStable(); - const candidateUser1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockuser1"] span'); - const candidateUser2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockuser2"] span'); + const candidateUser1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockuser1"]'); + const candidateUser2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockuser2"]'); expect(getCandidateUsersSpy).toHaveBeenCalled(); - expect(candidateUser1.innerText).toBe('mockuser1'); - expect(candidateUser2.innerText).toBe('mockuser2'); + expect(candidateUser1.innerText).toContain('mockuser1'); + expect(candidateUser2.innerText).toContain('mockuser2'); }); it('should display placeholder if no candidate groups', async () => { diff --git a/lib/process-services/src/lib/form/start-form/start-form.component.spec.ts b/lib/process-services/src/lib/form/start-form/start-form.component.spec.ts index 5cb0de9655a..2d21ecda73a 100644 --- a/lib/process-services/src/lib/form/start-form/start-form.component.spec.ts +++ b/lib/process-services/src/lib/form/start-form/start-form.component.spec.ts @@ -373,8 +373,8 @@ describe('StartFormComponent', () => { expect(tabField2.name).toBe('Tab 2'); expect(tabsWidgetElement).toBeTruthy(); }); - // eslint-disable-next-line - xit('should define title and [custom-action-buttons]', async () => { + + it('should define title and [custom-action-buttons]', async () => { getStartFormSpy.and.returnValue(of(startMockFormWithTab)); component.processDefinitionId = exampleId1; component.showOutcomeButtons = true; diff --git a/lib/process-services/src/lib/process-list/components/start-process/start-process.component.spec.ts b/lib/process-services/src/lib/process-list/components/start-process/start-process.component.spec.ts index d1bbc843c1a..8058bb67d02 100644 --- a/lib/process-services/src/lib/process-list/components/start-process/start-process.component.spec.ts +++ b/lib/process-services/src/lib/process-list/components/start-process/start-process.component.spec.ts @@ -332,8 +332,7 @@ describe('StartProcessComponent', () => { expect(getDefinitionsSpy).toHaveBeenCalledWith(123); }); - //eslint-disable-next-line - xit('should display the correct number of processes in the select list', async () => { + it('should display the correct number of processes in the select list', async () => { const selectElement = fixture.nativeElement.querySelector('button#adf-select-process-dropdown'); selectElement.click();