I use karma with qunit for test an emberjs application. The karma.conf.js file have this piece of code for link my project libraries
files: [
"app/bower_components/jquery/jquery.js",
"app/bower_components/mockjax/jquery.mockjax.js",
"app/bower_components/handlebars/handlebars.js",
"app/bower_components/ember/ember.js",
"app/bower_components/ember-data/ember-data.js",
"app/bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap.js",
"app/scripts/app.js",
"tests/test.js"
],
and my app.js is this:
var MyApp = window.MyApp = Ember.Application.create();
require('scripts/controllers/*');
require('scripts/store');
require('scripts/models/*');
require('scripts/routes/*');
require('scripts/components/*');
require('scripts/views/*');
require('scripts/router');
but when i start karma with the config file, it report this error
Firefox 30.0.0 (Ubuntu) ERROR
ReferenceError: require is not defined at ~/myApp/app/scripts/app.js:4
I've tried to change the order of the libraries in the karma.conf file but doesn't work.
Try installing requirejs and including it in the files section of karma.conf.js.
npm install requirejs
Running this command will create a node_modules folder, if one doesn't already exist. RequireJS will be probably be in:
node_modules/requirejs/require.js
So, you can try editing your files section like this:
files: [
"node_modules/requirejs/require.js",
...
]
Related
I'm working on an Ember.js project and would like to leverage the Slick Carousel library. I've installed the library via Bower in my project folder, and am having difficulty with importing it into my project.
In my ember-cli-build.js, I've added import statements as follows:
app.import('bower_components/slick-carousel/slick/slick.css');
app.import('bower_components/slick-carousel/slick/slick-theme.css');
app.import('bower_components/slick-carousel/slick/slick.js');
The issue I am running into is that the rest of the required assets do not get built and included in the dist folder when I do a build (fonts, assets, etc.), leading to errors with missing fonts and assets that are present in the "bower_components/slick-carousel" folder, but not in the build of my actual Ember application.
Edit: It looks like Broccoli-Funnel was what I needed. The issue was resolved by specifying the source files from the 'bower_components' folder and pointing the relative path to the 'dist' folder in the ember-cli-build.js file.
As a note: The 'broccoli-static-compiler' plugin commonly referenced elsewhere as the solution is deprecated, with the use of 'broccoli-funnel' as the recommended plugin.
Broccoli-funnel ended up being what I was looking for. By placing the following inside of ember-cli-build.js, the needed files would be placed in the correct directory during build:
var Funnel = require('broccoli-funnel');
var requiredAssets = new Funnel('bower_components/slick-carousel/slick/fonts', {
srcDir: '/',
include: ['**/*.*'],
destDir: '/assets/fonts'
});
return app.toTree([requiredAssets]);
I'm using webpack resolve.extensions to "selectively" bundle my js files.
eg.
App.js
import MyComp from 'comp/myComp';
in comp/ folder I have:
MyComp.web.js
MyComp.ios.js
MyComp.android.js
Now I want to write test for App.js, to test how it render as web. But the problem is Jest keep resolving all 3 .js files and that causes dependency error because I'm not running the command in a mobile environment and most mobile modules will not work.
how can I tell jest to only resolve .js and .web.js files just like webpack?
I added this to my package.json and it keep resolving .ios.js and .android.js
"moduleFileExtensions": ["web.js", "js", "jsx"],
"moduleDirectories": [
"node_modules",
"main"]
I tried as suggested with:
"testPathIgnorePatterns": ["<rootDir>/node_modules/", "^.+\\.(android|ios)\\.js$"],
looks no effects :(
You can also remap files to an empty file
touch empty.js
In your jest config add following
moduleNameMapper: {
'\\.(css|jpg|png|scss|less|sass)$': '<rootDir>/empty.js',
},
Works perfect for me
You can add testPathIgnorePatterns to your package.json file. The value is an array of regex patterns. Any file/path that matches an expression will be ignored/skipped from testing.
See these Jest docs for more detail
I created a basic project to try and get Gruntjs, Karma and Jasmine to play together. When I setup the karma.conf.js file with all of the neccesary files, everything works and the tests pass.
When I try to split them up in Grunt though, I get problems.
Gruntfile.js
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
karma: {
options: {
configFile: 'karma.conf.js'
},
basicController: {
files: ['/basicController/scBasicControllerCtrl.js', '/basicController/test/ControllersSpec.js']
},
overworkedController: {
src: ['overworkedController/scOverworkedControllerCtrl.js', 'overworkedController/test/ControllersSpec.js']
}
}
});
The documentation at grunt-karma show to use "files:" when splitting up the modules. I did that under the basicController module and when I try to run $ grunt karma:basicController --verbose, I get an error saying
Warning: Cannot use 'in' operator to search for 'src' in /basicController/scBasicControllerCtrl.js Use --force to continue
Aborted due to warnings.
When I run $ grunt karma:overworkedControllers --verbose (using "src" instead of "files", it looks like everything is going to work and the Chrome browser launches but then is says it executed 0 of 0 ERROR.
There should be 3 tests.
Let me know if there's any more info I could post.
My understanding of grunt-karma was incorrect.
I thought I could have the base and source files in the karma.conf.js file. Then in each module, I'd just add the specific files needed for that module and test.
The way it actually works is that the files declared in each module completely overwrite the files property in the karma.conf.js file. Not append to them.
I ended up creating an array in Gruntfile.js that contains all of the source .js files and just concat the necessary files to it in each module.
I am exploring ember.js application testing. I came across following blog by Toran Billups
Integration testing your ember.js app with QUnit and Karma
When we do karma start it runs all the test found in test directory.
How can I run say tests in only one .js file?
thanks
As #bk11425 suggested, simply modify the 'files' section in your karma.conf.js file from this
module.exports = function(karma) {
karma.set({
basePath: 'js',
files: [
"vendor/jquery/jquery.min.js",
"vendor/handlebars/handlebars.js",
"vendor/ember/ember.js",
"vendor/jquery-mockjax/jquery.mockjax.js",
"app.js",
"tests/*.js",
"templates/*.handlebars"
]
To something like this instead
module.exports = function(karma) {
karma.set({
basePath: 'js',
files: [
"vendor/jquery/jquery.min.js",
"vendor/handlebars/handlebars.js",
"vendor/ember/ember.js",
"vendor/jquery-mockjax/jquery.mockjax.js",
"app.js",
"tests/mytestfile.js",
"templates/*.handlebars"
]
Note- if you are doing integration testing please include the integration helper just above this single test file I showed above
To run the test from just one JS file, specify the file name in the "files" array of your karma config file.
Here's a sample config file I used recently. My example runs 2 js files for the test portion (the last 2 in the list), but you could easily just do one.
Bryan
I'm working on a non-trivial application, with the following folder structure:
build (required files such as angular.js)
Gruntfile.js
karma.conf.js
logs/
node_modules/
src/
- app/
- app.js
- module_name/
- module.js
- controllers/
- controller1.js
- controller2.js
- views/
- view1.html
- assets/
- 1.jpg
- styler.css
- components/ (plugged in modules [angular-ui, etc])
- index.html
My controllers are each attached to their parent module. That module is then required in my app.js file.
I have tried writing some unit tests, but I seem to keep having trouble with dependancies, since the controller I try to test requires it's module, then that module requires another one, etc.
My question has a few parts:
How do I go about structuring my karma.conf.js file to include the necessary files?
Specifically this part of the configuration:
files: [
'files_to_be_tested.js',
]
Using Jasmine, how do I write up a unit test with all the proper dependancies? As an example, I run the following test
Javascript
using 'strict'
describe('my Module', function() {
describe('myController', function() {
var ctrl, scope;
beforeEach(module('myModule'));
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
ctrl = $controller('myController', { $scope: scope });
}));
it('should work', function() {
// Execute functionality
})
})
})
but I keep getting the error: Unknown provider: $stateProvider, which I think is coming from the loaded module's route configuration.
I'm beginning to wonder whether I've been separating out my controllers properly?
To answer the second question:
Unknown provider: $stateProvider is caused by the ui.router module not being loaded. To solve the problem, add beforeEach(module('ui.router'))
The problem arises because the controller you are loading is trying to inject $state
Make sure that the ui.router Javascript file is in the files list in karma.conf.js or the module will not be available to karma.
Here is the answer to your first question. Configuring the files section;
// list of files / patterns to load in the browser
files = [
JASMINE,
JASMINE_ADAPTER,
'components/angular/angular.js', //path to your angular.js file
'components/angular-mocks/angular-mocks.js',//path to your angular-mocks.js file
'components/angular-resource/angular-resource.js',//path to your angular-resource.js file
'app/*.js',
'app/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
];
Try this change in your karma.conf.js and carry out your test. Hope it helps.
Same files/patterns as your application, in the same order, then angular-mock, then your specs.
If you're loading a module, it should be already loaded with all its dependent modules. Since you're missing a provider and your example is calling only a controller, it could be missing from the injected controller dependencies in $controller('myController', { $scope: scope });.