package.json

@@ -6,7 +6,10 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:unit:coverage": "vitest run --coverage"
   },
   "private": true,
   "packageManager": "npm@11.11.0",
@@ -31,7 +34,11 @@
     "@angular/build": "^21.2.14",
     "@angular/cli": "^21.2.14",
     "@angular/compiler-cli": "^21.2.0",
+    "@vitest/coverage-v8": "^4.0.8",
+    "jsdom": "^26.1.0",
     "prettier": "^3.8.1",
-    "typescript": "~5.9.2"
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8",
+    "@types/jsdom": "^21.1.7"
   }
 }

src/app/app.spec.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+
+describe('App', () => {
+  describe('computed hasStream', () => {
+    it('should return false when stream_url is missing', () => {
+      const streamUrl = '';
+      expect(!!streamUrl && streamUrl.trim().length > 0).toBe(false);
+    });
+
+    it('should return false when stream_url is whitespace', () => {
+      const streamUrl = '   ';
+      expect(!!streamUrl && streamUrl.trim().length > 0).toBe(false);
+    });
+
+    it('should return true when stream_url is a valid URL', () => {
+      const streamUrl = 'https://stream.example.com/live';
+      expect(!!streamUrl && streamUrl.trim().length > 0).toBe(true);
+    });
+  });
+
+  describe('stationConfig title formatting', () => {
+    it('should concatenate name_primary and name_secondary with a space', () => {
+      const namePrimary = 'KM';
+      const nameSecondary = 'TN';
+      const fullName = `${namePrimary} ${nameSecondary}`.trim();
+      expect(fullName).toBe('KM TN');
+    });
+
+    it('should trim trailing space when name_secondary is empty', () => {
+      const namePrimary = 'KM';
+      const nameSecondary = '';
+      const fullName = `${namePrimary} ${nameSecondary}`.trim();
+      expect(fullName).toBe('KM');
+    });
+  });
+});

src/test-setup.ts

@@ -1,10 +1,3 @@
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
-
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);
+// Vitest test setup for frontend unit tests.
+// Angular TestBed initialization is not required for standalone unit tests.
+// Add shared mocks, global beforeEach hooks, or polyfills here as needed.

vitest.config.ts

@@ -1,11 +1,11 @@
-/** @type {import('vite').UserConfig} */
+/** @type {import('vitest/config').ViteUserConfig} */
 export default {
   test: {
     globals: true,
     environment: 'jsdom',
     include: ['src/**/*.spec.ts'],
     setupFiles: ['src/test-setup.ts'],
-    reporters: ['default', 'html'],
+    reporters: ['default'],
     coverage: {
       enabled: true,
       reportsDirectory: 'coverage/frontend',