Fix: user logout button not working

cypress/integration/users-login.spec.js

@@ -49,7 +49,7 @@ describe("Users Login", () => {
     });
   });
 
-  it("visits login page and logs in with a functional account", () => {
+  it("visits login page and logs in with a functional account, then logout successfully", () => {
     cy.visit("/");
 
     cy.url().should("include", "/datasets");
@@ -74,6 +74,13 @@ describe("Users Login", () => {
 
     cy.url().should("include", "/datasets");
 
-    cy.get(".user-button").should("contain.text", username);
+    cy.get(".user-button").should("contain.text", username).click();
+
+    cy.get("[data-cy=logout-button]").click();
+
+    cy.finishedLoading();
+
+    cy.url().should("include", "/login");
   });
+
 });

src/app/_layout/app-header/app-header.component.html

@@ -49,22 +49,22 @@
       <span>Settings</span>
     </button>
 
-    <button mat-menu-item (click)="logout()">
+    <button mat-menu-item (click)="logout()" data-cy="logout-button">
       <mat-icon> exit_to_app</mat-icon>
       <span>Logout</span>
     </button>
   </mat-menu>
 
   <mat-toolbar class="mat-elevation-z1" color="primary">
     <a [routerLink]="['/datasets']">
-      <img class="logo" src="../../../assets/images/scicat-logo-white.png"/>
+      <img class="logo" src="../../../assets/images/scicat-logo-white.png" />
     </a>
     <a [routerLink]="['/datasets']">
       <ng-template [ngIf]="facility === 'ESS'" [ngIfElse]="otherFacility">
-        <img class="logo" src="../../../assets/images/esslogo-white.png"/>
+        <img class="logo" src="../../../assets/images/esslogo-white.png" />
       </ng-template>
       <ng-template #otherFacility>
-        <img class="logo" src="../../../assets/images/site-logo.png"/>
+        <img class="logo" src="../../../assets/images/site-logo.png" />
       </ng-template>
     </a>
     <a class="toplink" [routerLink]="['/datasets']">
@@ -89,7 +89,7 @@ <h6>
         >
       </h6>
     </span>
-    <span *ngIf="(this.loggedIn$ | async) === false;else userButton">
+    <span *ngIf="(this.loggedIn$ | async) === false; else userButton">
       <h6>
         <a class="toplink" [routerLink]="['/login']" data-cy="login-button">
           <mat-icon> account_circle </mat-icon>
@@ -111,17 +111,16 @@ <h6>
         </button>
       </span>
 
-        <mat-menu class="custom-menu" #cartMenu="matMenu">
-          <batch-card></batch-card>
-        </mat-menu>
+      <mat-menu class="custom-menu" #cartMenu="matMenu">
+        <batch-card></batch-card>
+      </mat-menu>
 
-        <span>
+      <span>
         <button mat-button class="user-button" [matMenuTriggerFor]="userMenu">
-          <img class="user-image" src="{{ profileImage$ | async }}"/>
+          <img class="user-image" src="{{ profileImage$ | async }}" />
           <div class="large-screen-text">{{ username$ | async }}</div>
         </button>
       </span>
     </ng-template>
-
   </mat-toolbar>
 </div>

src/app/_layout/app-header/app-header.component.spec.ts

@@ -13,7 +13,7 @@ import { MatToolbarModule } from "@angular/material/toolbar";
 import { Store, StoreModule } from "@ngrx/store";
 import { APP_CONFIG } from "app-config.module";
 import { logoutAction } from "state-management/actions/user.actions";
-import { MockStore } from "shared/MockStubs";
+import { MockRouter, MockStore } from "shared/MockStubs";
 import { MatIconModule } from "@angular/material/icon";
 import { MatButtonModule } from "@angular/material/button";
 import { provideMockStore } from "@ngrx/store/testing";
@@ -23,6 +23,7 @@ import {
   selectThumbnailPhoto,
 } from "state-management/selectors/user.selectors";
 import { AppConfigService } from "app-config.service";
+import { Router } from "@angular/router";
 
 describe("AppHeaderComponent", () => {
   let component: AppHeaderComponent;
@@ -35,45 +36,44 @@ describe("AppHeaderComponent", () => {
     facility: "ESS",
   });
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        schemas: [NO_ERRORS_SCHEMA],
-        declarations: [AppHeaderComponent],
-        imports: [
-          MatButtonModule,
-          MatIconModule,
-          MatMenuModule,
-          MatToolbarModule,
-          StoreModule.forRoot({}),
-        ],
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      schemas: [NO_ERRORS_SCHEMA],
+      declarations: [AppHeaderComponent],
+      imports: [
+        MatButtonModule,
+        MatIconModule,
+        MatMenuModule,
+        MatToolbarModule,
+        StoreModule.forRoot({}),
+      ],
+      providers: [
+        provideMockStore({
+          selectors: [
+            {
+              selector: selectCurrentUserName,
+              value: "ms-ad.User Name",
+            },
+            {
+              selector: selectThumbnailPhoto,
+              value: "assets/images/user.png",
+            },
+            { selector: selectIsLoggedIn, value: true },
+          ],
+        }),
+      ],
+    });
+    TestBed.overrideComponent(AppHeaderComponent, {
+      set: {
         providers: [
-          provideMockStore({
-            selectors: [
-              {
-                selector: selectCurrentUserName,
-                value: "ms-ad.User Name",
-              },
-              {
-                selector: selectThumbnailPhoto,
-                value: "assets/images/user.png",
-              },
-              { selector: selectIsLoggedIn, value: true },
-            ],
-          }),
+          { provide: APP_CONFIG, useValue: { production: false } },
+          { provide: AppConfigService, useValue: { getConfig } },
+          { provide: Router, useClass: MockRouter },
         ],
-      });
-      TestBed.overrideComponent(AppHeaderComponent, {
-        set: {
-          providers: [
-            { provide: APP_CONFIG, useValue: { production: false } },
-            { provide: AppConfigService, useValue: { getConfig } },
-          ],
-        },
-      });
-      TestBed.compileComponents();
-    })
-  );
+      },
+    });
+    TestBed.compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AppHeaderComponent);

