mira hice unos ajustes en mi clase "import { Location } from "@angular/common";
import { Component, OnInit, Injector } from "@angular/core";
import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";
import { MatDatepickerInputEvent } from "@angular/material/datepicker";
import { CatalogService } from 'src/app/services/catalog/catalog.service';
import { MatDialog } from "@angular/material/dialog";
import { MatSelectChange } from "@angular/material/select";
import { MatSlideToggleChange } from "@angular/material/slide-toggle";
import { MatSnackBar } from "@angular/material/snack-bar";
import { Router } from "@angular/router";
import { delay, finalize } from "rxjs/operators";
import { CompanyDetail } from "src/app/models/company.models";
import {
  BodyRegisterContract,
  ListVehicle,
  ResponseContractRegister
} from "src/app/models/contract-company.models";
import { Brands, Models, VehicleType } from "src/app/models/vehicle.models";
import { CompaniesService } from "src/app/services/companies/companies.service";
import { HeaderService } from "src/app/services/header/header.service";
import { VehicleService } from "src/app/services/vehicle/vehicle.service";
import { ModalContractOkComponent } from "../modal-contract-ok/modal-contract-ok.component";
import { dataPersonGroupValidator } from "src/app/utils/validators/dataPersonRequiredValidator";
import { City } from "src/app/models/catalog.models";
import { MatCheckboxChange } from "@angular/material/checkbox";

@Component({
  selector: 'impulsa-new-contract',
  templateUrl: './new-contract.component.html',
  styleUrls: ['./new-contract.component.scss'],
})
export class NewContractComponent implements OnInit {
  loading = true;
  loadingRegister = false;
  companyDetail: CompanyDetail;
  companyName: string;
  listVehicleTypes: VehicleType[] = [];
  cities: City[] = [];
  documentsList: any;
  actualDate = new Date();
  range = 50;
  listaditionals: any = {Moto: [], Patineta:[], Bicicleta:[], Carro:[]};
  totalAux: number = 0;

  firstFormGroup = this._formBuilder.group(
    {
      startDate: ['', Validators.required],
      endDate: ['', Validators.required],
      billingCity: ['', Validators.required],
      automaticCharge: [],
      dataPerson: this._formBuilder.group({
        names: [''],
        surnames: [''],
        documentType: [''],
        documentNumber: [''],
        phone: [''],
        hour: [''],
      }),
    },
    { validator: dataPersonGroupValidator }
  );

  formVehiculos = this._formBuilder.group({});
  formServices = this._formBuilder.group({});

  newVehicleForm = this._formBuilder.group({
    brand: ['', Validators.required],
    vehicleModelId: ['', Validators.required],
    quanty: ['', Validators.required, Validators.min(1)],
    cityCode: ['', Validators.required],
    price: ['', Validators.required],
  });

  listBrand: any[] = [];
  listModel: any[] = [];
  listModelServices: any[] = [];
  listCities: any[] = [];
  listQuantityAvailable: number[] = [];
  listErrorMessage: string[] = [];
  body: BodyRegisterContract;

  public listHours: any = [
    { id: '7:40am', item: '7:40 a.m.' },
    { id: '8:00am', item: '8:00 a.m.' },
    { id: '8:20am', item: '8:20 a.m.' },
    { id: '8:40am', item: '8:40 a.m.' },
    { id: '9:00am', item: '9:00 a.m.' },
    { id: '9:20am', item: '9:20 a.m.' },
    { id: '9:40am', item: '9:40 a.m.' },
    { id: '10:00am', item: '10:00 a.m.' },
    { id: '10:20am', item: '10:20 a.m.' },
    { id: '10:40am', item: '10:40 a.m.' },
    { id: '11:00am', item: '11:00 a.m.' },
    { id: '11:20am', item: '11:20 a.m.' },
    { id: '11:40am', item: '11:40 a.m.' },
    { id: '12:00pm', item: '12:00 p.m.' },
    { id: '12:20pm', item: '12:20 p.m.' },
    { id: '12:40pm', item: '12:40 p.m.' },
    { id: '01:00pm', item: '01:00 p.m.' },
    { id: '01:20pm', item: '01:20 p.m.' },
    { id: '01:40pm', item: '01:40 p.m.' },
    { id: '02:00pm', item: '02:00 p.m.' },
    { id: '02:20pm', item: '02:20 p.m.' },
    { id: '02:40pm', item: '02:40 p.m.' },
    { id: '03:00pm', item: '03:00 p.m.' },
    { id: '03:20pm', item: '03:20 p.m.' },
    { id: '03:40pm', item: '03:40 p.m.' },
    { id: '04:00pm', item: '04:00 p.m.' },
    { id: '04:20pm', item: '04:20 p.m.' },
  ];
  step = 0;
  listVehiclesTypesServices: any[] = [];
  listInfoResume: any[] = [];
  total: number = 0;
  listServices = {
    basic: { services: [] },
    check: { services: [] },
  };
  listAddServices: any[] = [];

  private companiesService: CompaniesService;
  private catalogService!: CatalogService;
  private vehiclesService: VehicleService;
  private header: HeaderService;

  constructor(
    private injector: Injector,
    private _formBuilder: FormBuilder,
    private router: Router,
    private location: Location,
    private dialog: MatDialog,
    private snackBar: MatSnackBar
  ) {
    this.companiesService =
      this.injector.get<CompaniesService>(CompaniesService);
    this.catalogService = this.injector.get<CatalogService>(CatalogService);
    this.vehiclesService = this.injector.get<VehicleService>(VehicleService);
    this.header = this.injector.get<HeaderService>(HeaderService);
  }

  ngOnInit(): void {
    this.validatePath();
    this.fillListVehicleTypes();
    this.getDocumentTypes();
    this.getCities();
  }

  getDocumentTypes() {
    this.catalogService.getDocumentTypes().subscribe(
      (response: any) => {
        this.documentsList = response;
      },
      (error) => {
        console.dir(error);
      }
    );
  }

  validatePath() {
    if (!this.companiesService?.getCompanyDetail()) {
      this.router.navigate(['/dashboard/companies']);
      return;
    }
    this.companyDetail = this.companiesService.getCompanyDetail();
    this.companyName = this.companyDetail.data.name;
    this.header.updateTitle(' ');
    this.header.updateSubtitle('Empresas / Detalle empresa');
  }

  public changeEndDate(
    _event: MatDatepickerInputEvent<Date>,
    nameControl: string
  ) {
    const endDate = new Date(
      this.firstFormGroup.get('endDate').value
    ).getTime();
    const startDate = new Date(
      this.firstFormGroup.get('startDate').value
    ).getTime();
    if (startDate - endDate > 0) {
      this.firstFormGroup.get(nameControl).setErrors({ errorDateInit: true });
    }
  }

  fieldIsValid(field: string): boolean {
    return (
      this.firstFormGroup.controls[field].errors &&
      this.firstFormGroup.controls[field].touched
    );
  }

  getMessageErrorForm1(field: string): string {
    const errors = this.firstFormGroup.get(field)?.errors;

    if (errors.required) {
      return '* Campo obligatorio';
    }
    if (errors?.errorDateInit) {
      return 'Fecha inicio mayor a fecha fin';
    }
    return '';
  }

  public goBack(): void {
    this.location.back();
  }

  resetForm1() {
    this.goBack();
  }

  public fillListVehicleTypes(): void {
    this.companiesService.getListVehicleTypes().subscribe((res) => {
      this.listVehicleTypes = res;
      this.fillListBrandVehicles();
      this.loading = false;
      this.listVehicleTypes.forEach((type) => {
        this.formVehiculos.addControl(
          type.name,
          this._formBuilder.group({
            id: [type.id],
            active: [false],
            vehicles: this._formBuilder.array([]),
          })
        );
      });
      this.formVehiculos.updateValueAndValidity();
    });
  }

  public changeVehicleType(change: MatSlideToggleChange): void {
    if (this.getVehiclesForm(change.source.name).length === 0) {
      this.addVehicle(change.source.name);
    }
    if (
      this.getVehiclesForm(change.source.name).length > 0 &&
      !change.checked
    ) {
      this.getVehiclesForm(change.source.name).reset();
      for (
        let index = 0;
        index < this.getVehiclesForm(change.source.name).length;
        index++
      ) {
        this.delete(change.source.name, index);
      }
      this.formVehiculos.get(change.source.name).get('active').setValue(false);
    }
  }

  public valueControlVehicleForm(nameForm: string, contrl: string): any {
    return this.formVehiculos.get(`${nameForm}.${contrl}`).value;
  }
  public valueControlServicesForm(nameForm: string, contrl: string): any {
    return this.formServices.get(`${nameForm}.${contrl}`).value;
  }

  getVehiclesForm(nameFormGroup: string): FormArray {
    return this.formVehiculos.get(`${nameFormGroup}.vehicles`) as FormArray;
  }
  getVehiclesServicesForm(nameFormGroup: string): FormArray {
    return this.formServices.get(`${nameFormGroup}.vehicles`) as FormArray;
  }

  public changeBrandSelect(
    event: MatSelectChange,
    id: number,
    index: number,
    nameFormGroup: string
  ): void {
    this.vehiclesService.getModel(id, event.value).subscribe((resp: Models) => {
      const aux = resp.data.filter((x) => x.vehicle_type == id);
      this.listModel[id * this.range + index] = aux;
      this.listModelServices[id] = aux;
      this.listCities[id * this.range + index] = [];
      this.getVehiclesForm(nameFormGroup)
        .controls[index].get('cityCode')
        .setValue('');
      this.getVehiclesForm(nameFormGroup)
        .controls[index].get('vehicleModelId')
        .setValue('');
    });
  }

  public changeModelSelect(
    event: MatSelectChange,
    id: number,
    index: number,
    nameFormGroup: string
  ) {
    this.vehiclesService
      .getCitiesAvaliableForVehicleModel(event.value, 'OPERATIONAL_FLEET')
      .subscribe((resp) => {
        this.listCities[index + id * this.range] = resp.data;
        if (resp.data == null) {
          this.getVehiclesForm(nameFormGroup)
            .at(index)
            .get('cityCode')
            .setValue('');
          this.getVehiclesForm(nameFormGroup)
            .at(index)
            .get('cityCode')
            .setErrors({ notCity: true });
        }
      });
  }

  public changeCitySelect(
    event: MatSelectChange,
    id: number,
    index: number,
    formGroupName: string
  ) {
    const vehicleModel = this.getControlVehicle(
      formGroupName,
      'vehicleModelId',
      index
    );

    this.vehiclesService
      .getQuantityVehicleAvailableForCityAndModel(
        event.value,
        vehicleModel,
        'OPERATIONAL_FLEET'
      )
      .subscribe((resp) => {
        this.listQuantityAvailable[id * this.range + index] =
          resp.data.availability > 0 ? resp.data.availability : 0;
      });
  }

  addVehicle(nameFormGroup: string) {
    const newformVehicle = this._formBuilder.group({
      brand: ['', Validators.required],
      vehicleModelId: ['', Validators.required],
      quanty: ['', Validators.required],
      cityCode: ['', Validators.required],
      price: ['', Validators.required],
    });
    this.getVehiclesForm(nameFormGroup).push(newformVehicle);
  }

  fillListBrandVehicles() {
    this.listVehicleTypes.forEach((type) => {
      this.vehiclesService
        .getBrandsPerVehicle(type.id)
        .subscribe((resp: Brands) => {
          this.listBrand[type.id] = resp.data;
        });
    });
  }

  public delete(formGroupName: string, index: number): void {
    this.getVehiclesForm(formGroupName).removeAt(index);
    if (this.getVehiclesForm(formGroupName).length === 0) {
      this.formVehiculos.get(formGroupName).get('active').setValue(false);
    }
  }

  public getControlVehicle(
    formGroupName: string,
    control: string,
    index: number
  ): any {
    return this.getVehiclesForm(formGroupName).controls[index].get(control)
      .value;
  }

  public getListVehicles(): ListVehicle[] {
    let listVehicles: ListVehicle[] = [];
    this.listVehicleTypes.forEach((type) => {
      if (this.valueControlVehicleForm(type.name, 'active')) {
        for (
          let index = 0;
          index < this.getVehiclesForm(type.name).length;
          index++
        ) {
          listVehicles.push(this.getVehiclesForm(type.name).at(index).value);
        }
      }
    });
    return listVehicles;
  }

  public createContract(): void {
    if (this.formVehiculos.invalid) {
      this.formVehiculos.markAllAsTouched();

      return;
    }
    if (this.getListVehicles().length === 0) {
      this.snackBar.open('Debe registrar vehiculos', null, {
        duration: 2000,
      });
      return;
    }
    let contractManager: any = {};
    
    this.body = {
      clientDocumentType:
        this.companyDetail.data.tipoIdentificacionC == 'NIT' ? 'N' : '',
      clientDocumentNumber: this.companyDetail.data.numeroIdentificacionC,
      startDate: this.firstFormGroup.get('startDate').value,
      endDate: this.firstFormGroup.get('endDate').value,
      listVehicles: this.getVehiclesToServices(),
      billingCity: this.firstFormGroup.get('billingCity').value,
      automaticCharge: this.firstFormGroup.get('automaticCharge').value,
    };
  
    if (this.isDataPersonFilled()) {
      {
        contractManager.names = this.firstFormGroup
          .get('dataPerson')
          .get('names').value;
        contractManager.surnames = this.firstFormGroup
          .get('dataPerson')
          .get('surnames').value;
        contractManager.documentNumber = this.firstFormGroup
          .get('dataPerson')
          .get('documentNumber').value;
        contractManager.documentType = this.firstFormGroup
          .get('dataPerson')
          .get('documentType').value;
        contractManager.hourDelivery = this.firstFormGroup
          .get('dataPerson')
          .get('hour').value;
        contractManager.phone = this.firstFormGroup
          .get('dataPerson')
          .get('phone').value;
        this.body.contractDeliveryManager = contractManager;
      }
    }
    this.loadingRegister = true;
    this.companiesService
      .registerContract(this.body)
      .pipe(delay(2000))
      .subscribe(
        (resp) => {
          this.loadingRegister = false;

          if (resp.data.process) {
            const dialogRef = this.dialog.open(ModalContractOkComponent, {
              disableClose: true,
              autoFocus: false,
            });

            dialogRef.afterClosed().subscribe((_resp) => {
              this.router.navigate([
                `dashboard/companies/detail/${this.companyDetail.data.id}/contracts`,
              ]);
            });
          }
        },
        (error) => {
          this.loadingRegister = false;
          if (error.status != 400) {
            this.snackBar.open('Error al registar anexo', null, {
              duration: 3000,
            });
            return;
          }

          const errorResponse: ResponseContractRegister = error.error;
          this.setErrorResponse(errorResponse);

          this.snackBar.open(
            'La cantidad de vehículos supera la disponibilidad de inventario',
            'x',
            {
              duration: 3000,
              panelClass: 'snack',
            }
          );
        }
      );
  }

  public notFieldValid(
    nameFormGroup: string,
    field: string,
    index: number
  ): boolean {
    return (
      this.getVehiclesForm(nameFormGroup).at(index).get(field).errors &&
      this.getVehiclesForm(nameFormGroup).at(index).get(field).touched
    );
  }

  public setErrorResponse(error: ResponseContractRegister): void {
    this.listVehicleTypes.forEach((type) => {
      this.getVehiclesForm(type.name);
      for (
        let index = 0;
        index < this.getVehiclesForm(type.name).length;
        index++
      ) {
        error.data.listVehiclesErrors.forEach((vehicleError) => {
          if (
            vehicleError.vehicleModelId ===
            this.getVehiclesForm(type.name).at(index).get('vehicleModelId')
              .value
          ) {
            this.getVehiclesForm(type.name)
              .at(index)
              .get('quanty')
              .setErrors({ errorQuanty: true });
            this.listErrorMessage[
              this.valueControlVehicleForm(type.name, 'id') + index
            ] = `${vehicleError.available} vehículos disponibles`;
          }
        });
      }
    });
  }

  getErrorMessage(nameFormGroup: string, field: string, index: number) {
    const errors = this.getVehiclesForm(nameFormGroup)
      .at(index)
      .get(field)?.errors;
    if (errors?.errorQuanty) {
      return this.listErrorMessage[
        this.valueControlVehicleForm(nameFormGroup, 'id') + index
      ];
    }

    if (errors?.notCity) {
      return '* No hay vehículos disponibles';
    }
    if (errors?.required) {
      return '* Campo obligatorio';
    }

    return '';
  }

  public isValidFormStatus(): boolean {
    let existVehicles = [];
    existVehicles = this.listVehicleTypes.filter((type) => {
      return (
        this.getVehiclesForm(type.name).length > 0 &&
        this.formVehiculos.get(`${type.name}.active`).value
      );
    });

    return existVehicles.length > 0 && this.formVehiculos.valid;
  }

  getCities() {
    this.catalogService.getCitiesEnabled().subscribe({
      next: (res: any) => {
        this.cities = res.data;
      },
    });
  }

  private isDataPersonFilled(): boolean {
    const dataPerson = this.firstFormGroup.get('dataPerson').value;
    return Object.values(dataPerson).some(
      (value) => value !== null && value !== ''
    );
  }

  public fillServicesForm() {
    this.step = 3;
    this.formServices = this._formBuilder.group({});
    let isactive = true;
    Object.keys(this.formVehiculos.value).forEach((type) => {
      if (this.formVehiculos.get(`${type}.active`).value) {
        const vehicle = this.listVehicleTypes.find((v) => v.name == type);
        this.listVehiclesTypesServices.push(vehicle);
        this.formServices.addControl(
          type,
          this._formBuilder.group({
            id: [vehicle ? vehicle.id : 0],
            active: [isactive],
            vehicles: this._formBuilder.array([]),
          })
        );
        isactive = false;
      }
      this.formServices.updateValueAndValidity();
    });
    this.fillInfoVehiclesToEdit();
    this.getServicesAditionals();
  }

