ci: add testing workflow

.github/workflows/testing.yaml

@@ -0,0 +1,25 @@
+name: Testing
+
+env:
+  NODE_VERSION: 20.18
+
+on: 'push'
+jobs:
+  testing:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test:ci

package.json

@@ -7,6 +7,7 @@
         "build": "ng build",
         "watch": "ng build --watch --configuration development",
         "test": "ng test",
+        "test:ci": "ng test --no-watch --no-progress --browsers=ChromeHeadless",
         "lint": "ng lint"
     },
     "private": true,

src/app/app.component.spec.ts

@@ -1,11 +1,13 @@
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import {TestingModule} from "./testing.module";
+import {MatToolbarModule} from "@angular/material/toolbar";
+import {AppModule} from "./app.module";
 
 describe('AppComponent', () => {
     beforeEach(() =>
         TestBed.configureTestingModule({
-            imports: [RouterTestingModule],
+            imports: [TestingModule, MatToolbarModule, AppModule],
             declarations: [AppComponent],
         }),
     );
@@ -15,19 +17,4 @@ describe('AppComponent', () => {
         const app = fixture.componentInstance;
         expect(app).toBeTruthy();
     });
-
-    it(`should have as title 'federated-catalog-viewer-ui'`, () => {
-        const fixture = TestBed.createComponent(AppComponent);
-        const app = fixture.componentInstance;
-        expect(app.title).toEqual('federated-catalog-viewer-ui');
-    });
-
-    it('should render title', () => {
-        const fixture = TestBed.createComponent(AppComponent);
-        fixture.detectChanges();
-        const compiled = fixture.nativeElement as HTMLElement;
-        expect(compiled.querySelector('.content span')?.textContent).toContain(
-            'federated-catalog-viewer-ui app is running!',
-        );
-    });
 });

src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Router } from '@angular/router';
 import { AuthService } from './services/auth.service';
 import { Subscription } from 'rxjs';
 
@@ -10,9 +9,9 @@ import { Subscription } from 'rxjs';
 })
 export class AppComponent implements OnInit, OnDestroy {
     username: string | null = null;
-    private usernameSubscription!: Subscription;
+    private usernameSubscription?: Subscription;
 
-    constructor(private router: Router, private authService: AuthService) {}
+    constructor( private authService: AuthService) {}
 
     ngOnInit(): void {
         this.usernameSubscription = this.authService.username$.subscribe((username) => {
@@ -25,7 +24,7 @@ export class AppComponent implements OnInit, OnDestroy {
     }
 
     ngOnDestroy(): void {
-        this.usernameSubscription.unsubscribe();
+        this.usernameSubscription?.unsubscribe();
     }
     isLoggedIn(): boolean {
         return this.authService.isLoggedIn();

src/app/components/authentication/authentication.component.spec.ts

@@ -1,14 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AuthenticationComponent } from './authentication.component';
+import {TestingModule} from "../../testing.module";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+import {MatInputModule} from "@angular/material/input";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 
 describe('AuthenticationComponent', () => {
     let component: AuthenticationComponent;
     let fixture: ComponentFixture<AuthenticationComponent>;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            imports: [AuthenticationComponent],
+            imports: [TestingModule, MatFormFieldModule, MatInputModule, BrowserAnimationsModule],
+            declarations: [AuthenticationComponent],
+          schemas: [NO_ERRORS_SCHEMA]
         }).compileComponents();
 
         fixture = TestBed.createComponent(AuthenticationComponent);

src/app/components/catalog-browser/catalog-browser.component.html

@@ -1,9 +1,6 @@
 <mat-card>
     <mat-card-header>
-        <mat-card-title *ngIf="label && (label | async); else noLabel">
-            {{ '"' + (label | async) + '" Entries' }}
-        </mat-card-title>
-        <ng-template #noLabel><mat-card-title>Browse Catalog Contents</mat-card-title></ng-template>
+        <ng-template><mat-card-title>Browse Catalog Contents</mat-card-title></ng-template>
     </mat-card-header>
     <ng-container *ngIf="data$ | async as data">
         <mat-card-content>

src/app/components/catalog-browser/catalog-browser.component.spec.ts

@@ -1,13 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CatalogBrowserComponent } from './catalog-browser.component';
+import {TestingModule} from "../../testing.module";
+import {MatCardModule} from "@angular/material/card";
 
 describe('CatalogBrowserComponent', () => {
     let component: CatalogBrowserComponent;
     let fixture: ComponentFixture<CatalogBrowserComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
+            imports: [TestingModule, MatCardModule],
             declarations: [CatalogBrowserComponent],
         });
         fixture = TestBed.createComponent(CatalogBrowserComponent);

src/app/components/catalog-browser/catalog-browser.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, } from '@angular/core';
 import { NodeQueryResult } from '../../types/dtos';
 import { QueryService } from '../../services/query.service';
-import { ActivatedRoute } from '@angular/router';
+
 import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
 import { map, switchMap, scan, startWith, concatMap } from 'rxjs/operators';
 
@@ -10,15 +10,15 @@ import { map, switchMap, scan, startWith, concatMap } from 'rxjs/operators';
     templateUrl: './catalog-browser.component.html',
     styleUrls: ['./catalog-browser.component.scss'],
 })
