I started learning how to test Angular apps, and ran into some problems.
I generated an Angular app using Yeoman. yo angular --minsafe AppName
Then generated a service yo angular:service MyService
Wrote a simple method in the service, and a test for it, just to make sure that everything was working. I ran grunt test and the tests passed.
Now it gets interesting, as I added Underscore to the mix using bower install underscore and added a <script> tag for it in the index.html.
Then I added some simple code to the service method, just _.map([1,2,3], function(el){return el+1}); to see if Underscore was working.
I ran the tests again grunt test, and it failed saying that _ is not defined.
I tought that, because Underscore attaches the _ variable to the window object, it would be available for the testing. Am I wrong?
Also, when I ran the application in the browser, Underscore was defined and working.
So, my question is, how do you test an Angular app that uses Underscore? Is this a common problem or am I doing something wrong?
Thanks,
Petar
If you see the karma.conf.js file generated by Yeoman, you will see that bower components are not added automatically.
// list of files / patterns to load in the browser
files = [
JASMINE,
JASMINE_ADAPTER,
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/scripts/*.js',
'app/scripts/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
];
Just add the underscore folder to it and you won't have any issues.
Using constants like JASMINE or JASMINE_ADAPTER is deprecated in Jasmine version before 2.0. Use frameworks: ['jasmine'] in the karma.conf.js file instead.
Related
when I want to build my ember electron app with ember electron:package
I always get the error:
Build failed.
File: assets/vendor.js (91129:6)
The Broccoli Plugin: [UglifyWriter] failed with:
followed by several lines of "Error at...:" (always within node_modules)
I could figure out that it must have something to do with ember-browserify.
I am importing this node module in a service.js file:
import Usabilla from 'npm:usabilla-api';
The curious thing is, that with ember electron (like ember serve) everything is fine and I can use the node module without any errors. Issues only occur when I want to package the app to the .dmg and exe files for distribution.
What am I missing ?
Thanks for any help or hints!
Your build is failing on the minification step. Possibly because of the size of one of the packages you're pulling in or because it's already been minified. Minification only happens when you're building for production or packaging which is why you're not seeing the issue when you run locally.
From the EmberCLI docs on minification, where you'll find more on the minifaction step:
the js-files are minified with broccoli-uglify-js in the production-env by default. You can pass custom options to the minifier via the minifyJS:options object in your ember-cli-build
You can exclude specific files/resources that are causing problems:
To exclude assets from dist/assets from being minificated, one can pass options for broccoli-uglify-sourcemap
I just create the demo app in c drive and it's working perfectly.
I have a project that is using webpack to bundle all code into a single file. The project is using Typescript and it is working fine at the moment.
I've gone to add unit testing and jasmine seems to be the way (one of the many ways) forward. Its actually jasmine-core that is included in the package.json - not sure how much of a difference that makes.
So running a very simple test such as
it('true is true', function(){ expect(true).toEqual(true); });
works fine.
But when I add tests that require the use of an import - eg
import MyService = require('./MyServices');
then when I run the tests it complains as it doesn't know what 'require' is.
Uncaught ReferenceError: require is not defined
Now I'm guessing this is because I need to package up the test module in a similar way that I package up the main project.
So what is the best way to do this?
Should I have multiple entry points in the webpack.config.js file - one for each *.spec.ts file?
Or is there a way to have say accept an unknown number of spec files
entry:[ *.spec.ts ] and have it output a js file for each one - *.spec.js
You can use karma/karma-webpack to run all the tests using webpack for resolving the imports. You can take a look at this repository for a simple configuration.
You can also specify an index.spec.ts as en entry point and make this file require all the spec files if you don't want to make one entry point for each spec.ts in your webpack's configuration file.
I'm working on creating an ember addon, and I'm a bit stuck trying to write tests for it. This addon implements a command line option, rather than shipping components etc. As a result, none of the moduleFor type test helpers are relevant for me in the out of the box qunit tests. I'm not rendering any components, I just want a test runner to exersize the implementation behind my command line option.
To write my tests, I'll need to just require my various source files that are up in my addon. For example, files sitting in root/lib. I can't get a require/import that can find these files in a qunit integration test under root/tests/integration. Is this possible? I need a relative path like:
import foo from '../../../lib/foo'
But nothing up there seems to work. The folder structure created for an addon is like:
root
app
lib (was planning on putting my addon impl here)
tests
dummy
helpers
integration
example-test.js (trying to reference code out of the lib folder from here)
It seems like my options in this case are just to fall back to some plain old JS unit testing (qunit, jasmine etc), based up in the root of the addon, not using any ember magic or the dummy app. I would like to stay on the 'out of the box' path provided by ember generate addon, but it seems like I need to go my own way here, so I can reference my source files.
Use
import foo from 'myApp/lib/foo'
Browserify handles dependencies nicely by requiring them and creating a bundle where all is in order. When unit testing a module that has it's own dependencies it's somewhat more complicated though.
My tests are using mocha, sinon, chai.
My app is built on backbone, marionette, and some jQuery plugins.
I'm putting it together with grunt and browserify, all is written in coffeescript.
For instance, I have a module looking like this:
# Global, because swosh won't know what jQuery is otherwise.
$ = global.jQuery = require 'jquery'
require '../jqueryPlugins/swosh.js'
module.exports =
App.MyView: Mn.ItemView.extend
# Here I make use of jQuery plugin swosh
When I'm testing this piece of code, I'll do it like this:
App = require '../src/swoshViews.coffee'
theView = new App.MyView
describe 'Swooshing'
it 'swooshes', ->
# I create a spy/stub of the jQuery plugin
# and make sure it's called as expected.
Since Browserify isn't a dependency injection framework, the jQuery plugin will not be available for the module, there are some options to make that happen. The most suitable for me seems to be Rewireify.
I'm running my tasks with Grunt, where browserify is run win the transformations ['coffeeify', 'rewireify']. However, and here's my question:
My unit tests, being run with npm test, doesn't use a browser.
package.json extract:
"scripts": {
"test": "mocha"
},
Grunt>Browserify will arrange a .js bundle for me with rewireify baked in, though how do I apply this for my npm test task? My npm test script simply runs mocha, as seen above, which will run tests in all my unit test files, no need for a bundle. How do I make use of rewireify this way?
I'm using CoffeeScript in a Rails application, and I would like to unit test it. Google didn't turn up anything, is there any way to do it short of writing my own testing framework or testing the JavaScript that CoffeeScript outputs?
You can use any javascript testing framework with CoffeeScript. This will be testing the Javascript that CoffeeScript outputs which is necessary since CoffeeScript itself can't be executed.
Writing your own testing framework for CoffeeScript is fun (I did) but entirely uneccessary.
UPDATE: Jasmine tests can be run on node.js in which case both the tests and the code under test can be CoffeeScript, without the need for any compilation step.
You can use QUnit "as-is", but still only write coffee-script - and no glue-code.
I have a very small, pure coffee-script project on github as an example - rubyann.
The HTML test page rubyann_tests.html, references the rubyann_tests.coffee file which tests jquery.rubyann.coffee. I didn't write any javascript or any other code to make this work.
The tests only run on Chrome on your local machine if you use the command-line argument --allow-file-access-from-files. But it works on Firefox and even IE without issues.
addendum - the tests are also setup to run on the command line via Node/gulp/qunitjs - download the repo and type npm run test
I'm testing CoffeeScript in my Rails app with QUnit, and have written up how I'm doing it here: http://effectif.com/coffeescript/qunit-boilerplate
The most interesting thing in my write-up is the use of the callback to Coffee.load to guarantee that files containing tests get loaded after the files that contain the code under test:
<script type="text/coffeescript">
for file in ['models', 'controllers']
lib = "../../app/assets/javascripts/#{file}.js.coffee"
load_test = ->
test = "#{file}_test.coffee"
-> CoffeeScript.load(test)
CoffeeScript.load lib, load_test()
</script>
The need for currying the test variable is explained in the article...
For Coffee-Script Unit testing you can try Beast-Test it was written from the ground up for coffee-script. FYI i am the own but i think you will like it none the less. It is similar to JUnit