I have an angular(currently @4.0.0) project for which I want to introduce Unit Testing using Karma and Jasmine.
I have set up the appropriate karma.conf.js, spec-bundle.js and package.json. But when I run npm test, this is what is on the console. The test scripts dont seem to be recognized and run.
And these are the warnings on the console,
I have a spec file with simple test for app.ts.
import { async, TestBed, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { App } from './app';
import { AuthorizationService } from '../service/security/authorizationService';
describe('App (templateUrl)', () => {
let comp: App;
let fixture: ComponentFixture<App>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [App]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(App);
comp = fixture.componentInstance;
});
it('should display app title', () => {
fixture.detectChanges();
expect(comp.appTitle).toContain('Angular');
});
});
package.json:
"scripts": {
"rimraf": "rimraf",
"tslint": "tslint",
"typedoc": "typedoc",
"typings": "typings",
"webpack": "webpack",
"webpack-dev-server": "webpack-dev-server",
"webdriver-manager": "webdriver-manager",
"protractor": "protractor",
"clean": "npm cache clean && npm run rimraf -- node_modules doc typings coverage dist",
"clean:dist": "npm run rimraf -- dist",
"preclean:install": "npm run clean",
"clean:install": "npm set progress=false && npm install",
"preclean:start": "npm run clean",
"clean:start": "npm start",
"watch": "npm run watch:local",
"watch:dev": "npm run build:dev -- --watch",
"watch:local": "npm run build:local -- --watch",
"watch:dev:hmr": "npm run watch:dev -- --hot",
"watch:test": "npm run test -- --auto-watch --no-single-run",
"watch:uat": "npm run uat -- --auto-watch --no-single-run",
"watch:prod": "npm run build:prod -- --watch",
"build": "npm run build:local",
"prebuild:dev": "npm run clean:dist",
"build:dev": "webpack --config config/webpack.dev.js --progress --profile --colors --display-error-details --display-cached",
"build:local": "webpack --config config/webpack.local.js --progress --profile --colors --display-error-details --display-cached",
"build:devplus": "webpack --config config/webpack.devplus.js --progress --profile --colors --display-error-details --display-cached",
"build:test": "webpack --config config/webpack.test.js --progress --profile --colors --display-error-details --display-cached --bail",
"build:uat": "webpack --config config/webpack.uat.js --progress --profile --colors --display-error-details --display-cached --bail",
"prebuild:prod": "npm run clean:dist",
"build:prod": "webpack --config config/webpack.prod.js --progress --profile --colors --display-error-details --display-cached --bail",
"server": "npm run server:dev",
"server:dev": "webpack-dev-server --config config/webpack.dev.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
"server:local": "webpack-dev-server --config config/webpack.local.js --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/",
"server:dev:hmr": "npm run server:dev -- --hot",
"server:prod": "http-server dist --cors",
"webdriver:update": "npm run webdriver-manager update",
"webdriver:start": "npm run webdriver-manager start",
"lint": "npm run tslint 'src/**/*.ts'",
"pree2e": "npm run webdriver:update -- --standalone",
"e2e": "npm run protractor",
"e2e:live": "npm run e2e -- --elementExplorer",
"pretest": "npm run lint",
"test": "karma start config/karma.conf.js",
"ci": "npm run e2e && npm run test",
"docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
"start": "npm run server:local",
"start:hmr": "npm run server:dev:hmr",
"postinstall": "npm run typings -- install",
"preversion": "npm test",
"version": "npm run build",
"postversion": "git push && git push --tags"
},
"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@angular/router": "4.0.0",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "4.0.0",
"angular2-toaster": "1.0.1",
"core-js": "^2.4.1",
"css-loader": "0.23.1",
"fullcalendar": "^2.7.1",
"hammerjs": "^2.0.8",
"intl": "1.2.4",
"jquery": "2.2.2",
"jquery-ui": "1.10.5",
"lodash": "^4.17.4",
"ng2-auto-complete": "^0.7.0",
"ng2-cookies": "^0.1.5",
"ng2-file-upload": "^1.0.0-beta.1",
"node-sass": "^3.8.0",
"normalize.css": "^4.1.1",
"path-to-regexp": "^1.5.3",
"postcss": "^5.0.19",
"postcss-loader": "^0.8.2",
"primeng": "1.0.0-beta.15",
"primeui": "4.1.10",
"resolve-url-loader": "^1.6.0",
"rxjs": "^5.0.1",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1",
"tether": "^1.2.0",
"url-loader": "^0.5.7",
"zone.js": "^0.8.4"
},
"devDependencies": {
"angular2-hmr": "~0.5.5",
"awesome-typescript-loader": "~0.17.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-plugin-transform-es2015-modules-commonjs-simple": "^6.7.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-es2015-webpack": "^6.4.0",
"bootstrap": "4.0.0-alpha.2",
"bootstrap-loader": "1.0.10",
"codelyzer": "0.0.15",
"compression-webpack-plugin": "^0.3.1",
"copy-webpack-plugin": "^2.1.3",
"css-loader": "^0.23.1",
"es6-promise": "^3.1.2",
"es6-promise-loader": "^1.0.1",
"es6-shim": "^0.35.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.15.0",
"http-server": "^0.9.0",
"imports-loader": "^0.6.5",
"istanbul-instrumenter-loader": "^0.2.0",
"jasmine-core": "^2.6.2",
"json-loader": "^0.5.4",
"karma": "^1.6.0",
"karma-chrome-launcher": "^0.2.3",
"karma-coverage": "^0.5.5",
"karma-jasmine": "^0.3.8",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.7.0",
"lodash": "^4.6.1",
"moment": "^2.11.2",
"node-sass": "3.7.0",
"npmconf": "2.1.2",
"parse5": "^2.1.5",
"phantomjs-polyfill": "0.0.2",
"phantomjs-prebuilt": "^2.1.7",
"protractor": "^3.2.2",
"raw-loader": "0.5.1",
"reflect-metadata": "^0.1.3",
"remap-istanbul": "^0.6.3",
"resolve-url-loader": "^1.4.3",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.0",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.1",
"ts-helpers": "1.1.1",
"ts-node": "^0.7.1",
"tslint": "^3.7.1",
"tslint-loader": "^2.1.3",
"typedoc": "^0.3.12",
"typescript": "2.0.3",
"typings": "^1.5.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1",
"webpack-load-plugins": "^0.1.2",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.12.0",
"webpack-validator": "^1.0.0-beta.4"
},
"repository": {
"type": "git",
"url": "https://github.com/angularclass/angular2-webpack-starter.git"
},
"bugs": {
"url": "https://github.com/angularclass/angular2-webpack-starter/issues"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
karma.conf.js:
module.exports = function(config) {
var testWebpackConfig = require('./webpack.test.js');
config.set({
basePath: '',
frameworks: ['jasmine'],
exclude: [ ],
files: [ { pattern: 'spec-bundle.js', watched: false } ],
preprocessors: { 'spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
webpack: testWebpackConfig,
coverageReporter: {
dir : 'coverage/',
reporters: [
{ type: 'text-summary' },
{ type: 'json' },
{ type: 'html' }
]
},
webpackServer: { noInfo: true },
reporters: [ 'mocha', 'coverage' ],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [
'Chrome'
],
singleRun: true
});
};
spec-bundle.js:
Error.stackTraceLimit = Infinity;
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy'); // since zone.js 0.6.15
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch'); // put here since zone.js 0.6.14
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('rxjs/Rx');
var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(
browser.BrowserDynamicTestingModule,
browser.platformBrowserDynamicTesting()
);
var testContext = require.context('../src', true, /\.spec\.ts/);
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
}
var modules = requireAll(testContext);
