具有声明变量的单元测试组件时的角度2错误

Question

我目前正在尝试将现有的Web应用程序迁移到Angular 2.旧的Web应用程序具有处理标题，菜单，滚动等的JavaScript库。我想继续使用它，因为它没有任何业务逻辑，它将使迁移变得相当容易。搜索后，我发现我仍然可以从Angular 2代码中调用我的JavaScript库。下面是我做的步骤：

1）加入我的脚本在脚本列表中angular-cli.json文件：

"scripts": [ 
 
\t \t "../node_modules/jquery/dist/jquery.js", 
 
\t \t "../node_modules/jquery-ui-dist/jquery-ui.js", 
 
\t \t "../node_modules/bootstrap/dist/js/bootstrap.js", 
 
\t \t "../node_modules/pace-js/pace.js", 
 
\t \t "../node_modules/jquery-slimscroll/jquery.slimscroll.js", 
 
\t \t "./assets/js/app-init.js" // This is my javascript library

2）和下面是调用组件JavaScript库：

import { Component, OnInit } from '@angular/core'; 
 
/** 
 
* This is the declaration of my JavaScript library. 
 
*/ 
 
declare var App:any; 
 

 
@Component({ 
 
    selector: 'app-sidebar', 
 
    templateUrl: './sidebar.component.html' 
 
}) 
 
export class SidebarComponent implements OnInit { 
 

 
    constructor() { } 
 

 
    ngOnInit() { 
 
\t App.initSidebar(); // My JS lib is called. 
 
    } 
 

 
}

现在上面的代码在ng serve和ng build期间完美工作。 Angular组件能够调用JavaScript库。

当我试图测试组件时出现问题。以下是错误即时得到：

PhantomJS 2.1.1 (Windows 7 0.0.0): Executed 5 of 20 (2 FAILED) (0 secs/1.989 s 
PhantomJS 2.1.1 (Windows 7 0.0.0) SidebarComponent should create FAILED 
     Error: Error in :0:0 caused by: Can't find variable: App in src/test.ts 
(line 58547) 
     ngOnInit@webpack:///C:/projects/dast-ui-v3/src/app/authenticated-user/si 
debar/sidebar.component.ts:12:7 <- src/test.ts:44879:12 
     ngDoCheck 
     detectChangesInternal 
     detectChanges@webpack:///C:/projects/dast-ui-v3/~/@angular/core/src/link 
er/view.js:288:0 <- src/test.ts:58437:35 
     detectChanges@webpack:///C:/projects/dast-ui-v3/~/@angular/core/src/link 
er/view.js:381:0 <- src/test.ts:58530:48 
     detectChanges@webpack:///C:/projects/dast-ui-v3/~/@angular/core/src/link 
er/view_ref.js:130:0 <- src/test.ts:41614:33 
     _tick@webpack:///C:/projects/dast-ui-v3/~/@angular/core/bundles/core-tes 
ting.umd.js:191:0 <- src/test.ts:3893:49 
     webpack:///C:/projects/dast-ui-v3/~/@angular/core/bundles/core-testing.u 
md.js:205:45 <- src/test.ts:3907:58 
     invoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:232:0 <- 
src/test.ts:78913:31 
     onInvoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/proxy.js:79:0 
<- src/test.ts:49011:45 
     invoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:231:0 <- 
src/test.ts:78912:40 
     onInvoke@webpack:///C:/projects/dast-ui-v3/~/@angular/core/src/zone/ng_z 
one.js:236:0 <- src/test.ts:28878:43 
     invoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:231:0 <- 
src/test.ts:78912:40 
     run@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:114:0 <- sr 
c/test.ts:78795:49 
     run@webpack:///C:/projects/dast-ui-v3/~/@angular/core/src/zone/ng_zone.j 
s:126:42 <- src/test.ts:28768:65 
     detectChanges@webpack:///C:/projects/dast-ui-v3/~/@angular/core/bundles/ 
core-testing.umd.js:205:0 <- src/test.ts:3907:32 
     webpack:///C:/projects/dast-ui-v3/src/app/authenticated-user/sidebar/sid 
ebar.component.spec.ts:24:25 <- src/test.ts:62761:30 
     invoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:232:0 <- 
src/test.ts:78913:31 
     onInvoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/proxy.js:79:0 
<- src/test.ts:49011:45 
     invoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:231:0 <- 
src/test.ts:78912:40 
     run@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:114:0 <- sr 
c/test.ts:78795:49 
     webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/jasmine-patch.js:102:0 
<- src/test.ts:48726:37 
     webpack:///C:/projects/dast-ui-v3/~/@angular/core/bundles/core-testing.u 
md.js:91:0 <- src/test.ts:3793:35 
     invoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:232:0 <- 
src/test.ts:78913:31 
     onInvoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/async-test.js: 
49:0 <- src/test.ts:48316:45 
     onInvoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/proxy.js:76:0 
<- src/test.ts:49008:47 
     invoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:231:0 <- 
src/test.ts:78912:40 
     run@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:114:0 <- sr 
c/test.ts:78795:49 
     webpack:///C:/projects/dast-ui-v3/~/@angular/core/bundles/core-testing.u 
md.js:86:0 <- src/test.ts:3788:32 
     webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/async-test.js:38:0 <- s 
rc/test.ts:48305:46 
     invokeTask@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:265: 
0 <- src/test.ts:78946:40 
     runTask@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:154:0 < 
- src/test.ts:78835:57 
     invoke@webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:335:0 <- 
src/test.ts:79016:40 
     webpack:///C:/projects/dast-ui-v3/~/zone.js/dist/zone.js:970:0 <- src/te 
st.ts:79651:30 

它抱怨它无法找到文件src/test.ts在变量App。所以我确实更新了该文件并添加了该变量。这里是更新src/test.ts：

import './polyfills.ts'; 
 

 
import 'zone.js/dist/long-stack-trace-zone'; 
 
import 'zone.js/dist/proxy.js'; 
 
import 'zone.js/dist/sync-test'; 
 
import 'zone.js/dist/jasmine-patch'; 
 
import 'zone.js/dist/async-test'; 
 
import 'zone.js/dist/fake-async-test'; 
 
import { getTestBed } from '@angular/core/testing'; 
 
import { 
 
    BrowserDynamicTestingModule, 
 
    platformBrowserDynamicTesting 
 
} from '@angular/platform-browser-dynamic/testing'; 
 

 
// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 
 
declare var __karma__: any; 
 
declare var require: any; 
 
/** Added so that ng test will not complain */ 
 
declare var App:any; 
 

 
// Prevent Karma from running prematurely. 
 
__karma__.loaded = function() {}; 
 

 
// First, initialize the Angular testing environment. 
 
getTestBed().initTestEnvironment(
 
    BrowserDynamicTestingModule, 
 
    platformBrowserDynamicTesting() 
 
); 
 

 
// Then we find all the tests. 
 
let context = require.context('./', true, /\.spec\.ts/); 
 
// And load the modules. 
 
context.keys().map(context); 
 
// Finally, start Karma to run the tests. 
 
__karma__.start();

添加变量App后，ng test仍然失败及仍在寻找App变量。有没有人遇到过这个问题？

注意：文件src/test.ts的内容由Angular CLI生成。我刚刚添加了变量App的声明。

Answer 1

您还需要添加你的依赖与2级小的改动karma.conf.js：

1. 这就是所谓的“文件”而不是“脚本”
2. 您可能不需要的“../”

如

"files": [ 
      "../node_modules/jquery/dist/jquery.js", 
      "../node_modules/jquery-ui-dist/jquery-ui.js", 
      "../node_modules/bootstrap/dist/js/bootstrap.js", 
      "../node_modules/pace-js/pace.js", 
      "../node_modules/jquery-slimscroll/jquery.slimscroll.js", 
      "./assets/js/app-init.js" // This is my javascript library