CasperJS via CLI: How to load external JS files? - javascript

This might be a stupid question (CasperJS noob): given this example from the CasperJS docs:
// cow-test.js
casper.test.begin('Cow can moo', 2, function suite(test) {
var cow = new Cow();
test.assertEquals(cow.moo(), 'moo!');
test.assert(cow.mowed);
test.done();
});
If Cow() is defined in a file \path\to\myCowClass.js, how do I load this class when I am using CasperJS via CLI? Is this a job for the files config param or for clientScripts?
I would really love if anybody had a concise tutorial/example.

Let's take your Cow.js file. I assume it looks like this:
function Cow() {
this.mooed = false;
}
Cow.prototype.moo = function () {
this.mooed = true;
return 'moo!';
}
This file should be a dependency of your test. Here you can:
Inject your "class" file from the command line using the includes option
Inject your "class" file from your test file using phantom.injectJs
With --includes
casperjs test --includes=/path/to/Cow.js cow-test.js
With phantom.injectJs
// cow-test.js
phantom.injectJs('/path/to/Cow.js');
casper.test.begin('Cow can moo', 2, function suite(test) {
var cow = new Cow();
test.assertEquals(cow.moo(), 'moo!');
test.assert(cow.mooed);
test.done();
});

Related

What is a VS Code Command to run a python file?

I have made an extension that opens a file dialog. What I would like to do is after the file is selected, I want a python file to run. What I need is the VS Code command to run a file (or perhaps a python file specifically?).
here is a working example where the command I use is a command that comments the selected line in the currently active editor. It works perfectly so I know this structure is generally correct. I just need the right command to replace the comment line command.
below is the code in questions with the working command I mentioned above. I found it using this resource: where I found the comment line command
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const { ChildProcess } = require('child_process');
const vscode = require('vscode');
const { execFile } = require('node:child_process');
const { stdout, stderr } = require('process');
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
/**
* #param {vscode.ExtensionContext} context
*/
function activate(context) {
let disposable = vscode.commands.registerCommand('fileDialog.openFile', function () {
const options = {
canSelectMany: false,
openLabel: 'Open'
};
vscode.window.showOpenDialog(options).then(fileUri => {
if (fileUri && fileUri[0]) {
console.log('Selected file: ' + fileUri[0].fsPath);
vscode.commands.executeCommand('python.execInInterminal');
}
});
});
context.subscriptions.push(disposable);
}
// this method is called when your extension is deactivated
function deactivate() {}
module.exports = {
activate,
deactivate
}
You can go for child_process' exec or spawn if you only need to run the Python script(s).
If you really prefer to rely on the Python extension, then you'll need to at least feed the script's Uri into the executeCommand's argument - its the 2nd part of what you found.
function activate(context) {
let disposable = vscode.commands.registerCommand('fileDialog.openFile', function () {
const options = {
canSelectMany: false,
openLabel: 'Open',
filters: {
'Python script': ['py']
}
};
vscode.window.showOpenDialog(options).then((fileUris) => {
// This will always get an array of Uris regardless of canSelectMany being false
fileUris?.forEach(async (fileUri) => {
console.log(`Selected file: ${fileUri.fsPath}`);
await vscode.commands.executeCommand('python.execInInterminal', fileUri);
});
});
});
context.subscriptions.push(disposable);
}
If you want to handle more things, you can refer to the thenable unittest code they included in the repo:
https://github.com/microsoft/vscode-python/blob/main/src/test/smoke/runInTerminal.smoke.test.ts#L46-L48

Deleting files in a gulp task

