Add CI workflow and unit tests for frontend

Introduces a GitHub Actions workflow for frontend CI, including Node.js setup and test execution. Adds unit tests for AppComponent and PropertyFormComponent, and refactors PropertyFormComponent for improved type safety and immutability.

Author: AnVenDev

.github/workflows/ci-frontend.yml

@@ -0,0 +1,37 @@
+name: CI Frontend
+
+on:
+  push:
+    paths:
+      - 'axiomatic-ui/**'
+      - '.github/workflows/ci-frontend.yml'
+  pull_request:
+    paths:
+      - 'axiomatic-ui/**'
+      - '.github/workflows/ci-frontend.yml'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: axiomatic-ui
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: |
+            axiomatic-ui/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm test -- --watch=false --browsers=ChromeHeadless

axiomatic-ui/src/app/app.component.spec.ts

@@ -0,0 +1,26 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RouterTestingModule, AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render navbar and router outlet', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+
+    expect(compiled.querySelector('app-navbar')).not.toBeNull();
+    expect(compiled.querySelector('router-outlet')).not.toBeNull();
+  });
+});

axiomatic-ui/src/app/components/property-form/property-form.component.ts

@@ -23,26 +23,27 @@ export class PropertyFormComponent {
   @Input() value: PropertyRequest = {} as PropertyRequest;
   @Input() disabled = false;
   @Input() loading = false;
-  @Output() valueChange = new EventEmitter<PropertyRequest>();
-
-  showAdvanced = false;
 
+  @Output() valueChange = new EventEmitter<PropertyRequest>();
   /** submit verso il parent (Dashboard) */
   @Output() submit = new EventEmitter<PropertyRequest>();
 
-  onSubmit() {
-    // Se vuoi fare normalizzazione qui, fallo prima dell’emit
+  showAdvanced = false;
+
+  onSubmit(): void {
     this.submit.emit(this.value);
   }
 
-  onChange() {
-    // emetto una copia per evitare mutazioni in-place
-    this.valueChange.emit({ ...(this.value || {}) });
+  onChange(): void {
+    const nextValue: PropertyRequest = {
+      ...(this.value || ({} as PropertyRequest)),
+    };
+    this.valueChange.emit(nextValue);
   }
 
-  toggleAdvanced() {
+  toggleAdvanced(): void {
     this.showAdvanced = !this.showAdvanced;
   }
 
-  energyClasses = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
-}
+  readonly energyClasses = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
+}

axiomatic-ui/src/app/components/property-form/property-form.components.spec.ts

@@ -0,0 +1,56 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PropertyFormComponent } from './property-form.component';
+import { PropertyRequest } from '../../models/property';
+
+describe('PropertyFormComponent', () => {
+  let component: PropertyFormComponent;
+  let fixture: ComponentFixture<PropertyFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PropertyFormComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PropertyFormComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit submit with current value', () => {
+    const value = { location: 'Milan' } as PropertyRequest;
+    component.value = value;
+
+    const spy = spyOn(component.submit, 'emit');
+    component.onSubmit();
+
+    expect(spy).toHaveBeenCalledWith(value);
+  });
+
+  it('should emit valueChange on change with a shallow copy', () => {
+    const value = { location: 'Rome', size_sqm: 80 } as PropertyRequest;
+    component.value = value;
+
+    let emitted: PropertyRequest | undefined;
+    component.valueChange.subscribe(v => (emitted = v));
+
+    component.onChange();
+
+    expect(emitted).toBeDefined();
+    expect(emitted).toEqual(value);
+    // deve essere un nuovo riferimento
+    expect(emitted).not.toBe(value);
+  });
+
+  it('should toggle advanced section flag', () => {
+    expect(component.showAdvanced).toBeFalse();
+
+    component.toggleAdvanced();
+    expect(component.showAdvanced).toBeTrue();
+
+    component.toggleAdvanced();
+    expect(component.showAdvanced).toBeFalse();
+  });
+});