Angular Unit Test (jasmine, karma) 如何测试@Input() 插入到html元素答案

【问题标题】：Angular Unittest (jasmine, karma) how to test the @Input() is inserted to the html elementAngular Unit Test (jasmine, karma) 如何测试@Input() 插入到html元素
【发布时间】：2022-01-08 16:18:28
【问题描述】：

我正在为我的注册组件编写一些单元测试。在这个组件中，我有一个 html 元素：

<form class="register-form" [formGroup]="registerForm">
    <mat-form-field>
         .....
    </mat-form-field>
   ...
</form>

我想写 3 个测试，首先检查我的表单元素的类，一个如果 registerForm isDefined 则通过，另一个如果 registerForm 被注入 class="register-form" 的表单则通过。

我的测试：

describe('register-form',() => {
   it('register-form should have class: register-form', () => {
     expect(registerForm.className).toBe('register-form');
   });
   it('component should have defined formGroup: registerForm', () => {
     expect(registerComponent.registerForm).toBeDefined();
   });
});

我的表单元素的 registerForm => formGroup 缺少连接测试。我该如何编写这个测试？

简短地说：我不想访问 HTMLElement 的 Property formGroup 。

【问题讨论】：

然后测试registerForm的值。避免测试 Angular 团队已经测试过的东西。
是的，我可以这样做，但如果我不将 registerForm 分配给 formGroup，所有测试都会通过。 <form class="register-form"> <mat-form-field> ..... </mat-form-field> ... </form> 会发出一个通过的测试。
<mat-form-field>...</mat-form-field> 里面是什么？
inside of 是一个带有 formControlName 的元素。

标签： angular typescript unit-testing jasmine karma-runner

【解决方案1】：

您可以使用 CSS 选择器查询输入元素并检查它的值。

it('register-form should have class: register-form', () => {
   let input = fixture.debugElement.query(By.css('input'));
   let el = input.nativeElement;

    expect(el.value).toBe('expected value');
});

更多信息在：Angular Testing Documentation

【讨论】：

您好，感谢您的回答，但我认为您误解了我的问题。我不想测试我的输入元素的值。我想以 class="register-form" 的形式测试 formGroup 属性的注入。因此，如果有人删除了我的
元素的注入 [formGroup]="registerForm"，则测试将失败。不过谢谢你的链接，我会读的。
但如果有人删除了 [formGroup] 指令，则输入的值将不存在

【解决方案2】：

我刚刚找到了解决问题的方法。我只是为托管组件创建一个模拟。

describe('componentUnderTest', () => {
  @Component({
selector: `host-component`,
template: `<component-under-test [testInput]="testInput">
</component-under-test >`
 })
 class TestHostComponent {


       public testInput: string = '';
   } 
}

之后我创建了这个测试

it('deviceUnderTest should have @Input() decorator on testInput', () => {
        testHostComponent.testInput='testString';
        testHostFixture.detectChanges();
        expect(testHostFixture.debugElement.query(By.css('component-under-test'))
        .componentInstance['testInput']).toEqual('testString');
      });

【讨论】：