describe('Login Form', () => {

  beforeEach(() => {
    cy.visit('http://localhost:4200');
  });

  it('have title "Template Driven Forms 實作 ─ 登入"', () => {
    // Arrange
    const title = 'Template Driven Forms 實作 ─ 登入';
    // Assert
    cy.get('h1').should('have.text', title);
  });

  context('When typing the correct account and password', () => {
    it('should can login', () => {
      // Act
      cy.get('#account').type('[email protected]');
      cy.get('#password').type('12345678');
      // Assert
      cy.get('button').should('be.enabled');
    });
  });

  context('When typing the incorrect account and the correct password', () => {
    it('should can not login', () => {
      // Act
      cy.get('#account').type('abcdef');
      cy.get('#password').type('12345678');
      // Assert
      cy.get('button').should('be.disabled');
    });
  });

  context('When typing the correct account and the incorrect password', () => {
    it('should can not login', () => {
      // Act
      cy.get('#account').type('[email protected]');
      cy.get('#password').type('12345');
      // Assert
      cy.get('button').should('be.disabled');
    });
  });
});

const data = {
  account: ['', [ /* Validators... */]]
  password: ['', [ /* Validators... */]]
};
const formGroup = this.formBuilder.group(data);

describe('TemplateDrivenFormsAsyncInsuredComponent', () => {
  // 其他省略...

  describe('Unit testing', () => {
    // 昨天寫的單元測試...
  });

  describe('Integration testing', () => {
    // 今天要寫的整合測試
  });
});

describe('Integration testing', () => {
  let compiledComponent: HTMLElement;

  beforeEach(() => {
    compiledComponent = fixture.nativeElement;
  });

  // 案例寫在這邊
});

