javascript - angular组件测试如何使用外部js库

Question

我有一个使用外部 js 库的组件:leader-line。 当我尝试测试该组件时，它总是会抛出一个错误，指出没有定义外部库的函数。

组件文件

declare var LeaderLine: any;

@Component({
  selector: 'app-flow-line',
  templateUrl: './flow-line.component.html',
  styleUrls: ['./flow-line.component.css']
})
export class FlowLineComponent implements AfterViewInit, OnDestroy {

  @Input() public flowPathConfig: any = new Array();
  public myLines: any = new Array();
  public ngAfterViewInit() {
    for (let config of this.flowPathConfig) {
      if (document.getElementById(config.fromStep) && document.getElementById(config.toStep)) {
        this.myLines.push(new LeaderLine(
          document.getElementById(config.fromStep),
          document.getElementById(config.toStep)
        ));
      }
    }
  }

规范文件

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FlowLineComponent } from './flow-line.component';
import { FundamentalNgxModule } from 'fundamental-ngx';


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

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

  beforeEach(() => {
    fixture = TestBed.createComponent(FlowLineComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('it should draw line with pathConfig', () => {
    component.flowPathConfig = [{ fromStep: '1', toStep: '2' }];
    let el1 = document.createElement('div');
    el1.setAttribute('id', '1');
    let el2 = document.createElement('div');
    el2.setAttribute('id', '2');
    document.body.appendChild(el1);
    document.body.appendChild(el2);
    fixture.detectChanges();
    component.ngAfterViewInit();
    expect(component.myLines.length).toEqual(0);
    expect(component).toBeTruthy();
  });
});

错误跟踪如下。这表明引用错误。 PS:我使用以下帖子包含了引导线库:Use external javaScript library in angular application

HeadlessChrome 75.0.3770 (Mac OS X 10.14.6) FlowLineComponent it should draw line with pathConfig FAILED
        ReferenceError: LeaderLine is not defined
            at <Jasmine>
            at FlowLineComponent.LeaderLine [as ngAfterViewInit] (http://localhost:9876/_karma_webpack_/webpack:/src/app/flow/flow-line/flow-line.component.ts:34:43)
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/flow/flow-line/flow-line.component.spec.ts:45:15)
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:391:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:308:1)
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:390:1)
            at Zone../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:150:1)
            at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:561:1)
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:576:1)
            at <Jasmine>
HeadlessChrome 75.0.3770 (Mac OS X 10.14.6): Executed 13 of 16 (1 FAILED) (0 secs / 3.274 secs)
HeadlessChrome 75.0.3770 (Mac OS X 10.14.6) FlowLineComponent it should draw line with pathConfig FAILED
        ReferenceError: LeaderLine is not defined
            at <Jasmine>
            at FlowLineComponent.LeaderLine [as ngAfterViewInit] (http://localhost:9876/_karma_webpack_/webpack:/src/app/flow/flow-line/flow-line.component.ts:34:43)
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/flow/flow-line/flow-line.component.spec.ts:45:15)
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:391:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:308:1)
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:390:1)
            at Zone../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:150:1)
            at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:561:1)
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:576:1)

Answer 1

我会尝试像这样导入库:

import * as LeaderLine from 'leader-line';

而不是 var 声明。是只有测试不起作用，还是当您运行您的应用程序时它也会抛出错误？