Alfresco · dominikiwanekhyland · Apr 10, 2024 · Apr 9, 2024
diff --git a/app/src/test.ts b/app/src/test.ts
@@ -29,21 +29,5 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(
-    path: string,
-    deep?: boolean,
-    filter?: RegExp
-  ): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -109,7 +109,6 @@
     "karma": "^6.4.3",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "^2.2.0",
-    "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "karma-mocha-reporter": "^2.2.5",

diff --git a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.spec.ts b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.spec.ts
@@ -310,13 +310,13 @@ describe('ManageRulesSmartComponent', () => {
     it('should show inherit rules toggle button, and disable it when isInheritanceToggleDisabled = true', () => {
       fixture.detectChanges();
 
-      const createButton = debugElement.query(By.css(`[data-automation-id="manage-rules-inheritance-toggle-button"]`));
+      const createButton = debugElement.query(By.css(`[data-automation-id="manage-rules-inheritance-toggle-button"] button`));
       expect(createButton).toBeTruthy();
 
       component.isInheritanceToggleDisabled = true;
       fixture.detectChanges();
 
-      expect(createButton.nativeNode.classList).toContain('mat-disabled');
+      expect(createButton.nativeElement.disabled).toBeTrue();
     });
 
     it('should call onInheritanceToggleChange() on change', () => {

diff --git a/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.spec.ts b/projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.spec.ts
@@ -40,7 +40,7 @@ describe('RuleActionUiComponent', () => {
   const changeMatSelectValue = (value: string) => {
     getSelectElement().click();
     fixture.detectChanges();
-    const matOption = fixture.debugElement.query(By.css(`.mat-option[ng-reflect-value="${value}"]`)).nativeElement;
+    const matOption = fixture.debugElement.query(By.css(`[ng-reflect-value="${value}"]`)).nativeElement;
     matOption.click();
     fixture.detectChanges();
   };

diff --git a/...ntent/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.spec.ts b/...ntent/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.spec.ts
@@ -27,7 +27,7 @@ import { RuleSimpleConditionUiComponent } from './rule-simple-condition.ui-compo
 import { CoreTestingModule } from '@alfresco/adf-core';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
-import { tagMock, mimeTypeMock, simpleConditionUnknownFieldMock, categoriesListMock } from '../../mock/conditions.mock';
+import { categoriesListMock, mimeTypeMock, simpleConditionUnknownFieldMock, tagMock } from '../../mock/conditions.mock';
 import { MimeType } from './rule-mime-types';
 import { CategoryService, TagService } from '@alfresco/adf-content-services';
 import { of } from 'rxjs';
@@ -49,7 +49,7 @@ describe('RuleSimpleConditionUiComponent', () => {
     const matSelect = getByDataAutomationId(dataAutomationId).nativeElement;
     matSelect.click();
     fixture.detectChanges();
-    const matOption = fixture.debugElement.query(By.css(`.mat-option[ng-reflect-value="${value}"]`)).nativeElement;
+    const matOption = fixture.debugElement.query(By.css(`[ng-reflect-value="${value}"]`)).nativeElement;
     matOption.click();
     fixture.detectChanges();
   };

diff --git a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html
@@ -12,14 +12,14 @@
       data-automation-id="rule-option-form-field-errorScript"
       floatLabel="always"
       [ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
-
+      <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate }}</mat-label>
       <mat-select
         formControlName="errorScript"
-        placeholder="{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.ERROR_SCRIPT' | translate}}"
         data-automation-id="rule-option-select-errorScript">
 
-        <mat-option value="">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.NO_SCRIPT' | translate }}</mat-option>
+        <mat-option class="aca-rule-options__error-script-option" value="">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.NO_SCRIPT' | translate }}</mat-option>
           <mat-option *ngFor="let option of errorScriptOptions"
+            class="aca-rule-options__error-script-option"
             [value]="option.value">
             {{ option.label }}
           </mat-option>

diff --git a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts
@@ -39,7 +39,7 @@ describe('RuleOptionsUiComponent', () => {
     fixture.debugElement.query(By.css(`[data-automation-id="${dataAutomationId}"]`));
 
   const toggleMatCheckbox = (dataAutomationId: string) => {
-    ((getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).children[0] as HTMLElement).click();
+    (getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).querySelector('input').click();
   };
 
   const testErrorScriptFormFieldVisibility = (isVisible: boolean) => {
@@ -140,14 +140,14 @@ describe('RuleOptionsUiComponent', () => {
     (getByDataAutomationId('rule-option-select-errorScript').nativeElement as HTMLElement).click();
     fixture.detectChanges();
 
-    const matOptions = fixture.debugElement.queryAll(By.css(`.mat-option`));
+    const matOptions = fixture.debugElement.queryAll(By.css(`.aca-rule-options__error-script-option`));
     expect(matOptions.length).toBe(3);
     expect((matOptions[0].nativeElement as HTMLElement).innerText.trim()).toBe('ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.NO_SCRIPT');
     expect((matOptions[1].nativeElement as HTMLElement).innerText.trim()).toBe('Script 1');
     expect((matOptions[2].nativeElement as HTMLElement).innerText.trim()).toBe('Script 2');
   });
 
-  it('should always show a label for the error script dropdown even when MAT_FORM_FIELD_DEFAULT_OPTIONS sets floatLabel to auto', () => {
+  it('should always show a label for the error script dropdown', () => {
     component.writeValue({
       isEnabled: true,
       isInheritable: false,
@@ -157,10 +157,9 @@ describe('RuleOptionsUiComponent', () => {
     component.errorScriptConstraint = errorScriptConstraintMock;
     fixture.detectChanges();
 
-    const matFormField = fixture.debugElement.query(By.css(`[data-automation-id="rule-option-form-field-errorScript"] .mat-form-field-label`));
+    const label = fixture.debugElement.query(By.css(`[data-automation-id="rule-option-form-field-errorScript"] label`));
     fixture.detectChanges();
-    expect(matFormField).not.toBeNull();
-    expect(matFormField.componentInstance['floatLabel']).toBe('always');
+    expect(label).not.toBeNull();
   });
 
   it('should properly update formFields on only isAsynchronous and errorScript changes', () => {

diff --git a/...cts/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.spec.ts b/...cts/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.spec.ts
@@ -36,7 +36,7 @@ describe('RuleTriggerUiComponent', () => {
     fixture.debugElement.query(By.css(`[data-automation-id="${dataAutomationId}"]`));
 
   const toggleMatCheckbox = (dataAutomationId: string) => {
-    ((getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).children[0] as HTMLElement).click();
+    (getByDataAutomationId(dataAutomationId).nativeElement as HTMLElement).querySelector('input').click();
   };
 
   beforeEach(() => {

diff --git a/projects/aca-content/preview/src/test.ts b/projects/aca-content/preview/src/test.ts
@@ -29,21 +29,5 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(
-    path: string,
-    deep?: boolean,
-    filter?: RegExp
-  ): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);
diff --git a/projects/aca-content/project.json b/projects/aca-content/project.json
@@ -28,7 +28,10 @@
         "main": "projects/aca-content/test.ts",
         "tsConfig": "projects/aca-content/tsconfig.spec.json",
         "karmaConfig": "projects/aca-content/karma.conf.js",
-        "styles": ["projects/aca-content/src/lib/ui/application.scss"]
+        "styles": ["projects/aca-content/src/lib/ui/application.scss"],
+        "stylePreprocessorOptions": {
+          "includePaths": ["projects/aca-content/src/lib/ui", "node_modules", "node_modules/@alfresco/adf-core/lib"]
+        }
       },
       "configurations": {
         "adfprod": {

diff --git a/projects/aca-content/src/lib/components/context-menu/context-menu-item.component.html b/projects/aca-content/src/lib/components/context-menu/context-menu-item.component.html
@@ -3,7 +3,7 @@
     <ng-container *ngSwitchCase="'menu'">
       <button mat-menu-item [id]="actionRef.id" [matMenuTriggerFor]="childMenu">
         <adf-icon [value]="actionRef.icon"></adf-icon>
-        <span>{{ actionRef.title | translate }}</span>
+        <span [attr.data-automation-id]="actionRef.id + '-label'">{{ actionRef.title | translate }}</span>
       </button>
 
       <mat-menu #childMenu="matMenu">
@@ -24,7 +24,7 @@
     <ng-container *ngSwitchDefault>
       <button mat-menu-item color="primary" [id]="actionRef.id" (click)="runAction()">
         <adf-icon [value]="actionRef.icon"></adf-icon>
-        <span>{{ actionRef.title | translate }}</span>
+        <span [attr.data-automation-id]="actionRef.id + '-label'">{{ actionRef.title | translate }}</span>
       </button>
     </ng-container>
   </ng-container>

diff --git a/projects/aca-content/src/lib/components/context-menu/context-menu-item.component.spec.ts b/projects/aca-content/src/lib/components/context-menu/context-menu-item.component.spec.ts
@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppTestingModule } from '../../testing/app-testing.module';
 import { ContextMenuItemComponent } from './context-menu-item.component';
 import { AppExtensionService } from '@alfresco/aca-shared';
@@ -62,7 +62,7 @@ describe('ContextMenuComponent', () => {
     fixture.detectChanges();
 
     const buttonElement = fixture.nativeElement.querySelector('button');
-    expect(buttonElement.querySelector('span').innerText.trim()).toBe(contextItem.title);
+    expect(buttonElement.querySelector('[data-automation-id="action-button-label"]').innerText.trim()).toBe(contextItem.title);
   });
 
   it('should not run action when entry has no click attribute defined', () => {

diff --git a/projects/aca-content/src/lib/components/context-menu/context-menu.component.html b/projects/aca-content/src/lib/components/context-menu/context-menu.component.html
@@ -6,7 +6,7 @@
       <ng-container *ngSwitchDefault>
         <button mat-menu-item [id]="entry.id" (click)="runAction(entry)">
           <adf-icon [value]="entry.icon"></adf-icon>
-          <span>{{ entry.title | translate }}</span>
+          <span [attr.data-automation-id]="entry.id + '-label'">{{ entry.title | translate }}</span>
         </button>
       </ng-container>
 
@@ -17,7 +17,7 @@
       <ng-container *ngSwitchCase="'menu'">
         <button mat-menu-item [id]="entry.id" [matMenuTriggerFor]="childMenu">
           <adf-icon [value]="entry.icon"></adf-icon>
-          <span>{{ entry.title | translate }}</span>
+          <span [attr.data-automation-id]="entry.id + '-label'">{{ entry.title | translate }}</span>
         </button>
 
         <mat-menu #childMenu="matMenu">

diff --git a/projects/aca-content/src/lib/components/context-menu/context-menu.component.spec.ts b/projects/aca-content/src/lib/components/context-menu/context-menu.component.spec.ts
@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppTestingModule } from '../../testing/app-testing.module';
 import { ContextMenuComponent } from './context-menu.component';
 import { ContextMenuOverlayRef } from './context-menu-overlay';
@@ -91,7 +91,7 @@ describe('ContextMenuComponent', () => {
     const contextMenuElements = document.body.querySelector('.aca-context-menu')?.querySelectorAll('button');
 
     expect(contextMenuElements?.length).toBe(1);
-    expect(contextMenuElements?.[0].querySelector('span')?.innerText).toBe(contextItem.title);
+    expect((contextMenuElements?.[0].querySelector('[data-automation-id="action-button-label"]') as HTMLElement)?.innerText).toBe(contextItem.title);
   });
 
   it('should run action with provided action id and correct payload', () => {

diff --git a/projects/aca-content/src/lib/components/toolbar/view-node/view-node.component.spec.ts b/projects/aca-content/src/lib/components/toolbar/view-node/view-node.component.spec.ts
@@ -76,7 +76,7 @@ describe('ViewNodeComponent', () => {
 
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.querySelector('.mat-menu-item')).not.toBe(null);
+    expect(fixture.nativeElement.querySelector('[role="menuitem"]')).not.toBe(null);
   });
 
   it('should render as a icon button', () => {
@@ -86,7 +86,7 @@ describe('ViewNodeComponent', () => {
 
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.querySelector('.mat-icon-button')).not.toBe(null);
+    expect(fixture.nativeElement.querySelector('[role="img"]')).not.toBe(null);
   });
 
   it('should call ViewNodeAction onClick event', () => {

diff --git a/projects/aca-content/test.ts b/projects/aca-content/test.ts
@@ -29,22 +29,7 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(
-    path: string,
-    deep?: boolean,
-    filter?: RegExp
-  ): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
   teardown: { destroyAfterEach: false }
 });
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);