feat: add core version to header

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
       fail-fast: true
       matrix:
         node_version:
-          - 18
+          - 21
         os:
           - ubuntu-latest
         architecture:

.github/workflows/integration.yml

@@ -16,7 +16,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 21
           registry-url: https://registry.npmjs.org
       - name: install
         run: yarn install --frozen-lockfile

.github/workflows/qa.yml

@@ -16,7 +16,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 21
           registry-url: https://registry.npmjs.org
       - name: install
         run: yarn install --frozen-lockfile

.github/workflows/release.yml

@@ -14,7 +14,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 21
           registry-url: https://registry.npmjs.org
       - name: install
         run: yarn install --frozen-lockfile

package.json

@@ -48,65 +48,65 @@
     "recording"
   ],
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.0.4",
-    "@angular-eslint/builder": "17.1.0",
-    "@angular-eslint/eslint-plugin": "17.1.0",
-    "@angular-eslint/eslint-plugin-template": "17.1.0",
-    "@angular-eslint/schematics": "17.1.0",
-    "@angular-eslint/template-parser": "17.1.0",
-    "@angular/animations": "17.0.5",
-    "@angular/cdk": "17.0.1",
-    "@angular/cli": "17.0.4",
-    "@angular/common": "17.0.5",
-    "@angular/compiler": "17.0.5",
-    "@angular/compiler-cli": "17.0.5",
-    "@angular/core": "17.0.5",
-    "@angular/forms": "17.0.5",
-    "@angular/material": "17.0.1",
-    "@angular/platform-browser": "17.0.5",
-    "@angular/platform-browser-dynamic": "17.0.5",
-    "@angular/router": "17.0.5",
-    "@badeball/cypress-cucumber-preprocessor": "^19.2.0",
-    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
-    "@commitlint/cli": "17.8.1",
-    "@commitlint/config-conventional": "17.8.1",
+    "@angular-devkit/build-angular": "17.3.3",
+    "@angular-eslint/builder": "17.3.0",
+    "@angular-eslint/eslint-plugin": "17.3.0",
+    "@angular-eslint/eslint-plugin-template": "17.3.0",
+    "@angular-eslint/schematics": "17.3.0",
+    "@angular-eslint/template-parser": "17.3.0",
+    "@angular/animations": "17.3.3",
+    "@angular/cdk": "17.3.3",
+    "@angular/cli": "17.3.3",
+    "@angular/common": "17.3.3",
+    "@angular/compiler": "17.3.3",
+    "@angular/compiler-cli": "17.3.3",
+    "@angular/core": "17.3.3",
+    "@angular/forms": "17.3.3",
+    "@angular/material": "17.3.3",
+    "@angular/platform-browser": "17.3.3",
+    "@angular/platform-browser-dynamic": "17.3.3",
+    "@angular/router": "17.3.3",
+    "@badeball/cypress-cucumber-preprocessor": "20.0.3",
+    "@bahmutov/cypress-esbuild-preprocessor": "2.2.0",
+    "@commitlint/cli": "19.2.1",
+    "@commitlint/config-conventional": "19.1.0",
     "@ng-apimock/base-client": "3.3.1",
-    "@ng-apimock/core": "3.11.2",
+    "@ng-apimock/core": "3.12.0",
     "@ng-apimock/cypress-plugin": "^3.0.0",
     "@ng-apimock/protractor-plugin": "2.1.1",
     "@semantic-release/changelog": "6.0.3",
-    "@semantic-release/commit-analyzer": "9.0.2",
+    "@semantic-release/commit-analyzer": "12.0.0",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "8.1.0",
-    "@semantic-release/npm": "9.0.2",
-    "@semantic-release/release-notes-generator": "10.0.3",
-    "@types/chai": "4.3.11",
+    "@semantic-release/github": "10.0.3",
+    "@semantic-release/npm": "12.0.0",
+    "@semantic-release/release-notes-generator": "13.0.0",
+    "@types/chai": "4.3.14",
     "@types/cucumber": "6.0.1",
-    "@types/jest": "29.5.10",
-    "@types/node": "18.18.14",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
+    "@types/jest": "29.5.12",
+    "@types/node": "20.12.5",
+    "@typescript-eslint/eslint-plugin": "7.5.0",
+    "@typescript-eslint/parser": "7.5.0",
     "body-parser": "1.20.2",
