AAE-21233 Enable no angular material selectors rule for adf (#9430)

* AAE-20779 enable material selectors rule

* AAE-20779 fixes in units in already covered libs

* AAE-20779 simplified local package linking

.eslintrc.js

@@ -183,6 +183,13 @@ module.exports = {
             files: ['*.html'],
             extends: ['plugin:@angular-eslint/template/recommended'],
             rules: {}
+        },
+        {
+            files: ['*.spec.ts'],
+            plugins: ['@alfresco/eslint-angular'],
+            rules: {
+                '@alfresco/eslint-angular/no-angular-material-selectors': 'error'
+            }
         }
     ]
 };

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts

@@ -751,7 +751,7 @@ describe('ContentMetadataComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const basicPropertiesGroup = fixture.debugElement.query(By.css('.adf-metadata-grouped-properties-container mat-expansion-panel'));
+            const basicPropertiesGroup = fixture.debugElement.query(By.css('.adf-metadata-grouped-properties-container .adf-content-metadata-panel'));
             expect(basicPropertiesGroup).toBeNull();
         });
 
@@ -764,7 +764,7 @@ describe('ContentMetadataComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
 
-            const basicPropertiesGroup = fixture.debugElement.query(By.css('.adf-metadata-grouped-properties-container mat-expansion-panel'));
+            const basicPropertiesGroup = fixture.debugElement.query(By.css('.adf-metadata-grouped-properties-container .adf-content-metadata-panel'));
             expect(basicPropertiesGroup).toBeDefined();
         });
 

lib/content-services/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.spec.ts

@@ -116,7 +116,7 @@ describe('UserIconColumnComponent', () => {
         component.selected = true;
         component.ngOnInit();
         fixture.detectChanges();
-        expect(element.querySelector('mat-icon[svgIcon="selected"]')).toBeDefined();
+        expect(element.querySelector('.adf-people-select-icon[svgIcon="selected"]')).toBeDefined();
         expect(component.isSelected).toBe(true);
     });
 });

lib/core/src/lib/datatable/components/icon-cell/icon-cell.component.spec.ts

