Question

我正在尝试设置一个茉莉花测试，以测试当模板中存在某个错误时函数是否返回正确的字符串。

该表单使用Angular材质，最小长度为5。它还具有必填部分，这意味着表格不能为空。

我尝试通过执行以下操作（模拟hasError）为此编写茉莉花测试：

这是带有mat-form-field的模板部分：

<mat-form-field>
  <input matInput placeholder="Zip Code" maxlength="5" minlength="5" [formControl]="zipCode" required>
  <mat-error *ngIf="zipCode.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>

这是组件中的功能：

  getErrorMessage() {
    if (this.zipCode.hasError('required')) {
      return 'You must enter a value';
    } else if (this.zipCode.hasError('minlength')) {
      return 'Zip code must be 5 digits';
    } else {
      return '';
    }

这是我的两个测试：

  it('should return "You must enter a value" if hasError("required")', () =>{
    mockZipCode = jasmine.createSpyObj(['hasError']);
    mockZipCode.hasError('required');

    expect(component.getErrorMessage()).toBe('You must enter a value');

  });

  it('should return "Zip Code must be 5 digits" if hasError("minLength")', () =>{
    mockZipCode = jasmine.createSpyObj(['hasError']);
    mockZipCode.hasError('minlength');

    expect(component.getErrorMessage()).toBe('Zip code must be 5 digits');

  });

第一个测试通过了预期的“您必须输入一个值”。

但是，第二项测试失败，并指出“您必须输入一个值”是所期望的。这不是我想要测试的。

相反，当我自己测试应用程序时，我知道代码输出“邮政编码必须为5位数字”。但是测试似乎设置错误，无法对此进行测试。

如何修复第二个测试，以便.getErrorMessage（）正确返回字符串“邮政编码必须为5位数字”？

如何正确模拟.hasError（）方法？

0 个答案: