Angular 深入淺出三十天：表單與測試 Day12 - 單元測試實作 - 被保人 by Template Driven Forms

import { TestBed } from '@angular/core/testing';
import { TemplateDrivenFormsAsyncInsuredComponent } from './template-driven-forms-async-insured.component';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [TemplateDrivenFormsAsyncInsuredComponent],
      imports: [FormsModule]
    }).compileComponents();

    fixture = TestBed.createComponent(TemplateDrivenFormsAsyncInsuredComponent);
    component = fixture.componentInstance;
  });

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

export class TemplateDrivenFormsAsyncInsuredComponent {

  // 被保險人清單
  insuredList: Insured[] = [];

  /**
   * 根據索引來重新渲染有更改的節點
   * 詳情請參考官方文件：https://angular.tw/api/common/NgForOf
   *
   * @param {string} index
   * @return {*}  {number}
   * @memberof AppComponent
   */
   trackByIndex(index: number): number {
    return index;
  }

  /**
   * 綁定在姓名欄位上，當使用者改變被保險人的姓名時，會觸發此函式，並取得對應的錯誤訊息
   *
   * @param {string} name
   * @param {ValidationErrors | null} errors
   * @param {Insured} insured
   * @memberof TemplateDrivenFormsAsyncInsuredComponent
   */
  insuredNameChange(name: string, errors: ValidationErrors | null, insured: Insured): void {
    insured.name = name;
    insured.nameErrorMessage = this.getErrorMessage(errors);
  }

  /**
   * 綁定在年齡欄位上，當使用者改變被保險人的年齡時，會觸發此函式，並取得對應的錯誤訊息
   *
   * @param {string} age
   * @param {ValidationErrors | null} errors
   * @param {Insured} insured
   * @memberof TemplateDrivenFormsAsyncInsuredComponent
   */
   insuredAgeChange(age: string, errors: ValidationErrors | null, insured: Insured): void {
    insured.age = age;
    insured.ageErrorMessage = this.getErrorMessage(errors);
  }

  /**
   * 新增被保險人
   *
   * @memberof TemplateDrivenFormsAsyncInsuredComponent
   */
  addInsured(): void {
    const insured: Insured = {
      name: '',
      gender: '',
      age: '',
      nameErrorMessage: '',
      ageErrorMessage: ''
    };
    this.insuredList.push(insured);
  }

  /**
   * 刪除被保險人
   *
   * @param {number} index
   * @memberof TemplateDrivenFormsAsyncInsuredComponent
   */
  deleteInsured(index: number): void {
    this.insuredList.splice(index, 1);
  }

  /**
   * 根據 FormControl 的 errors 屬性取得相應的錯誤訊息
   *
   * @private
   * @param {ValidationErrors | null} errors - FormControl 的 errors
   * @return {*}  {string}
   * @memberof TemplateDrivenFormsAsyncInsuredComponent
   */
  private getErrorMessage(errors: ValidationErrors | null): string {
    let errorMessage = '';
    if (errors?.required) {
      errorMessage = '此欄位必填';
    } else if (errors?.minlength) {
      errorMessage = '姓名至少需兩個字以上';
    }
    return errorMessage;
  }
}

describe('trackByIndex', () => {
  it('should just return the index', () => {
    // Arrange
    const index = 0;
    // Assert
    expect(component.trackByIndex(index)).toBe(index);
  })
});

describe('insuredNameChange', () => {
  let insured: Insured;

  beforeEach(() => {
    insured = {
      name: '',
      gender: '',
      age: '',
      nameErrorMessage: '',
      ageErrorMessage: ''
    };
  });

  it('should assign the value of the formControl to property "name" of the insured', () => {
    // Arrange
    const value = 'Leo';
    const errors = null;
    // Act
    component.insuredNameChange(value, errors, insured);
    // Assert
    expect(insured.name).toBe(value);
  });

  it('should assign error message "此欄位必填" to property "nameErrorMessage" of the insured when the value of the formControl is empty string', () => {
    // Arrange
    const value = '';
    const errors = { required: true };
    const errorMessage = '此欄位必填';
    // Act
    component.insuredNameChange(value, errors, insured);
    // Assert
    expect(insured.nameErrorMessage).toBe(errorMessage);
  });

  it('should assign error message "姓名至少需兩個字以上" to property "nameErrorMessage" of the insured when the value\;s length of the formControl less than 2', () => {
    // Arrange
    const value = 'L';
    const errors = {
      minlength: {
        actualLength: 1,
        requiredLength: 2
      }
    };
    const errorMessage = '姓名至少需兩個字以上';
    // Act
    component.insuredNameChange(value, errors, insured);
    // Assert
    expect(insured.nameErrorMessage).toBe(errorMessage);
  });
});

describe('insuredAgeChange', () => {
  let insured: Insured;

  beforeEach(() => {
    insured = {
      name: '',
      gender: '',
      age: '',
      nameErrorMessage: '',
      ageErrorMessage: ''
    };
  });

  it('should assign the value of the formControl to property "age" of the insured', () => {
    // Arrange
    const age = '18';
    const errors = null;
    // Act
    component.insuredAgeChange(age, errors, insured);
    // Assert
    expect(insured.age).toBe(age);
  });

  it('should assign error message "此欄位必填" to property "ageErrorMessage" of the insured when the value of the formControl is empty string', () => {
    // Arrange
    const age = '';
    const errors = { required: true };
    const errorMessage = '此欄位必填';
    // Act
    component.insuredAgeChange(age, errors, insured);
    // Assert
    expect(insured.ageErrorMessage).toBe(errorMessage);
  });
});

describe('addInsured', () => {
  it('should add a new insured data into property "insuredList" after being triggered', () => {
    // Arrange
    const expectResult: Insured[] = [{
      name: '',
      gender: '',
      age: '',
      nameErrorMessage: '',
      ageErrorMessage: ''
    }];
    // Act
    component.addInsured();
    // Assert
    expect(component.insuredList).toEqual(expectResult);
  });
});

describe('deleteInsured', () => {
  it('should delete the insured data by the index after being triggered', () => {
    // Arrange
    component.insuredList = [{
      name: '',
      gender: '',
      age: '',
      nameErrorMessage: '',
      ageErrorMessage: ''
    }];
    // Act
    component.deleteInsured(0);
    // Assert
    expect(component.insuredList).toEqual([]);
  });
});