BMI calculator using Angular

// src/app/bmi-calculator/bmi-calculator.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { BmiCalculatorComponent } from './bmi-calculator.component';

describe('BmiCalculatorComponent', () => {
    let component: BmiCalculatorComponent;
    let fixture: ComponentFixture<BmiCalculatorComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [BmiCalculatorComponent]
        });
        fixture = TestBed.createComponent(BmiCalculatorComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

// src/app/bmi-calculator/bmi-calculator.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-bmi-calculator',
    templateUrl: './bmi-calculator.component.html',
    styleUrls: ['./bmi-calculator.component.css']
})
export class BmiCalculatorComponent {
    weight: number | null = null;
    height: number | null = null;
    bmi: number | null = null;
    status: string = '';

    calculateBMI(): void {
        if (this.weight == null || this.height == null) {
            alert('Please enter both weight and height!');
            return;
        }

        const heightInMeters = this.height / 100;
        this.bmi = +(this.weight / (heightInMeters 
            * heightInMeters)).toFixed(2);

        if (this.bmi < 18.5) {
            this.status = 'Underweight';
        } else if (this.bmi < 24.9) {
            this.status = 'Normal weight';
        } else if (this.bmi < 29.9) {
            this.status = 'Overweight';
        } else {
            this.status = 'Obesity';
        }
    }
}

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BmiCalculatorComponent } from
    './bmi-calculator/bmi-calculator.component';

@NgModule({
    declarations: [
        AppComponent,
        BmiCalculatorComponent
    ],
    imports: [
        BrowserModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

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

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
    beforeEach(() => TestBed.configureTestingModule({
        imports: [RouterTestingModule],
        declarations: [AppComponent]
    }));

    it('should create the app', () => {
        const fixture = TestBed.createComponent(AppComponent);
        const app = fixture.componentInstance;
        expect(app).toBeTruthy();
    });

    it(`should have as title 'bmi-calculator-app'`, () => {
        const fixture = TestBed.createComponent(AppComponent);
        const app = fixture.componentInstance;
        expect(app.title).toEqual('bmi-calculator-app');
    });

    it('should render title', () => {
        const fixture = TestBed.createComponent(AppComponent);
        fixture.detectChanges();
        const compiled = fixture.nativeElement as HTMLElement;
        expect(compiled.querySelector('.content span')?.textContent)
        .toContain('bmi-calculator-app app is running!');
    });
});

// src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'bmi-calculator-app';
}