50885

An Angular2 app with karma & jasmine throws errors with multi-level directory structure

Question:

I am building an Angular 2 app with the current 4.0.0-beta.1 release. After many hours of struggle, I got karma running. I'm now trying to get a jasmine tautology test (true=true) to run, but karma reports "Uncaught ReferenceError: describe is not defined". Here are relevant code sections.

<strong>karma.conf.js</strong>

module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine'], // these plugins seem to be necessary. Without them, an error about a missing require in app.component.js occurs in karma plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-htmlfile-reporter') ], files: [ 'src/client/app/*.js', 'src/client/app/components/**/*.js' ],

<strong>1st.spec.ts</strong>

import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; //////// SPECS ///////////// describe('1st tests', () => { it('true is true', () => expect(true).toBe(true)); });

The 1st.spec.ts file is in the 'src/client/app/*.js' folder, which is specified in the files: array of karma.conf.js

What is missing? How do you get Angular2 to recognize jasmine functions? I do not have any of the testing components imported into app.module.ts because I haven't seen any tutorials mention that. Is that the secret? If so what goes in there?

Answer1:

After weeks of reading tutorials, karma docs, and buying ng-book2, I discovered that no one describes how to set test configs when app.component.ts is several levels down in the directory structure. Karma docs may explain this, but the docs are so verbose and abstract, without examples, I was not able to gain any meaning from them. I also found that Angular's quickstart apps have various 'secret sauces' to enable karma & jasmine testing, e.g., karma-test-shim.js (which you cannot get via npm).

With no help from the above docs, I re-started with Angular's Setup. Setup uses systemjs. AngularCLI uses Webpack. Read about this. It makes a difference for my solution below and for your longer term actions. Jasmine tests work off the shelf for Angular Setup's Quickstart. I nudged the directory structure to my multi-level and tweaked lots of things to find configs that kept karma & jasmine working. Bottom line - Systemjs and karma.config.js both have to change - together. A change in only 1 of them just creates new and novel console errors.

<strong>Systemjs</strong> - change app: in the map object to your path. In my case, its

map: { app: 'src/client/app', // the rest of map }

<strong>karma.conf.js</strong> - change appBase and appSrcBase in the module.exports function

var appBase = 'src/client/app/'; //originally appBase='app/'; var appSrcBase = 'src/client/app/';

The Console errors make it sound like the problem is in the @angular bundle paths. Changes there just created different errors. Don't get sucked in.

Hope this saves you lots of time in getting tests going on an app that has a real life directory structure.

Recommend

  • Angular 4 unit test get error - Failed: Cannot read property 'map' of undefined
  • Google App Engine Require Indexes for tests
  • Angular 2 Observable testing Error: Cannot use setInterval from within an async zone test
  • Angular2 unit testing : testing a component's constructor
  • How to query the shadowDOM in an Angular component test
  • Test module can't resolve module being tested [Angular4, Karma, Jasmine]
  • Angular 2 router auxiliary routes not working on redirectTo
  • jaxb xsd prefix package names
  • Escaping single quotes in JDBC with MySql
  • Accessing 3rd level of JSON with Angular ng-repeat
  • Consuming a web service with the Netbeans Platform
  • Slicing an SPA into several components and use AngularJS
  • text-align justify, cannot override
  • to implement a spinner in angular2+
  • Is there any purpose for h2-h6 headings in HTML5?
  • Pass array from parent template to child template
  • How to plot large time series (thousands of administration times/doses of a medication)?
  • How to use Windows Media Foundation with UWP without a topology
  • Magento site down due to mysql error General error: 1030 Got error -1 from storage engine
  • Why must we declare a variable name when adding a method to a struct in Golang?
  • How to make R's read_csv2() recognise the text characters properly
  • Why use database factory in asp.net mvc?
  • Android Activity.onWindowFocusChanged doesn't get called from within TabHost
  • Angular2 component view does not update on value change via method
  • CakePHP ACL tutorial initDB function warnings
  • C: Incompatible pointer type initializing
  • x64 applications using gdi+: what are the consequences on performance?
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • Typescript - Unable to get 'import' statement to function
  • Meteor helpers not available in Angular template
  • ImageMagick, replace semi-transparent white with opaque white
  • If I include Java 8 in my Android app does that affect which devices it will work on?
  • sending/ receiving email in Java
  • Why winpcap requires both .lib and .dll to run?
  • Return words with double consecutive letters
  • Compare two NSDates in iPhone
  • SetUp method failed while running tests from teamcity
  • Python: how to group similar lists together in a list of lists?
  • Understanding cpu registers
  • Busy indicator not showing up in wpf window [duplicate]