angular 2 error when unit testing component with declare variable

Question

I am currently trying to migrate my existing web application to Angular 2. The old web application had a JavaScript library that handles headers, menus, scrolling and so on. I would like to continue using it since it does not have any business logic and it will make migration fairly easy. After searching, i have found out that I can still call my JavaScript library from Angular 2 codes. Below are the steps that I did:

1.) add my script in the script list inside angular-cli.json file:

"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.) And below is the component that calls the JavaScript library:

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.
  }

}

Now the above code works perfectly during ng serve and ng build. The Angular component was able to call the JavaScript lib.

The problem arises when I tried to test the component. Here is the error im getting:

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

Its complaining that it cant find the variable App in the file src/test.ts. So I did updated that file and added the variable. Here is the update 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();

After adding the variable App, ng test is still failing and its still looking for the App variable. Has anyone encountered this problem before?

NOTE: The contents of the file src/test.ts are generated by Angular CLI. I just added the declaration of the variable App.

Simon Briggs · Accepted Answer · 2016-12-26 07:35:41Z

4

You also need to add your dependencies to karma.conf.js with 2 small changes:

It's called "files" not "scripts"
You might not need the "../"

Eg

"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

answered Dec 26, 2016 at 7:35

Simon Briggs

1,2691 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xnor Over a year ago

Thanks! that solved my problem. Below is the snippet of the files section of my karma.conf.js :

files: [       { pattern		: './src/test.ts', watched: false }, 	   './src/assets/js/app-init.js', 	   './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'      ]

Collectives™ on Stack Overflow

angular 2 error when unit testing component with declare variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related