@@ -20,20 +20,23 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { IconCellComponent } from './icon-cell.component';
 import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
 import { ObjectDataColumn } from '../../data/object-datacolumn.model';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatIconHarness } from '@angular/material/icon/testing';
 
 describe('IconCellComponent', () => {
     let component: IconCellComponent;
     let fixture: ComponentFixture<IconCellComponent>;
-    const getIconElement = () => fixture.debugElement.nativeElement.querySelector('mat-icon');
+    let loader: HarnessLoader;
-    const renderAndCheckResult = (value: any, expectedOccurrence: boolean, expectedIconName?: string) => {
+    const renderAndCheckResult = async (value: any, expectedOccurrence: boolean, expectedIconName?: string) => {
         component.value$.next(value);
         fixture.detectChanges();
 
-        const iconElement = getIconElement();
+        const icon = await loader.getHarnessOrNull(MatIconHarness);
 
-        expectedOccurrence ? expect(iconElement).toBeTruthy() : expect(iconElement).toBeFalsy();
+        expectedOccurrence ? expect(icon).not.toBeNull() : expect(icon).toBeNull();
         if (expectedIconName) {
-            expect(iconElement.textContent.trim()).toBe(expectedIconName);
+            expect(await icon?.getName()).toBe(expectedIconName);
         }
     };
 
@@ -44,6 +47,7 @@ describe('IconCellComponent', () => {
 
         fixture = TestBed.createComponent(IconCellComponent);
         component = fixture.componentInstance;
+        loader = TestbedHarnessEnvironment.loader(fixture);
     });
 
     describe('Initialization', () => {
@@ -80,23 +84,23 @@ describe('IconCellComponent', () => {
     });
 
     describe('UI', () => {
-        it('should render icon element in case of non-empty string (icon name validation NOT included)', () => {
+        it('should render icon element in case of non-empty string (icon name validation NOT included)', async () => {
-            renderAndCheckResult('group', true, 'group');
+            await renderAndCheckResult('group', true, 'group');
-            renderAndCheckResult('groupe', true, 'groupe');
+            await renderAndCheckResult('groupe', true, 'groupe');
-            renderAndCheckResult('0', true, '0');
+            await renderAndCheckResult('0', true, '0');
-            renderAndCheckResult('false', true, 'false');
+            await renderAndCheckResult('false', true, 'false');
         });
 
-        it('should NOT render icon element in case of empty string', () => {
+        it('should NOT render icon element in case of empty string', async () => {
-            renderAndCheckResult('', false);
+            await renderAndCheckResult('', false);
         });
 
-        it('should NOT render icon element in case of type different than string', () => {
+        it('should NOT render icon element in case of type different than string', async () => {
-            renderAndCheckResult(0, false);
+            await renderAndCheckResult(0, false);
-            renderAndCheckResult({}, false);
+            await renderAndCheckResult({}, false);
-            renderAndCheckResult(null, false);
+            await renderAndCheckResult(null, false);
-            renderAndCheckResult(undefined, false);
+            await renderAndCheckResult(undefined, false);
-            renderAndCheckResult(NaN, false);
+            await renderAndCheckResult(NaN, false);
         });
     });
 });

lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.spec.ts

@@ -36,12 +36,10 @@ describe('UnsavedChangesDialog', () => {
         let closeIconButton: DebugElement;
 
         beforeEach(() => {
-           closeIconButton = fixture.debugElement.query(By.css(
+            closeIconButton = fixture.debugElement.query(By.css('[data-automation-id="adf-unsaved-changes-dialog-close-button"]'));
-               '[data-automation-id="adf-unsaved-changes-dialog-close-button"]'
-           ));
         });
 
-        it('should have assigned mat-dialog-close with false as result', () => {
+        it('should have assigned dialog close button with false as result', () => {
             expect(closeIconButton.injector.get(MatDialogClose).dialogResult).toBeFalse();
         });
 
@@ -51,18 +49,21 @@ describe('UnsavedChangesDialog', () => {
     });
 
     describe('Cancel button', () => {
-        it('should have assigned mat-dialog-close with false as result', () => {
+        it('should have assigned dialog close button with false as result', () => {
-            expect(fixture.debugElement.query(By.css(
+            expect(
-                '[data-automation-id="adf-unsaved-changes-dialog-cancel-button"]'
+                fixture.debugElement.query(By.css('[data-automation-id="adf-unsaved-changes-dialog-cancel-button"]')).injector.get(MatDialogClose)
-            )).injector.get(MatDialogClose).dialogResult).toBeFalse();
+                    .dialogResult
+            ).toBeFalse();
         });
     });
 
     describe('Discard changes button', () => {
-        it('should have assigned mat-dialog-close with true as result', () => {
+        it('should have assigned dialog close button with true as result', () => {
-            expect(fixture.debugElement.query(By.css(
+            expect(
-                '[data-automation-id="adf-unsaved-changes-dialog-discard-changes-button"]'
+                fixture.debugElement
-            )).injector.get(MatDialogClose).dialogResult).toBeTrue();
+                    .query(By.css('[data-automation-id="adf-unsaved-changes-dialog-discard-changes-button"]'))
+                    .injector.get(MatDialogClose).dialogResult
+            ).toBeTrue();
         });
     });
 });

lib/eslint-angular/main.js

@@ -0,0 +1,8 @@
+require('ts-node').register({
+    compilerOptions: {
+        module: 'commonjs',
+        target: 'es2019',
+    },
+});
+
+module.exports = require('./index.ts');

package-lock.json

@@ -47,6 +47,7 @@
         "zone.js": "~0.11.4"
       },
       "devDependencies": {
+        "@alfresco/eslint-plugin-eslint-angular": "file:lib/eslint-angular",
         "@angular-devkit/build-angular": "14.1.3",
         "@angular-devkit/schematics": "~14.2.12",
         "@angular-eslint/eslint-plugin": "15.2.1",
@@ -158,6 +159,11 @@
         "node": ">=6.0.0"
       }
     },
+    "lib/eslint-angular": {
+      "name": "@alfresco/eslint-plugin-eslint-angular",
+      "version": "6.7.1",
+      "license": "Apache-2.0"
+    },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
@@ -167,6 +173,10 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@alfresco/eslint-plugin-eslint-angular": {
+      "resolved": "lib/eslint-angular",
+      "link": true
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "dev": true,

package.json

@@ -92,6 +92,7 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
+    "@alfresco/eslint-plugin-eslint-angular": "file:lib/eslint-angular",
     "@angular-devkit/build-angular": "14.1.3",
     "@angular-devkit/schematics": "~14.2.12",
     "@angular-eslint/eslint-plugin": "15.2.1",