My Module is :
var app = angular.module('customer',
[
'customerAPI',
'uldbfilters',
'ngRoute',
'ui.bootstrap',
'nvd3',
'chart.js',
'ui.bootstrap.datetimepicker',
'ui.dateTimeInput',
'LocalStorageModule',
'ngAnimate',
'ngMaterial'
]);
My karma config file is :
module.exports = function(config) {
config.set({
basePath: '',
frameworks: [
'jasmine',
'jasmine-matchers'
],
files: [
'../../static/bower_components/jquery/dist/jquery.js',
'../../static/bower_components/jquery-*/jquery-*.js',
'../../static/bower_components/jquery-*/**/jquery-*.js',
'../../static/bower_components/angular-charts/chart.js',
'../../static/bower_components/angular/angular.js',
'../../static/bower_components/angular-date-time-input/src/dateTimeInput.js',
'../../static/bower_components/angular-bootstrap-datetimepicker/src/js/datetimepicker.js',
'../../static/bower_components/angular-*/angular-*.js',
'../../static/bower_components/angular-*/**/*.js',
'../../static/rest/app/*.js',
'../../static/rest/app/client/**/*.js',
'test_suits_client/*.js'
],
exclude: [
'../../static/bower_components/angular-*/angular-*.min.js',
'../../static/bower_components/angular-*/**/*.min.js',
'../../static/bower_components/angular-*/**/index.js',
'../../static/bower_components/angular-*/**/gulpfile.js',
'../../static/bower_components/angular-*/**/karma.conf.js',
'../../static/bower_components/angular-*/**/Gruntfile.js',
'../../static/bower_components/angular-*/**/browserify.test.js'
],
preprocessors: {},
reporters: ['spec'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [
'Firefox'
],
singleRun: false,
concurrency: Infinity
}
My test suite is :
describe('Customer Application uldb module functionality', function() {
beforeEach(module('customer'));
var scope;
beforeEach(inject(function($rootScope){
scope = $rootScope.$new();
}));
it('Sample spec to test 2 + 2', function() {
expect(2 + 2).toEqual(4);
});
});
});
Now when i run karma, It is showing an exception of
minErr/<#/home/vhosts/uldb/static/bower_components/angular/angular.js:68:12
loadModules/<#/home/vhosts/uldb/static/bower_components/angular/angular.js:4640:15
forEach#/home/vhosts/uldb/static/bower_components/angular/angular.js:321:11
loadModules#/home/vhosts/uldb/static/bower_components/angular/angular.js:4601:5
createInjector#/home/vhosts/uldb/static/bower_components/angular/angular.js:4523:19
workFn#/home/vhosts/uldb/static/bower_components/angular-mocks/angular-mocks.js:3074:44
[3]http://localhost:9876/context.js:162:7
This problem is not regarding to $inject and it is purely based on your files loading in karma conf.js. I missed to load a library, in which current loading libraries is dependant on.
Related
I'm a bit new to webpack and TailwindCSS. The stack we are using here is Laravel with Tailwind and predefined template.
I'm trying to start NPM but get the following error:
ERROR in No configuration provided for
....../resources/css/app.css
My webpack.mix.js has
mix.js('resources/js/main.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
]);
And webpack.config.js has:
const config = require('./site.config');
const loaders = require('./webpack.loaders');
const plugins = require('./webpack.plugins');
module.exports = {
context: path.join(config.root, config.paths.src),
entry: [
path.join(config.root, config.paths.src, 'js/main.js'),
path.join(config.root, config.paths.src, 'css/style.scss'),
],
output: {
path: path.join(config.root, config.paths.dist),
publicPath: '',
filename: '[name].[hash].js',
},
mode: ['production', 'development'].includes(config.env)
? config.env
: 'development',
devtool: config.env === 'production'
? 'hidden-source-map'
: 'cheap-eval-source-map',
devServer: {
contentBase: path.join(config.root, config.paths.src),
watchContentBase: true,
hot: true,
open: true,
host: config.dev_host,
},
module: {
rules: loaders,
},
stats: 'errors-only',
plugins,
};
There is no where a reference of app.css... What am I doing wrong.
I have a problem with setting up a test environment for a single page application. I am able to run my tests with headless chrome via karma and mocha but I can´t write tests with ES6 Syntax.
My current start command is
karma start --browsers ChromeHeadless karma.config.js --single-run
my karma.config.js
module.exports = function(config) {
config.set({
frameworks: ['mocha', 'chai'],
files: ['test/**/*spec.js'],
reporters: ['nyan'],
port: 9876, // karma web server port
colors: true,
logLevel: config.LOG_INFO,
browsers: ['ChromeHeadless'],
autoWatch: true,
singleRun: false, // Karma captures browsers, runs the tests and exits
concurrency: Infinity,
})
}
I am able to write normal tests but cant use ES6 Syntax here. When I try to import some react components I get this error:
HeadlessChrome 0.0.0 (Linux 0.0.0)
Uncaught SyntaxError: Unexpected token import
at http://localhost:9876/base/test/components.spec.js?b89d2ba6de494310860a60ad2e9e25aea5eb3657:2
So I have to setup babel somehow to compile my test files first. When I try to use compilers: ['js:babel-core/register'] in my karma config its not gonna work.
I also have seen that compilers seems to be deprecated soon so I also tried require: ['babel-core/register'] but it still won´t compile to use ES6 for my test files.
Any idea how to configurate my karma file to write my tests with ES6 ?
Just in case its important. This is my webpack.config.js
const path = require('path');
const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('dist'),
filename: 'index_bundle.js'
},
module: {
loaders: [
{test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/}
]
},
plugins: [
new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, 'src/sw.js'),
}),
HtmlWebpackPluginConfig
],
devServer: {
hot: false,
inline: false,
historyApiFallback: true
}
};
To make things more clear here is a sample project (it's fully runnable, you can fill out files and play around). Just two things to mention: I used jamsine instead of mocha and real 'Chrome' browser instead of headless. Runnable via npm run test command.
files structure
/
karma.conf.js
package.json
sample.js
sampleTest.js
webpack.test.config.js
karma.conf.js:
// Karma configuration
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: ['*Test.js'],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
preprocessors: {
'*Test.js': [ 'webpack'] //preprocess with webpack
},
// test results reporter to use
reporters: ['progress'],
// setting up webpack configuration
webpack: require('./webpack.test.config'),
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
browsers: ['Chrome'],
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level how many browser should be started simultaneous
concurrency: Infinity
})
}
package.json (only relevant stuff):
{
"scripts": {
"test": "node_modules/karma/bin/karma start karma.conf.js"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"jasmine-core": "^2.8.0",
"karma": "^2.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.1",
"karma-webpack": "^2.0.9",
"webpack": "^3.10.0"
}
}
sample.js:
export default function(data){
return data;
}
sampleTest.js:
import sample from 'sample';
describe('Sample', function(){
it('is defined', function(){
expect(sample).toBeDefined();
});
it('returns argument', function(){
expect(sample(0)).toBe(0);
})
});
webpack.test.config.js:
module.exports = {
module: {
rules: [
{
test: /tests\/.*\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env']
}
}
}
]
},
resolve: {
modules: ["node_modules", './'],
extensions: [".js"]
}
};
Karma's webpack plugin is used to inform karma that it should prepare files using webpack and specific webpack configuration before sending them to the browser.
Please note key points:
test files pattern in karma.conf.js
pattern to preprocess files (should match the pattern above)
webpack entry in karma.conf.js file
module entry in webpack.test.config.js
p.s. personally I don't use separate patterns for files, I use a separate file (named, say, tests.webpack.js) to have a single place where the way to find test files is defined:
//make sure you have your directory and regex test set correctly
var context = require.context('.', true, /.*Test\.js$/i);
context.keys().forEach(context);
and have in karma.conf.js (paths are irrelevant to sample project above):
files: [
'tests/tests.webpack.js',
],
preprocessors: {
'./tests/tests.webpack.js': [ 'webpack'] //preprocess with webpack
}
You need to convert ESModule in commonjs module with the babel-plugin-transform-es2015-modules-commonjs plugin
In your .babelrc file :
{
"plugins": [
"transform-es2015-modules-commonjs"
]
}
Update :
You can set the plugin in your webpack configuration :
{
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: [require('#babel/plugin-transform-es2015-modules-commonjs')]
}
}
I am using karma with jasmine and the jasmine-spec-tags framework. When starting karma from CLI I use "karma start --tags=MY_TAG" to run only some tests with the tag MY_TAG. This works fine.
Now, I need to start karma programmatically. I tried the following code (note the client.args value at the end):
const server = new Server(
{
autoWatch: true,
browsers: [
'Chrome',
],
files: [
'./node_modules/babel-polyfill/dist/polyfill.js',
'./node_modules/es6-shim/es6-shim.min.js',
'./karma/karma.entry.js'
],
frameworks: ['jasmine', 'jasmine-spec-tags'],
phantomJsLauncher: {
exitOnResourceError: true
},
port: 9876,
preprocessors: {
'./karma/karma.entry.js': ['webpack', 'sourcemap']
},
reporters: ['dots'],
singleRun: false,
webpack: webpackConf,
webpackServer: {
noInfo: true
},
client:
{
args: ['--tags=SchedulingApiService']
}
});
server.start();
This does not work. Am I misunderstanding the client.args value? Would be glad about any help.
To solve this, the client part has to look like this:
client:
{
tags: 'SchedulingApiService'
}
enter code herenpm test；
var webpackConfig = require('./webpack.test');
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
{pattern: './karma-shim.js', watched: false}
],
exclude: [
],
preprocessors: {
'./karma-shim.js': ['webpack']
},
webpack: webpackConfig,
plugins:[
'karma-jasmine',
'karma-chrome-launcher',
require("karma-webpack")
],
proxies:{
"/app/": "http://localhost:3000/src/app"
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
module.exports = {
devtool: 'cheap-module-eval-source-map',
resolve: {
extensions: ['','.ts','.js']
},
module: {
loaders: [
//以.ts结尾的文件使用 TypeScript loader
{test: /.ts$/,loader: 'awesome-typescript-loader'},
{
test:/\.html$/,
loader: 'html'
},
{
test:/\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null'
},
{
test:/\.css$/,
loader: 'null'
}
]
}
}
then throws a BUG.
karma start karma.conf.js
keywords if/then/else require v5 option
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry should be one of these:
object { : string | [string] } | string | [string]
The entry point(s) of the compilation.
- configuration.resolve.extensions[0] should not be empty.
Can not load "webpack"!
First i don't see any entey point mentioned in config file which is required in order to webpack understand where to start from.
Second your resolve option in config file hase mentioned three types to resolve and first one is empty string which webpack don't like so by removing that empty string it should fix that problem
Hope this help you to fix the issue.
I had the same issue and resolved by updating the karma-webpack package to the latest version.
I am new to angular.js. I am trying to run Karma unit tests for my application but have found a lot of problems as it expects I install all required dependencies like node.js, npm, karma etc.
Now when i goto the my project directory and run this command karma start karma i have this error:
C:\wamp\www\First-angular-App>karma start karma.conf
ERROR [config]: Invalid config file!
SyntaxError: Unexpected string
karma.conf
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
exclude: [ ],
files: [ 'First-angular-App/source/index.html', 'First-angular-App/source/myApp.js' 'First-angular-App/source/myAppCtrl.js' ]
preprocessor
preprocessors: { },
reporters: ['progress'],
port: 9876,
colors: true,
config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
changes
autoWatch: false,
launcher browsers: ['Chrome'],
singleRun: true
});
};
Why its giving me the error invalid config file ?
Probably it should looks like - please take a look for two comments added to configuration.
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
exclude: [ ],
files: [ 'First-angular-App/source/index.html', 'First-angular-App/source/myApp.js', 'First-angular-App/source/myAppCtrl.js' ],
// preprocessor - mark this as comment
preprocessors: { },
reporters: ['progress'],
port: 9876,
colors: true,
// config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - one more comment
logLevel: config.LOG_INFO,
// changes - mark this as comment
autoWatch: false,
// launcher
browsers: ['Chrome'],
singleRun: true
});
};