Javascript 如何在角组件测试中使用外部js库

我有一个使用外部js库的组件：引线。 当我尝试测试该组件时，它总是抛出一个错误，即没有定义外部库的函数

组件文件

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();
  });
});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“./flow-line.component”导入{FlowLineComponent}；
从“基本ngx”导入{FundamentalNgxModule}；
描述（'FlowLineComponent'，（）=>{
let组件：FlowLineComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[FlowLineComponent]，
进口：[基本NGX模块]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（FlowLineComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'它应该与pathConfig画一条线'，（）=>{
component.flowPathConfig=[{fromStep:'1'，toStep:'2'}]；
设el1=document.createElement（'div'）；
el1.setAttribute（'id'，'1'）；
设el2=document.createElement（'div'）；
el2.setAttribute（'id'，'2'）；
文件.正文.附件（el1）；
文件.正文.附件（el2）；
fixture.detectChanges（）；
ngAfterViewInit（）；
expect（component.myline.length）.toEqual（0）；
expect（component.toBeTruthy（）；
});
});

下面是错误跟踪。这显示了引用错误。 PS：我使用以下帖子包含了引线库：

HeadlessChrome 75.0.3770（Mac OS X 10.14.6）FlowLineComponent它应该使用pathConfig绘制线条失败
引用错误：未定义引线
在
在FlowLineComponent.LeaderLine[作为ngAfterViewInit](http://localhost:9876/_karma_webpack_/webpack:/src/app/flow/flow-管线/流线。部件。ts:34:43）
在UserContext。(http://localhost:9876/_karma_webpack_/webpack:/src/app/flow/flow-管线/流线组件规范ts:45:15）
在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)
在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）
在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)
在区域../node_模块/Zone.js/dist/Zone.js.Zone.run(http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:150:1)
在runInTestZone(http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:561:1）
在UserContext。(http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:576:1）
在
无头Chrome 75.0.3770（Mac OS X 10.14.6）：执行16次中的13次（1次失败）（0秒/3.274秒）
HeadlessChrome 75.0.3770（Mac OS X 10.14.6）FlowLine组件它应该与pathConfig绘制一条线失败
引用错误：未定义引线
在
在FlowLineComponent.LeaderLine[作为ngAfterViewInit](http://localhost:9876/_karma_webpack_/webpack:/src/app/flow/flow-管线/流线。部件。ts:34:43）
在UserContext。(http://localhost:9876/_karma_webpack_/webpack:/src/app/flow/flow-管线/流线组件规范ts:45:15）
在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)
在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）
在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)
在区域../node_模块/Zone.js/dist/Zone.js.Zone.run(http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:150:1)
在runInTestZone(http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:561:1）
在UserContext。(http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:576:1）

我会尝试像这样导入库：

import * as LeaderLine from 'leader-line';

---

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

我使用函数声明的方式将方法注入组件中

declare function A();

一种只测试组件的方法，并忽略从外部js文件导入的所有方法的方法。 您可以创建一个模拟/文件，该文件将在测试模式下替换原点。您还必须在测试配置中将其添加到angular.json文件中

"test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "sourceMap": true,
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/env.js"
        ],
        "styles": [
          "src/styles.css",
          "src/sass/intracom-light.scss"
        ],
        "scripts": [
          "src/assets/mock/js/maps.js"
        ]
      }
    },

---

替换调用方法的主体以设置测试行为。

我已将外部js添加到

angular.json

中，它在运行时运行良好。我只在测试中出错。若我像你们提到的那个样在spec文件中导入语句，它会抛出

EsLint错误

，因为我并没有在测试中显式调用LeaderLine。

"test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "sourceMap": true,
        "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/env.js"
        ],
        "styles": [
          "src/styles.css",
          "src/sass/intracom-light.scss"
        ],
        "scripts": [
          "src/assets/mock/js/maps.js"
        ]
      }
    },