-export class CatalogBrowserComponent implements OnInit {
+export class CatalogBrowserComponent{
     public readonly data$: Observable<{ totalCount: number; nodes: NodeQueryResult[] }>;
     public readonly selectedTab$ = new BehaviorSubject<number>(0);
     public readonly limit$ = new BehaviorSubject<number>(30);
     public readonly fetchMore$ = new Subject<void>();
 
     public readonly tabs = ['Legal Participant', 'Service Offering', 'Resource'];
 
-    constructor(private _queryService: QueryService, private _activatedRoute: ActivatedRoute) {
+    constructor(private _queryService: QueryService) {
         const selectedKey$ = this.selectedTab$.pipe(
             map((selectedTab) => ['LegalParticipant', 'ServiceOffering', 'Resource'][selectedTab]),
         );
@@ -48,13 +48,6 @@ export class CatalogBrowserComponent implements OnInit {
         );
     }
 
-    pageSizes = [30, 50, 100, 200];
-    label?: Observable<string>;
-
-    ngOnInit(): void {
-        this.label = this._activatedRoute.queryParams.pipe(map((params) => params['label']));
-    }
-
     protected fetchNodesAndCount(
         key: string,
         limit: number,
@@ -66,10 +59,6 @@ export class CatalogBrowserComponent implements OnInit {
         ]).pipe(map(([nodes, totalCount]) => ({ nodes, totalCount })));
     }
 
-    onPageSizeChange(newSize: number): void {
-        this.limit$.next(newSize);
-    }
-
     onTabChange(index: number): void {
         this.selectedTab$.next(index);
     }

src/app/components/node-details/node-details.component.spec.ts

@@ -1,14 +1,26 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NodeDetailsComponent } from './node-details.component';
+import {TestingModule} from "../../testing.module";
+import {ActivatedRoute} from "@angular/router";
+import {of} from "rxjs";
 
 describe('NodeDetailsComponent', () => {
     let component: NodeDetailsComponent;
     let fixture: ComponentFixture<NodeDetailsComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
+            imports: [TestingModule],
             declarations: [NodeDetailsComponent],
+            providers: [
+              {
+                provide: ActivatedRoute,
+                useValue: {
+                  params: of({ id: 123 }),
+                },
+              },
+            ]
         });
         fixture = TestBed.createComponent(NodeDetailsComponent);
         component = fixture.componentInstance;

src/app/components/node-labels/node-labels.component.spec.ts

@@ -1,13 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NodeLabelsComponent } from './node-labels.component';
+import {TestingModule} from "../../testing.module";
+import {MatChipsModule} from "@angular/material/chips";
 
 describe('NodeLabelsComponent', () => {
     let component: NodeLabelsComponent;
     let fixture: ComponentFixture<NodeLabelsComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
+            imports: [TestingModule, MatChipsModule],
             declarations: [NodeLabelsComponent],
         });
         fixture = TestBed.createComponent(NodeLabelsComponent);

src/app/components/node-table/node-table.component.spec.ts

@@ -1,13 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NodeTableComponent } from './node-table.component';
+import {TestingModule} from "../../testing.module";
+import {MatTableModule} from "@angular/material/table";
 
 describe('NodeTableComponent', () => {
     let component: NodeTableComponent;
     let fixture: ComponentFixture<NodeTableComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
+            imports: [TestingModule, MatTableModule],
             declarations: [NodeTableComponent],
         });
         fixture = TestBed.createComponent(NodeTableComponent);

src/app/components/query/query.component.spec.ts

@@ -1,14 +1,32 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { QueryComponent } from './query.component';
+import {TestingModule} from "../../testing.module";
+import {of} from "rxjs";
+import {ActivatedRoute} from "@angular/router";
+import {MatCardModule} from "@angular/material/card";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatInputModule} from "@angular/material/input";
+import {ReactiveFormsModule} from "@angular/forms";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 
 describe('QueryComponent', () => {
     let component: QueryComponent;
     let fixture: ComponentFixture<QueryComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
+            imports: [TestingModule, MatCardModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, BrowserAnimationsModule
+            ],
             declarations: [QueryComponent],
+            providers: [
+              {
+                provide: ActivatedRoute,
+                useValue: {
+                  queryParams: of({ query: "test" }),
+                },
+              },
+            ]
         });
         fixture = TestBed.createComponent(QueryComponent);
         component = fixture.componentInstance;

src/app/services/query.service.spec.ts

@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 
 import { QueryService } from './query.service';
+import {TestingModule} from "../testing.module";
 
 describe('QueryService', () => {
     let service: QueryService;
 
     beforeEach(() => {
-        TestBed.configureTestingModule({});
+        TestBed.configureTestingModule({
+          imports: [TestingModule]
+        });
         service = TestBed.inject(QueryService);
     });
 

src/app/testing.module.ts

@@ -0,0 +1,12 @@
+import {provideHttpClientTesting} from "@angular/common/http/testing";
+import {provideHttpClient} from "@angular/common/http";
+import {NgModule} from "@angular/core";
+
+@NgModule({
+  imports: [],
+  providers: [
+    provideHttpClient(),
+    provideHttpClientTesting(),
+  ],
+})
+export class TestingModule {}