Whats mistakes with this angular2 unit test setup? - unit-testing

my application is running good but unit test doesn't work.
below error throws when i try to npm test
**
help me to resolve my issue
and whats the correct procedure to follow angular2 unit test,
thanks in advance..
package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"docker-build": "docker build -t ng2-quickstart .",
"docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
"pree2e": "npm run webdriver:update",
"e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"postinstall": "typings install",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"test-once": "tsc && karma start karma.conf.js --single-run",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"webdriver:update": "webdriver-manager update"
},
"keywords": [],
"author": "KOC",
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"angular-2-local-storage": "0.0.19",
"angular-in-memory-web-api": "~0.1.0",
"angular2-google-maps": "^0.15.0",
"angular2-highcharts": "^0.3.4",
"angular2-logger": "^0.5.0",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"ng2-modal": "0.0.21",
"ng2-pagination": "^0.5.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.38",
"zone.js": "^0.6.23"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.15.1",
"lodash": "^4.16.1",
"jasmine-core": "~2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-htmlfile-reporter": "^0.3.4",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^3.3.0",
"rimraf": "^2.5.2",
"#types/core-js": "^0.9.34"
},
"repository": {},
"main": "karma-test-shim.js"
}
**
karma.conf.js
**
// #docregion
module.exports = function(config) {
var appBase = 'app/'; // transpiled app JS and map files
var appSrcBase = 'app/'; // app source TS files
var appAssets = 'base/app/'; // component assets fetched by Angular's compiler
var testBase = 'testing/'; // transpiled test JS and map files
var testSrcBase = 'testing/'; // test source TS files
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'), // click "Debug" in browser to see it
require('karma-htmlfile-reporter') // crashing w/ strange socket error
],
customLaunchers: {
// From the CLI. Not used here but interesting
// chrome setup for travis CI using chromium
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
files: [
// System.js for module loading
'node_modules/systemjs/dist/system.src.js',
// Polyfills
'node_modules/core-js/client/shim.js',
'node_modules/reflect-metadata/Reflect.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/proxy.js',
'node_modules/zone.js/dist/sync-test.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/zone.js/dist/async-test.js',
'node_modules/zone.js/dist/fake-async-test.js',
// RxJs
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Paths loaded via module imports:
// Angular itself
{pattern: 'node_modules/#angular/**/*.js', included: false, watched: false},
{pattern: 'node_modules/#angular/**/*.js.map', included: false, watched: false},
{pattern: 'systemjs.config.js', included: false, watched: false},
{pattern: 'systemjs.config.extras.js', included: false, watched: false},
'karma-test-shim.js',
// transpiled application & spec code paths loaded via module imports
{pattern: appBase + '**/*.js', included: false, watched: true},
{pattern: testBase + '**/*.js', included: false, watched: true},
// Asset (HTML & CSS) paths loaded via Angular's component compiler
// (these paths need to be rewritten, see proxies section)
{pattern: appBase + '**/*.html', included: false, watched: true},
{pattern: appBase + '**/*.css', included: false, watched: true},
// Paths for debugging with source maps in dev tools
{pattern: appSrcBase + '**/*.ts', included: false, watched: false},
{pattern: appBase + '**/*.js.map', included: false, watched: false},
{pattern: testSrcBase + '**/*.ts', included: false, watched: false},
{pattern: testBase + '**/*.js.map', included: false, watched: false}
],
// Proxied base paths for loading assets
proxies: {
// required for component assets fetched by Angular's compiler
"/app/": appAssets
},
exclude: [],
preprocessors: {},
// disabled HtmlReporter; suddenly crashing w/ strange socket error
reporters: ['progress', 'kjhtml'],//'html'],
// HtmlReporter configuration
htmlReporter: {
// Open this file to see results in browser
outputFile: '_test-output/tests.html',
// Optional
pageTitle: 'Unit Tests',
subPageTitle: __dirname
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
})
}
**
systemjs.config.js
**
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'#angular/upgrade': 'npm:#angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
'angular2-highcharts': 'npm:angular2-highcharts',
'highcharts/highstock.src': 'npm:highcharts/highstock.js',
'highcharts/highcharts-3d': 'npm:highcharts/highcharts-3d.js',
'highcharts': 'npm:highcharts',
'HighchartExporting': 'npm:highcharts/modules/exporting.js',
'HighchartCSVExporting': 'npm:highcharts/modules/export-csv.js',
'angular-2-local-storage': 'npm:angular-2-local-storage',
'angular2-logger': 'npm:angular2-logger',
'ng2-pagination': 'npm:ng2-pagination',
"ng2-modal": "node_modules/ng2-modal",
//'angular2-modal': 'npm:angular2-modal',
//'angular2-modal/plugins/bootstrap': 'npm:angular2-modal/plugins/bootstrap'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'angular2-highcharts': {
main: 'index',
format: 'cjs',
defaultExtension: 'js'
},
'highcharts': {
defaultExtension: 'js',
format: 'cjs'
},
'HighchartExporting': {
defaultExtension: 'js',
format: 'cjs'
},
'HighchartCSVExporting': {
defaultExtension: 'js',
format: 'cjs'
},
'angular-2-local-storage': { main: 'dist/index.js', defaultExtension: 'js' },
'angular2-logger': { main: 'core.js', defaultExtension: 'js' },
'ng2-pagination': {
main: 'index',
format: 'cjs',
defaultExtension: 'js'
},
"ng2-modal": { "main": "index.js", "defaultExtension": "js" },
//'angular2-modal': { defaultExtension: 'js', main: 'bundles/angular2-modal.umd' }
}
});
})(this);
**
app.component.spec.ts
**
/* tslint:disable:no-unused-variable */
import { AppComponent } from './app.component';
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { By } from '#angular/platform-browser';
import { DebugElement } from '#angular/core';
//////// SPECS /////////////
describe('AppComponent', function () {
let de: DebugElement;
let deClick: DebugElement;
let comp: AppComponent;
let fixture: ComponentFixture<AppComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AppComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
comp = fixture.componentInstance;
de = fixture.debugElement.query(By.css('h1'));
debugger;
deClick=fixture.debugElement.query(By.css('input'));
});
it('should create component', () => expect(comp).toBeDefined() );
it('should have expected <h2> text', () => {
fixture.detectChanges();
const h1 = de.nativeElement;
expect(h1.innerText).toEqual('Hello Angular');
});
});