describe('the insured fields', () => {
  let formGroup: FormGroup;

  beforeEach(() => {
    const nameControl = new FormControl('', [
      Validators.required,
      Validators.minLength(2),
      Validators.maxLength(10)
    ]);
    const genderControl = new FormControl('', Validators.required);
    const ageControl = new FormControl('', Validators.required);
    formGroup = new FormGroup({
      name: nameControl,
      gender: genderControl,
      age: ageControl
    });
    component.formArray.push(formGroup);
    fixture.detectChanges();
  });

  describe('the name input field', () => {
    let nameInputElement: HTMLInputElement;

    beforeEach(() => {
      nameInputElement = compiledComponent.querySelector('#name-0')!;
    });

    it('should have attribute "type" and the value is "text"', () => {
      // Arrange
      const attributeName = 'type';
      const attributeValue = 'text';
      // Assert
      expect(nameInputElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "formControlName" and the value is "name"', () => {
      // Arrange
      const attributeName = 'formControlName';
      const attributeValue = 'name';
      // Assert
      expect(nameInputElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    describe('Error Messages', () => {
      let nameFormControl: FormControl;

      beforeEach(() => {
        nameFormControl = formGroup.get('name') as FormControl;
      });

      it('should be empty string when property "pristine" of the "formControl" is `true`', () => {
        // Arrange
        const targetElement = compiledComponent.querySelector('#name-0 + .error-message');
        // Assert
        expect(targetElement?.textContent).toBe('');
      });

      describe('when the field is dirty', () => {

        beforeEach(() => {
          nameFormControl.markAsDirty();
          fixture.detectChanges();
        });

        it('should be "此欄位必填" when the value is empty string', () => {
          // Arrange
          const errorMessage = '此欄位必填';
          const targetElement = compiledComponent.querySelector('#name-0 + .error-message');
          // Assert
          expect(targetElement?.textContent).toBe(errorMessage);
        });

        it('should be "姓名至少需兩個字以上" when the value\'s length less than 2', () => {
          // Arrange
          nameFormControl.setValue('A')
          const errorMessage = '姓名至少需兩個字以上';
          const targetElement = compiledComponent.querySelector('#name-0 + .error-message');
          // Act
          fixture.detectChanges();
          // Assert
          expect(targetElement?.textContent).toBe(errorMessage);
        });

        it('should be "姓名至多只能輸入十個字" when the value\'s length greater than 10', () => {
          // Arrange
          nameFormControl.setValue('ABCDE123456')
          const errorMessage = '姓名至多只能輸入十個字';
          const targetElement = compiledComponent.querySelector('#name-0 + .error-message');
          // Act
          fixture.detectChanges();
          // Assert
          expect(targetElement?.textContent).toBe(errorMessage);
        });

        it('should be empty string when there are not any errors', () => {
          // Arrange
          nameFormControl.setValue('ABCDE123456')
          const errorMessage = '姓名至多只能輸入十個字';
          const targetElement = compiledComponent.querySelector('#name-0 + .error-message');
          // Act
          fixture.detectChanges();
          // Assert
          expect(targetElement?.textContent).toBe(errorMessage);
        });
      });
    });
  });
});

describe('the gender radio buttons', () => {
  let radioButtonElement: HTMLInputElement;

  describe('male', () => {
    beforeEach(() => {
      radioButtonElement = compiledComponent.querySelector(`#male-0`)!;
    });

    it('should have attribute "type" and the value is "radio"', () => {
      // Arrange
      const attributeName = 'type';
      const attributeValue = 'radio';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "formControlName" and the value is "gender"', () => {
      // Arrange
      const attributeName = 'formControlName';
      const attributeValue = 'gender';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "value" and the value is "male"', () => {
      // Arrange
      const attributeName = 'value';
      const attributeValue = 'male';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });
  });

  describe('female', () => {
    beforeEach(() => {
      radioButtonElement = compiledComponent.querySelector(`#female-0`)!;
    });

    it('should have attribute "type" and the value is "radio"', () => {
      // Arrange
      const attributeName = 'type';
      const attributeValue = 'radio';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "formControlName" and the value is "gender"', () => {
      // Arrange
      const attributeName = 'formControlName';
      const attributeValue = 'gender';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "value" and the value is "female"', () => {
      // Arrange
      const attributeName = 'value';
      const attributeValue = 'female';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });
  });
});

describe('the age field', () => {
  const key = 'age-0'
  let ageSelectElement: HTMLSelectElement;

  beforeEach(() => {
    ageSelectElement = compiledComponent.querySelector(`#${key}`)!;
  });

  it('should have attribute "formControlName" and the value is "age"', () => {
    // Arrange
    const attributeName = 'formControlName';
    const attributeValue = 'age';
    // Assert
    expect(ageSelectElement.getAttribute(attributeName)).toBe(attributeValue);
  });

  describe('Error Messages', () => {
    let ageFormControl: FormControl;

    beforeEach(() => {
      ageFormControl = formGroup.get('age') as FormControl;
    });

    it('should be empty string when property "pristine" of the "formControl" is `true`', () => {
      // Arrange
      const targetElement = compiledComponent.querySelector('#age-0 + .error-message');
      // Assert
      expect(targetElement?.textContent).toBe('');
    });

    describe('when the field is dirty', () => {
      beforeEach(() => {
        ageFormControl.markAsDirty();
        fixture.detectChanges();
      });

      it('should be "此欄位必填" when the value is empty string', () => {
        // Arrange
        const errorMessage = '此欄位必填';
        const targetElement = compiledComponent.querySelector('#age-0 + .error-message');
        // Assert
        expect(targetElement?.textContent).toBe(errorMessage);
      });
    });
  });
});

describe('Delete insured button', () => {
  it('should trigger function `deleteInsured` after being clicked', () => {
    // Arrange
    const index = 0;
    const deleteButtonElement = compiledComponent.querySelector('fieldset button[type="button"]') as HTMLElement;
    spyOn(component, 'deleteInsured');
    // Act
    deleteButtonElement.click();
    // Assert
    expect(component.deleteInsured).toHaveBeenCalledWith(index);
  });
});

describe('add insured button', () => {
  it('should trigger function `addInsured` after being clicked', () => {
    // Arrange
    const addButtonElement = compiledComponent.querySelector('p:last-child button[type="button"]') as HTMLElement;
    spyOn(component, 'addInsured');
    // Act
    addButtonElement.click();
    // Assert
    expect(component.addInsured).toHaveBeenCalled();
  });
});

describe('submit button', () => {
  let buttonElement: HTMLButtonElement;

  beforeEach(() => {
    buttonElement = compiledComponent.querySelector('button[type="submit"]') as HTMLButtonElement;
  });

  it('should be existing', () => {
    // Assert
    expect(buttonElement).toBeTruthy();
  });

  it('should be disabled when there are not any insureds', () => {
    // Assert
    expect(buttonElement.hasAttribute('disabled')).toBe(true);
  });

  describe('When there is a insured', () => {
    let formGroup: FormGroup;

    beforeEach(() => {
      const nameControl = new FormControl('', [
        Validators.required,
        Validators.minLength(2),
        Validators.maxLength(10)
      ]);
      const genderControl = new FormControl('', Validators.required);
      const ageControl = new FormControl('', Validators.required);
      formGroup = new FormGroup({
        name: nameControl,
        gender: genderControl,
        age: ageControl
      });
      component.formArray.push(formGroup);
      fixture.detectChanges();
    });

    it('should be disabled when there ara any verifying errors that insured\'s data', () => {
      // Arrange
      compiledComponent.querySelector('button[type="submit"]')
      // Act
      fixture.detectChanges();
      // Assert
      expect(buttonElement.hasAttribute('disabled')).toBe(true);
    })

    it('should be enabled when there ara any verifying errors that insured\'s data', () => {
      // Arrange
      formGroup.patchValue({
        name: 'Leo',
        gender: 'male',
        age: '18',
      });
      // Act
      fixture.detectChanges();
      // Assert
      expect(buttonElement.hasAttribute('disabled')).toBe(false);
    })
  });
});

export class ReactiveFormsAsyncInsuredComponent implements OnInit {

  /**
   * 綁定在表單上
   *
   * @type {(FormGroup | undefined)}
   * @memberof ReactiveFormsAsyncInsuredComponent
   */
  formGroup: FormGroup | undefined;

  /**
   *  用以取得 FormArray
   *
   * @readonly
   * @type {FormArray}
   * @memberof ReactiveFormsAsyncInsuredComponent
   */
  get formArray(): FormArray {
    return this.formGroup?.get('insuredList')! as FormArray;
  }

  /**
   * 綁定在送出按鈕上，判斷表單是不是無效
   *
   * @readonly
   * @type {boolean}
   * @memberof ReactiveFormsAsyncInsuredComponent
   */
  get isFormInvalid(): boolean {
    return this.formArray.controls.length === 0 || this.formGroup!.invalid;
  }

  /**
   * 透過 DI 取得 FromBuilder 物件，用以建立表單
   *
   * @param {FormBuilder} formBuilder
   * @memberof ReactiveFormsAsyncInsuredComponent
   */
  constructor(private formBuilder: FormBuilder) {}

  /**
   * 當 Component 初始化的時候初始化表單
   *
   * @memberof ReactiveFormsAsyncInsuredComponent
   */
  ngOnInit(): void {
    this.formGroup = this.formBuilder.group({
      insuredList: this.formBuilder.array([])
    });
  }

  /**
   * 新增被保人
   *
   * @memberof ReactiveFormsAsyncInsuredComponent
   */
  addInsured(): void {
    const formGroup = this.createInsuredFormGroup();
    this.formArray.push(formGroup);
  }

  /**
   * 刪除被保人
   *
   * @param {number} index
   * @memberof ReactiveFormsAsyncInsuredComponent
   */
  deleteInsured(index: number): void {
    this.formArray.removeAt(index);
  }

  /**
   * 送出表單
   *
   * @memberof ReactiveFormsAsyncInsuredComponent
   */
  submit(): void {
    // do login...
  }

  /**
   * 透過欄位的 Errors 來取得對應的錯誤訊息
   *
   * @param {string} key
   * @param {number} index
   * @return {*}  {string}
   * @memberof ReactiveFormsAsyncInsuredComponent
   */
  getErrorMessage(key: string, index: number): string {
    const formGroup = this.formArray.controls[index];
    const formControl = formGroup.get(key);
    let errorMessage: string;
    if (!formControl || !formControl.errors || formControl.pristine) {
      errorMessage = '';
    } else if (formControl.errors.required) {
      errorMessage = '此欄位必填';
    } else if (formControl.errors.minlength) {
      errorMessage = '姓名至少需兩個字以上';
    } else if (formControl.errors.maxlength) {
      errorMessage = '姓名至多只能輸入十個字';
    }
    return errorMessage!;
  }

  /**
   * 建立被保人的表單
   *
   * @private
   * @return {*}  {FormGroup}
   * @memberof ReactiveFormsAsyncInsuredComponent
   */
  private createInsuredFormGroup(): FormGroup {
    return this.formBuilder.group({
      name: [
        '',
        [Validators.required, Validators.minLength(2), Validators.maxLength(10)]
      ],
      gender: ['', Validators.required],
      age: ['', Validators.required]
    });
  }
}

beforeEach(() => {
  // 其他省略
  fixture.detectChanges();
});

describe('formArray', () => {
  it('should get the FormArray from the FormGroup after "ngOnInit" being trigger', () => {
    // Act
    const formArray = component.formGroup?.get('insuredList') as FormArray;
    // Assert
    expect(component.formArray).toBe(formArray);
  });
});

describe('isFormInvalid', () => {
  it('should be true when there are not any insureds', () => {
    // Act
    const expectedResult = component.isFormInvalid;
    // Assert
    expect(expectedResult).toBe(true);
  });

  it('should be true when there are any errors', () => {
    // Arrange
    const formControl = new FormControl('', Validators.required);
    component.formArray.push(formControl);
    // Act
    const expectedResult = component.isFormInvalid;
    // Assert
    expect(expectedResult).toBe(true);
  });

  it('should be false when there are not any errors', () => {
    // Arrange
    const formControl = new FormControl('');
    component.formArray.push(formControl);
    // Act
    const expectedResult = component.isFormInvalid;
    // Assert
    expect(expectedResult).toBe(false);
  });
});

describe('ngOnInit', () => {
  it('should initialize property "formGroup"', () => {
    // Act
    fixture.detectChanges();
    // Assert
    expect(component.formGroup).toBeTruthy();
  });
});

describe('ngOnInit', () => {
  it('should initialize property "formGroup"', () => {
    // Act
    fixture.detectChanges();
    // Assert
    expect(component.formGroup).toBeInstanceOf(FormGroup);
  });
});

describe('addInsured', () => {
  it('should push a "formGroup" into the "formArray"', () => {
    // Act
    component.addInsured();
    // Assert
    expect(component.formArray.length).toBe(1);
  });
});

describe('deleteInsured', () => {
  it('should remove the "formGroup" from the "formArray" by the index', () => {
    // Arrange
    const index = 0;
    const formGroup = new FormGroup({});
    component.formArray.push(formGroup);
    // Act
    component.deleteInsured(index);
    // Assert
    expect(component.formArray.length).toBe(0);
  });
});

describe('getErrorMessage', () => {
  let formGroup: FormGroup;

  beforeEach(() => {
    const nameControl = new FormControl('', [
      Validators.required,
      Validators.minLength(2),
      Validators.maxLength(10)
    ]);
    formGroup = new FormGroup({
      name: nameControl,
    });
    component.formArray.push(formGroup);
  });

  it('should return empty string with the wrong key', () => {
    // Arrange
    const key = 'leo'
    const index = 0;
    // Act
    const errorMessage = component.getErrorMessage(key, index);
    // Assert
    expect(errorMessage).toBe('');
  });

  it('should return empty string when the "formControl" without errors', () => {
    // Arrange
    const key = 'name'
    const index = 0;
    formGroup.get(key)?.setValue('Leo');
    // Act
    const errorMessage = component.getErrorMessage(key, index);
    // Assert
    expect(errorMessage).toBe('');
  });

  it('should return empty string when property "pristine" of the "formControl" is `true`', () => {
    // Arrange
    const key = 'name'
    const index = 0;
    // Act
    const errorMessage = component.getErrorMessage(key, index);
    // Assert
    expect(errorMessage).toBe('');
  });

  it('should return "此欄位必填" when the "formControl" has the required error', () => {
    // Arrange
    const key = 'name'
    const index = 0;
    formGroup.get(key)?.markAsDirty();
    // Act
    const errorMessage = component.getErrorMessage(key, index);
    // Assert
    expect(errorMessage).toBe('此欄位必填');
  });

  it('should return "姓名至少需兩個字以上" when the "formControl" has the min-length error', () => {
    // Arrange
    const key = 'name'
    const index = 0;
    const formControl = formGroup.get(key)!;
    formControl.setValue('A')
    formControl.markAsDirty();
    // Act
    const errorMessage = component.getErrorMessage(key, index);
    // Assert
    expect(errorMessage).toBe('姓名至少需兩個字以上');
  });

  it('should return "姓名至多只能輸入十個字" when the "formControl" has the max-length error', () => {
    // Arrange
    const key = 'name'
    const index = 0;
    const formControl = formGroup.get(key)!;
    formControl.setValue('ABCDEF123456')
    formControl.markAsDirty();
    // Act
    const errorMessage = component.getErrorMessage(key, index);
    // Assert
    expect(errorMessage).toBe('姓名至多只能輸入十個字');
  });
});

describe('TemplateDrivenFormsAsyncInsuredComponent', () => {
  // 其他省略...

  describe('Unit testing', () => {
    // 昨天寫的單元測試...
  });

  describe('Integration testing', () => {
    // 今天要寫的整合測試
  });
});

describe('Integration testing', () => {
  let compiledComponent: HTMLElement;

  beforeEach(() => {
    fixture.detectChanges();
    compiledComponent = fixture.nativeElement;
  });

  // 案例寫在這邊
});

describe('the insured fields', () => {
  beforeEach(() => {
    component.insuredList = [{
      name: '',
      gender: '',
      age: '',
      nameErrorMessage: '',
      ageErrorMessage: ''
    }];
    fixture.detectChanges();
  });

  describe('the name input field', () => {
    const key = 'name-0'
    let nameInputElement: HTMLInputElement;

    beforeEach(() => {
      nameInputElement = compiledComponent.querySelector(`#${key}`)!;
    });

    it('should have attribute "type" and the value is "text"', () => {
      // Arrange
      const attributeName = 'type';
      const attributeValue = 'text';
      // Assert
      expect(nameInputElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "name" and the value is "name-0"', () => {
      // Arrange
      const attributeName = 'ng-reflect-name';
      const attributeValue = key;
      // Assert
      expect(nameInputElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "minlength" and the value is "2"', () => {
      // Arrange
      const attributeName = 'minlength';
      const attributeValue = '2';
      // Assert
      expect(nameInputElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "maxlength" and the value is "10"', () => {
      // Arrange
      const attributeName = 'maxlength';
      const attributeValue = '10';
      // Assert
      expect(nameInputElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "required"', () => {
      // Arrange
      const attributeName = 'required';
      // Assert
      expect(nameInputElement.hasAttribute(attributeName)).toBe(true);
    });

    it('should binding the value of the insured\'s property "name"', () => {
      // Arrange
      const name = 'whatever';
      // Act
      component.insuredList[0].name = name;
      fixture.detectChanges();
      // Assert
      expect(nameInputElement.getAttribute('ng-reflect-model')).toBe(name);
    });

    it('should trigger function "insuredNameChange" when the value be changed', () => {
      // Arrange
      spyOn(component, 'insuredNameChange');
      const nameFormControl = component.nameNgModelRefList.get(0)!.control;
      // Act
      nameInputElement.value = 'whatever';
      nameInputElement.dispatchEvent(new Event('ngModelChange'));
      // Assert
      expect(component.insuredNameChange).toHaveBeenCalledWith(nameFormControl, component.insuredList[0]);
    });
  });
});

export class TemplateDrivenFormsAsyncInsuredComponent {
  @ViewChildren('nameNgModel') nameNgModelRefList!: QueryList<NgModel>;
  // ...
}

describe('the gender radio buttons', () => {
  let radioButtonElement: HTMLInputElement;

  describe('male', () => {
    beforeEach(() => {
      radioButtonElement = compiledComponent.querySelector(`#male-0`)!;
    });

    it('should have attribute "type" and the value is "radio"', () => {
      // Arrange
      const attributeName = 'type';
      const attributeValue = 'radio';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "name" and the value is "gender-0"', () => {
      // Arrange
      const attributeName = 'ng-reflect-name';
      const attributeValue = 'gender-0';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "value" and the value is "male"', () => {
      // Arrange
      const attributeName = 'value';
      const attributeValue = 'male';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "required"', () => {
      // Arrange
      const attributeName = 'required';
      // Assert
      expect(radioButtonElement.hasAttribute(attributeName)).toBe(true);
    });

    it('should binding the value of the insured\'s property "gender"', () => {
      // Arrange
      const gender = 'male';
      // Act
      component.insuredList[0].gender = gender;
      fixture.detectChanges();
      // Assert
      expect(radioButtonElement.getAttribute('ng-reflect-model')).toBe(gender);
    });
  });

  describe('female', () => {
    beforeEach(() => {
      radioButtonElement = compiledComponent.querySelector(`#female-0`)!;
    });

    it('should have attribute "type" and the value is "radio"', () => {
      // Arrange
      const attributeName = 'type';
      const attributeValue = 'radio';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "name" and the value is "gender-0"', () => {
      // Arrange
      const attributeName = 'ng-reflect-name';
      const attributeValue = 'gender-0';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "value" and the value is "female"', () => {
      // Arrange
      const attributeName = 'value';
      const attributeValue = 'female';
      // Assert
      expect(radioButtonElement.getAttribute(attributeName)).toBe(attributeValue);
    });

    it('should have attribute "required"', () => {
      // Arrange
      const attributeName = 'required';
      // Assert
      expect(radioButtonElement.hasAttribute(attributeName)).toBe(true);
    });

    it('should binding the value of the insured\'s property "gender"', () => {
      // Arrange
      const gender = 'female';
      // Act
      component.insuredList[0].gender = gender;
      fixture.detectChanges();
      // Assert
      expect(radioButtonElement.getAttribute('ng-reflect-model')).toBe(gender);
    });
  });
});

describe('the age field', () => {
  const key = 'age-0'
  let ageSelectElement: HTMLSelectElement;

  beforeEach(() => {
    ageSelectElement = compiledComponent.querySelector(`#${key}`)!;
  });

  it('should have attribute "name" and the value is "age-0"', () => {
    // Arrange
    const attributeName = 'ng-reflect-name';
    const attributeValue = key;
    // Assert
    expect(ageSelectElement.getAttribute(attributeName)).toBe(attributeValue);
  });

  it('should have attribute "required"', () => {
    // Arrange
    const attributeName = 'required';
    // Assert
    expect(ageSelectElement.hasAttribute(attributeName)).toBe(true);
  });

  it('should binding the value of the insured\'s property "age"', () => {
    // Arrange
    const age = '18';
    // Act
    component.insuredList[0].age = age;
    fixture.detectChanges();
    // Assert
    expect(ageSelectElement.getAttribute('ng-reflect-model')).toBe(age);
  });

  it('should trigger function "insuredAgeChange" when the value be changed', () => {
    // Arrange
    spyOn(component, 'insuredAgeChange');
    const ageNgModel = component.ageNgModelRefList.get(0)!;
    // Act
    ageSelectElement.value = '18';
    ageSelectElement.dispatchEvent(new Event('ngModelChange'));
    // Assert
    expect(component.insuredAgeChange).toHaveBeenCalledWith(ageNgModel.value, ageNgModel.errors, component.insuredList[0]);
  });
});

describe('Error Messages', () => {
  it('should binding the value of the insured\'s property "nameErrorMessage" in the template', () => {
    // Arrange
    const insured = component.insuredList[0];
    const errorMessage = 'account error';
    const targetElement = compiledComponent.querySelector('#name-0 + .error-message');
    // Act
    insured.nameErrorMessage = errorMessage;
    fixture.detectChanges();
    // Assert
    expect(targetElement?.textContent).toBe(errorMessage);
  });

  it('should binding the value of the insured\'s property "ageErrorMessage" in the template', () => {
    // Arrange
    const insured = component.insuredList[0];
    const errorMessage = 'password error';
    const targetElement = compiledComponent.querySelector('#age-0 + .error-message');
    // Act
    insured.ageErrorMessage = errorMessage;
    fixture.detectChanges();
    // Assert
    expect(targetElement?.textContent).toBe(errorMessage);
  });
});