  addVehicleServices(nameFormGroup: string, vehicle?: any, index?: number) {

    const newformVehicle = this._formBuilder.group({
      brand: vehicle.brand,
      vehicleModelId: vehicle.vehicleModelId,
      telemetryBasic: false,
      telemetryPreo: false,
    });
    this.getVehiclesServicesForm(nameFormGroup).push(newformVehicle);
  }

  fillInfoVehiclesToEdit() {
    this.total = 0;
    this.listInfoResume.push({ name: 'Vehiculos', items: [] });
    Object.keys(this.formVehiculos.value).forEach((type: any) => {
      
      if (this.formVehiculos.get(`${type}.active`).value) {
        if (this.getVehiclesForm(type).length > 0) {
          this.formVehiculos
            .get(`${type}.vehicles`)
            .value.forEach((element, index) => {
              const value = element.price * element.quanty;
              this.total += value;
              this.listInfoResume[0].items.push({
                name: `${this.getnameBrand(
                  this.formVehiculos.get(`${type}.id`).value,
                  element.brand
                )} ${this.getNameModel(
                  this.formVehiculos.get(`${type}.id`).value,
                  element.vehicleModelId
                )}`,
                desc: `$ ${element.price} x ${element.quanty}`,
                value: value,
              });
              this.addVehicleServices(type, element);
            });
        }
      }
    });
    this.listInfoResume.push({
      name: 'Servicios adicionales',
      items: [
        { name: 'Telemetría básica', value: 0 },
        { name: 'Telemetría + Chequeo preoperacional', value: 0},
      ],
    });
    this.totalAux = this.total;
  }

  getVehiclesToServices(): any[] {
    let listVehicles: any = [];
    for (let key in this.formServices.value) {
      this.getVehiclesServicesForm(key).value.forEach((vehicle, i)=> {
        const vehicleform = this.getVehiclesForm(key).value[i];
        if (vehicle.telemetryBasic) {
          const vehicleWithService = {
            ...vehicleform,  
            listServiceAdditional: [
              {id: this.listServices.basic.services[this.valueControlServicesForm(key, 'id')-1].id, 
                price: this.getVehiclesServicesForm(key).value[i].price}]  
          };
          listVehicles.push(vehicleWithService);
          return;
        }
        if (vehicle.telemetryPreo) {
          const vehicleWithService = {
            ...vehicleform,  
            listServiceAdditional: [{id: this.listServices.check.services[this.valueControlServicesForm(key, 'id')-1].id,
              price: this.getVehiclesServicesForm(key).value[i].price} ] 
          };
          listVehicles.push(vehicleWithService);
          return;
        }
        listVehicles.push(vehicleform);
      });
    }
    return listVehicles;
  }

  getnameBrand(vehicleType: number, id: number): string {
    let brand: any;
    brand = this.listBrand[vehicleType].find(
      (item: { name: string; brand: number }) => {
        return item.brand === id;
      }
    );
    return brand.name;
  }

  getNameModel(vehicleType: number, id: number): string {
    let model: any;
    model = this.listModelServices[vehicleType].find((item) => {
      return item.id === id;
    });
    return model.reference;
  }

  changeServicesTelemetry(
    event: MatCheckboxChange,
    value: number,
    id: number,
    index: number,
    type: string
  ): void {
    const formArray = this.getVehiclesServicesForm(type);
   const formGroup = formArray.at(index) as FormGroup;
    if (event.checked) {
     if (formGroup) {
      if (!formGroup.contains('price')) {
        formGroup.addControl('price', this._formBuilder.control('', Validators.required));
      }
    } else {
      console.error(`No se encontró el FormGroup en el índice ${index}`);
    }
     
    }else{
      if (formGroup.contains('price')) {
        formGroup.removeControl('price');
      }
      this.listaditionals[type][index][value] = [];
      this.sumAditionals();
    }
  }

  getServicesAditionals() {
    this.loading = true;
    this.vehiclesService
      .getServicesKeyService('SERVICE_ADDITIONAL_FO')
      .pipe(finalize(() => (this.loading = false)))
      .subscribe({
        next: (res) => {
          this.listServices.basic.services = res.data.slice(0, 4);
          this.listServices.check.services = res.data.slice(4, 8);
        },
      });
  }

  bort(index, indexType,type){
    console.log(index, indexType, type);
    
    const formArray = this.getVehiclesServicesForm(type);
    const formGroup = formArray.at(index) as FormGroup;
    if (!this.listaditionals[type]) {
      this.listaditionals[type] = []; 
    }
  
    if (!this.listaditionals[type][index]) {
      this.listaditionals[type][index] = [];  
    }
    if (!this.listaditionals[type][index][indexType]) {
      this.listaditionals[type][index][indexType] = { value: 0, desc: '' };
    }
    const price = formGroup.get('price').value;
    const quantity = this.getVehiclesForm(type).value[index].quanty;
    
    this.listaditionals[type][index][indexType] = {desc : `$ ${price} x ${quantity}`, value: price * quantity};
    this.sumAditionals();
  }

  sumAditionals(){
    this.total = this.totalAux;
    this.listInfoResume[1].items[0].subdesc = [];
    this.listInfoResume[1].items[1].subdesc = [];
    Object.keys(this.listaditionals).forEach((key) => {
      this.listaditionals[key].forEach((value) => {
        value.forEach((value2, i ) => {
          console.log(value2+ "index "+i);
          if (i== 0 && value2 != '') {
            this.listInfoResume[1].items[0].subdesc.push({subtitle : value2.desc, value: value2.value});
            this.total  += value2.value > 0 ? +value2.value : 0;
          }else{
            this.listInfoResume[1].items[1].subdesc.push({subtitle  : value2.desc, value: value2.value});
            this.total  += value2.value > 0 ? +value2.value : 0;
          }
        });
      });
    });
  }
}
" y estan fallando algunos tests, mi clase de test es la siguiente "import { ModalContractOkModule } from '../modal-contract-ok/modal-contract-ok.module';
import { CompaniesService } from 'src/app/services/companies/companies.service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { HeaderService } from 'src/app/services/header/header.service';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NewContractComponent } from './new-contract.component';
import { RouterTestingModule } from '@angular/router/testing';
import { SharedModule } from 'src/app/shared/shared.module';
import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { of, throwError } from 'rxjs';
import { CatalogService } from 'src/app/services/catalog/catalog.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDialog } from '@angular/material/dialog';
import { VehicleService } from 'src/app/services/vehicle/vehicle.service';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';


