AngularCLI Karma tests not running on circle CI - karma-runner

I am running karma tests using following Angular script but I get error karma start ./karma.conf.js ERROR [config]: Error in config file! Unexpected token =]
The file runs fine on my windows local machine but gives error when I put it on Bitbucket and run it using Circle CI (continuous Integration)
I do notice that when I change karma.conf.js and put it on bitbucket, I get following warning
C:\Users\Manu\Documents\manu\programs\web\angular\dw-ng2-app>git add --all
warning: LF will be replaced by CRLF in karma.conf.js.
The file will have its original line endings in your working directory.
Karma file is
// 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-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};

the problem seemed to be in the config file I created for CircleCI. See npm install fails in circle ci (angular cli project)

Related

failed reason or exception is not getting displayed when working with Protractor Cucumber

i am trying to work with protractor-cucumber framework and when i executing the script.. even though the script is fine still script is failing and it is not giving the failure reason or exception
Same thing is working fine with Jasmine but when it comes to protractor-cucumber it is working like this
My Config File
exports.config = {
//seleniumAddress: 'http://localhost:4444/wd/hub',
getPageTimeout: 60000,
allScriptsTimeout: 500000,
directConnect:true,
framework: 'custom',
// path relative to the current config file
frameworkPath: require.resolve('C:\\...\\node_modules\\protractor-cucumber-framework'),
capabilities: {
'browserName': 'chrome'
},
ignoreUncaughtExceptions:true,
// Spec patterns are relative to this directory.
specs: [
'./learnFramework/utility/test.feature'
],
cucumberOpts: {
require: './learnFramework/TestCases/spec.js',
tags: false,
profile: false,
'no-source': true
},
onPrepare: function () {
browser.ignoreSynchronization=true;
}
};
My Spec file
module.exports=function(){
this.Given(/^Open the browser$/,async function(){
browser.ignoreSynchronization=true;
});
this.Given(/^Load the URL$/,async function(){
browser.get("https://google.com");
console.log(await browser.getTitle());
})
}
When i executing the script it is opening the chrome browser and loading the url also but don't know why it is getting failed and it is not even giving the result of the test
Execution Result
I want to use this template for my feature file
Scenario: Title of your scenario
✓ Given Open the browser
✖ And Load the URL
Failures:
[09:15:48] I/launcher - 0 instance(s) of WebDriver still running
[09:15:48] I/launcher - chrome #01 failed 1 test(s)
[09:15:48] I/launcher - overall: 1 failed spec(s)
[09:15:48] E/launcher - Process exited with error code 1
And I'm using the grunt file for execution..
so someone please help me to come out from this issue
await browser.get("https://google.com");
You need to await for the broswer to go to google.

Why does Babel throw Unknown option: ... Children?

Trying to run build on CircleCi and it's failing on test. Same stuff is working perfect on my local.
My .babelrc config:
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": [
"transform-class-properties",
"react-hot-loader/babel",
["babel-plugin-transform-builtin-extend", {
"globals": ["Error", "Array"]
}],
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
]
}
Error I'm getting from circleCI:
yarn test v0.27.5
$ jest
FAIL src/utils/service-helper.test.js
● Test suite failed to run
ReferenceError: [BABEL] /home/circleci/repo/src/utils/service-helper.test.js: Unknown option: /home/circleci/repo/node_modules/react/index.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
Any idea what is going on as the same configuration is working on another project
The error is unhelpful, but the issue is that your config has react in the preset list, but it can't find the babel-preset-react module in your node_modules, so instead it is loading the react module itself as if it were a preset. But since the "react" module isn't a preset, Babel throws.
Most likely, you've forgotten to list babel-preset-react in your package.json.

Karma angular testing failed to instantiate module

