typescript - angular 2 fejl ved enhedstest af komponent med erklæret variabel

Jeg forsøger i øjeblikket at migrere min eksisterende webapplikation til Angular 2. Den gamle webapplikation havde et JavaScript-bibliotek, der håndterer overskrifter, menuer, scroll og så videre. Jeg vil gerne fortsætte med at bruge det, da det ikke indeholder nogen forretningslogik, og det vil gøre migrationen ret nem. Efter at have søgt har jeg fundet ud af, at jeg stadig kan kalde mit JavaScript-bibliotek fra Angular 2-kode. Nedenfor er de trin, jeg har udført:

1.) tilføj mit script på scriptlisten inde i angular-cli.json-filen:

"scripts": [
		  "../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

2.) Og nedenfor er komponenten, der kalder JavaScript-biblioteket:

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() {
	  App.initSidebar(); // My JS lib is called.
  }

}

Nu fungerer ovenstående kode perfekt under ng serve og ng build. Angular-komponenten kunne kalde JavaScript-biblioteket.

Problemet opstår, når jeg prøvede at teste komponenten. Her er den fejl, jeg får:

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

Den klager over, at den ikke kan finde variablen App i filen src/test.ts. Så jeg opdaterede den fil og tilføjede variablen. Her er opdateringen 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();

Efter at have tilføjet variablen App, fejler ng test stadig, og den leder stadig efter variablen App. Har nogen stødt på dette problem før?

BEMÆRK: Indholdet af filen src/test.ts er genereret af Angular CLI. Jeg har kun tilføjet deklarationen af variablen App.

Svar #1

Du skal også tilføje dine afhængigheder til karma.conf.js med 2 små ændringer:

Det hedder "filer" ikke "scripts"
Du har muligvis ikke brug for "../"

Jeg

"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

typescript - angular 2 fejl ved enhedstest af komponent med erklæret variabel

Svar #1

Relaterede artikler