I'm having a few issues with r.js I'm hoping someone can shed some light on.
Consider the following shim:
shim: {
plugin: ['jquery'],
plugin2: ['jquery', 'plugin']
}
And the following arbitrary plugins (note: they don't need to be jQuery plugins, but 2 must depend on 1).
Plugin 1:
(function ($) {
$.test = function () {
console.log('from plugin 1');
}
})(jQuery);
Plugin 2:
(function ($) {
$.test();
})(jQuery);
r.js will build the following:
(function ($) {
$.test = function () {
console.log('from plugin 1');
}
})(jQuery);
define("plugin", function(){});
(function ($) {
$.test();
})(jQuery);
define("plugin2", function(){});
Which is great - everything is in the correct order.
However, if I need to set
wrapShim: true
in the build config, I get this as an output:
(function(root) {
define("plugin", [], function() {
return (function() {
(function ($) {
$.test = function () {
console.log('from plugin 1');
}
})(jQuery);
}).apply(root, arguments);
});
}(this));
(function(root) {
define("plugin2", [], function() {
return (function() {
(function ($) {
$.test();
})(jQuery);
}).apply(root, arguments);
});
}(this));
I'm not sure if I'm misreading the point of setting wrapShim to true, but shouldn't this be compiling to:
define("plugin", ["jquery"], function() ...
and
define("plugin2", ["jquery", "plugin"], function() ...
?
It appears that wrapShim is totally ignoring dependencies set in the shim.
This was a bug, fix tracked here:
https://github.com/jrburke/r.js/issues/813
On further inspection while writing this post it appears that if dependencies are listed in the longer form of:
shim: {
plugin: {
deps: ['jquery']
},
plugin2: {
deps: ['jquery', 'plugin']
}
}
then the dependencies are injected correctly.
Related
This is my gulpfile
gulp.task('lint', function () {
gulp.src('./src/nodeuii/**/*.js')
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
But:
No ESLint configuration found
gulp.task('lint', function () {
gulp.src('./src/nodeuii/**/*.js')
.pipe(eslint({
configFile: 'eslintrc.js'
}))
});
need a configFile
I tried doing below
this.registerHandler('AfterFeatures', function (event, callback) {
reporter.generate(options);
callback();
});
however, it gives an error that registerError is not a function. Any help will be much appreciated
Version 2 changed how both step definitions are defined and how hooks are registered. It should look something like this now...
let {defineSupportCode} = require('cucumber');
defineSupportCode(({registerHandler}) => {
registerHandler('AfterFeatures', function(event, callback) {
reporter.generate(options);
callback();
});
});
Try this if you are using cucumber 1.0
var { AfterAll, BeforeAll } = require('cucumber');
this.BeforeAll(function(Scenario,callback) {
// DO something
callback();
}
this.AfterAll(function(Scenario,callback) {
reporter.generate(options);
callback();
}
Is there a way to make this generic to the point where I can have one copy of it and pass the config item, and file list into it rather than duplicating it for every file/config combination?
I'd love to have something like
gulp.task('foo_test', function (cb) {
run_tests(files.foo_list, config.fooCoverage);
cb();
}
Note on potential oddities in the code
I'm using lazypipe and gulp-load-plugins full file here
// test the server functions and collect coverage data
gulp.task('api_test', function (cb) {
gulp.src(files.api_files)
.pipe(istanbulPre())
.on('end', function () {
gulp.src(files.api_test_files)
.pipe(mochaTask())
.pipe(istanbulAPI())
.on('end', cb);
});
});
var istanbulAPI = lazypipe()
.pipe(plugins.istanbul.writeReports, config.apiCoverage);
config = {
apiCoverage: {
reporters: ['json'],
reportOpts: {
json: {
dir: 'coverage',
file: 'coverage-api.json'
}
}
},
Gulp is just JavaScript.
You can write plain old regular functions, just as you normally would:
function run_tests(srcFiles, srcTestFiles, coverageConfig, cb) {
var istanbul = lazypipe()
.pipe(plugins.istanbul.writeReports, coverageConfig);
gulp.src(srcFiles)
.pipe(istanbulPre())
.on('end', function () {
gulp.src(srcTestFiles)
.pipe(mochaTask())
.pipe(istanbul())
.on('end', cb);
});
}
gulp.task('unit_test', function (cb) {
run_tests(files.lib_files, files.unit_test_files, config.unitCoverage, cb);
});
gulp.task('api_test', function (cb) {
run_tests(files.api_files, files.api_test_files, config.apiCoverage, cb);
});
Note that the callback cb is just another parameter that is passed to the run_tests function. If it was called immediately after calling run_tests that would signal task completion to gulp before the asynchronous code in run_tests has actually finished.
Lazypipe was a solution (and there are other alternatives) but since Gulp 4 these do not seem to work anymore. Gulp 4 does not pass the stream to pipe functions. Yet the gulp.src(...) function returns a stream.
Also a nice feature of gulp 4 is that functions with Promises can also be a task.
So in the end I came up with this solution that worked for me. With my gulpfile.js looking something like this:
const {
src,
dest,
series,
parallel
} = require('gulp');
// other gulp packages omitted in this example...
const myReusableJsParser = (sources, destination) => {
return src(sources)
.pipe(stripComments({...}))
.pipe(obfuscator({compact:true}))
.pipe(...) //etc
.pipe(dest(destination));
};
const parseScriptsX = () => {
return myReusableJsParser('./js/x/**/*.js', './dist/js/x/');
}
const parseScriptsY = () => {
return myReusableJsParser('./js/y/**/*.js', './dist/js/y/');
}
// more
...
const cleanUp = () => new Promise((resolve, reject) => {
try {
deleteFiles('./dist/').then(resolve).catch(reject);
} catch(err) {
reject(err);
}
});
// export
module.exports = {
default: series(cleanUp, paralell(parseScriptsX, parseScriptsY), paralell(...)),
...,
clean: cleanUp
};
I am checking whether in my module PracticeCtrl exists. I written following test for this.
Gives me error : ReferenceError: myApp is not defined
describe('myApp', function() {
describe('Controller: PracticeCtrl', function () {
// load the controller's module
beforeEach(function () {
// Load the controller's module
module('myApp');
});
it('should have a PracticeCtrl controller', function() {
expect(myApp.PracticeCtrl).toBeDefined();
});
});
});
How to check in my module a controller exists? As i am new for this, have less knowledge on syntax.
describe("SomeControllerTest", function () {
var scope, ctrl;
beforeEach(module('myApp'));
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new();
ctrl = $controller('SomeController', {
$scope: scope
});
}));
it("should be defined", function () {
expect(ctrl).toBeDefined();
});
});
I'm trying to use Intern to author a first functional test, and I can't get around the following problem: when running the following test script
define(["intern!object",
"intern/chai!assert"
], function(registerSuite, assert){
registerSuite({
name: "suite",
"test": function(){
var browser = this.remote;
console.log("HELLO !");
browser.get("http://www.google.com", function() {
console.log("PAGE LOADED !");
browser.waitForCondition("!!window.document.gbqf", 1000, function(err, value){
console.log("LET'S BEGIN... ");
browser.eval("window.document.gbqf", function(err, value){
console.log("BYE BYE !");
browser.quit();
});
});
});
}
});
});
in chrome, using selenium server standalone 2.32.0 and chromedriver 26.0.1383.0 for windows, my test never end and the last message displayed in the console is "PAGE LOADED !".
Does anyone has an idea of how I'm suppose to write this test, or have a link to some proper (real life) functional tests examples ?
Thanks for your help,
Sebastien
The functional interface does not use callback arguments, it uses promises instead. Your code should look like this:
define([
"intern!object",
"intern/chai!assert"
], function (registerSuite, assert) {
registerSuite({
name: "suite",
"test": function () {
var browser = this.remote;
console.log("HELLO !");
return browser
.get("http://www.google.com")
.then(function () {
console.log("PAGE LOADED !");
})
.waitForCondition("!!window.document.gbqf", 1000)
.then(function () {
console.log("LET'S BEGIN... ");
})
.eval("window.document.gbqf")
.then(function (value) {
console.log("BYE BYE !");
});
});
}
});
});
Note in particular:
The last promise chain from this.remote is returned by the test function to indicate to Intern that the test is asynchronous
waitForCondition does not return a value
You should never call quit yourself; this is handled by Intern once the test is complete