Angular 无法读取空 DOM 单元测试的属性 'nativeElement'

Question

我有一个包含多个输入字段和文本区域的表单，当文本区域发生键盘（输入）键事件时需要评估文本区域是否为空？如果为空错误，则显示在 html mat-error 标签上。我想为这个场景编写单元测试用例。我可以在浏览器控制台中使用 jquery 获取 dom 值，但在规范文件中无法获取 DOM 内容。

spec.ts 文件

    it('should be display warning message', () => {
          const textArea: HTMLTextAreaElement = fixture.debugElement.query(By.css('.need-access-shipping-address textarea')).nativeElement as HTMLTextAreaElement;
          textArea.value = "asd`";
          const event = new KeyboardEvent("keypress",{
            "key": "Enter"
          });
          textArea.dispatchEvent(event);
          fixture.detectChanges();
          const nameDisplay: HTMLElement = fixture.debugElement.query(By.css('.need-access-shipping-address .mat-error')).nativeElement as HTMLElement;
          expect(nameDisplay.innerText).toBe('The format of the information entered is invalid');
    });

输出为 Expected: "The format of the information entered is invalid" Received: undefined

输入textArea.value = "asd~"正则表达式错误

textArea.value = "asd" 是有效输入

Answer 1

这是单元测试的示例代码。请注意，text-area 和显示元素都应该有一个 id（我选择了 text_area_1 和 name_display），这样可以更容易地使用 By.css 查询它们.

it('pressing <enter> in empty text area should invalidate form', () => {

    // given
    const htmlTextArea: HTMLTextAreaElement = fixture.debugElement.query(By.css('#text_area_1')).nativeElement;
    htmlTextArea.value = 'asd~';
    htmlTextArea.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    // when
    const event: any = document.createEvent('Event');
    event.key = 'Enter';
    event.initEvent('keyup');
    htmlTextArea.dispatchEvent(event);
    fixture.detectChanges();

    // then
    const nameDisplay: HTMLElement = fixture.debugElement.query(By.css('#name_display')).nativeElement;
    expect(nameDisplay.innerText).toBe('The format of the information entered is invalid');
});

Angular 无法读取空 DOM 单元测试的属性 'nativeElement'

Angular cannot read property 'nativeElement' of null DOM unit testing

jasmine

angular

Angular 无法读取空 DOM 单元测试的 属性 'nativeElement'

Angular cannot read property 'nativeElement' of null DOM unit testing

jasmine

angular

Angular 无法读取空 DOM 单元测试的属性 'nativeElement'