-    "chai": "4.3.10",
+    "chai": "5.1.0",
     "commitizen": "4.3.0",
     "cucumber": "6.0.5",
-    "cypress": "13.6.0",
-    "eslint": "^8.54.0",
-    "express": "4.18.2",
-    "husky": "8.0.3",
+    "cypress": "13.7.2",
+    "eslint": "8.57.0",
+    "express": "4.19.2",
+    "husky": "9.0.11",
     "jest": "29.7.0",
     "jest-createspyobj": "2.0.0",
-    "jest-preset-angular": "13.1.4",
-    "lint-staged": "13.3.0",
+    "jest-preset-angular": "14.0.3",
+    "lint-staged": "15.2.2",
     "p-iteration": "1.1.8",
-    "rimraf": "4.4.1",
+    "rimraf": "5.0.5",
     "rxjs": "7.8.1",
-    "semantic-release": "20.1.3",
-    "ts-node": "10.9.1",
+    "semantic-release": "23.0.7",
+    "ts-node": "10.9.2",
     "tslib": "2.6.2",
-    "typescript": "5.3.2",
+    "typescript": "5.4.4",
     "wait-on": "7.2.0",
-    "zone.js": "~0.14.2"
+    "zone.js": "0.14.4"
   },
   "lint-staged": {
     "**/**.{ts}": [

src/app/header/header.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar>
   <mat-toolbar-row>
-    <a class="brand">ng-apimock</a>
+  <a class="brand">ng-apimock</a><span class="version">v{{coreVersion}}</span>
     <button
       aria-controls="toolbarContent"
       aria-expanded="false"

src/app/header/header.component.scss

@@ -13,11 +13,11 @@ mat-toolbar-row {
     display: flex;
   }
 
-  .brand {
+  .brand, .version {
     display: inline-block;
     padding-top: 0.3125rem;
     padding-bottom: 0.3125rem;
-    margin-right: 1rem;
+    margin-right: 0.5rem;
     font-size: 1.5rem;
     line-height: inherit;
     white-space: nowrap;
@@ -32,6 +32,20 @@ mat-toolbar-row {
     );
   }
 
+  .version {
+    font-size: 10px;
+    padding-top:20px;
+
+    background-image:linear-gradient(
+      90deg,
+      #fa2c04 0%,
+      #f637e3 50%,
+      #8514f5 100%
+    );
+  }
+
+
+
   .toggler {
     float: right;
     margin-top: 0px;

src/app/header/header.component.spec.ts

@@ -1,18 +1,70 @@
 import { HeaderComponent } from './header.component';
 
+import { VersionsService } from './versions.service';
+import { createSpyObj } from "jest-createspyobj";
+import { of, Subscription } from "rxjs";
+import { Build } from "./versions.interfaces";
+
 describe('HeaderComponent', () => {
-    let component: HeaderComponent;
+  let component: HeaderComponent;
+  let versionsService: jest.Mocked<VersionsService>;
+  let subscription: jest.Mocked<Subscription>;
+
+  beforeEach(() => {
+    versionsService = createSpyObj(VersionsService, ['getCoreVersion']);
+    subscription = createSpyObj(Subscription);
+    component = new HeaderComponent(versionsService);
+  });
+
+  describe('constructor', () => {
+    it('creates a new subscriptions object', () =>
+        expect(component.subscriptions).toEqual([]));
+  });
+
+  describe('getCoreVersion', () => {
+    beforeEach(() => {
+      versionsService.getCoreVersion.mockReturnValue(of({ build: { artifact: '@ng-apimock/core', description: 'ng-apimock core module', version: '3.12.0' } as Build }));
+      component.getCoreVersion();
+    });
+
+    afterEach(() => {
+      component.subscriptions = [];
+    });
 
-    beforeAll(() => {
-        component = new HeaderComponent();
+    it('calls getCoreVersion', () =>
+        expect(versionsService.getCoreVersion).toHaveBeenCalled());
+
+    it('subscribes to getCoreVersion and sets the coverVersion once resolved', () =>
+        expect(component.coreVersion).toEqual('3.12.0'));
+
+    it('adds the observable to the subscription list', () =>
+        expect(component.subscriptions.length).toBe(1));
+  });
+
+  describe('ngOnDestroy', () => {
+    beforeEach(() => {
+      component.subscriptions.push(subscription as any);
+      component.ngOnDestroy();
     });
 
-    describe('ngOnInit', () => {
-        beforeEach(() => {
-            component.ngOnInit();
-        });
+    it('unsubscribes the subscriptions', () =>
+        expect(subscription.unsubscribe).toHaveBeenCalled());
+  });
+
+  describe('ngOnInit', () => {
+    let getCoreVersionFn;
 
-        it('sets indicator collapsed to true', () =>
-            expect(component.isCollapsed).toBe(true));
+    beforeEach(() => {
+      getCoreVersionFn = jest.spyOn(component, 'getCoreVersion');
+      getCoreVersionFn.mockImplementation(() => []);
+
+      component.ngOnInit();
     });
+
+    it('sets indicator collapsed to true', () =>
+        expect(component.isCollapsed).toBe(true));
+
+    it('gets the presets', () =>
+        expect(component.getCoreVersion).toHaveBeenCalled());
+  });
 });

src/app/header/header.component.ts

@@ -1,7 +1,9 @@
-import { Component, OnInit } from "@angular/core";
-import { RouterLinkActive, RouterLink } from "@angular/router";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { RouterLink, RouterLinkActive } from "@angular/router";
 import { NgClass, NgOptimizedImage } from "@angular/common";
 import { MatToolbarModule } from "@angular/material/toolbar";
+import { VersionsService } from "./versions.service";
+import { Subscription } from "rxjs";
 
 @Component({
   selector: "apimock-header",
@@ -16,11 +18,33 @@ import { MatToolbarModule } from "@angular/material/toolbar";
     NgOptimizedImage,
   ],
 })
-export class HeaderComponent implements OnInit {
+export class HeaderComponent implements OnInit, OnDestroy {
+  subscriptions: Subscription[];
   isCollapsed: boolean;
+  coreVersion: string;
+
+  /**
+   * Constructor.
+   * @param {HttpClient} http The http client.
+   */
+  constructor(private readonly versionsService: VersionsService) {
+    this.subscriptions = [];
+  }
+
+  getCoreVersion(): void {
+    this.subscriptions.push(this.versionsService.getCoreVersion().subscribe(data => {
+      this.coreVersion = data.build.version;
+    }));
+  }
 
   /** {@inheritDoc}. */
   ngOnInit(): void {
     this.isCollapsed = true;
+    this.getCoreVersion();
+  }
+
+  /** {@inheritDoc}. */
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(subscription => subscription.unsubscribe());
   }
 }

src/app/header/versions.interfaces.ts

@@ -0,0 +1,9 @@
+export interface InfoResponse {
+  build: Build;
+}
+
+export interface Build {
+  artifact: string;
+  description: string;
+  version: string;
+}

src/app/header/versions.service.spec.ts

@@ -0,0 +1,24 @@
+import { createSpyObj } from 'jest-createspyobj';
+
+import { HttpClient } from '@angular/common/http';
+
+import { VersionsService } from './versions.service';
+
+describe('VersionsService', () => {
+  let http: jest.Mocked<HttpClient>;
+  let service: VersionsService;
+
+  beforeEach(() => {
+    http = createSpyObj(HttpClient);
+    service = new VersionsService(http as any);
+  });
+
+  describe('getCoreVersion', () => {
+    it('gets the core version', () => {
+      service.getCoreVersion();
+
+      expect(http.get).toHaveBeenCalledWith('/ngapimock/info');
+    });
+  });
+});
+

src/app/header/versions.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+import { InfoResponse } from "./versions.interfaces";
+
+@Injectable({ providedIn: "root" })
+export class VersionsService {
+  private readonly BASE_URL = "/ngapimock";
+
+  /**
+   * Constructor.
+   * @param {HttpClient} http The http client.
+   */
+  constructor(private readonly http: HttpClient) {
+  }
+
+  /**
+   * Gets the core version
+   * @return {Observable<InfoResponse>} observable The observable.
+   */
+  getCoreVersion(): Observable<InfoResponse> {
+    return this.http.get<InfoResponse>(`${this.BASE_URL}/info`);
+  }
+}