describe('NewContractComponent', () => {
  let component: NewContractComponent;
  let fixture: ComponentFixture<NewContractComponent>;
  let companiesService: CompaniesService;
  let headerService: HeaderService;
  let router: Router;
  let formBuilder: FormBuilder;
  let snackBar: MatSnackBar;
  let dialog: MatDialog;

  class MockCompaniesService {
    getCompanyDetail() {
      return {
        data: {
          id: 1,
          name: 'Test Company',
          tipoIdentificacionC: 'NIT',
          numeroIdentificacionC: '123456789',
        }
      };
    }
  
    getListVehicleTypes() {
      return of([
        { id: 1, name: 'Sedan' },
        { id: 2, name: 'SUV' },
        { id: 3, name: 'Truck' }
      ]);
    }
  
    registerContract(body:any) {
      return of({
        data: {
          process: true
        }
      });
    }
  }
  class MockCatalogService {
    getCitiesEnabled() {
      return of({
        data: [
          { code: 1, name: 'City 1' },
          { code: 2, name: 'City 2' },
        ],
      });
    }
    getDocumentTypes() {
      return of([
        { id: 1, name: 'ID Card' },
        { id: 2, name: 'Passport' },
        { id: 3, name: 'Driver License' }
      ]);
    }
  }
  
  class MockHeaderService {
    updateTitle(title: string) {}
    updateSubtitle(subtitle: string) {}
  }
  


  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [NewContractComponent],
      imports: [
        CommonModule,
        RouterTestingModule.withRoutes([]),
        SharedModule,
        ReactiveFormsModule,
        ModalContractOkModule,
        HttpClientTestingModule,
        BrowserAnimationsModule
      ],
      providers: [
        { provide: CompaniesService, useClass: MockCompaniesService },
        { provide: HeaderService, useClass: MockHeaderService },
        { provide: CatalogService, useClass: MockCatalogService },
        { provide: MatSnackBar, useValue: { open: jasmine.createSpy('open') } },
        { provide: MatDialog, useValue: { open: jasmine.createSpy('open').and.returnValue({ afterClosed: () => of(true) }) } },
        { provide: Router, useValue: { navigate: jasmine.createSpy('navigate') } },
        FormBuilder
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(NewContractComponent);
    companiesService = TestBed.inject(CompaniesService);
    headerService = TestBed.inject(HeaderService);
    formBuilder = TestBed.inject(FormBuilder);
    component = fixture.componentInstance;
    router = TestBed.inject(Router);
    snackBar = TestBed.inject(MatSnackBar);
    dialog = TestBed.inject(MatDialog);
    component.firstFormGroup = formBuilder.group({
      startDate: ['', Validators.required],
      endDate: ['', Validators.required],
      billingCity: ['', Validators.required],
      automaticCharge: [''],
      dataPerson: formBuilder.group({
        names: [''],
        surnames: [''],
        documentType: [''],
        documentNumber: [''],
        phone: [''],
        hour: ['']
      })
    });
    component.formVehiculos = formBuilder.group({
      brand: ["", Validators.required],
      vehicleModelId: ["", Validators.required],
      quanty: ["", Validators.required, Validators.min(1)],
      cityCode: ["", Validators.required],
      price: ["", Validators.required]
    });
    component.listBrand = [
      [
        { name: 'Toyota', brand: 1 },
        { name: 'Honda', brand: 2 }
      ],
      [
        { name: 'Ford', brand: 3 },
        { name: 'Chevrolet', brand: 4 }
      ]
    ];
    component.listModelServices = [
      [
        { id: 1, reference: 'Model A' },
        { id: 2, reference: 'Model B' }
      ],
      [
        { id: 3, reference: 'Model C' },
        { id: 4, reference: 'Model D' }
      ]
    ];
    component.listaditionals = {
      type1: [
        [
          { desc: 'Adicional 1', value: 100 },
          { desc: 'Adicional 2', value: 200 },
        ],
        [
          { desc: 'Adicional 3', value: 300 },
        ],
      ],
      type2: [
        [
          { desc: 'Adicional 4', value: 400 },
        ],
      ],
    };
    formBuilder = TestBed.inject(FormBuilder);
    fixture.detectChanges();
  });
  
  it('should create', () => {
    expect(component).toBeTruthy();
  });
  
  
  
  it('should fill list of vehicle types and create form controls', () => {
    spyOn(companiesService, 'getListVehicleTypes').and.callThrough();
    component.fillListVehicleTypes();
    fixture.detectChanges();
    expect(companiesService.getListVehicleTypes).toHaveBeenCalled();
    expect(component.listVehicleTypes.length).toBeGreaterThan(0);
    expect(Object.keys(component.formVehiculos.controls)).toContain('Sedan');
  });
  
  it('should fetch and set cities', () => {
    const catalogService = TestBed.inject(CatalogService);
    const citiesResponse = {
      data: [
        { code: 1, name: 'City 1' },
        { code: 2, name: 'City 2' },
      ],
    };
    spyOn(catalogService, 'getCitiesEnabled').and.returnValue(of(citiesResponse));
  
    component.getCities();
    fixture.detectChanges();
  
    expect(catalogService.getCitiesEnabled).toHaveBeenCalled();
    expect(component.cities.length).toBe(2);
  });
  
  it('should return true if any dataPerson field is filled', () => {
    component.firstFormGroup.get('dataPerson').setValue({
      names: 'John',
      surnames: '',
      documentType: '',
      documentNumber: '',
      phone: '',
      hour: ''
    });
  
    expect(component['isDataPersonFilled']()).toBeTruthy();
  });
  
  it('should return false if all dataPerson fields are empty', () => {
    component.firstFormGroup.get('dataPerson').setValue({
      names: '',
      surnames: '',
      documentType: '',
      documentNumber: '',
      phone: '',
      hour: ''
    });
  
    expect(component['isDataPersonFilled']()).toBeFalsy();
  });
  
  it('should mark all fields as touched and return if formVehiculos is invalid', () => {
    
    spyOn(component.formVehiculos, 'markAllAsTouched');

    component.createContract();

    expect(component.formVehiculos.markAllAsTouched).toHaveBeenCalled();
  });

  it('should show snackbar if no vehicles are registered', () => {
    spyOn(component, 'getListVehicles').and.returnValue([]);
    component.formVehiculos = new FormBuilder().group({}); // Se asegura de que el formulario sea válido

    component.createContract();

    expect(snackBar.open).toHaveBeenCalledWith('Debe registrar vehiculos', null, { duration: 2000 });
  });

  it('should set body and call registerContract if formVehiculos is valid and vehicles are registered', () => {
    component.formVehiculos = new FormBuilder().group({});
    spyOn(component, 'getListVehicles').and.returnValue([{ vehicleModelId: 1, cityCode:'05001', quanty: 1 }]);
    spyOn(companiesService, 'registerContract').and.callThrough();
    spyOn(component, 'getVehiclesToServices').and.returnValue([{ vehicleModelId: 1, cityCode:'05001', quanty: 1 }]);
    component.companyDetail = { data: { tipoIdentificacionC: 'NIT', numeroIdentificacionC: '123', id: '1' }, message: 'copnsulta exitosa' };
    component.firstFormGroup = new FormBuilder().group({
      startDate: ['2021-01-01'],
      endDate: ['2021-12-31'],
      billingCity: ['city'],
      automaticCharge: true,
      dataPerson: new FormBuilder().group({
        names: ['John'],
        surnames: ['Doe'],
        documentType: ['ID'],
        documentNumber: ['123'],
        phone: ['555'],
        hour: ['10:00']
      })
    });

    component.createContract();

    expect(companiesService.registerContract).toHaveBeenCalled();
    expect(component.body).toEqual({
      clientDocumentType: 'N',
      clientDocumentNumber: '123',
      startDate: '2021-01-01',
      endDate: '2021-12-31',
      listVehicles: [{ vehicleModelId: 1, cityCode:'05001', quanty: 1 }],
      billingCity: 'city',
      automaticCharge:true,
      contractDeliveryManager: {
        names: 'John',
        surnames: 'Doe',
        documentType: 'ID',
        documentNumber: '123',
        phone: '555',
        hourDelivery: '10:00'
      }
    });
  });

  it('should handle error when registering contract', () => {
    component.formVehiculos = new FormBuilder().group({});
    spyOn(component, 'getListVehicles').and.returnValue([{ vehicleModelId: 1, cityCode:'05001', quanty: 1 }]);
    spyOn(companiesService, 'registerContract').and.returnValue(throwError({ status: 500 }));

    component.createContract();

    expect(companiesService.registerContract).toHaveBeenCalled();
    expect(snackBar.open).toHaveBeenCalledWith('Error al registar anexo', null, { duration: 3000 });
  });

  it('should handle error 400 when registering contract', () => {
    component.formVehiculos = new FormBuilder().group({});
    spyOn(component, 'getListVehicles').and.returnValue([{ vehicleModelId: 1, cityCode:'05001', quanty: 1 }]);
    spyOn(companiesService, 'registerContract').and.returnValue(throwError({ status: 400, error: {} }));
    spyOn(component, 'setErrorResponse');

    component.createContract();

    expect(companiesService.registerContract).toHaveBeenCalled();
    expect(component.setErrorResponse).toHaveBeenCalled();
    expect(snackBar.open).toHaveBeenCalledWith('La cantidad de vehículos supera la disponibilidad de inventario', 'x', { duration: 3000, panelClass: 'snack' });
  });

  it('should fill services form', () => {
    component.formVehiculos = new FormBuilder().group({});
    component.formVehiculos.addControl(
      'carro',
      new FormBuilder().group({id: 4, active: true, vehicles:[{brand:6, vehicleModelId: 4, quanty: 1, price: 25000, cityCode: '5001'}]})
    );
    component.listVehicleTypes = [{name:'carro', id: 4, maxPassengers: 2 }];
    spyOn(component, 'fillInfoVehiclesToEdit').and.callFake(()=> {});
    spyOn(component, 'getServicesAditionals').and.callFake(()=> {});

    component.fillServicesForm();

    expect(component.fillInfoVehiclesToEdit).toHaveBeenCalled();
    expect(component.getServicesAditionals).toHaveBeenCalled();
  });

  it('should fill info vehicles to edit', () => {
    component.formVehiculos = formBuilder.group({
      car: formBuilder.group({
        active: true,
        vehicles: [
          { price: 10000, quanty: 2, brand: 1, vehicleModelId: 1 },
          { price: 20000, quanty: 1, brand: 1, vehicleModelId: 2 },
        ],
        id: 1,
      }),
    });

    component.listBrand = 
    [{ brand: 1, name: 'BrandA' }];
    

    component.listModelServices = [{ id: 1, reference: 'ModelA' }, { id: 2, reference: 'ModelB' }];
    spyOn(component, 'getVehiclesForm').and.callFake((type: string) => {
      const vehiclesFormArray = component.formVehiculos.get(`${type}.vehicles`).value as FormArray;
      return vehiclesFormArray;
    });
    spyOn(component, 'addVehicleServices').and.callFake(() => {});

    component.fillInfoVehiclesToEdit();

    expect(component.getVehiclesForm).toHaveBeenCalled();
    expect(component.listInfoResume.length).toBe(2);

  });

  it('should update listInfoResume values based on checkbox state', () => {
    component.listServices = {
      basic: {
        services: [
          { price: 10 },
          { price: 20 },
        ],
      },
      check: {
        services: [
          { price: 30 },
          { price: 40 },
        ],
      },
    };
    component.listInfoResume = [];
    component.listInfoResume.push({ name: 'Vehiculos', items: [] });
    component.listInfoResume.push({
    name: 'Servicios adicionales',
      items: [
        { name: 'Telemetría básica', value: 0, subdesc: [] },
        { name: 'Telemetría + Chequeo preoperacional', value: 0, subdesc: [] },
      ],
    });
    const event = { checked: true } as MatCheckboxChange;
    const type = 'someType';
    const index = 0;
    const id = 1;
    const value = 0;
    const mockForm = { value: [{ quanty: 2 }] };
    component.formServices = formBuilder.group({});
  component.formServices.addControl(
    type,
    formBuilder.group({
      id: [1],
      active: [true],
      vehicles: formBuilder.array([
        formBuilder.group({
          price: [null],
          quanty: [2],
        }),
      ]),
    })
  );

  component.changeServicesTelemetry(event, value, id, index, type);

  expect(component.listInfoResume[1].items[0].value).toBe(0);

    expect(component.listInfoResume[1].items[0].value).toBe(0);

    event.checked = false;
    component.changeServicesTelemetry(event, value, id, index, type);
    expect(component.listInfoResume[1].items[0].value).toBe(0);
  });

  it('should handle the "check" value correctly', () => {
    
    component.listServices = {
      basic: {
        services: [
          { price: 10 },
          { price: 20 },
        ],
      },
      check: {
        services: [
          { price: 30 },
          { price: 40 },
         
        ],
      },
    };
    component.listInfoResume = [];
    component.listInfoResume.push({ name: 'Vehiculos', items: [] });
    component.listInfoResume.push({
      name: 'Servicios adicionales',
      items: [
        { name: 'Telemetría básica', value: 0, subdesc: [] },
        { name: 'Telemetría + Chequeo preoperacional', value: 0, subdesc: [] },
      ],
    });

    const type = 'someType';
    const index = 0;
    const id = 2; 
    const value = 1;
    component.formServices = formBuilder.group({});
    component.formServices.addControl(
      type,
      formBuilder.group({
        id: [2],
        active: [true],
        vehicles: formBuilder.array([
          formBuilder.group({
            price: [null],
            quanty: [3],
          }),
        ]),
      })
    );

    const event = { checked: true } as MatCheckboxChange;

    component.changeServicesTelemetry(event, value, id, index, type);

    expect(component.listInfoResume[1].items[1].value).toBe(0); // 40 * 3

    event.checked = false;
    component.changeServicesTelemetry(event, value, id, index, type);
    expect(component.listInfoResume[1].items[1].value).toBe(0);
  });

  it('should return the correct brand name for a given vehicleType and id', () => {
    
    const brandName = component.getnameBrand(0, 1); 

    expect(brandName).toBe('Toyota');
  });

  it('should return the correct model reference for a given vehicleType and id', () => {
    
    const modelReference = component.getNameModel(0, 1);
    
    expect(modelReference).toBe('Model A');
  });

  it('should return the correct list of vehicles with additional services', () => {
    component.listServices = {
      basic: {
        services: [
          { id: 1, name: 'Basic Service 1' },
          { id: 2, name: 'Basic Service 2' }
        ],
      },
      check: {
        services: [
          { id: 3, name: 'Check Service 1' },
          { id: 4, name: 'Check Service 2' }
        ],
      },
    };

    component.formServices = formBuilder.group({});
    component.formServices.addControl(
      'carro',
      formBuilder.group({
        id: [1],
        active: [true],
        vehicles: formBuilder.array([formBuilder.group({
          brand: ['6'],
          vehicleModelId: ['3'],
          quanty: ['1' ],
          telemetryBasic: true,
          telemetryPreo: false,
        })]),
      })
    );
    component.formVehiculos = formBuilder.group({});
    component.formVehiculos.addControl(
      'carro',
      formBuilder.group({
        id: [1],
        active: [true],
        vehicles: formBuilder.array([formBuilder.group({
          brand: ['6'],
          vehicleModelId: ['3'],
          quanty: ['1' ],
          cityCode: ['5001' ],
          price: ['15000'],
        })]),
      })
    );

    const result = component.getVehiclesToServices();

    expect(result.length).toBe(1); 
    expect(result[0].listServiceAdditional).toEqual([{ id: 1, price: undefined }]); 
  });

  it('should add a new vehicle form group to the specified form', () => {
    spyOn(component, 'getVehiclesForm').and.callFake(() => formBuilder.array([]));
    const nameFormGroup = 'form1';

    component.addVehicle(nameFormGroup);

    expect(component.getVehiclesForm).toHaveBeenCalled();
   
  });

  it('should add a vehicle when form is empty', () => {
    spyOn(component, 'getVehiclesForm').and.returnValue(formBuilder.array([]));
    spyOn(component, 'addVehicle');
  
    const change: MatSlideToggleChange = {
      checked: true,
      source: { name: 'vehicleType' } as any
    };
  
    component.changeVehicleType(change);
  
    expect(component.addVehicle).toHaveBeenCalledWith('vehicleType');
  });

  it('should reset and delete vehicles when toggle is unchecked', () => {
    // Mock de las funciones
    const mockFormArray = formBuilder.array([]);
    spyOn(component, 'getVehiclesForm').and.returnValue(mockFormArray);
    spyOn(component, 'delete');
    spyOn(component.formVehiculos, 'get').and.callFake((name: string) => {
      return {
        get: (controlName: string) => ({
          setValue: () => {}
        })
      } as any;
    });
  
    const change: MatSlideToggleChange = {
      checked: false,
      source: { name: 'vehicleType' } as any
    };
  
    component.changeVehicleType(change);
  
    expect(component.getVehiclesForm).toHaveBeenCalledWith('vehicleType');
    expect(component.delete).toHaveBeenCalledTimes(mockFormArray.length);
    expect(component.formVehiculos.get).toHaveBeenCalledWith('vehicleType');
  });

  it('should correctly calculate and update subdesc in listInfoResume', () => {
    const type = 'vehicles';
    const index = 0;
    const indexType = 0;
    component.formServices = formBuilder.group({});
    component.formServices.addControl(
      type,
      formBuilder.group({
        vehicles: formBuilder.array([
          formBuilder.group({
            price: [100],
          }),
        ]),
      })
    );
    component.formVehiculos = formBuilder.group({});
    component.formVehiculos.addControl(
      type,
      formBuilder.group({
        vehicles: formBuilder.array([
          formBuilder.group({
            quanty: [2],
          }),
        ]),
      })
    );
    component.listInfoResume = [
      {},
      {
        items: [
          {
            subdesc: []
          }
        ]
      }
    ];
    

    component.bort(index, indexType, type);

  expect(component.listInfoResume[1].items[indexType].subdesc[index].value).toBe(200); // 100 * 2
  expect(component.listInfoResume[1].items[indexType].subdesc[index].subtitle).toBe('$ 100 x 2');
  });

  describe('sumAditionals', () => {
    beforeEach(() => {
      component.totalAux = 1000;
      component.total = 0;

      component.listInfoResume = [
        {}, 
        {
          items: [
            { subdesc: [] },
            { subdesc: [] }, 
          ],
        },
      ];

      
    });

    it('debería sumar los adicionales correctamente y actualizar total y subdesc', () => {
      component.sumAditionals();

      expect(component.total).toBe(1000 + 100 + 200 + 300 + 400);

      expect(component.listInfoResume[1].items[0].subdesc).toEqual([
        { subtitle: 'Adicional 1', value: 100 },
        { subtitle: 'Adicional 4', value: 400 },
      ]);

      expect(component.listInfoResume[1].items[1].subdesc).toEqual([
        { subtitle: 'Adicional 2', value: 200 },
        { subtitle: 'Adicional 3', value: 300 },
      ]);
    });

    it('debería manejar listaditionals vacío sin errores', () => {
      component.listaditionals = {};

      component.sumAditionals();

      expect(component.total).toBe(1000);
      expect(component.listInfoResume[1].items[0].subdesc).toEqual([]);
      expect(component.listInfoResume[1].items[1].subdesc).toEqual([]);
    });

    it('no debería agregar adicionales si value2 es una cadena vacía', () => {
      component.listaditionals = {
        type1: [
          [
            '', 
          ],
        ],
      };

      component.sumAditionals();

      expect(component.total).toBe(1000);
      expect(component.listInfoResume[1].items[0].subdesc).toEqual([]);
      expect(component.listInfoResume[1].items[1].subdesc).toEqual([]);
    });

    it('debería sumar solo valores positivos de value2.value', () => {
      component.listaditionals = {
        type1: [
          [
            { desc: 'Adicional Negativo', value: -100 },
            { desc: 'Adicional Cero', value: 0 },
            { desc: 'Adicional Positivo', value: 150 },
          ],
        ],
      };

      component.sumAditionals();

      expect(component.total).toBe(1000 + 150);

      expect(component.listInfoResume[1].items[0].subdesc).toEqual([
        { subtitle: 'Adicional Negativo', value: -100 },
      ]);

      expect(component.listInfoResume[1].items[1].subdesc).toEqual([
        { subtitle: 'Adicional Cero', value: 0 },
        { subtitle: 'Adicional Positivo', value: 150 },
      ]);
    });
  });
});

