[ACS-10214] Fixed navigation for go to personal files button on profile page (#4828)

projects/aca-content/assets/i18n/en.json

@@ -64,7 +64,8 @@
             "NAME": "Name",
             "ADDRESS": "Address",
             "POSTCODE": "Postcode",
-            "INVALID_INPUT": "Invalid Input"
+            "INVALID_INPUT": "Invalid Input",
+            "GO_TO_PERSONAL_FILES_BUTTON_LABEL": "Go to Personal Files"
         },
         "LOCKED_BY": "Locked by: ",
         "PREVIEW": {

projects/aca-content/src/lib/components/view-profile/view-profile.component.html

@@ -5,7 +5,14 @@
         title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
         <mat-icon>menu</mat-icon>
       </button>
-      <mat-icon class="app-profile-icon" (click)="navigateToPersonalFiles()" id="backButton">arrow_back</mat-icon>
+      <button
+        class="app-profile-icon"
+        mat-icon-button
+        (click)="navigateToPersonalFiles()"
+        [attr.aria-label]="'APP.EDIT_PROFILE.GO_TO_PERSONAL_FILES_BUTTON_LABEL' | translate"
+        [attr.title]="'APP.EDIT_PROFILE.GO_TO_PERSONAL_FILES_BUTTON_LABEL' | translate">
+        <mat-icon>arrow_back</mat-icon>
+      </button>
       <h3 class="app-profile">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h3>
     </div>
   </div>

projects/aca-content/src/lib/components/view-profile/view-profile.component.scss

@@ -20,6 +20,14 @@ app-view-profile {
     align-items: center;
     height: 32px;
     padding: 0 24px;
+
+    .app-profile-icon {
+      margin-right: 1rem;
+      cursor: pointer;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+    }
   }
 
   .app-profile {
@@ -34,11 +42,6 @@ app-view-profile {
     border-radius: 1rem;
   }
 
-  .app-profile-icon {
-    margin-right: 1rem;
-    cursor: pointer;
-  }
-
   .app-profile-general-icon {
     cursor: pointer;
   }

projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts

@@ -29,11 +29,17 @@ import { By } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { AppService } from '@alfresco/aca-shared';
+import { UnitTestingUtils } from '@alfresco/adf-core';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { HarnessLoader } from '@angular/cdk/testing';
 
 describe('ViewProfileComponent', () => {
   let fixture: ComponentFixture<ViewProfileComponent>;
   let component: ViewProfileComponent;
   let router: Router;
+  let unitTestingUtils: UnitTestingUtils;
+  let loader: HarnessLoader;
+
   const appServiceMock = {
     toggleAppNavBar$: new Subject(),
     appNavNarMode$: new BehaviorSubject<'collapsed' | 'expanded'>('expanded')
@@ -53,6 +59,8 @@ describe('ViewProfileComponent', () => {
     fixture = TestBed.createComponent(ViewProfileComponent);
     component = fixture.componentInstance;
     router = TestBed.inject(Router);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    unitTestingUtils = new UnitTestingUtils(fixture.debugElement, loader);
     router.initialNavigation();
   });
 
@@ -194,4 +202,11 @@ describe('ViewProfileComponent', () => {
 
     expect(component.toggleContactButtons).toHaveBeenCalledTimes(2);
   });
+
+  it('should navigate to personal files when go to personal files button is clicked', async () => {
+    spyOn(router, 'navigate');
+    await unitTestingUtils.clickMatButtonByCSS('.app-profile-icon');
+
+    expect(router.navigate).toHaveBeenCalledWith(['/personal-files'], { replaceUrl: true });
+  });
 });