feat(openchallenges): add Team button to OC navbar (#2306)

* Use routerLink for app pages in navbar and footer * Fix navbar unit test * Fix tests for the About and Not Found pages * Update label
Sage-Bionetworks · Nov 1, 2023 · c16aee2 · c16aee2
1 parent e01dcf7
commit c16aee2
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 9 deletions.
diff --git a/libs/openchallenges/about/src/lib/about.component.spec.ts b/libs/openchallenges/about/src/lib/about.component.spec.ts
@@ -1,6 +1,7 @@
 import { HttpClientModule } from '@angular/common/http';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { ConfigService } from '@sagebionetworks/openchallenges/config';
 import { FooterComponent } from '@sagebionetworks/openchallenges/ui';
 import { AboutComponent } from './about.component';
@@ -11,7 +12,7 @@ describe('AboutComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientModule, FooterComponent],
+      imports: [HttpClientModule, RouterTestingModule, FooterComponent],
       providers: [ConfigService],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();

diff --git a/libs/openchallenges/not-found/src/lib/not-found.component.spec.ts b/libs/openchallenges/not-found/src/lib/not-found.component.spec.ts
@@ -1,6 +1,7 @@
 import { HttpClientModule } from '@angular/common/http';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { ConfigService } from '@sagebionetworks/openchallenges/config';
 
 import { NotFoundComponent } from './not-found.component';
@@ -11,7 +12,7 @@ describe('NotFoundComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientModule, NotFoundComponent],
+      imports: [HttpClientModule, RouterTestingModule, NotFoundComponent],
       providers: [ConfigService],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();

diff --git a/libs/openchallenges/ui/src/lib/footer/footer.component.html b/libs/openchallenges/ui/src/lib/footer/footer.component.html
@@ -7,17 +7,19 @@
         alt="OpenChallenges"
       />
       <ul class="footer-link-group">
-        <li><a href="/about">About</a></li>
-        <li><a href="/team">Meet Our Team</a></li>
+        <li><a routerLink="/about">About</a></li>
+        <li><a routerLink="/team">Meet Our Team</a></li>
         <li>
-          <a 
+          <a
             [href]="apiDocsUrl"
             title="Interactive documentation for OC API"
             rel="noopener noreferrer"
             target="_blank"
-            >API Docs</a></li>
+            >API Docs</a
+          >
+        </li>
         <li>
-          <a 
+          <a
             href="https://github.com/Sage-Bionetworks/sage-monorepo/issues/new/choose"
             title="Share feedback about the OC app"
             rel="noopener noreferrer"

diff --git a/libs/openchallenges/ui/src/lib/footer/footer.component.spec.ts b/libs/openchallenges/ui/src/lib/footer/footer.component.spec.ts
@@ -1,5 +1,6 @@
 import { HttpClientModule } from '@angular/common/http';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { FooterComponent } from './footer.component';
 
 describe('FooterComponent', () => {
@@ -8,7 +9,7 @@ describe('FooterComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientModule],
+      imports: [HttpClientModule, RouterTestingModule],
     }).compileComponents();
   });
 

diff --git a/libs/openchallenges/ui/src/lib/footer/footer.component.ts b/libs/openchallenges/ui/src/lib/footer/footer.component.ts
@@ -1,10 +1,11 @@
 import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'openchallenges-footer',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterModule],
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss'],
 })

diff --git a/libs/openchallenges/ui/src/lib/navbar/navbar.component.html b/libs/openchallenges/ui/src/lib/navbar/navbar.component.html
@@ -14,6 +14,7 @@
 
   <div class="flex-spacer"></div>
 
+  <a mat-button class="navbar-item" routerLink="/team">Meet Our Team</a>
   <openchallenges-discord-button />
 
   <!-- <a mat-button class="navbar-item" *ngIf="!isLoggedIn" routerLink="/login" aria-label="Log In">