src/app/_layout/app-header/app-header.component.ts

@@ -12,6 +12,7 @@ import {
 } from "state-management/selectors/user.selectors";
 import { selectDatasetsInBatchIndicator } from "state-management/selectors/datasets.selectors";
 import { AppConfigService } from "app-config.service";
+import { Router } from "@angular/router";
 
 @Component({
   selector: "app-app-header",
@@ -30,12 +31,15 @@ export class AppHeaderComponent implements OnInit {
 
   constructor(
     public appConfigService: AppConfigService,
+    private router: Router,
     @Inject(APP_CONFIG) public appConfig: AppConfig,
     private store: Store
   ) {}
 
   logout(): void {
     this.store.dispatch(logoutAction());
+
+    this.router.navigateByUrl("/login");
   }
 
   ngOnInit() {

src/app/state-management/actions/user.actions.ts

@@ -117,9 +117,7 @@ export const updateUserSettingsFailedAction = createAction(
   "[User] Update User Settings Failed"
 );
 
-export const fetchScicatTokenAction = createAction(
-  "[User] Fetch Scicat Token"
-);
+export const fetchScicatTokenAction = createAction("[User] Fetch Scicat Token");
 export const fetchScicatTokenCompleteAction = createAction(
   "[User] Fetch Scicat Token Complete",
   props<{ token: AccessToken }>()

src/app/state-management/reducers/user.reducer.ts

@@ -92,6 +92,13 @@ const reducer = createReducer(
     })
   ),
 
+  on(
+    fromActions.logoutAction,
+    (): UserState => ({
+      ...initialUserState,
+    })
+  ),
+
   on(
     fromActions.logoutCompleteAction,
     (): UserState => ({

src/app/users/user-settings/user-settings.component.scss

@@ -25,6 +25,7 @@ mat-card {
       width: 100%;
       padding: 0.5em;
       display: inline-block;
+      word-break: break-all;
 
       .copy-button {
         padding-left: 0.5em;