I have a gulp task in which I want to take some source files and copy them to build/premium and build/free and then remove some extra files from
build/free.
My attempt at that was doing this:
gulp.task("build", ["clean"], function () {
gulp.src(["src/*", "!src/composer.*", "LICENSE"])
.pipe(gulp.dest("build/premium"))
.pipe(del(["build/free/plugins/*", "!build/free/plugins/index.php"]))
.pipe(gulp.dest("build/free"));
});
Which results in an error:
TypeError: dest.on is not a function
at DestroyableTransform.Stream.pipe (stream.js:45:8)
at Gulp.<anonymous> (/Users/gezim/projects/myproj/gulpfile.js:9:6)
How do I accomplish this the deleting port? Is there a better way altogether to do this?
This is a simple clean task implementation with gulp-del:
var del = require('gulp-del');
gulp.task('clean', function(){
return del(['folderA/js', 'folderA/css', 'folderB/js']);
});
In your case you can just call it after build (read "use build as a dependency"):
gulp.task("build", function () {
return gulp.src(['src/*', '!src/composer.*', 'LICENSE'])
.pipe(gulp.dest("build/premium"))
.pipe(gulp.dest("build/free"));
});
gulp.task("complete-build", ["build"] function(){
return del(['build/free/plugins/*', '!build/free/plugins/index.php']);
});
Then call the "complete-build" task to perform it.
To be honest this is more a "Grunt"-like approach to the problem, but done with Gulp. Perhaps the recommendation to filter things before writing them in the build/free folder is more in the Gulp spirit.
Update 2/2018
The delete module has been renamed to del now as reported by #gerl:
var del = require('del');
gulp.task('clean', function(){
return del(['folderA/js', 'folderA/css', 'folderB/js']);
});
I would use gulp-filter to drop only what should not be copied from the 2nd destination.
I interpreted the intent of the task as wanting everything present in src to be present in build/premium. However, build/free should exclude everything which was originally in src/plugins but should still include src/plugins/index.php.
Here is a working gulpfile:
var gulp = require("gulp");
var filter = require("gulp-filter");
var del = require("del");
gulp.task("clean", function () {
return del("build");
});
gulp.task("build", ["clean"], function () {
return gulp.src(["src/**", "!src/composer.*", "LICENSE"])
.pipe(gulp.dest("build/premium"))
.pipe(filter(["**", "!plugins/**", "plugins/index.php"]))
.pipe(gulp.dest("build/free"));
});
The patterns passed to filter are relative paths. Since the gulp.src pattern has src/** it means they are relative to src.
Note also that del cannot be passed straight to .pipe() as it returns a promise. It can be returned from a task, like the clean task does.

Running Blanket.js

I am testing some code programmatically using Jasmine from Node. To do this, I've setup the following:
function runTests() {
var Jasmine = require('jasmine');
var jasmine = new Jasmine();
jasmine.loadConfig({
spec_dir: 'unit-tests',
spec_files: [
'tests-*.js'
]
});
var blanket = require('blanket')();
var TerminalReporter = require('jasmine-terminal-reporter');
var reporter = new TerminalReporter({});
jasmine.addReporter(reporter);
jasmine.execute();
}
runTests();
When those tests run, I would like to get the code coverage details. While attempting this, I stumbled upon blanket.js. My question is, how do I programmatically output the code coverage results? Using the code above, I get an error. The error simply says:
Error: Bad file instrument indicator. Must be a string, regex, function, or array.
Why? What am I doing wrong?
Update
In my package.son file, I have the following section:
"config": {
"blanket": {
"data-cover-flags": {
"engineOnly":true
}
}
}
I have updated my runTests function to look like this:
function runTests() {
var Jasmine = require('jasmine');
var jasmine = new Jasmine();
jasmine.loadConfig({
spec_dir: 'unit-tests',
spec_files: [
'tests-*.js'
]
});
// Setup the coverage reporter
var blanket = require("blanket")();
var blanketReporter = function(coverageData) {
console.log(coverageData);
};
blanket.customReporter = blanketReporter;
blanket.instrument({
inputFile: 'library.js'
}, function(result) { });
var TerminalReporter = require('jasmine-terminal-reporter');
var reporter = new TerminalReporter({});
jasmine.addReporter(reporter);
jasmine.execute();
}
library.js
'use strict';
class Processor
{
execute(vals) {
let result = 0;
vals.forEach(function(v) {
result += v;
});
return result;
}
}
module.exports = Processor;
The code above is in a file called "main.js" which I run by calling node main.js from the console window. "library.js" is at the same level and the tests are in a child directory at "./unit-tests/tests.js". When the above runs, the customerReporter code is never called. I don't understand why.
https://github.com/alex-seville/blanket/issues/248
If you don't specify the below in your package.json, blanket throws a "Bad file instrument indicator. Must be a string, regex, function, or array." error. As soon as you require('blanket'); from anywhere within node.
"scripts": {
"blanket": {
"data-cover-flags": {
"engineOnly":true
}
}
}
It would seem that you need to add the reporter to the Jasmine environment.
jasmine.getEnv().addReporter(reporter);
Source: http://jasmine.github.io/2.1/custom_reporter.html
Try custom reporter https://github.com/alex-seville/blanket/blob/master/docs/advanced_browser.md#reporters
blanket.customReporter=function(coverage_results){
console.log(coverage_results);
};

Nodejs: load javascript from external file containing functions

I'm trying to load javascript object from a file on my filesystem using Nodejs application.
Sample object stored in filesystem file ('myOwnFunction.js'):
exports.myOwnFunction = {
"var2": "My value1",
"var2": 100,
"var3": true,
"var4": function(abc) {
var var5 = "some other value";
runOtherFunction(var5)
}
}
So, in the application itself, I would like to "load" several object like the sample above.
fs.readdir("./", function (err, files) {
files.forEach(function(file) { // so loading all js files in folder
var foo = require( "./"+file ).myOwnFunction;
});
});
As a consequence, the script return the following error message:
ReferenceError: runOtherFunction is not defined
I guess this is absolutely normal ; a question of (a)synchroneous and also because "runOtherFunction" is not available on the 'myOwnFunction.js' file.
Could you give me clues how to proceed or any alternative solution.
I'm quite sure I'm doing this the wrong way - but I'm bit lost..
Thanks a lot.
The way you are exporting your modules is a little weird. I don't know it's wrong per se, but it doesn't follow node.js conventions. Try this:
myOwnFunction.js:
module.exports = function() {
"var2": "My value1",
"var2": 100,
"var3": true,
"var4": function(abc) {
var var5 = "some other value";
runOtherFunction(var5)
}
});
In the file you want to use this function:
myOwnFunction = require('./myOwnFunction');
fs.readdir("./", function (err, files) {
files.forEach(function(file) { // so loading all js files in folder
var foo = require( "./"+file ).myOwnFunction;
});
});

Gulps gulp.watch not triggered for new or deleted files?

The following Gulpjs task works fine when editing files in the glob match:
// watch task.
gulp.task('watch', ['build'], function () {
gulp.watch(src + '/js/**/*.js', ['scripts']);
gulp.watch(src + '/img//**/*.{jpg,jpeg,png,gif}', ['copy:images']);
gulp.watch(src + '/less/*.less', ['styles']);
gulp.watch(src + '/templates/**/*.{swig,json}', ['html']);
});
// build task.
gulp.task('build', ['clean'], function() {
return gulp.start('copy', 'scripts', 'less', 'htmlmin');
});
However it doesn't work (it's not triggered) for new or deleted files. Is there something I'm missing?
EDIT: even using grunt-watch plugin it seems not working:
gulp.task('scripts', function() {
return streamqueue(
{ objectMode: true },
gulp.src([
vendor + '/jquery/dist/jquery.min.js',
vendor + '/bootstrap/dist/js/bootstrap.min.js'
]),
gulp.src([
src + '/js/**/*.js'
]).pipe(plugins.uglify())
)
.pipe(plugins.concat(pkg.name + '.min.js'))
.pipe(gulp.dest(dest + '/js/'));
});
gulp.task('watch', ['build'], function () {
plugins.watch({glob: src + '/js/**/*.js'}, function () {
gulp.start('scripts');
});
});
EDIT: Solved, it was this issue. Globs starting with ./ (that was the value of src) seems not working ATM.
Edit: Apparently gulp.watch does work with new or deleted files now. It did not when the question was asked.
The rest of my answer still stands: gulp-watch is usually a better solution because it lets you perform specific actions only on the files that have been modified, while gulp.watch only lets you run complete tasks. For a project of a reasonable size, this will quickly become too slow to be useful.
You aren't missing anything. gulp.watch does not work with new or deleted files. It's a simple solution designed for simple projects.
To get file watching that can look for new files, use the gulp-watch plugin, which is much more powerful. Usage looks like this:
var watch = require('gulp-watch');
// in a task
watch({glob: <<glob or array of globs>> })
.pipe( << add per-file tasks here>> );
// if you'd rather rerun the whole task, you can do this:
watch({glob: <<glob or array of globs>>}, function() {
gulp.start( <<task name>> );
});
Personally, I recommend the first option. This allows for much faster, per-file processes. It works great during development with livereload as long as you aren't concatenating any files.
You can wrap up your streams either using my lazypipe library, or simply using a function and stream-combiner like this:
var combine = require('stream-combiner');
function scriptsPipeline() {
return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}
watch({glob: 'src/scripts/**/*.js' })
.pipe(scriptsPipeline());
UPDATE October 15, 2014
As pointed out by #pkyeck below, apparently the 1.0 release of gulp-watch changed the format slightly, so the above examples should now be:
var watch = require('gulp-watch');
// in a task
watch(<<glob or array of globs>>)
.pipe( << add per-file tasks here>> );
// if you'd rather rerun the whole task, you can do this:
watch(<<glob or array of globs>>, function() {
gulp.start( <<task name>> );
});
and
var combine = require('stream-combiner');
function scriptsPipeline() {
return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}
watch('src/scripts/**/*.js')
.pipe(scriptsPipeline());
Both gulp.watch() and require('gulp-watch')() will trigger for new/deleted files however not if you use absolute directories. In my tests I did not use "./" for relative directories BTW.
Both won't trigger if whole directories are deleted though.
var watch = require('gulp-watch');
//Wont work for new files until gaze is fixed if using absolute dirs. It won't trigger if whole directories are deleted though.
//gulp.watch(config.localDeploy.path + '/reports/**/*', function (event) {
//gulp.watch('src/app1/reports/**/*', function (event) {
// console.log('*************************** Event received in gulp.watch');
// console.log(event);
// gulp.start('localDeployApp');
});
//Won't work for new files until gaze is fixed if using absolute dirs. It won't trigger if whole directories are deleted though. See https://github.com/floatdrop/gulp-watch/issues/104
//watch(config.localDeploy.path + '/reports/**/*', function() {
watch('src/krfs-app/reports/**/*', function(event) {
console.log("watch triggered");
console.log(event);
gulp.start('localDeployApp');
//});
If src is an absolute path (starting with /), your code is not going to detect new or deleted files. However there's still a way:
Instead of:
gulp.watch(src + '/js/**/*.js', ['scripts']);
write:
gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);
and it will work!
Globs must have a separate base directory specified and that base location must not be specified in the glob itself.
If you have lib/*.js, it'll look under the current working dir which is process.cwd()
Gulp uses Gaze to watch files and in the Gulp API doc we see that we can pass Gaze specific options to the watch function: gulp.watch(glob[, opts], tasks)
Now in the Gaze doc we can find that the current working dir (glob base dir) is the cwd option.
Which leads us to alexk's answer:
gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);
I know this is an older question, but I thought I'd throw the solution I came up with. None of the gulp plugins I found would notify me of new or renamed files. So I ended up wrapping monocle in a convenience function.
Here's an example of how that function is used:
watch({
root: config.src.root,
match: [{
when: 'js/**',
then: gulpStart('js')
}, {
when: '+(scss|css)/**',
then: gulpStart('css')
}, {
when: '+(fonts|img)/**',
then: gulpStart('assets')
}, {
when: '*.+(html|ejs)',
then: gulpStart('html')
}]
});
I should note that gulpStart is also a convenience function I made.
And here is the actual watch module.
module.exports = function (options) {
var path = require('path'),
monocle = require('monocle'),
minimatch = require('minimatch');
var fullRoot = path.resolve(options.root);
function onFileChange (e) {
var relativePath = path.relative(fullRoot, e.fullPath);
options.match.some(function (match) {
var isMatch = minimatch(relativePath, match.when);
isMatch && match.then();
return isMatch;
});
}
monocle().watchDirectory({
root: options.root,
listener: onFileChange
});
};
Pretty simple, eh? The whole thing can be found over at my gulp starter kit: https://github.com/chrisdavies/gulp_starter_kit
It is important to note that it looks like gulp.watch only reports changed and deleted files on Windows but listens for new and deleted files by default on OSX:
https://github.com/gulpjs/gulp/issues/675
You should use 'gulp-watch' for new/renamed/deleted files instead of gulp.watch
var gulpwatch = require('gulp-watch');
var source = './assets',
destination = './dest';
gulp.task('copy-changed-assets', function() {
gulpwatch(source+'/**/*', function(obj){
gulp.src( obj.path, { "base": source})
.pipe(gulp.dest(destination));
});
});

Categories