Related
I'm working on a angular js and angular 8 hybrid application. The new components created in angular are downgraded to be used in angular js. Code snippet of module is shown below:
#NgModule({
// Declaration and Imports
providers:[
ServiceName,
// Other Services
],
entryComponents: [
ComponentName,
// Other components to be used in angular js
]
})
export class FeatureModule{
}
declare var angular: angular.IAngularStatic
angular.module('app')
.directive('cmpName', downgradeComponent({component: ComponentName }) as angular.IDirectiveFactory)
.factory('serviceName', downgradeInjectable(ServiceName));
In app.module.ts file, there is following code.
// Usual Stuff
export class AppModule {
constructor(
private upgrade: UpgradeModule,
) {
}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['app'], { strictDi: true });
}
}
Nothing has been updated in component spec file generated by angular cli.
In tsconfig.spec.json,
{
"extends": "../tsconfig.json",
"compilerOptions": {
"baseUrl": "./",
"outDir": "../out-tsc/spec",
"types": ["jasmine", "node", "angular"]
},
"files": ["test.ts", "polyfills.ts"],
"include": ["**/*.spec.ts", "**/*.d.ts"]
}
karma.conf.js looks like below.
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage/ProjectFolder'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
Now, if I run npm run test or ng test command to run test suite, I'm getting following error.
An error was thrown in afterAll Uncaught ReferenceError: angular is not defined ReferenceError: angular is not defined at Module../..path-to-module-file/feature.module.ts.
How can I resolve this issue? Do I have to mock angular variable declared in the module file. Any help is appreciated?
I don't know too much of the nitty gritty details, but I run a hybrid application with Webpack and Karma. I downgrade all my components so they can be used in AngularJS, just like you.
The difference is that I have a file called vendor.ts that contains AngularJS. I bet you do too, since you only talk about the tests failing, not the product being broken. I have an entry in my Karma config file:
files: [
{ pattern: "node_modules/babel-polyfill/dist/polyfill.js", watched: false },
{ pattern: "node_modules/intl/locale-data/jsonp/en-GB.js", watched: false },
{ pattern: "node_modules/intl/locale-data/jsonp/fr-FR.js", watched: false },
{ pattern: "static/polyfills.ts", watched: false },
{ pattern: "static/vendor.ts", watched: false },
{ pattern: "node_modules/zone.js/dist/long-stack-trace-zone.js", watched: false },
{ pattern: "node_modules/zone.js/dist/proxy.js", watched: false },
{ pattern: "node_modules/zone.js/dist/sync-test.js", watched: false },
{ pattern: "node_modules/zone.js/dist/jasmine-patch.js", watched: false },
{ pattern: "node_modules/zone.js/dist/async-test.js", watched: false },
{ pattern: "node_modules/zone.js/dist/fake-async-test.js", watched: false },
{ pattern: "node_modules/angular-mocks/angular-mocks.js", watched: false },
{ pattern: "static/main.ts", watched: false },
{ pattern: "static/main.test.ts", watched: false },
],
This tells Karma which files to watch and serve in the browser. I think that means that after Webpack compiled these files, Karma-Webpack can find the compiled files and serve them.
I am using karma, browserify and babelify to run unit tests for angular 2.
Whenever I run it it fails with a 404 error like this
25 05 2017 11:35:22.974:WARN [web-server]: 404: /C://Users//me//git//proj-ng//modules//pack\\src//test.service.spec.js
Firefox 53.0.0 (Windows 7 0.0.0) ERROR
(SystemJS) XHR error (404 Not Found) loading http://localhost:9876/C:\\Users\\me\\git\\proj-ng\\modules\\pack\\src\\test.s
ervice.spec.js
wrapFn#C:/Users/me/git/proj-ng/modules/pack/node_modules/zone.js/dist/zone.js:1055:30
ZoneDelegate.prototype.invokeTask#C:/Users/me/git/proj-ng/modules/pack/node_modules/zone.js/dist/zone.js:424:17
Zone.prototype.runTask#C:/Users/me/git/proj-ng/modules/pack/node_modules/zone.js/dist/zone.js:191:28
ZoneTask/this.invoke#C:/Users/me/git/proj-ng/modules/pack/node_modules/zone.js/dist/zone.js:486:28
Error loading http://localhost:9876/C:\\Users\\me\\git\\proj-ng\\modules\\pack\\src\\test.service.spec.js as "C:\\Users\\me\\git\\proj-ng\\modules\\pack\\src\\test.service.spec.js" from http://localhost:9876/src/test.service.spec.js
I have checked that the test files are located at the location it is complaining about. I have tried many variations and am out of ideas by now on what can be wrong.
Below is my karma.conf.js.
(function () {
"use strict";
module.exports = function (config) {
config.set({
basePath: "",
frameworks: ["browserify","jasmine"],
browsers: ["Firefox"],
reporters: ["mocha", "coverage"],
// Source files that you wanna generate coverage for.
preprocessors: {"src/**/!(*spec).js": ["coverage", "sourcemap"], "src/**/*.js": ["browserify"]},
// "src/**/!(*spec).js": ["browserify"]},
browserify: {
debug: true,
transform: [ "babelify" ]
},
coverageReporter: {
dir: "code-coverage/",
reporters: [
{type: "text-summary"},
{type: "json"},
{type: "html"}
]
},
files: [
"node_modules/es6-shim/es6-shim.js",
"node_modules/reflect-metadata/Reflect.js",
"node_modules/systemjs/dist/system-polyfills.js",
"node_modules/systemjs/dist/system.src.js",
"node_modules/zone.js/dist/zone.js",
"node_modules/zone.js/dist/long-stack-trace-zone.js",
"node_modules/zone.js/dist/async-test.js",
"node_modules/zone.js/dist/fake-async-test.js",
"node_modules/zone.js/dist/sync-test.js",
"node_modules/zone.js/dist/proxy.js",
"node_modules/zone.js/dist/jasmine-patch.js",
{pattern: "node_modules/rxjs/**/*.js", included: false, watched: false},
{pattern: "node_modules/rxjs/**/*.js.map", included: false, watched: false},
{pattern: "node_modules/angular-2-local-storage/**/*.js", included: false, watched: false},
{pattern: "karma-test-shim.js", included: true, watched: true},
{pattern: "node_modules/#angular/**/*.js", included: false, watched: true},
{pattern: "node_modules/#angular/**/*.js.map", included: false, watched: true},
{pattern: "src/**/*.js", included: false, watched: true},
// paths to support debugging with source maps in dev tools
{pattern: "src/**/*.ts", included: false, watched: false},
{pattern: "src/**/*.js.map", included: false, watched: false}
],
proxies: {
// required for component assets fetched by Angular"s compiler
"/src/": "/base/src/"
},
port: 9876,
colors: true,
logLevel: config.LOG_DEBUG,
autoWatch: false,
singleRun: true
});
};
}());
my gulp test task is simply
const Server = require("karma").Server;
gulp.task("test", () => {
new Server({
configFile: __dirname + '/karma.conf.js'
}).start();
});
I am trying to introduce unit testing to my Angular 4 project. I am using Karma for it. I have done the configuration. It shows a connected screen. But it shows not tests! I have one test under src/app/ directory.
This error appears in console.
{
"originalErr": {
"__zone_symbol__currentTask": {
"type": "microTask",
"state": "notScheduled",
"source": "Promise.then",
"zone": "<root>",
"cancelFn": null,
"runCount": 0
}
},
"__zone_symbol__currentTask": {
"type": "microTask",
"state": "notScheduled",
"source": "Promise.then",
"zone": "<root>",
"cancelFn": null,
"runCount": 0
}
}
1st.spec.ts
describe('1st tests', () => {
it('true is true', () => expect(true).toBe(true));
});
karma.config.js
module.exports = function(config) {
var appBase = 'src/'; // transpiled app JS and map files
var appAssets = '/base/app/'; // component assets fetched by Angular's compiler
// Testing helpers (optional) are conventionally in a folder called `testing`
var testingBase = 'src/testing/'; // transpiled test JS and map files
var testingSrcBase = 'src/testing/'; // test source TS files
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter')
],
client: {
builtPaths: [appBase, testingBase], // add more spec base paths as needed
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
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',
// 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: appBase + '/systemjs.config.js', included: false, watched: false },
{ pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false },
'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
// transpiled application & spec code paths loaded via module imports
{ pattern: appBase + '**/*.js', included: false, watched: true },
{ pattern: testingBase + '**/*.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: appBase + '**/*.ts', included: false, watched: false },
{ pattern: appBase + '**/*.js.map', included: false, watched: false },
{ pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
{ pattern: testingBase + '**/*.js.map', included: false, watched: false}
],
// Proxied base paths for loading assets
proxies: {
// required for modules fetched by SystemJS
'/base/src/node_modules/': '/base/node_modules/'
},
exclude: [],
preprocessors: {},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
})
}
Karma Connection Screen:
Any lead to help, will be helpful.
After upgrading an application to rc-7 and running my unit tests to be sure nothing broke, I got this error message on about half of my unit tests.
"Error: Zone.js has detected that ZoneAwarePromise '(window|global).Promise' has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js) in node_modules/zone.js/dist/zone.js (line 21)"
The closest I thing I can think of is that I mock responses from http calls in my unit tests by manually returning observables.
This is an Angular2 application using Jasmine and Karma for unit testing.
UPDATE
So it would seem this is likely a loading order issue as per the error message, however I am not loading the polyfills anywhere I can determine unless I am accidentally grabbing them. I've attached my karma.conf.js and systemjs.conf.js to aid in finding the error.
Karma.conf.js
module.exports = function(config) {
var gulpConfig = require('../gulp/config')();
/**
* List of npm packages that imported via `import` syntax
*/
var dependencies = [
'#angular',
'lodash',
'rxjs'
];
var configuration = {
basePath: '../../',
browserNoActivityTimeout: 20000,
frameworks: ['jasmine'],
browsers: ['PhantomJS'],
reporters: ['progress', 'coverage'],
preprocessors: {},
// Generate json used for remap-istanbul
coverageReporter: {
includeAllSources: true,
dir: 'coverage/appCoverage/remap/',
reporters: [
{ type: 'json', subdir: 'report-json' }
]
},
files: [
'node_modules/reflect-metadata/Reflect.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',
'node_modules/angular/angular.js',
'node_modules/core-js/client/shim.min.js',
'node_modules/systemjs/dist/system.src.js'
],
// proxied base paths
proxies: {
// required for component assests fetched by Angular's compiler
"/src/": "/base/src/",
"/app/": "/base/src/app/",
"/node_modules/": "/base/node_modules/"
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
//browserNoActivityTimeout: 100000
};
configuration.preprocessors[gulpConfig.tmpApp + '**/!(*.spec)+(.js)'] = ['coverage'];
configuration.preprocessors[gulpConfig.tmpApp + '**/*.js'] = ['sourcemap'];
configuration.preprocessors[gulpConfig.tmpTest + '**/*.js'] = ['sourcemap'];
var files = [
gulpConfig.tmpTest + 'test-helpers/global/**/*.js',
gulpConfig.src + 'systemjs.conf.js',
'config/test/karma-test-shim.js',
createFilePattern(gulpConfig.tmpApp + '**/*.js', { included: false }),
createFilePattern(gulpConfig.tmpTest + 'test-helpers/*.js', { included: false }),
createFilePattern(gulpConfig.app + '**/*.html', { included: false }),
createFilePattern(gulpConfig.app + '**/*.css', { included: false }),
createFilePattern(gulpConfig.app + '**/*.ts', { included: false, watched: false }),
createFilePattern(gulpConfig.tmpApp + '**/*.js.map', { included: false, watched: false })
];
configuration.files = configuration.files.concat(files);
dependencies.forEach(function(key) {
configuration.files.push({
pattern: 'node_modules/' + key + '/**/*.js',
included: false,
watched: false
});
});
if (process.env.APPVEYOR) {
configuration.browsers = ['IE'];
configuration.singleRun = true;
configuration.browserNoActivityTimeout = 90000; // Note: default value (10000) is not enough
}
config.set(configuration);
// Helpers
function createFilePattern(path, config) {
config.pattern = path;
return config;
}
}
UPDATE
My solution involved ensuring all my zone.js files were being loaded last in karma.conf.js. I'm guessing something else I have included was also including the polyfill, but was being loaded after zone.js so the error was raised. After moving zone.js to the end everything worked fine.
I encountered the same problem. (Angular 2 RC.7 Jasmine Karma) It was due to the order I was loading the test files in my karma.conf.js. I was loading /zone.js/dist/zone.js before /systemjs/dist/system-polyfills.js. Changing the order of the files to load the zone.js AFTER the systemjs polyfills resolved this problem.
Here is my current setup in karma.conf.js that resolved the error for me.
files: [
{pattern: 'dist/vendor/es6-shim/es6-shim.js', included: true, watched: false},
{pattern: 'dist/vendor/reflect-metadata/Reflect.js', included: true, watched: false},
{pattern: 'dist/vendor/systemjs/dist/system-polyfills.js', included: true, watched: false},
{pattern: 'dist/vendor/systemjs/dist/system.src.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/zone.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/proxy.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/sync-test.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/long-stack-trace-zone.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/async-test.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/fake-async-test.js', included: true, watched: false},
{pattern: 'dist/vendor/zone.js/dist/jasmine-patch.js', included: true, watched: false},
{pattern: 'config/karma-test-shim.js', included: true, watched: true},
// Distribution folder.
{pattern: 'dist/**/*', included: false, watched: true}
],
I also had to include es6-promise before zone.js. HTH.
Just to add my experience on this if someone makes the same stupid error as I did. Using ng I had the following in my scripts section of .angular-cli.json:
...
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/core-js/client/shim.min.js"
],
...
I don't even remember, why the heck I put shim.min.js there in the first place. But anyway, after removing it, my test cases now run flawlessly:
...
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
I believe this is similar to the following issue, but I cannot locate where the configuration breakdown had occurred. https://github.com/karma-runner/grunt-karma/issues/52
command prompt error
Connected on socket (censored) with id (censored)
Chrome 45.0.2454 (Windows 8.1.x) ERROR
Uncaught ReferenceError: Backbone not defined at c:/path/base/dir/backbone-validation/dist/backbone-validation-min.js:8
standard backbone-validation.js install
Backbone.Validation = (function(_) { ... })
Below is the configuration definitions with relative paths.
package.json
dependencies:{},
devDependencies: {
grunt: '^0.4.5',
grunt-karma: '^0.12.1',
karma-requirejs: '0.2.2'
requirejs: '^2.1.20'
...
}
test config file
require.config({
baseUrl: 'path',
paths: {
'jquery': '../dir/jquery/dist/jquery',
'backbone': '../dir/backbone/backbone',
'underscore': '../dir/underscore/underscore',
'backbone.validation': '../dir/backbone/backbone-validation/dist/backbone-validation'
},
shim: {
'backbone': {
deps: ['underscore','jquery'],
exports: 'Backbone'
},
'backbone.validation': {
deps: ['backbone'],
exports: 'Backbone'
}
}
...
})
karma config file
module.exports = function(c) {
c.set({
basePath: 'base',
frameworks: ['requirejs', 'jasmine'],
files: [
{pattern: 'karma.conf.js'},
{pattern: 'path/dir/jquery/dist/*.js', included: true, served: true},
{pattern: 'path/dir/underscore/**/*.js', included: true, served: true},
{pattern: 'path/dir/backbone/*.js', included: true, served: true},
{pattern: 'path/dir/**/*.js', included: true, served: true},
{pattern: 'path/js-scripts/**/*.js', included: true, served: true},
{pattern: 'test-files/**/*.js'}
]
...
})
}
When opening the developer console in the browser, I can see the underscore, jquery, and backbone-validation files (among a few others not specified here) as included in the "sources" tab, but the "backbone" definition is missing. Can anyone point me in the direction of where my configuration might be incorrect?
// EDIT 9/23
I've also tried permutations of "backbone-validation" and "backboneValidation".
// EDIT Sept.23.11:54
karma.conf.js updated to have included/served values based on the thread http://stackoverflow.com/questions/27050180/karmajs-jasmine-requirejs-etc-how-to-use-require-for-testing-modules?rq=1 but now I receive the error requirejs mismatched define. define(['pkg','dep'], function(a,b) {...}) That looks like the correct syntax to me.
//
files: [
{'pattern': '../test/spec/unit/**/*.js'},
{'pattern': 'assets/js/jquery/dist/jquery/*.js', served: true},
{'pattern': 'assets/js/backbone/backbone.js', served: true},
{'pattern': 'assets/js/**/*.js', served: true, included: true},
{'pattern': 'assets/scripts**/*.js', served: true, included: false}
]