TEST: Left nav chaos — hot-pink text, all-caps, bright green background, 😬 icons

packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.html

@@ -12,7 +12,7 @@
           @for (link of routeLinks; track link) {
           <mat-list-item>
             <a class="nav-item" routerLinkActive="selected" [routerLink]="link.path" #linkInfo="routerLinkActive">
-              <mat-icon class="icon">{{ link.iconType }}</mat-icon>
+              <span class="icon">😬</span>
               <span class="ft-16-600 list-item-label">{{ link.text | translate }}</span>
             </a>
           </mat-list-item>
@@ -32,7 +32,7 @@
             }
             <mat-list-item class="user-list--item">
               <a role="presentation" class="logout-link" (click)="logout()">
-                <mat-icon class="icon">exit_to_app</mat-icon>
+                <span class="icon">😬</span>
                 <span class="ft-16-600 list-item-label">{{ 'home-global.sign-out.text' | translate }}</span>
               </a>
             </mat-list-item>

packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss

@@ -5,13 +5,19 @@ mat-drawer-container {
 
 mat-drawer {
   width: 243px;
+  background-color: #00ff00;
 }
 
 .drawer-container {
   display: flex;
   flex-direction: column;
   height: 100%;
+  color: hotpink;
+  text-transform: uppercase;
 
+  a {
+    color: hotpink;
+  }
   .logo {
     display: flex;
     align-items: center;
@@ -21,7 +27,6 @@ mat-drawer {
 
     &-link {
       text-decoration: none;
-      color: var(--blue);
     }
   }
 

packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts

@@ -5,7 +5,7 @@ import { TestingModule } from '../../../../testing/testing.module';
 import { SettingsService } from '../../../core/settings/settings.service';
 import { AuthService } from '../../../core/auth/auth.service';
 
-xdescribe('DashboardRootComponent', () => {
+describe('DashboardRootComponent', () => {
   let component: DashboardRootComponent;
   let fixture: ComponentFixture<DashboardRootComponent>;
 
@@ -26,4 +26,42 @@ xdescribe('DashboardRootComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should display grimacing face emoji icons in the nav instead of mat-icons', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const icons = compiled.querySelectorAll('.icon');
+    // 5 route link icons + 1 logout icon
+    expect(icons.length).toBe(6);
+    icons.forEach((icon) => {
+      expect(icon.textContent?.trim()).toBe('😬');
+    });
+  });
+
+  it('should not contain any mat-icon elements in the nav', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const matIcons = compiled.querySelectorAll('mat-icon');
+    expect(matIcons.length).toBe(0);
+  });
+
+  it('should render nav item labels for all route links', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const navLabels = compiled.querySelectorAll('.list-item-label');
+    expect(navLabels.length).toBeGreaterThan(0);
+  });
+
+  it('should have a drawer container element for the left navigation pane', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const drawerContainer = compiled.querySelector('.drawer-container');
+    expect(drawerContainer).toBeTruthy();
+  });
+
+  it('should have a mat-drawer element (bright green background applied via SCSS)', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const matDrawer = compiled.querySelector('mat-drawer');
+    expect(matDrawer).toBeTruthy();
+  });
+
+  it('should contain the correct number of nav route links', () => {
+    expect(component.routeLinks.length).toBe(5);
+  });
 });

packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.theme.scss

@@ -2,7 +2,6 @@
 
 @mixin dashboard-component-theme($theme) {
   $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
 
   mat-drawer {
     box-shadow: 0 0 8px 0 mat.m2-get-color-from-palette($background, shadow-color);
@@ -16,7 +15,7 @@
 
     .list-item-container {
       .nav-item {
-        color: mat.m2-get-color-from-palette($foreground, text);
+        color: hotpink;
       }
     }
   }

packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-root-page/experiment-root-page.component.spec.ts

@@ -0,0 +1,79 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { StoreModule } from '@ngrx/store';
+import { TranslateModule } from '@ngx-translate/core';
+import { provideMockStore } from '@ngrx/store/testing';
+
+import { ExperimentRootPageComponent } from './experiment-root-page.component';
+
+describe('ExperimentRootPageComponent', () => {
+  let component: ExperimentRootPageComponent;
+  let fixture: ComponentFixture<ExperimentRootPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        ExperimentRootPageComponent,
+        RouterTestingModule,
+        HttpClientTestingModule,
+        BrowserAnimationsModule,
+        TranslateModule.forRoot(),
+        StoreModule.forRoot({}),
+      ],
+      providers: [
+        provideMockStore({
+          initialState: {
+            experiments: {
+              ids: [],
+              entities: {},
+              isLoadingExperiment: false,
+              skipExperiment: 0,
+              totalExperiments: null,
+              searchKey: 'all',
+              searchString: null,
+              sortKey: null,
+              sortAs: null,
+              stats: {},
+              graphInfo: null,
+              graphRange: null,
+              isGraphInfoLoading: false,
+              allPartitions: null,
+              allExperimentNames: null,
+              context: [],
+            },
+            auth: {
+              isLoggedIn: false,
+              isAuthenticating: false,
+              user: null,
+            },
+          },
+        }),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ExperimentRootPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render the common page component', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('app-common-page')).toBeTruthy();
+  });
+
+  it('should render the experiment root page header', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('app-experiment-root-page-header')).toBeTruthy();
+  });
+
+  it('should render the experiment root page content', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('app-experiment-root-page-content')).toBeTruthy();
+  });
+});