diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.html b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.html index 3e54ff900..ef251eb7d 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.html +++ b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.html @@ -12,7 +12,7 @@ @for (link of routeLinks; track link) { - {{ link.iconType }} + 😬 {{ link.text | translate }} @@ -32,7 +32,7 @@ } - exit_to_app + 😬 {{ 'home-global.sign-out.text' | translate }} diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss index d29cb87dd..c637e35b5 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.scss +++ b/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); } } diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts index 5f47dac86..49f6269bf 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.spec.ts +++ b/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; @@ -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); + }); }); diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.theme.scss b/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.theme.scss index 2ca46b155..e1be428cc 100644 --- a/packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.theme.scss +++ b/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; } } } diff --git a/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-root-page/experiment-root-page.component.spec.ts b/packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-root-page/experiment-root-page.component.spec.ts new file mode 100644 index 000000000..0e922917a --- /dev/null +++ b/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; + + 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(); + }); +});