Related

Unable to generate code coverage report for all ts files using Karma, Webpack, remap coverage

I am able to set up Unit test framework using Karma, Webpack and karma-remap-coverage for code coverage. But I don't understand why coverage is not coming for all the files(components, directives, services). I have around, supposed 100 files, but it's generating coverage report only for 40-50 files.
Here I am sharing my configuration files:
Karma.conf.js
var webpackConfig = require('./webpack/webpack.test');
var path = require('path');
module.exports = function (config) {
var _config = {
basePath: '',
frameworks: ['jasmine'],
files: [
{ pattern: './webpack/karma-test-shim.js', watched: false },
{ pattern: './node_modules/#angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: false }
],
preprocessors: {
'./webpack/karma-test-shim.js': ['webpack', 'sourcemap'],
},
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only'
},
webpackServer: {
noInfo: true
},
coverageReporter: {
includeAllSources: true,
type: 'html',
dir: 'coverage/'
},
// coverageIstanbulReporter: {
// reports: ['html', 'lcovonly'],
// fixWebpackSourcePaths: true
// },
// reporters: ['progress', 'coverage-istanbul'],
coverageReporter: {
type: 'in-memory'
},
remapCoverageReporter: {
'text-summary': null,
json: './coverage/coverage.json',
html: './coverage/html',
cobertura: './coverage/cobertura.xml'
},
reporters: ['progress', 'coverage', 'remap-coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome'],
singleRun: true,
browserNoActivityTimeout: 20000
};
config.set(_config);
};
Webpack.test.js
var webpack = require('webpack');
var helpers = require('./helpers');
var path = require('path');
module.exports = {
devtool: 'inline-source-map',
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader?sourceMap=false,inlineSourceMap=true',
options: { configFileName: 'tsconfig.json' }
}, 'angular2-template-loader'
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null-loader'
},
{
test: /\.css$/,
exclude: helpers.root('app'),
loader: 'null-loader'
},
{
test: /\.css$/,
include: helpers.root('app'),
loader: 'raw-loader'
},
{
enforce: 'post',
test: /\.ts$/,
loader: 'istanbul-instrumenter-loader',
include: helpers.root('app'),
exclude: /(node_modules|\.spec\.ts)/
}
]
}
}
Karma-test-shim.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');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var appContext = require.context('../testing/specs', true, /\.spec\.ts/);
appContext.keys().forEach(appContext);
var testing = require('#angular/core/testing');
var browser = require('#angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
NPM dependencies used:
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage": "^1.1.1",
"istanbul-instrumenter-loader": "2.0.0",
"karma-html-reporter": "^0.2.7",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-mocha-reporter": "^2.2.3",
"karma-remap-coverage": "^0.1.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.1",
Any help is really appreciated!

Angular2 2.4.3 with Angular-CLI 1.0.0-beta.25.5, after upgrade unit tests with karma/jasmine stops working

Recently I updated Angular from 2.0.3 to 2.4.3 and Angular-CLI from 1.0.0-beta.21 to 1.0.0-beta.25.5
After upgrade my unit tests stop working. Below you can find test file, configuration files and test results. Do you have any idea what can be wrong with it? Thanks
test result
$ npm test -- --watch=false
> portal#0.0.0 test /Users/artur/Sites/portal
> ng test "--watch=false"
19 01 2017 08:22:52.703:WARN [karma]: Port 9879 in use
19 01 2017 08:22:52.705:INFO [karma]: Karma v1.4.0 server started at http://0.0.0.0:9880/
19 01 2017 08:22:52.705:INFO [launcher]: Launching browser Chrome with unlimited concurrency
19 01 2017 08:22:52.726:INFO [launcher]: Starting browser Chrome
19 01 2017 08:22:55.619:INFO [Chrome 55.0.2883 (Mac OS X 10.12.2)]: Connected on socket XIi2HWa92rY4uvNvAAAA with id 35735618
Chrome 55.0.2883 (Mac OS X 10.12.2): Executed 0 of 0 ERROR (0.004 secs / 0 secs)
npm ERR! Test failed. See above for more details.
banner.component.spec.ts
/* tslint:disable:no-unused-variable */
import { Component } from '#angular/core';
import { TestBed, async } from '#angular/core/testing';
import { BannerComponent } from './banner.component';
import { RouterTestingModule } from '#angular/router/testing';
#Component({
template: ''
})
class DummyComponent {}
describe('Component: Banner', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
DummyComponent,
BannerComponent
],
imports: [
RouterTestingModule.withRoutes([
{ path: '', component: DummyComponent }
])
],
providers: []
});
});
it('should create an instance', async(() => {
let fixture = TestBed.createComponent(BannerComponent);
let component = fixture.debugElement.componentInstance;
expect(component).toBeTruthy();
}));
});
banner.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.scss'],
styles: [".banner >>> lp-svg svg path { fill: #fcfcfc; }"]
})
export class BannerComponent {}
package.json
{
"name": "portal",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ngc": "./node_modules/.bin/ngc -p ./src",
"start": "./node_modules/.bin/ng serve --host 0.0.0.0 --port 4000",
"build.dev": "./node_modules/.bin/ng build --bh /portal/",
"build.dev.watch": "./node_modules/.bin/ng build --bh /portal/ --watch true",
"build.prod": "./node_modules/.bin/ng build --bh /portal/ --prod --env=prod",
"build.prod.watch": "./node_modules/.bin/ng build --bh /portal/ --prod --env=prod",
"serve.prod": "node lp-server.js",
"lint": "tslint \"src/**/*.ts\"",
"test": "./node_modules/.bin/ng test",
"e2e": "./protractor.sh",
"copy.support-page": "./node_modules/.bin/copyfiles -u 1 ./src/support.html ./dist"
},
"private": true,
"dependencies": {
"#angular/common": "^2.4.3",
"#angular/compiler": "^2.4.3",
"#angular/compiler-cli": "^2.4.3",
"#angular/core": "^2.4.3",
"#angular/forms": "^2.4.3",
"#angular/http": "^2.4.3",
"#angular/platform-browser": "^2.4.3",
"#angular/platform-browser-dynamic": "^2.4.3",
"#angular/platform-server": "^2.4.3",
"#angular/router": "^3.4.3",
"copyfiles": "1.0.0",
"core-js": "2.4.1",
"jquery": "2.2.3",
"perfect-scrollbar": "~0.6.10",
"rxjs": "^5.0.3",
"ts-helpers": "1.1.1",
"typescript": "2.0.2",
"underscore": "1.8.3",
"zone.js": "0.6.23"
},
"devDependencies": {
"#types/jasmine": "^2.5.41",
"angular-cli": "^1.0.0-beta.25.5",
"codelyzer": "^2.0.0-beta.4",
"jasmine-core": "^2.5.2",
"jasmine-spec-reporter": "^3.2.0",
"karma": "^1.4.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-mocha-reporter": "^2.2.1",
"karma-phantomjs-launcher": "^1.0.2",
"karma-remap-istanbul": "^0.4.0",
"live-server": "1.1.0",
"protractor": "^5.0.0",
"ts-node": "1.2.1",
"tslint": "3.13.0"
}
}
karma.conf.js
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-phantomjs-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma'),
require('karma-mocha-reporter')
],
files: [
{ pattern: 'src/test.ts', watched: false },
{ pattern: 'src/assets/img/*', watched: false, included: false, served: true, nocache: false }
],
proxies: {
'/portal/assets/img/': '/base/src/assets/img/'
},
preprocessors: {
'./src/test.ts': ['angular-cli']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
port: 9879,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
browserConsoleLogOptions: {
level: 'debug',
format: '%b %T: %m',
terminal: true
},
customLaunchers: {
'PhantomJS_custom': {
base: 'PhantomJS',
options: {
windowName: 'my-window',
settings: {
webSecurityEnabled: false
},
},
flags: ['--load-images=true'],
debug: true
}
},
phantomjsLauncher: {
// Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
exitOnResourceError: true
}
});
};
angular-cli.json
{
"project": {
"version": "1.0.0-beta.25.5",
"name": "ui-lender-portal-v2"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets"],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "lp",
"mobile": false,
"styles": [
"styles.scss",
"../node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css"
],
"scripts": [
"../node_modules/underscore/underscore.js",
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.js",
"./libs/jquery-ui/jquery-ui.min.js",
"./libs/jquery-mobile/jquery.mobile.custom.min.js",
"./libs/slick/slick.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
Finally I created new project with Angular-CLI and copied source files from my project. This helps.

3rd Party library testing angular 2 webpack

I am working on a project using angular 2 and a 3rd party library for making charts (AmCharts). I figured out how to use it along angular 2, but I'm getting a error when I try to make a unit test for the chart component:
Error: Error in ./ChartsComponent class ChartsComponent - inline template:1:2 caused by: AmCharts is not defined
ReferenceError: AmCharts is not defined
This project has been created using angular-cli and we've recently upgraded angular to version 2.2.1.
Here is angular-cli.json and karma.conf.js:
angular-cli.json
{
"project": {
"version": "1.0.0-beta.21",
"name": "cli-crud-webpack"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "gov",
"mobile": false,
"styles": [
"styles.scss",
"../public/assets/css/agate.css",
"../public/assets/css/bootstrap.min.css"
],
"scripts": [
"../public/assets/js/highlight.pack.js",
"../node_modules/amcharts3/amcharts/amcharts.js",
"../node_modules/amcharts3/amcharts/xy.js",
"../node_modules/amcharts3/amcharts/gauge.js",
"../node_modules/amcharts3/amcharts/serial.js",
"../node_modules/amcharts3/amcharts/pie.js",
"../node_modules/amcharts3/amcharts/themes/light.js",
"../node_modules/amcharts3/amcharts/themes/dark.js",
"../node_modules/amcharts3/amcharts/themes/black.js",
"../node_modules/amcharts3/amcharts/plugins/responsive/responsive.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
karma.conf.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
I just found out I have to declare amcharts in karma configuration file, like this:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma')
],
files: [
{ pattern: './src/test.ts', watched: false },
"./public/assets/js/highlight.pack.js",
"./node_modules/amcharts3/amcharts/amcharts.js",
"./node_modules/amcharts3/amcharts/xy.js",
"./node_modules/amcharts3/amcharts/gauge.js",
"./node_modules/amcharts3/amcharts/serial.js",
"./node_modules/amcharts3/amcharts/pie.js",
"./node_modules/amcharts3/amcharts/themes/light.js",
"./node_modules/amcharts3/amcharts/themes/dark.js",
"./node_modules/amcharts3/amcharts/themes/black.js",
"./node_modules/amcharts3/amcharts/plugins/responsive/responsive.min.js"
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};

How to prevent loading images in karma runner

How to configure karma to stop loading images while testing? i was trying to use solution from here in my karma.config.js :
var webpack = require('webpack');
module.exports = function (config) {
config.set({
browsers: [ 'Chrome' ],
singleRun: true,
frameworks: [ 'mocha' ],
files: [
'tests.webpack.js',
{pattern: './assets/img/signup.png', watched: false, included: false, served: true},
],
proxies: {
'/assets/img/signup.png': '/assets/img/signup.png'
},
preprocessors: {
'tests.webpack.js': [ 'webpack', 'sourcemap' ]
},
reporters: ['mocha'],
mochaReporter: {},
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
plugins: ['transform-decorators-legacy' ],
presets: ['airbnb', 'es2015', 'stage-1', 'react']
}
}
]
},
externals: {
'cheerio': 'window',
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true
}
},
webpackServer: {
noInfo: true //please don't spam the console when running in karma!
}
});
};
but this doesn't work for me. I still get error:
[web-server]: 404: /front-end2/assets/img/signup.png
Maybe there are any other solution to prevent loading images ? the biggest problem is not warning message but errors which ocures when karma try to get image from my local server
The proxies configuration does not look right. Try something like this:
...
proxies: {
'/front-end2/assets/img/': '/base/assets/img/'
},
...
A brief explanation:
/front-end2/assets/img/ relates to the requests that are being made;
/assets/img/ relates the the pattern in the files configuration; and
/base/ is the path from which Karma serves the files.

Uncaught ReferenceError: require is not defined - Target to es6

i am getting the Uncaught ReferenceError: require is not defined in jasmine unit test with karma.
this my karma.conf.js file.
tsconfig.json - target "target": "es6"
module.exports = function (config) {
config.set({
basePath: './',
frameworks: ['jasmine'],
files: [
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system-polyfills.js',
'node_modules/systemjs/dist/system.src.js',
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
{ pattern: 'dist/dev/**/*.js', included: false, watched: true },
{ pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: false, watched: false }, // PhantomJS2 (and possibly others) might require it
'dist/**/*.spec.js',
],
proxies: { },
exclude: [ ],
preprocessors: {
'dist/**/!(*spec).js': ['coverage']
},
reporters: ['mocha', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [
'PhantomJS',
'Chrome'
],
singleRun: false,
client: { }
});
};
Recommend compiling your code with additionally --module commonjs and using a karma plugin that understands commonjs i.e. https://github.com/karma-runner/karma-commonjs