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

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 { MatListOption, MatSelectionList } from '@angular/material/list';
+import { MatSelectionList } from '@angular/material/list';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 import { of, Subject } from 'rxjs';
@@ -30,6 +30,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;
@@ -91,8 +92,8 @@ describe('CategoriesManagementComponent', () => {
      *
      * @returns list of material option element
      */
-    function getExistingCategoriesList(): MatListOption[] {
-        return fixture.debugElement.queryAll(By.directive(MatListOption))?.map((debugElem) => debugElem.componentInstance);
+    function getExistingCategoriesList(): Promise<MatListOptionHarness[]> {
+        return loader.getAllHarnesses(MatListOptionHarness);
     }
 
     /**
@@ -159,7 +160,7 @@ describe('CategoriesManagementComponent', () => {
      * @returns native element
      */
     function getCreateCategoryLabel(): HTMLSpanElement {
-        return fixture.debugElement.query(By.css('.adf-existing-categories-panel span'))?.nativeElement;
+        return fixture.debugElement.query(By.css('.adf-existing-categories-panel span.adf-create-category-label'))?.nativeElement;
     }
 
     /**
@@ -304,8 +305,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');
@@ -320,11 +321,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');
 
             expect(getCreateCategoryLabel()).toBeUndefined();
+
         }));
 
         it('should not disable existing categories', fakeAsync(() => {
@@ -333,12 +335,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]._handleClick();
+            const options = await getExistingCategoriesList();
+            await options[0].select();
 
             expect(component.categories.length).toBe(3);
             expect(component.categories[2].name).toBe('testCat');
@@ -347,13 +348,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]._handleClick();
-            fixture.detectChanges();
+
+            const options = await getExistingCategoriesList();
+            await options[0].select();
 
             const categoriesChangeSpy = spyOn(component.categoriesChange, 'emit').and.callThrough();
             const removeCategoryButtons = getRemoveCategoryButtons();
@@ -447,9 +447,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();
         }));
@@ -468,8 +468,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();

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'

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',

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

@@ -131,8 +131,8 @@ describe('GroupCloudWidgetComponent', () => {
             expect(element.querySelector('.adf-invalid')).toBeTruthy();
         });
     });
-//eslint-disable-next-line
-    xdescribe('when is readOnly', () => {
+
+    describe('when is readOnly', () => {
 
         const readOnly = true;
 

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

@@ -160,8 +160,8 @@ describe('PeopleCloudWidgetComponent', () => {
             expect(element.querySelector('.adf-invalid')).toBeTruthy();
         });
     });
-//eslint-disable-next-line
-    xdescribe('when is readOnly', () => {
+
+    describe('when is readOnly', () => {
 
         const readOnly = true;
 

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;
@@ -50,9 +51,7 @@ describe('RichTextEditorComponent', () => {
         TestBed.configureTestingModule({
             declarations: [RichTextEditorComponent]
         }).compileComponents();
-    });
 
-    beforeEach(() => {
         fixture = TestBed.createComponent(RichTextEditorComponent);
         component = fixture.componentInstance;
         debugElement = fixture.debugElement;
@@ -75,47 +74,49 @@ describe('RichTextEditorComponent', () => {
         await fixture.whenStable();
         expect(component.dynamicId).toContain('editorjs');
     });
-// eslint-disable-next-line
-    xit('should get editorjs data by calling getEditorContent', async () => {
-        fixture.detectChanges();
-        await fixture.whenStable();
-        spyOn(component.editorInstance, 'save').and.returnValue(Promise.resolve(mockEditorData) as any);
-        const savedEditorData = await component.getEditorContent();
-        expect(savedEditorData).toEqual(mockEditorData);
-    });
-// eslint-disable-next-line
-    xit('should destroy editor instance on ngOnDestroy', async () => {
-        fixture.detectChanges();
-        await fixture.whenStable();
-        const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
-        component.ngOnDestroy();
-        expect(destroyEditorSpy).toHaveBeenCalledTimes(1);
-        expect(destroyEditorSpy).toHaveBeenCalled();
-    });
-// eslint-disable-next-line
-    xit('should not destroy editor instance on ngOnDestroy if editor is not ready', async () => {
-        fixture.detectChanges();
-        await fixture.whenStable();
-        const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
-        component.isReady = false;
-        component.ngOnDestroy();
-        expect(destroyEditorSpy).not.toHaveBeenCalled();
+
+    describe('editorjs', () => {
+        beforeEach((done) => {
+            fixture.detectChanges();
+            component.outputData$.pipe(take(1)).subscribe(() => {
+                done();
+            });
+        });
+
+        it('should get editorjs data by calling getEditorContent', async () => {
+            spyOn(component.editorInstance, 'save').and.returnValue(Promise.resolve(mockEditorData) as any);
+            const savedEditorData = await component.getEditorContent();
+            expect(savedEditorData).toEqual(mockEditorData);
+        });
+
+        it('should destroy editor instance on ngOnDestroy', () => {
+            const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
+            component.ngOnDestroy();
+            expect(destroyEditorSpy).toHaveBeenCalledTimes(1);
+            expect(destroyEditorSpy).toHaveBeenCalled();
+        });
+
+        it('should not destroy editor instance on ngOnDestroy if editor is not ready', () => {
+            const destroyEditorSpy = spyOn(component.editorInstance, 'destroy');
+            component.isReady = false;
+            component.ngOnDestroy();
+            expect(destroyEditorSpy).not.toHaveBeenCalled();
+        });
     });
 
     it('should add readonly class if readOnly is set to true', async () => {
         component.readOnly = true;
         fixture.detectChanges();
-        await fixture.whenStable();
+
         const editorEl = debugElement.query(By.css(cssSelectors.editorJsElement));
         expect(editorEl.nativeElement.classList).toContain('readonly');
     });
 
     it('should not add readonly class if readOnly is set to false', async () => {
         component.readOnly = false;
         fixture.detectChanges();
-        await fixture.whenStable();
+
         const editorEl = debugElement.query(By.css(cssSelectors.editorJsElement));
         expect(editorEl.nativeElement.classList).not.toContain('readonly');
     });
-
 });

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

@@ -127,8 +127,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 priorityEl = fixture.debugElement.nativeElement.querySelector('[data-automation-id="header-priority"] .mat-mdc-select-trigger');
@@ -406,29 +406,28 @@ describe('TaskHeaderCloudComponent', () => {
     });
 
     describe('Task with candidates', () => {
-        // eslint-disable-next-line
-        xit('should display candidate groups', async () => {
+        it('should display candidate groups', async () => {
             component.ngOnChanges();
             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 () => {

lib/process-services/src/lib/form/start-form.component.spec.ts

@@ -358,8 +358,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;
@@ -370,7 +370,7 @@ describe('StartFormComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const titleElement = fixture.debugElement.nativeElement.querySelector('mat-mdc-card-title>h2');
+            const titleElement = fixture.debugElement.nativeElement.querySelector('.mdl-card__title-text');
             const actionButtons = fixture.debugElement.nativeElement.querySelectorAll('.mat-mdc-button');
 
             expect(titleElement.innerText.trim()).toEqual('Mock Title');

lib/process-services/src/lib/process-list/components/start-process.component.spec.ts

@@ -333,16 +333,15 @@ 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();
 
             fixture.detectChanges();
             fixture.componentInstance.inputAutocomplete.openPanel();
             fixture.detectChanges();
             await fixture.whenStable();
-            const options: any = fixture.debugElement.queryAll(By.css('.mdc-list-item__primary-textk'));
+            const options: any = fixture.debugElement.queryAll(By.css('mat-option'));
 
 
             expect(options.length).toBe(2);