I want to transpile es6 code to es5 and run jasmine tests on it and later get code coverage for es6 code.I have done it in mocha and now trying switch over to jasmine.
gulp.src(["./test/loginTest.js"], { read: false })
.pipe(mocha({
reporter: "spec",
require: [__dirname + "/test/utils/dom.js"],
compilers: ["js:babel-core/register"]
}))
Related
I'm currently trying to get code coverage on my fastify routes using Mocha and NYC.
I've tried instrumenting the code beforehand and then running the tests on the instrumented code as well as just trying to setup NYC in various ways to get it to work right.
Here is my current configuration. All previous ones produced the same code coverage output):
nyc config
"nyc": {
"extends": "#istanbuljs/nyc-config-typescript",
"extension": [
".ts",
".tsx"
],
"exclude": [
"**/*.d.ts",
"**/*.test.ts"
],
"reporter": [
"html",
"text"
],
"sourceMap": true,
"instrument": true
}
Route file:
const routes = async (app: FastifyInstance, options) => {
app.post('/code', async (request: FastifyRequest, response: FastifyReply<ServerResponse>) => {
// route logic in here
});
};
The integration test:
import * as fastify from fastify;
import * as sinon from 'sinon';
import * as chai from 'chai';
const expect = chai.expect;
const sinonChai = require('sinon-chai');
chai.use(sinonChai);
describe('When/code POST is called', () => {
let app;
before(() => {
app = fastify();
// load routes for integration testing
app.register(require('../path/to/code.ts'));
});
after(() => {
app.close();
});
it('then a code is created and returned', async () => {
const {statusCode} = await apiTester.inject({
url: '/code',
method: 'POST',
payload:{ code: 'fake_code' }
});
expect(statusCode).to.equal(201);
});
});
My unit test call looks like the following:
nyc mocha './test/unit/**/*.test.ts' --require ts-node/register --require source-map-support/register --recursive
I literally get 5% code coverage just for the const routes =. I'm really banging my head trying to figure this one out. Any help would be greatly appreciated! None of the other solutions I have investigated on here work.
I have a detailed example for typescript + mocha + nyc. It also contains fastify tests including route tests (inject) as well as mock + stub and spy tests using sinon. All async await as well.
It's using all modern versions and also covers unused files as well as VsCode launch configs. Feel free to check it out here:
https://github.com/Flowkap/typescript-node-template
Specifically I think that
instrumentation: true
messes up the results. Heres my working .nycrc.yml
extends: "#istanbuljs/nyc-config-typescript"
reporter:
- html
- lcovonly
- clover
# those 2 are for commandline outputs
- text
- text-summary
report-dir: coverage
I have proper coverage even for mocked ans tub parts of fastify in my above mentioned example.
I'm trying to do UI testing with jasmine-jquery. I'm using karma as my test runner and jasmine as my testing framework. I think I've loaded the fixture successfully and jasmine-jquery is listed as a testing framework inside my karma configuration.
However I'm unable to find an element in the DOM using jasmine-jquery. Why?
Directory structure
base
spec
javascripts
fixtures
myfixture.html
karma.conf.js
tests
settingUpHTMLFixtures.test.js
myfixture.html
<div id="my-fixture">foo bar</div>
settingUpHTMLFixtures.test.js
jasmine.getFixtures().fixturesPath = 'base/spec/javascripts/fixtures';
loadFixtures('myfixture.html');
describe('testing out jasmine-jquery', function(){
it('can find an element in the dom using jasmine-jquery', function(){
expect($j('#my-fixture')).toBeInDOM();
})
})
karma.conf.js
const webpackConfig = require('./webpack.config.js');
module.exports = function(config) {
config.set({
basePath: "",
files: ["tests/**/*.test.js", 'spec/javascripts/fixtures/*.html'],
frameworks: ['jasmine-jquery', 'jasmine', 'jasmine-matchers'],
preprocessors: {
"tests/**/*.test.js": ["webpack"]
},
webpack: webpackConfig,
plugins : [
'karma-chrome-launcher',
'karma-jasmine',
'karma-jasmine-jquery',
'karma-jasmine-matchers',
'karma-webpack',
'karma-jasmine-html-reporter'
],
logLevel: config.LOG_INFO,
reporters: ['kjhtml'],
port: 9876,
browsers: ["Chrome"],
//...
});
};
At the moment I'm just getting the message that the test failed, which is
testing out jasmine-jquery can find an element in the dom using jasmine-jquery FAILED
Expected jQuery({ context: HTMLNode, selector: '#my-fixture' }) to be in d o m.
at UserContext.<anonymous> (tests/settingUpHTMLFixtures.test.js:78:31)"
I had a path error. It was a mistake to create the base directory on my own. Karma simply serves everything from the base directory.
The only time I needed to use the word base was when setting the fixtures path (as shown in my settingUpHTMLFixtures.test.js code above)
I'm using Nightwatch JS to run my e2e tests with the Mocha runner.
I want to integrate an HTML reporter that with the suite.
I'm trying to use the nightwatch-html-reporter package. But as far as I understand there is a problem with the CLI commands (it's written in the Nightwatch docs that --reporter will not work when using mocha).
I also copied the code sample from nightwatch-html-reporter to my globals.js but it doesn't seem to work either.
The tests run but there is no output anywhere.
Here is my folder structure:
project
src
spec
e2e
globals
globals.js
tests
smoke
testFile.js
nightwatch.conf.js
Here is my conf file:
const seleniumServer = require('selenium-server-standalone-jar');
const chromeDriver = require('chromedriver');
module.exports = {
src_folders: ['src/spec/e2e/tests'],
output_folder: 'report',
page_objects_path: [
'src/spec/e2e/pageObjects'
],
globals_path: 'src/spec/e2e/globals/globals.js',
custom_commands_path: 'src/spec/e2e/customCommands',
selenium: {
start_process: true,
server_path: seleniumServer.path,
host: '127.0.0.1',
port: 4444,
cli_args: {
'webdriver.chrome.driver': chromeDriver.path
}
},
test_runner: {
type: 'mocha',
options: {
ui: 'bdd',
reporter: 'list'
}
},
test_settings: {
default: {
launch_url: 'http://URL',
silent: true,
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true,
chromeOptions: {
args: [
"--no-sandbox",
"start-fullscreen"
]
}
}
}
}
};
And here is my global.js file:
var HtmlReporter = require('nightwatch-html-reporter');
var reporter = new HtmlReporter({
openBrowser: true,
reportsDirectory: __dirname + '/reports'
});
module.exports = {
reporter: reporter.fn
};
I don't think it will work with nightwatch-html-reporter as it is probably not a mocha reporter (but correct me if I'm wrong).
You want to use built in or custom mocha reporters when using nightwatch with mocha.
You can use a custom mocha html reporter like mochawesome but you'll have to hack around a bit and I offer no guarantees as I only tested those hacks lightly.
Here are the instructions to use mochawesome
(tested with
"mocha": "^5.2.0",
"mochawesome": "^3.1.1",
"nightwatch": "^0.9.21")
npm install mochawesome
Modify mochawesome node_modules\mochawesome *.js files to require mocha-nightwatch instead of mocha. (See instructions/explanations towards the end of the answer)
Presuming you're using a nightwatch.conf.js, configure your test runner to the equivalent of
test_runner : {
type : "mocha",
options : {
ui : "bdd",
reporter : require("mochawesome") // Please observe that you can pass a custom report constructor function here, not just reporter names
}
}
Run tests and observe that you still see the default console reporter (spec) but that at the end of the run you also see an output like:
[mochawesome] Report HTML saved to C:\projects\myWebApp\mochawesome-report\mochawesome.html
Open the html report.
This solution is hackish and fragile because nightwatch comes with it's own version of mocha.
When you install nightwatch you will see in your node_modules a mocha-nightwatch folder. This is the mocha that is being used by nightwatch.
However mochawesome doesn't use mocha-nightwatch. If you look at node_modules\mochawsome\dist\mochawesome.js you will see lines of code like:
var Base = require('mocha/lib/reporters/base');
var Spec = require('mocha/lib/reporters/spec');
This means is requires mocha, not mocha-nightwatch.
Those lines should ideally be: require('mocha-nightwatch/...).
So please change them in all *.js files that need fixing.
You could also fork mochawesome and make them like that ;)
Debugging notes:
Try putting some additional console.logs in node_modules\mocha-nightwatch\lib\mocha.js in the Mocha.prototype.reporter function. That's how I figured out what's going on.
If you use Mocha you can always go with mochawsome: https://www.npmjs.com/package/mochawesome
I haven't tried it myself but it looks pretty neat.
Here is my problem : in an AngularJS project, I use Babel 6 (ES2015 + stage3 + decorators), SystemJS and Karma + Jasmine.
All is OK, except for code coverage : I can't find a good way to get a coverage report on ES6 code instead of transpiled ES5.
I have some restrictions :
no Github npm dependencies
no deprecated projects (like isparta)
should run on Windows (yeah, I know, but I have to) and GNU/Linux
This question is especially oriented to a local html coverage report, but I also need a format that could be used in SonarQube.
There seems to be a huge lake of support on this question (especially with Decorators and SystemJS), so, along with some issues on Github, maybe the stackoverflow community could share a way to do this.
If you need some extras, you can see this project on Github (Sedona-Solutions/sdn-angularjs-seed), and look at the related issues (Sedona-Solutions/sdn-angularjs-seed#5) with references to all related issues and projects I could found.
About remap-istanbul
Here is my transpilation and mapping gulp task :
gulp.task('es6', function () {
return gulp.src(paths.source, { base: 'app' })
.pipe(plumber())
.pipe(changed(paths.output, { extension: '.js' }))
.pipe(sourcemaps.init())
.pipe(babel(compilerOptions))
.pipe(ngAnnotate({
sourceMap: true,
gulpWarnings: false
}))
.pipe(sourcemaps.write("."))
.pipe(gulp.dest(paths.output))
});
Karma-coverage
coverageReporter: {
reporters: [
{
type: 'json',
dir: 'target/coverage/',
subdir: '.',
file: 'coverage-final.json'
}
]
}
and the test:remap gulp task :
gulp.task('test:remap', ['test'], function (done) {
return gulp.src(paths.coverage + '/coverage-final.json')
.pipe(remapIstanbul({
reports: {
'json': paths.coverage + '/coverage.json',
'html': paths.coverage + '/html-remaped/'
},
fail: true,
useAbsolutePaths: true
}));
});
due to the first remap-istanbul issue, I get the following error :
C:\...\sdn-angularjs-seed\node_modules\remap-istanbul\node_modules\istanbul\lib\report\html.js:288
text = structuredText[startLine].text;
^
TypeError: Cannot read property 'text' of undefined
at C:\...\sdn-angularjs-seed\node_modules\remap-istanbul\node_modules\istanbul\lib\report\html.js:288:53
You can see the corresponding code on github.
It could be an error on some mapping generation, or paths ... If you think so, tell me.
karma-coverage + remap-istanbul should work fine
I have installed the chrome jet brains extension
I have tests like this:
describe('Service tests', function () {
beforeEach(module('app'));
it('should have a Service', inject(function($injector) {
var exist = $injector.has('dataService');
etc
but no luck getting breakpoints to hit any where in the tests. I can get the debugger to break when writing debugger, but an unable to step through.
Do you have karma-coverage set up in your karma config? It uses instrumented code, so debugging is not possible. Related tickets: http://github.com/karma-runner/karma/issues/630, http://youtrack.jetbrains.com/issue/WEB-8443
If you are building with Webpack you might need to specify the devtools option in your webpack config property in karma.conf.js like this:
module.exports = (config) => {
config.set({
webpack: {
...,
devtool: 'inline-source-map'
}
})
};
This solution works for me with Webpack v3.
If by any chance you are using Angular and you have removed all the coverage related stuff from your karma.config file and are still unable to hit the breakpoints, look into the angular.json. It might be having the codeCoverage bit set to true.
"test": {
...
"options": {
...
"codeCoverage": false,
...
}
...
}