Question

在我的角度页面中使用下面的ngbPopover并为其编写单元测试。它引发了一个编译错误。像下面一样

没有将“ exportAs”设置为“ ngbPopover”的指令（click）=“ p1.open（）” [错误->]＃p1 =“ ngbPopover”>

    <span placement="bottom"  [ngbPopover]="popContent"  triggers="manual"
          (click)="p1.open()" #p1="ngbPopover">
    </span>




    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NotificationsService as ToasterService } from 'angular2-notifications';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { testComponent } from './test.component';

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

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

  beforeEach(() => {
    const toasterServiceStub = {
      create: () => ({})
    };
    TestBed.configureTestingModule({
      declarations: [testComponent],
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        { provide: ToasterService, useValue: toasterServiceStub }
      ]
    });
    fixture = TestBed.createComponent(testComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    fixture = TestBed.createComponent(testComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

如果我从html中删除＃p1，则将编译我的单元测试。但不确定为什么会导致错误。请帮帮我

Answer 1

如果您只想在不构建DOM的地方进行单元测试，请进行以下设置：

describe('testComponent', () => {
  let component: testComponent;

  // Note that you have to initialize the component only *once* via the TestBed, not multiples times as you did.
  beforeEach(() => {
    const toasterServiceStub = {
      create: () => ({}),
    };

    TestBed.configureTestingModule({
      providers: [
        testComponent,
        {provide: ToasterService, useValue: toasterServiceStub},
      ],
    });

    component = TestBed.get(testComponent);
  });

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

如果您希望将所需的测试视为集成测试，则要确保正确解析了HTML，则您的实现会过于频繁地初始化组件和缺失至少 import 用于Ngb。

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

  // // Only configure the testing module once, not multiple times.
  // beforeEach(async(() => {
  //   TestBed.configureTestingModule({
  //     declarations: [testComponent],
  //     imports: [ FormsModule, ReactiveFormsModule  ],
  //   }).compileComponents();
  // }));

  beforeEach(() => {
    const toasterServiceStub = {
      create: () => ({})
    };

    TestBed.configureTestingModule({
      declarations: [testComponent],
      imports: [FormsModule, ReactiveFormsModule, NgbModule], // Here you were missing the NgbModule. You may also just import the sub-modules you're explicitely using (such as pagination)
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        { provide: ToasterService, useValue: toasterServiceStub }
      ]
    });
    fixture = TestBed.createComponent(testComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    // You do not need to do this twice.
    // fixture = TestBed.createComponent(testComponent);
    // component = fixture.componentInstance;
    // fixture.detectChanges();
  });

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

任何一种实施方式都应适合您的情况。这些实现之间的区别在于，第一个实现不会构建整个HTML DOM，而第二个实现则可以。为了使第一个模块正常工作，需要显示HTML内部正在使用的所有模块。第二种实现基本上只初始化组件及其注入的依赖项。

单元测试中的错误（因果）。没有将“ exportAs”设置为“ ngbPopover”的指令

1 个答案: