我开始研究单元测试Angular 为2的应用程序,但即使是最简单的示例我也被困住了.我只想运行一个简单的测试,看看它是否正常工作,基本上我想要的是将标题页中的值与测试中的值进行比较.

这就是我收到的错误,但我看不出错误来自哪里,因为对我来说一切看起来都是同步的.

错误:错误:无法调用promise .然后在同步测试中.

单元测试:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement, Input}    from '@angular/core';
import { ToDoComponent } from './todo.component';
import { FormsModule } from '@angular/forms';
describe(("test input "),() => {
    let comp:    ToDoComponent;
    let fixture: ComponentFixture<ToDoComponent>;
    let de:      DebugElement;
    let el:      HTMLElement;

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

    fixture = TestBed.createComponent(ToDoComponent);
    comp = fixture.componentInstance;
    de = fixture.debugElement.query(By.css("h1"));
    el = de.nativeElement;

    it('should display a different test title', () => {
        comp.pageTitle = 'Test Title';
        fixture.detectChanges();
        expect(el.textContent).toBe('Test Title423');
    });
});

我的组件:

import {Component} from "@angular/core";
import {Note} from "app/note";

@Component({
    selector : "toDoArea",
    templateUrl : "todo.component.html"
})

export class ToDoComponent{
    pageTitle : string = "Test";
    noteText : string ="";
    noteArray : Note[] = [];
    counter : number = 1;
    removeCount : number = 1;

    addNote() : void {

        if (this.noteText.length > 0){
            var a = this.noteText;
            var n1 : Note = new Note();
            n1.noteText = a;
            n1.noteId = this.counter;
            this.counter = this.counter + 1;
            this.noteText = "";
            this.noteArray.push(n1);        
        }

    }

    removeNote(selectedNote : Note) :void{
        this.noteArray.splice(this.noteArray.indexOf(selectedNote),this.removeCount);
    }

}

推荐答案

将变量初始化移动到一个beforeach中.

您不应该把东西从试验台上拿出来,也不应该管理describe范围内的fixture 或组件.您应该只在测试运行范围内执行这些操作:在beforeEach/beforeAllafterEach/afterAllit内部.

describe(("test input "), () => {
  let comp: ToDoComponent;
  let fixture: ComponentFixture<ToDoComponent>;
  let de: DebugElement;
  let el: HTMLElement;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(ToDoComponent);
    comp = fixture.componentInstance;
    de = fixture.debugElement.query(By.css("h1"));
    el = de.nativeElement;
  })


  it('should display a different test title', () => {
    comp.pageTitle = 'Test Title';
    fixture.detectChanges();
    expect(el.textContent).toBe('Test Title423');
  });

});

另见

Angular相关问答推荐

Angular 信号效果,try 重置表单并获取在计算或效果中不允许写入信号"

NG构建后多余的国旗

带有搜索功能的CDK-VIRTUAL-SCROLL-VIEPORT不显示该值

如何使用ChangeDetectionStrategy.OnPush?

仅在展示时使用垫式步进器

Angular 17不接受带点(.)的路径在开发环境中,它直接抛出一个404错误

Angular -移位在2个示波器中读取

Angular 17-getEnvironment InjectorProviders出现异常

所有返回缺少权限或权限不足的FireBase项目.

如何在 Angular 库中将依赖项声明为可选?

Angular 从 13.3.8 恢复到 13.3.7

如何为所有模块全局声明指令?

如何检测滚动到html元素的底部

如何测试 Angular2 的 router.navigate?

Angular2 CLI 错误@angular/compiler-cli包未正确安装

初始化所有子类后的Angular 2生命周期钩子是什么?

如何以Angular 获取嵌套表单组的控件

Angular 5 手动导入语言环境

在 Angular 4 中播放声音

在 webpack 构建中包含 git commit hash 和 date