Merge pull request #130 from CenterForOpenScience/fix/tokens

Fix/tokens

Author: nsemets

src/app/core/components/breadcrumb/breadcrumb.component.spec.ts

@@ -3,27 +3,32 @@ import { MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 
 import { BreadcrumbComponent } from './breadcrumb.component';
 
 describe('BreadcrumbComponent', () => {
   let component: BreadcrumbComponent;
   let fixture: ComponentFixture<BreadcrumbComponent>;
-  let router: Router;
 
   const mockRouter = {
     url: '/test/path',
     events: of(new NavigationEnd(1, '/test/path', '/test/path')),
   };
 
+  const mockActivatedRoute = {
+    snapshot: {
+      data: { skipBreadcrumbs: false },
+    },
+    firstChild: null,
+  };
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [BreadcrumbComponent],
-      providers: [MockProvider(Router, mockRouter)],
+      providers: [MockProvider(Router, mockRouter), { provide: ActivatedRoute, useValue: mockActivatedRoute }],
     }).compileComponents();
 
-    router = TestBed.inject(Router);
     fixture = TestBed.createComponent(BreadcrumbComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -34,25 +39,4 @@ describe('BreadcrumbComponent', () => {
     expect(component['url']()).toBe('/test/path');
     expect(component['parsedUrl']()).toEqual(['test', 'path']);
   });
-
-  it('should not show breadcrumb for home page', () => {
-    Object.defineProperty(router, 'url', { value: '/home' });
-    component['url'].set('/home');
-    fixture.detectChanges();
-
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.breadcrumbs')).toBeNull();
-  });
-
-  it('should show breadcrumb for valid path', () => {
-    Object.defineProperty(router, 'url', { value: '/settings/profile' });
-    component['url'].set('/settings/profile');
-    fixture.detectChanges();
-
-    const compiled = fixture.nativeElement as HTMLElement;
-    const breadcrumbs = compiled.querySelector('.breadcrumbs');
-    expect(breadcrumbs).toBeTruthy();
-    expect(breadcrumbs?.textContent).toContain('settings');
-    expect(breadcrumbs?.textContent).toContain('profile');
-  });
 });

src/app/core/components/footer/footer.component.scss

@@ -1,52 +1,47 @@
 @use "assets/styles/mixins" as mix;
 @use "assets/styles/variables" as var;
 
-:host {
-  display: block;
-  height: auto;
+.footer-nav,
+.footer-secondary-nav {
+  color: var.$dark-blue-1;
+  padding: 0 1.5rem;
 
-  .footer-nav,
-  .footer-secondary-nav {
-    color: var.$dark-blue-1;
-    padding: 0 1.5rem;
-
-    .separator {
-      margin: 0 mix.rem(6px);
-    }
+  .separator {
+    margin: 0 mix.rem(6px);
+  }
 
-    a {
-      color: var.$dark-blue-1;
-      text-align: center;
-    }
+  a {
+    color: var.$dark-blue-1;
+    text-align: center;
+  }
 
-    .social-link {
-      background-color: var.$pr-blue-1;
-      border-radius: mix.rem(6px);
-      color: var.$white;
-      padding: mix.rem(6px);
-      width: mix.rem(36px);
-      height: mix.rem(36px);
-
-      &:hover {
-        background-color: var.$pr-blue-3;
-        text-decoration: none;
-      }
+  .social-link {
+    background-color: var.$pr-blue-1;
+    border-radius: mix.rem(6px);
+    color: var.$white;
+    padding: mix.rem(6px);
+    width: mix.rem(36px);
+    height: mix.rem(36px);
+
+    &:hover {
+      background-color: var.$pr-blue-3;
+      text-decoration: none;
     }
   }
+}
 
-  .footer-links {
-    gap: mix.rem(6px);
-  }
+.footer-links {
+  gap: mix.rem(6px);
+}
 
-  .footer-nav {
-    background-color: var.$bg-blue-3;
+.footer-nav {
+  background-color: var.$bg-blue-3;
 
-    .footer-socials {
-      gap: mix.rem(8px);
-    }
+  .footer-socials {
+    gap: mix.rem(8px);
   }
+}
 
-  .footer-secondary-nav {
-    background: var.$bg-blue-2;
-  }
+.footer-secondary-nav {
+  background: var.$bg-blue-2;
 }

src/app/core/components/forbidden-page/forbidden-page.component.spec.ts

@@ -1,3 +1,6 @@
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe } from 'ng-mocks';
+
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ForbiddenPageComponent } from './forbidden-page.component';
@@ -8,7 +11,7 @@ describe('ForbiddenPageComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ForbiddenPageComponent],
+      imports: [ForbiddenPageComponent, MockPipe(TranslatePipe)],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ForbiddenPageComponent);

src/app/core/components/nav-menu/nav-menu.component.scss

@@ -1,15 +1,12 @@
-@use "assets/styles/variables" as var;
 @use "assets/styles/mixins" as mix;
 
-:host {
-  .nav-menu {
-    width: 250px;
-    max-width: 250px;
+.nav-menu {
+  width: 250px;
+  max-width: 250px;
 
-    .active {
-      background-color: var.$dark-blue-2;
-      border-radius: mix.rem(8px);
-      font-weight: 700;
-    }
+  .active {
+    background-color: var(--dark-blue-2);
+    border-radius: mix.rem(8px);
+    font-weight: 700;
   }
 }

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -9,7 +9,7 @@ import { Component, computed, inject, output } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
 
-import { NAV_ITEMS, PROJECT_MENU_ITEMS } from '@core/constants/nav-items.constant';
+import { NAV_ITEMS, PROJECT_MENU_ITEMS } from '@core/constants';
 import { IconComponent } from '@osf/shared/components';
 import { NavItem } from '@osf/shared/models';
 
@@ -20,29 +20,29 @@ import { NavItem } from '@osf/shared/models';
   styleUrl: './nav-menu.component.scss',
 })
 export class NavMenuComponent {
-  readonly #router = inject(Router);
-  readonly #route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
   protected readonly navItems = NAV_ITEMS;
   protected readonly myProjectMenuItems = PROJECT_MENU_ITEMS;
-  protected readonly mainMenuItems = this.navItems.map((item) => this.#convertToMenuItem(item));
+  protected readonly mainMenuItems = this.navItems.map((item) => this.convertToMenuItem(item));
 
   closeMenu = output<void>();
 
   protected readonly currentRoute = toSignal(
-    this.#router.events.pipe(
+    this.router.events.pipe(
       filter((event): event is NavigationEnd => event instanceof NavigationEnd),
-      map(() => this.#getRouteInfo())
+      map(() => this.getRouteInfo())
     ),
     {
-      initialValue: this.#getRouteInfo(),
+      initialValue: this.getRouteInfo(),
     }
   );
 
   protected readonly currentProjectId = computed(() => this.currentRoute().projectId);
   protected readonly isProjectRoute = computed(() => !!this.currentProjectId());
 
-  #convertToMenuItem(item: NavItem): MenuItem {
-    const currentUrl = this.#router.url;
+  convertToMenuItem(item: NavItem): MenuItem {
+    const currentUrl = this.router.url;
     const isExpanded =
       item.isCollapsible &&
       (currentUrl.startsWith(item.path) ||
@@ -53,13 +53,13 @@ export class NavMenuComponent {
       icon: item.icon ? `osf-icon-${item.icon}` : '',
       expanded: isExpanded,
       routerLink: item.isCollapsible ? undefined : item.path,
-      items: item.items?.map((subItem) => this.#convertToMenuItem(subItem)),
+      items: item.items?.map((subItem) => this.convertToMenuItem(subItem)),
     };
   }
 
-  #getRouteInfo() {
-    const projectId = this.#route.firstChild?.snapshot.params['id'] || null;
-    const section = this.#route.firstChild?.firstChild?.snapshot.url[0]?.path || 'overview';
+  getRouteInfo() {
+    const projectId = this.route.firstChild?.snapshot.params['id'] || null;
+    const section = this.route.firstChild?.firstChild?.snapshot.url[0]?.path || 'overview';
 
     return { projectId, section };
   }

src/app/core/components/page-not-found/page-not-found.component.spec.ts

@@ -1,3 +1,6 @@
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe } from 'ng-mocks';
+
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PageNotFoundComponent } from './page-not-found.component';
@@ -8,7 +11,7 @@ describe('PageNotFoundComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PageNotFoundComponent],
+      imports: [PageNotFoundComponent, MockPipe(TranslatePipe)],
     }).compileComponents();
 
     fixture = TestBed.createComponent(PageNotFoundComponent);

src/app/core/components/request-access/request-access.component.spec.ts

@@ -1,4 +1,14 @@
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe, MockProvider } from 'ng-mocks';
+
+import { of } from 'rxjs';
+
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+
+import { ToastService } from '@osf/shared/services';
 
 import { RequestAccessComponent } from './request-access.component';
 
@@ -8,7 +18,13 @@ describe('RequestAccessComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RequestAccessComponent],
+      imports: [RequestAccessComponent, MockPipe(TranslatePipe)],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        MockProvider(ToastService),
+        MockProvider(ActivatedRoute, { params: of({}) }),
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(RequestAccessComponent);

src/app/core/components/root/root.component.scss

@@ -5,43 +5,43 @@
   display: flex;
   height: 100vh;
   max-width: 100vw;
+}
+
+.layout-desktop {
+  display: flex;
+  flex: 1;
+  background-color: var.$dark-blue-1;
+  max-width: 100vw;
 
-  .layout-desktop {
+  .content-wrapper {
+    position: relative;
+    background-color: var.$bg-blue-3;
+    border-radius: mix.rem(12px);
+    margin: mix.rem(6px);
     display: flex;
+    flex-direction: column;
     flex: 1;
-    background-color: var.$dark-blue-1;
-    max-width: 100vw;
-
-    .content-wrapper {
-      position: relative;
-      background-color: var.$bg-blue-3;
-      border-radius: mix.rem(12px);
-      margin: mix.rem(6px);
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      overflow-y: auto;
-    }
+    overflow-y: auto;
   }
+}
+
+.layout-tablet {
+  @include mix.flex-center;
+  flex: 1;
+  max-width: 100vw;
 
-  .layout-tablet {
-    @include mix.flex-center;
+  .content-wrapper {
+    @include mix.flex-column;
+    width: 100%;
+    height: 100%;
     flex: 1;
-    max-width: 100vw;
+    overflow-y: auto;
+    background-color: var.$bg-blue-3;
 
-    .content-wrapper {
+    .content {
+      position: relative;
       @include mix.flex-column;
-      width: 100%;
-      height: 100%;
       flex: 1;
-      overflow-y: auto;
-      background-color: var.$bg-blue-3;
-
-      .content {
-        position: relative;
-        @include mix.flex-column;
-        flex: 1;
-      }
     }
   }
 }