I have typescript code and typescript jasmine tests running within Karma. I can run the tests from the command-line (using Karma), and also run the tests from the ReSharper test runner. Presumably I could also run the tests using Karma Test Adapter VS extension or VS Adapter for Karma. So, lots of options for running the tests.
My question is: How do I debug the tests, in the VS debugger?
I was able to get Visual Studio debugging of typescript jasmine tests, running in Karma, working. Wow, that's a mouthful.
Here's how I did it:
In IE, Options, Advanced: Clear the "Disable script debugging (Internet Explorer)" checkbox.
Install the node modules (globally) required to run karma - if you haven't already:
npm install -g karma karma-chrome-launcher karma-ie-launcher jasmine-core karma-jasmine karma-jasmine-html-reporter
npm install -g phantomjs karma-phantomjs-launcher
In the karma.conf.js, add support for serving the required sourcemap and typescript files. Here's mine:
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'dist/**/*.js',
'test/out/**/*.js',
// Key addition to support debugging typescript tests
// Enable serving (but don't include as scripts) sourcemap and typescript files
{pattern: '**/*.js.map', included: false},
{pattern: '**/*.ts', included: false}
],
reporters: ['html', 'progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS']
});
}
After compiling your typescript, run karma, launching IE:
karma start --browsers=IE --reporters=html
In Visual Studio, Debug menu | Attach to Process... , then choose the iexplore.exe instance(s) that look right - eg the title may match the Karma web page title ("Karma DEBUG RUNNER" currently), and the process Type must be "Script". If typescript debugging doesn't work, try adding multiple iexplore.exe instances, including all the probably Script instances.
After that, you should see a "Script Documents" folder in Solution Explorer, and you should be able to put breakpoints in your typescript, run the tests in your browser, and step through your typescript code.
It turns out that all these steps also work for debugging Typescript tests and code in Chrome - just change step 4 to:
karma start --browsers=Chrome --reporters=html
(skip step 5) then open Chrome developer tools to debug the typescript in chrome.
Related
I've created a vue3 cli project with Mocha testing:
vue create vue_proj_with_mocha_testing
(accept defaults)
cd vue_proj_with_mocha_testing
vue add unit-mocha
Then in Visual Code I install the Mocha Test Explorer extension, restart, add the folder to the workspace, click the folder, ctrl-shift-p and Mocha Test Explorer : "Enable for a workspace folder". Out of the box Mocha Test Explorer doesn't seem to like vuecli's example.spec.js test:
import { expect } from 'chai'
import { shallowMount } from '#vue/test-utils'
import HelloWorld from '#/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).to.include(msg)
})
})
I add this entry to settings.json so that Test Explorer finds the vue "tests" folder, which is different from the default of "test".
"mochaExplorer.files": ["tests/**/*.spec.js"],
And then receive this error in Test Explorer:
import { expect } from 'chai';
^^^^^^
SyntaxError: Cannot use import statement outside a module
This indicates I have some transpiling work to do, and Mocha Test Explorer indicates the way to do that is the "mochaTestExplorer" fields in settings.json, but I'm not sure what combination of babel packages would be required. What should be done to run this out-of-the-box vue-cli-3 test in Mocha Test Explorer in Visual Studio Code? Here is my current guess:
"mochaExplorer.require": [
"#babel/preset-env",
"#babel/register",
"#babel/polyfill",
"#babel/plugin-transform-runtime"
],
First, add #babel/register in yours devDependencies.
After, add in your Visual Studio Code settings.json:
"mochaExplorer.files": "tests/**/*.spec.js",
"mochaExplorer.env": {
"NODE_ENV": "test"
},
"mochaExplorer.require": [
"#babel/register"
]
Finally, changes your babel.config.js to like this:
const presets = [];
if (process.env.NODE_ENV === 'test') presets.push('#babel/preset-env');
else presets.push('#vue/cli-plugin-babel/preset');
module.exports = {
presets,
};
I'm afraid what you want is not possible - problem is it is not enough to setup Babel correctly. Vue single file components (.vue) need to be processed by Vue Loader which is Webpack loader plugin.
And there is no easy way how to setup Mocha Test Explorer to use webpack as indicated by the author himself in this thread - Support for vue cli projects
So I decided to split my tests into two groups, tests/ui (tests using Vue components) and tests/unit (non-ui tests) and use setup described by Fernando with these modifications:
Configure Mocha Test Explorer to only search for non-ui tests:
"mochaExplorer.files": "tests/unit/**/*.spec.js",
package.json:
"test:unit": "vue-cli-service test:unit tests/unit/**/*.spec.js tests/ui/**/*.spec.js",
...to include both folders when running tests from command-line
Note: Last step - modifying babel.config.js - is not needed, everything works fine without it....
On a slightly different config, i worked for me: in .vscode/settings.json
{
"mochaExplorer.require": "esm"
}
esm should also be in your dev dependencies
I managed to get a couple of EAK/grunt based Ember apps upgraded to 1.11 with HTMLBars, and then got them migrated to Ember CLI/Brocolli. The unit tests were setup for karma test runner so I'm looking at how to get those running in the CLI projects now, but I didn't write the tests and really have no experience with unit testing javascript modules.
Searching around the iNet, I can see that others have also used karma becasue of its coverage output and are trying to get it to work with Ember CLI, but that Ember Core isn't supporting it, though they say anyone should be able to get it set up with a custom addon. I'm also trying to use the 'testem' runner to see what sticks with that.
The Ember site does have an 'automating tests with runners' page for v1.10, with sections on 'testem' and 'karma', but it doesn't appear for v1.11 so I can't tell from that site what is or isn't relevant. But it seems like I should be able to work out a solution for the karma test runner, so I added the old devDependencies to the project package.json:
"karma": "^0.12.31",
"karma-chai": "~0.1.0",
"karma-chrome-launcher": "~0.1.2",
"karma-coverage": "~0.2.1",
"karma-firefox-launcher": "~0.1.3",
"karma-junit-reporter": "~0.2.1",
"karma-mocha": "~0.1.3",
"karma-phantomjs-launcher": "~0.1.2",
"karma-sinon-chai": "~0.1.5"
I also dropped the old 'karma.conf.js' (along with a few other karma confs) in the project and updated the paths inside (from 'vendor' to 'bower_components'). I did find a 'ember-cli-karma' node mode and installed it, but it seems to just have a 'package.json'. It has no docs and seems like just a stubbed out starter project with no implementation. I also installed 'karma', 'karma-cli' and 'testem' node modules.
The testem docs say to add you src and test files to 'testem.json', but with out examples I don't know what that means; a list of every src and test file? With what path; relative, absolute? Forward slashes, backslashes? preceded with / or ./ or ../? I just left them out because I think the system just finds the src and tests by convention.
When I run 'karma init' I get:
readline.js:529
this.line = this.line.slice(this.cursor);
^
TypeError: Cannot read property 'slice' of undefined
When I run 'testem' I get:
TEST'EM 'SCRIPTS!
Open the URL below in a browser to connect.
http://localhost:7357/aN;0faN;NaNf
...then the project's '../tests/index.html' loads in a browser, but is not able to 'find' any of the asset files (css, js) so nothing executes or renders correctly. I just see template expressions ({{content-for 'head'}}, etc).
When I run 'ember test' I get:
Building...BuildingBuilding.Building..Building...Built project successfully.
1..0
# tests 0
# pass 0
# fail 0
# ok
No tests were run, please check whether any errors occurred in the page (ember test --server) and ensure that you have a test launcher (e.g. PhantomJS) enabled.
When I run 'ember test --server' I get:
The test index.html loaded in a browser with a test report. When I uncheck 'hide passed tests' the report indicates '29 passed, 28 failed'. It has 11 sections where a particular test may have 3 problems such as 'could not load', 'failed', 'could not find module', 'attempting to register an unknown factory' or 'died'.
With this, I'm obviously running testem and not karma, so may as well work on getting testem working and figure out karma later. If there were more examples and migration troubleshooting docs I might have a systematic way to work through some of these problems.
I ran into "No tests were run,..." problem recently after a node upgrade. I fixed it with a:
npm install -g phantomjs
This provides some additional options as well:
https://github.com/ember-cli/ember-cli/issues/3969
I had the Cannot read property 'slice' of undefined error on MS Windows, running via MSys2. I have solved it by using karma init from an ordinary cmd prompt.
I have a project that uses "coffee-script": "^1.7.1" in its package.json.
The code has this line in it:
[{id: id, name: name}, ...] = result.rows
This compiles fine using coffeescript version 1.7.1
The problem is that I am trying to use mocha for unit tests and it gives me an error on this line:
Parse error on line xyz: Unexpected '...'
Apparently mocha uses an older coffeescript. Is there a way to make it work without adjusting the source for mocha?
EDIT:
my Gruntfile.coffee:
'use strict'
module.exports = ->
#initConfig
cafemocha:
src: ['test/*.coffee']
options:
reporter: 'spec'
ui: 'bdd'
coffee:
compile:
files:
'lib/mylib.js': ['src/*.coffee']
#loadNpmTasks 'grunt-cafe-mocha'
#loadNpmTasks 'grunt-contrib-coffee'
#registerTask 'default', ['coffee', 'cafemocha']
I added mocha.opts to the test directory:
--require coffee-script/register
--compilers coffee:coffee-script/register
--reporter spec
--ui bdd
but, still, when I run grunt, it gives me the same error. I am new to this environment, and I find it too complicated, please help.
Starting from version 1.7.x CoffeeScript compiler should be explicitly registered (see change log for version 1.7.0).
So, the problem is that CoffeeScript compiler is not registered when you're running your mocha tests, so node.js treats all your .coffee files as .js files.
The best possible solution is to specify --compilers option for your mocha tests:
--compilers coffee:coffee-script/register
If you don't want to include it to every mocha call, you could set it up using mocha.opts file.
Here are some useful links:
issue about it on github
reference in mocha docs
the reason behind this breaking change in CoffeeScript engine
Update
Looks like your issue is much deeper then I thought.
First, grunt-cafe-mocha doesn't respect mocha.opts because it's running tests by requireing mocha as a dependency, instead of calling mocha test runner.
So, it would've been enough to add require('coffee-script/register') to the top of your gruntfile, if not for this old grunt issue.
In short, grunt uses coffee-script 1.3.x, forcing all its tasks to use the same version of coffee. I had the same problem with grunt-contrib-connect, being unable to use latest coffee-script in my express app.
So, the only help I can offer you is a small grunt task I wrote to solve similar problem in one of my projects. It runs mocha in a separate child process, thus completely isolating it from grunt.
N.B. I had a thought about releasing this task to npm, but considered it too minor.
Just bootstrapped an app w/ mean.io
mean init myApp
cd myApp
grunt test
and the karma tests are failing with " Error: [$injector:nomod] Module 'mean.system' is not available!"
OSX 10.9.4
mean 0.5.51
PhantomJS 1.9.7
Karma 0.12.16
The packaged karma.conf.js looks reasonable:
[fragment]
// list of files / patterns to load in the browser
files: _.flatten(_.values(assets.core.js)).concat([
'packages/system/public/init.js',
'packages/*/public/*/*.js'
]),
[UPDATE] Karma tests are now passing. https://github.com/linnovate/mean/commit/0d8eed13002cfdde4cc3e0f6cae24d3f8ca44d79
There is currently an issue open for this on github. https://github.com/linnovate/mean/issues/647
The Karma tests failing is a known issue on 0.4.0 new release. It is due to the way the javascript is aggregated on the fly.
For now you can safely ignore the Karma issue and pull early in the week once we have had some time to work around the aggregation issue. It will not affect the functioning of mean.io.
If you have any other issues you think might be a bug we would be really happy if you could open an issue or comment on the current issue
I have got a set of test that run fine on chrome but when I change the capabilities browserName from chrome to firefox don't even get a error info
//Before
capabilities: {
'browserName': 'chrome',
'chromeOptions': { args: ['--test-type', 'show-fps-counter=true'] }
},
//After
capabilities: {
'browserName': 'firefox'
},
I found the problem with firefox, basically my protractor config was not using any webdriver server setting but was using the default server, this way was quite handy since did not have start selenium by my self
In order to fix this issue I am starting selenium server by myself spesifiying firefox and chrome drivers
java -jar "C:\Users\%USERNAME%\AppData\Roaming\npm\node_modules\protractor\selenium\selenium-server-standalone-2.42.1.jar" -Dwebdriver.chrome.driver="C:\Users\%USERNAME%\AppData\Roaming\npm\node_modules\protractor\selenium\chromedriver.exe" -Dwebdriver.firefox.bin="C:\Users\%USERNAME%\AppData\Local\Mozilla Firefox\firefox.exe"
It seems that firefox 35,36 is not supported by protractor so one workaround is to download firefox 34 here and set its path by adding
"firefox_binary": "path/to/custom/firefox"
"binary_": "path/to/custom/firefox"
in your conf file as stated here by #6220119