" y los errores que esto teniendo son estos "NewContractComponent sumAditionals no debería agregar adicionales si value2 es una cadena vacía FAILED                                        
        Expected $.length = 1 to equal 0.
        Unexpected $[0] = Object({ subtitle: undefined, value: undefined }) in array.
        Error: Expected $.length = 1 to equal 0.
        Unexpected $[0] = Object({ subtitle: undefined, value: undefined }) in array.NewContractComponent sumAditionals debería sumar los adicionales correctamente y actualizar total y subdesc FAILED                            
        Expected $.length = 3 to equal 2.
        Expected $[1].subtitle = 'Adicional 3' to equal 'Adicional 4'.
        Expected $[1].value = 300 to equal 400.
        Unexpected $[2] = Object({ subtitle: 'Adicional 4', value: 400 }) in array.
        Error: Expected $.length = 3 to equal 2.
        Expected $[1].subtitle = 'Adicional 3' to equal 'Adicional 4'.
        Expected $[1].value = 300 to equal 400.
        Unexpected $[2] = Object({ subtitle: 'Adicional 4', value: 400 }) in array.
            at <Jasmine>
            at UserContext.<anonymous> (src/app/organisms/companies/new-contract/new-contract.component.spec.ts:664:60)
            at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:372:1)
            at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:287:1)
        Expected $.length = 1 to equal 2.
        Expected $[1] = undefined to equal Object({ subtitle: 'Adicional 3', value: 300 }).
        Error: Expected $.length = 1 to equal 2.
        Expected $[1] = undefined to equal Object({ subtitle: 'Adicional 3', value: 300 }).NewContractComponent should correctly calculate and update subdesc in listInfoResume FAILED                                                   
        TypeError: Cannot set properties of undefined (setting 'subdesc')
            at NewContractComponent.sumAditionals (src/app/organisms/companies/new-contract/new-contract.component.ts:749:5)
            at NewContractComponent.bort (src/app/organisms/companies/new-contract/new-contract.component.ts:743:10)
            at UserContext.<anonymous> (src/app/organisms/companies/new-contract/new-contract.component.spec.ts:635:15)
            at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:372:1)
            at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:287:1)
            at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:371:1)
            at Zone.run (node_modules/zone.js/fesm2015/zone.js:134:1)NewContractComponent should correctly calculate and update subdesc in listInfoResume FAILED                                                   
        TypeError: Cannot set properties of undefined (setting 'subdesc')
            at NewContractComponent.sumAditionals (src/app/organisms/companies/new-contract/new-contract.component.ts:749:5)
            at NewContractComponent.bort (src/app/organisms/companies/new-contract/new-contract.component.ts:743:10)
            at UserContext.<anonymous> (src/app/organisms/companies/new-contract/new-contract.component.spec.ts:635:15)
            at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:372:1)
            at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:287:1)
            at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:371:1)
            at Zone.run (node_modules/zone.js/fesm2015/zone.js:134:1)NewContractComponent should update listInfoResume values based on checkbox state FAILED                                                       
        TypeError: Cannot read properties of undefined (reading '0')
            at NewContractComponent.changeServicesTelemetry (src/app/organisms/companies/new-contract/new-contract.component.ts:706:7)
            at UserContext.<anonymous> (src/app/organisms/companies/new-contract/new-contract.component.spec.ts:420:15)
            at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:372:1)
            at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:287:1)
            at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone."