Develop Reference

Webdriverio debug BDD tests using WebStorm

Is there any way to debug Webdriverio tests using nodeJS and WebStorm?
I've found some conclusion here and this is actually my problem: Run WebdriverIO tests via Mocha in WebStorm
But this solution doesn't fit to my problem now;
I've set up Babel to compile my BDD tests
I've set tests.config.js
module.exports = { maxInstances: 1,
capabilities: [{ browserName: 'chrome' }],
execArgv: ['--inspect'] : [],
specs: ['**/some/spec.js']
mochaOpts: {
ui: 'bdd',
compilers: ['js:#babel/register'],
timeout: 150000
} }
and babel.conf.js
module.exports = {
presets: [
['#babel/preset-env', {
targets: {
node: 12
}
}]
]
}
then I've created nodeJS configuration like it said here at answer: Run WebdriverIO tests via Mocha in WebStorm
Set breakpoint at test
describe("test", function(){
it ("this is a BDD test",
function(){
breakpoint here>> do_some_action();
})
})
But when I try to launch my tests in debug mode nothing happens and I see "connnected to localhost:port" message. and I can't go to breakpoint; there are no errors;

there was problem with a wdio.conf.js file. If you don't set specs file >> there aren't no errors. But launching is incorrect. I've set config like this:
module.exports =
{
capabilities: [{
maxInstances: 6,
browserName: 'chrome',
baseUrl: "some-url/",
browserVersion: '67.0'}]
specs: [
'./this/is/spec.js']
mochaOpts: {
ui: 'bdd',
require: ['#babel/register'],
timeout: 150000
},
And debug works after this. It's not too har as I though :) If there are some questions - > I'm glad o answer

How to include javascript library in grunt

I am working on an existing Ionic project. I am trying to include the Ionic's push notification feature within this project. When I try to run grunt command I get following error
Running "jsbeautifier:files" (jsbeautifier) task
Beautified 53 files, changed 0 files...OK
Running "jshint:files" (jshint) task
./www/js/app.js
18 | var push = new Ionic.Push({
^ 'Ionic' is not defined.
So looks like the ionic JS file under lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js is not getting loaded in grunt. How to fix this? I am new to grunt and ionic, so please help me out. I didn't find any solution in other similar questions.
BTW, the app works fine in browser.
gruntfile.js jshint
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
strict: false,
globalstrict: false,
node: true,
undef: true,
globals: {
angular: true,
cordova: true,
app: true,
StatusBar: true,
CameraPopoverOptions: true,
ionic: true,
Camera: true
},
},
files: {
src: ["*.js", "./www/js/*.js", "./www/components/**/*.js", "!*.min.js", "!./www/**/*.min.js", "!./www/**/**/*.min.js"]
}
},

globals: {
angular: true,
cordova: true,
app: true,
StatusBar: true,
CameraPopoverOptions: true,
Ionic: true,
Camera: true
}
Ionic should have capital I.

grunt-frontend cannot assign to read only property 'spidermonkey'

I have a problem with grunt-frontend package.
When I run grunt task I get:
Running "frontend-js:main" (frontend-js) task
Processing /assets/js/main.min.js
Warning: Cannot assign to read only property 'spidermonkey' of /assets/js/main.min.js Used --force, continuing.
What is going wrong?
I have Gruntfile.js configured like in the documentation:
'frontend-js': {
main: {
options: {
minify: true,
uglify: {}
},
files: {
'out/js/f.js': [
'test/js/file1.js',
'test/js/file2.js'
]
}
}
}
When I set minify: false everything works normally, except minification of course.

Exclude a module from webpack bundle

I'd like the same functionality like RequireJS empty: http://requirejs.org/docs/optimization.html#empty
My use-case is that I include jquery-migrate in development, but I'd like to exclude this when built for production.
Using IgnorePlugin just makes it not included, and when requireing it in the code, it then throws an error (Uncaught Error: Cannot find module "jquery-migrate").
What I'd like to happen is for it to just return undefined, or something of the like (like empty: in RequireJS). Id like to not touch the import in the code, just configuring it to return undefined.
EDIT: Using NormalModuleReplacementPlugin works, if I point the replacement to an empty file. But keeping an empty file around just for this seems unnecessary.

I use the null-loader for blanking out modules.
The noop-loader can be used for a less awkward if-else in the config.
Try:
rules: [{
test: /jquery-migrate/,
use: IS_DEV ? 'null-loader' : 'noop-loader'
}]

You can try to make a resolve.alias in webpack.config:
resolve: {
alias: {
"jquery-migrate": process.env.NODE_ENV === 'production' ? "empty-module": "jquery-migrate"
}
}

Use Webpack's DefinePlugin in combination with the normal production plugins (Dedupe and Uglify).
Then in your code you can write:
if(DEBUG) {
var test = require('test');
alert(test);
}
And when it's built in production, the DEBUG will be replaced with a literal if(false) { ... } which will be completely removed by the uglify plugin, so test will only be required in a debug build.
Here's a sample Grunt task config for grunt-webpack that has development and production targets for the task:
development: {
devtool: "sourcemap",
output: {
pathinfo: true,
},
debug: true,
production: false,
plugins: [
new webpack.DefinePlugin({
DEBUG: true,
PRODUCTION: false
})
]
},
production: {
plugins: [
new webpack.DefinePlugin({
DEBUG: false,
PRODUCTION: true
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false,
}
})
]
},

How to load versioned resources in a karma unit test

Please, find below my karma.conf.js:
module.exports = function (config) {
var path = require("path"),
basePath = "../../../../../..",
version = require(path.join(__dirname, basePath, "ThirdPartyJsLibRootMap.json"));
config.set({
basePath: basePath,
frameworks: ['intern'],
files: [
'Tools/Karma/dojo-config.js',
'http://devstatic/libraries/dojo-debug/' + version['dojo-debug'] + '/dojo/dojo.js',
...
],
reporters: ['progress', 'html'],
htmlReporter: {
outputFile: 'Tools/Karma/HRunitTestReport.html'
},
port: 9876,
colors: false,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome'],
captureTimeout: 60000,
browserNoActivityTimeout: 60000,
singleRun: true
});
};
The files section specifies a few files, but the most important ones are:
Tools/Karma/dojo-config.js
http://devstatic/libraries/dojo-debug/' + version['dojo-debug'] + '/dojo/dojo.js
Notice, that all the 3rd party dependencies are served from a dedicated server - devstatic. It is sort of an internal CDN. The 3rd party content is also versioned and the versions used by the current revision of our application are stored in a dedicated json file - ThirdPartyJsLibRootMap.json, which is part of the application.
The aforementioned karma.conf.js works, but I am not sure if I am doing it correctly. I have a feeling that the files section is not intended to hold http urls. And I am pretty sure it will not work with expressions like **.
But there is more. Tools/Karma/dojo-config.js is responsible for common configuration and it looks like this:
window.__karma__.loaded = function () { };
setImmediate = function (fn) { fn(); };
dojoConfig = {
baseUrl: "http://devstatic/libraries/dojo-debug/1.10.4",
async: true,
useDeferredInstrumentation: true,
has: {
'host-karma': true
},
paths: {
'Globalization': 'http://devstatic/libraries/globalization-debug/0.1.1',
'put-selector': 'http://devstatic/libraries/put-selector/0.3.5',
'dgrid': 'http://devstatic/libraries/dgrid/0.3.16',
'xstyle': 'http://devstatic/libraries/xstyle/0.1.3',
'toastr': 'http://devstatic/libraries/toastr/1.2.2-514cc12',
...
},
packages:
[
{
name: "jquery",
location: "http://devstatic/libraries/jquery/1.8.3",
main: "jquery"
},
{
name: "jquerybase64",
location: "http://devstatic/libraries/jquery/1.8.3",
main: "jquery.base64"
},
{
name: "dojo",
location: "http://devstatic/libraries/dojo-debug/1.10.4/dojo"
},
{
name: "dijit",
location: "http://devstatic/libraries/dojo-debug/1.10.4/dijit"
},
{
name: "dojox",
location: "http://devstatic/libraries/dojo-debug/1.10.4/dojox"
},
{
name: "intern",
location: "/base/Tools/Intern/node_modules/intern"
},
{
name: "karma",
location: "/base/Tools/Karma"
}
],
deps: null,
callback: null
};
And here I am in a major problem. How do I communicate the 3rd party versions loaded from ThirdPartyJsLibRootMap.json over to Tools/Karma/dojo-config.js?
I mean, those versions are known at the time karma.conf.js is processed and if I could inject them into the html page generated by karma then I could reference them from Tools/Karma/dojo-config.js and compose the right third party URLs. Alas, so far found no way to do it.
So, basically I have the following questions:
What is the right way to refer to http URLs in karma.conf.js? The answer could be - don't, but then how do I make it loaded by the generated html page?
If loading http URLs the way I do it in karma.conf.js is fine, then how to specify expressions like **?
How to make the information computed in karma.conf.js available to the javascript loaded in the browser? This information is known at the "node time" (when karma.conf.js is run), but I am puzzled as to how to make it available at the "browser time".