喷油器角度测试失败？答案

【问题标题】：angular test fails at injector?喷油器角度测试失败？
【发布时间】：2017-04-28 11:36:23
【问题描述】：

我有以下组件：

@Component({
  selector: 'app-comment-table',
  templateUrl: './comment-table.component.html',
  styleUrls: ['./comment-table.component.css']
})
export class CommentTableComponent implements OnInit {
  @Input() line: string;
  comments: Array<IComments>;
  constructor(private socketService: SocketService) {
    this.comments = [];
  }
  //some functions
}

我正在尝试使用以下测试对其进行测试：

class mockSocket {
  getComments() { return Observable.of() }
};

describe('Comment Table Component', () => {
  let fixture, comp, el;
  let mockSock = new mockSocket();

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [Ng2SmartTableModule],
      declarations: [CommentTableComponent],
      providers: [
        { provide: SocketService, useValue: mockSock }],
    });
  });

  it('should call service',
    inject([CommentTableComponent], (cmp: CommentTableComponent) => {
      spyOn(mockSock, 'getComments');
      cmp.ngOnInit();
      expect(mockSock.getComments).toHaveBeenCalled();
    }));
});

但是，此测试失败并显示错误消息：

错误在 injectionError (webpack:///~/@angular/core/@angular/core.es5.js:1231:21

我认为组件只需要提供给它的 SocketService，我正在提供它，但该错误看起来好像缺少提供程序？我做错了什么？

【问题讨论】：

当您使用外部模板测试@Component 时，您需要异步TestBed.compileComponents() - 请参阅angular.io/docs/ts/latest/guide/…。不过，不确定这是否是错误的原因。
你为什么要把组件当作服务来对待？您应该使用TestBed.createComponent(YourComponent) 从TestBed 获取组件。不是通过注入它
你应该做let fixture = TB.cC(YourComponent); let comp = fixture.componentInstance。而不是在组件上手动调用 ngOnInit，而是让 Angular 通过调用 fixture.detectChanges() 来调用它

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

【解决方案1】：

将.compileComponents() 添加到TestBed 创建中，并将其包装在async() 函数中：

beforeEach( async( () => {
    TestBed.configureTestingModule( {
        imports: [ Ng2SmartTableModule ],
        declarations: [ CommentTableComponent ],
        providers: [
            { provide: SocketService, useValue: mockSock }
        ],
    } ).compileComponents();
} ) );

如果这还不够，请将inject 也包含在async() 中：

it('should call service',
    async( inject( [ CommentTableComponent ], ( cmp: CommentTableComponent ) => {
        spyOn( mockSock, 'getComments' );
        cmp.ngOnInit();
        expect( mockSock.getComments ).toHaveBeenCalled();
} ) ) );

【讨论】：

async () => 不是async(()=>