I am just starting to set up some tests with Karma. I some tests working with jdDom, but did not like how it was configuring. However, I am not sure how to point to the js files correctly. As I am getting this error
Error: [$injector:modulerr] Failed to instantiate module ha.module.utility due to:
Error: [$injector:nomod] Module 'ha.module.utility' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I started a file with jsdom that required the core modules
require('../../../src/modules/core/module.core.built.js');
require('../../../src/modules/utility/module.utility.built.js');
These scripts are where my modules reside. I am not sure where to put them in the karma file. Or if this is even the issue . Here is my karma file below. I removed the comments that come with karma init so it could be quicker to read on this post.
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: 'Scripts/',
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'jquery /jquery libraries ',
'../node_modules/angular/angular.js',
'../node_modules/angular-mocks/angular-mocks.js',
'test2/*.js',
'tests/**/*.js'
],
exclude: [
'tests/old/**',
'tests/**/*.setup.js'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'../Templates/**/*.html' : ['ng-html2js']
},
ngHtml2JsPreprocessor: {
// setting this option will create only a single module that contains templates
// from all the files, so you can load them all with angular.mock.module('foo')
//stripPrefix: "Templates/",
//prependPrefix: "Templates/",
moduleName: 'templates'
},
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: true,
concurrency: Infinity
Basically I need these tests to find the modules.
Your modules' directives, controllers, and all other required files should be uploaded into your list of "files," like this:
files: [
'../node_modules/angular/angular.js',
'../node_modules/angular-mocks/angular-mocks.js',
'../../../src/modules/core/module.core.built.js',
'../../../src/modules/utility/module.utility.built.js',
'test2/*.js',
'tests/**/*.js'
],

How to make ajax request with Karma

I have a test that calls a function which requests an external csv file. But for some reason, I can't use a relative path. For example, I have to do:
d3.csv('base/a.csv', ...
instead of being able to do :
d2.csv('a.csv', ...
The second example, works fine on the actual site, but for some reason, since Karma runs in a base directory, I have to request it from base. How can I just do a normal relative url?
Here are the parts of my karma.conf.js that I customized:
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha', 'chai'],
// list of files / patterns to load in the browser
files: [
'tests/*.js',
'bower_components/d3/d3.min.js',
'game.js',
{pattern: 'a.csv', watched: false, included: false, served: true}
],
and here is my repo

Detecting Environment When Running Karma

I have two environments I'm running my tests in (locally, and travic ci). And I need to make a few tweaks in my tests if I'm running them locally.
Is it possible to do it using Karma without having two separate configuration files?
You can programmatically call karma and pass it a configuration object, then listen the callback to close the server:
karma.server.start(config, function (exitCode){
if(exitCode){
console.err('Error in somewhere!');
}
});
The config object is basically an object that contains some properties and you can use it to enrich a skeleton configuration file you already have.
Imagine to have a configuration file like the following in 'path/to/karma.conf.js':
// Karma configuration
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '../',
// frameworks to use
frameworks: ['mocha'],
files: [ ... ].
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
// choose it before starting Karma
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
browsers: ['PhantomJS'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: true,
plugins: [
'karma-mocha',
'karma-phantomjs-launcher'
]
});
};
Now I want to tweak it a bit before starting karma:
function enrichConfig(path){
var moreConfig = {
// say you want to overwrite/choose the reporter
reporters: ['progress'],
// put here the path for your skeleton configuration file
configFile: path
};
return moreConfig;
}
var config = enrichConfig('../path/to/karma.conf.js');
Currently with this technique we're generating several configuration for all our environment.
I guess you can configure your TravisCI configuration file to pass some arguments to the wrapper in order to activate some particular property in the enrichConfig function.
Update
If you want to pass parameters (e.g. the configuration file path) to your script, then just look up in the arguments array to pick it up.
Assume your script above it saved in a startKarma.js file, change your code to this:
var args = process.argv;
// the first two arguments are 'node' and 'startKarma.js'
var pathToConfig = args[2];
var config = enrichConfig(pathToConfig);
then:
$ node startKarma.js ../path/to/karma.conf.js