How to add a new plugin in karma's configuration file - javascript

I wanted to generate an HTML test report from karma, so I used the plugin karma-htmlfile-reporter. I followed the instruction of that plugin. However, the setting below tripped me over:
plugins : [
'karma-htmlfile-reporter'
],
It turns out that this will overwrite the default plugins setting and, unsurprisingly, break some of the things. I ended up using something like below to make it work, which basically manually lists all items I needed:
plugins : [
'karma-jasmine',
'karma-phantomjs-launcher',
'karma-htmlfile-reporter'
],
Albeit not too much extra work and code, it seems dumb. So, is there a better way to add a new plugin in karma's configuration file?
Thank you very much.

You can try just to add it to the reporters once installed, which is cleaner and in theory Karma should load all the karma-* plugins it finds scanning the modules.
// karma.conf.js
module.exports = function(config) {
config.set({
...
// Just add it here
reporters: ['progress', 'html'],
// Specific plugin configuration
htmlReporter: {
outputFile: 'tests/units.html'
}
});
};
Sometimes it the finder doesn't work properly so you have to explicitly say Karma what to load, so you have to do what you've written.

Related

Obsidian.md Plugins: ''obsidian' not defined'

I am currently writing a plugin for obsidian.md that renders math functions inside a code block. I used webpack for bundling node libraries like yaml and function-plot. In the config, I added 'obsidian' as an external. The plugin builds with a warning about the bundle size but that doesn't matter since it's local anyways. When I add the plugin, it always says ''obsidian' not defined'. I guess it's looking for obsidian in the global context and can't find it? Here's the repo: https://github.com/leonhma/obsidian-functionplot
Do you know how to configure webpack properly? There's probably some really easy fix but I'm also new to typescript, webpack and developing plugins for obsidian..
Thank you #håkon-hægland for your suggestion (why didn't I think of that?). First of all, the file generated by webpack looked like
function(obsidian) {
... (around 300kb code)
}(obsidian);
, so webpack tried to access some global object called 'obsidian'. The important part in webpack.config.js was
...
externals: [
obsidian: 'obsidian'
],
...
As per your suggestion, i took a look at the other repo, and they use
...
externals: [
obsidian: 'commonjs2 obsidian'
],
...
That fixed my problem and now obsidian is properly imported at runtime. Just posting this in case someone else has this problem, as i couldn't find an existing answer myself.
PS: For those interested, since you are most certainly developing obsidian plugins: It was also really important to set output.libraryTarget to commonjs or commonjs2 inside the webpack config.

Embed require calls in gulp/babel to require a single script file bundle

I'm using gulp with babel to include polyfills for older browsers we need to support, especially IE:
{
"ignore": ["gulpfile.js"],
"presets": [
[
"#babel/preset-env",
{
"useBuiltIns": "usage",
"forceAllTransforms": true
}
]
]
}
This itself works, e.g. backticks were replaced that cause issue in IE. But every polyfill is included from its single file like this:
"use strict";
require("core-js/modules/es6.map");
require("core-js/modules/es6.function.name");
require("core-js/modules/es6.string.iterator");
// ...
This cannot be resolved in the browser. It seems that this can be done using browserify, and maybe some kind of module loader (I'm not familar with this), but would result in a lot of http requests. I simply want a single bundled file with all needed polyfills included.
My gulp task:
return (
gulp
.src(jsSources)
.pipe(concat(targetFile))
.pipe(babel())
.pipe(gulp.dest(`${outputFolder}/js`))
);
where jsSources is an array of my js files. One of them include.
I found this question but it seems wrong to simply replace the requires by the file content. Is there no cleaner way like concat gulp plugin for js?

Best way to bundle multiple third-party javascript libraries into one with webpack

I was following the webpack tutorial and as much as I understood it, to bundle everything into one module it requires the scripts to use require('./xyz')
Instead until now, I used to write everything in separate scripts and load all the scripts in HTML with multiple script tags. I don't think changing every script is possible now. So is there any way to bundle everything into one module and use it?
PS: something like this : similar SO
Another thing I wanted to ask, as title says, How to bundle third party libraries like angularjs, jquery, bootstrap, ui-router and so on? (with no common connection with each other)? I tried giving an array as entry to the webpack and it produced a large 4MB JS plus it didn't even work. What is the better way to do it?
You can create an explicit vendor chunk with webpack using CommonsChunkPlugin (if you’re using webpack < 4)
entry: {
vendor: [
'angular',
'jquery',
// etc.
],
app: './index.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
})
]
You can also use DllPlugin for this, and there’s an example.

Karma JS -- How to Include all All Sources?

I have a +10K lines Backbone Marionette app and we are running tests and coverage through Karma.
I would like to include all the sources so that we can have a better idea of what it is not covered by our tests.
I have been passing the includeAllSources option in the karma configuration but I still don't see karma showing the results for all files (the report only show +3K lines cover, more or less the amount of lines that we know we have test for).
Am I doing something wrong? Is there another way to include all sources?
There use to be a Karma plugin that was able to handle this but the plugin is not longer working (modified to make it run, but the results are still the same).
Is there are way to pass the --include-all-sources option to Istanbul while running it from Karma?
Try this plugin: https://github.com/kopach/karma-sabarivka-reporter. It includes files specified by pattern to coverage statistic. So, you can be sure, that you have all your source files under coverage statistic control.
Install npm install --save-dev karma-sabarivka-reporter
And update karma.conf.js similar to this:
reporters: [
// ...
'sabarivka'
// 'coverage-istanbul' or 'coverage' (reporters order is important for 'coverage' reporter)
// ...
],
coverageReporter: {
include: [
// Specify include pattern(s) first
'src/**/*.(ts|js)',
// Then specify "do not touch" patterns (note `!` sign on the beginning of each statement)
'!src/main.(ts|js)',
'!src/**/*.spec.(ts|js)',
'!src/**/*.module.(ts|js)',
'!src/**/environment*.(ts|js)'
]
},
This github issue seems to be addressing your issue and this pull request seems to fix it in version 0.5.2 of the karma-coverage plugin.
I hope you're using an earlier version and just upgrading solves your problem!
You just need to add includeAllSources: true to your coverageReporter, the Reporter Options.
Like this:
coverageReporter: {
includeAllSources: true
...
}

Loading and parsing .ini file inside or from a Gruntfile

Gruntfile.js is located at project root/Gruntfile.js
asset_compress.ini is located at project root/app/Config/asset_compress.ini
Tests are written using Jasmine, and the specs all locate in project root/tests/**/*
The following is a stripped-down Gruntfile. If you need more, feel free to ask:
module.exports = function(grunt) {
'use strict';
grunt.initConfig({
jasmine: {
test: {
src: [
'node_modules/jasmine-expect/dist/jasmine-matchers.js',
'app/webroot/js/libraries/jquery-2.0.js',
'app/webroot/js/api/ClassUtility.js',
'app/webroot/js/api/**/*.js'
],
options: {
log: true,
specs: [
'tests/app/webroot/js/api/ClassUtility.spec.js',
'tests/**/*.spec.js'
]
}
}
}
});
};
ClassUtility (and its specification) need to be loaded before any other part of the API, because it contains everything all other "classes" rely on. This is why it's declared specifically above all other api classes.
However, I have many(!) dependencies and many other files that I need, and they're all present in a (rather large) asset_compress.ini. Ideally, I would want to keep that single ini file as the only list and have my Gruntfile read from that list to know what source files it should load.
TLDR:
How would I configure my Gruntfile with the content of my ini file?
As bfred.it suggested, there were plenty of node packages that can parse .ini files. However, none of them worked the way I wanted them to work so I decided to create my own.
The source code, documentation, instructions and anything else you may desire can be found here: https://bitbucket.org/skelware/node-file-parser/
Feel free to request features on its issue tracker!
The easy way to load and parse an ini file in node:
First install on command line:
npm install parse-ini
Then in the code:
var iniParser = require('parse-ini');
var parsedIni = iniParser.parse('yourfile.ini');
// job done, you can use results in parsedIni:
console.log(parsedIni.sectionName.variableName);
console.log(parsedIni.variableWithoutSectionName);

Categories