I need a way to take a screenshot during a test which uses QUnit and Karma to run inside PhantomJS 2.0.1
I've found this command:
window.top.callPhantom('render');
That doesn't throw any error but doesn't seem to work, or at least, I don't know where to look for the taken screenshot.
Any clue?
Found a way!
Solution
I had to edit my custom PhantomJS custom launcher adding an option:
PhantomJSCustom: {
base: 'PhantomJS',
options: {
onCallback: function(data){
if (data.type === "render") {
// this function will not have the scope of karma.conf.js so we must define any global variable inside it
if (window.renderId === undefined) { window.renderId = 0; }
page.render(data.fname || ("screenshot_" + (window.renderId++) + ".png"));
}
}
}
}
As you can see, we are defining the onCallback option, it will be injected inside the script launched by phantomjs.
The script, then, will contain:
page.onCallback = <our function>
Now, we are able to use callPhantom to ask PhantomJS to run the content of our onCallback function and use all the native PhantomJS methods.
Usage
Now, you can use in your tests the function:
window.top.callPhantom({type: 'render'});
To take a screenshot that will be saved in the root directory of your application.
Additionally, if you define the fname you'll be able to define a custom path and file name to your screenshot.
window.top.callPhantom({type: 'render', fname: '/tmp/myscreen.png'});
Pack all together for ease of use
I've created an handy function to use inside my tests. The onCallback function is reduced to the minimum necessary, in this way all the logic is managed inside my test environment:
karma.conf.js
PhantomJSCustom: {
base: 'PhantomJS',
options: {
onCallback: function(data){
if (data.type === 'render' && data.fname !== undefined) {
page.render(data.fname);
}
}
}
}
helper
// With this function you can take screenshots in PhantomJS!
// by default, screenshots will be saved in .tmp/screenshots/ folder with a progressive name (n.png)
var renderId = 0;
function takeScreenshot(file) {
// check if we are in PhantomJS
if (window.top.callPhantom === undefined) return;
var options = {type: 'render'};
// if the file argument is defined, we'll save the file in the path defined eg: `fname: '/tmp/myscreen.png'
// otherwise we'll save it in the default directory with a progressive name
options.fname = file || '.tmp/screenshots/' + (renderId++) + '.png';
// this calls the onCallback function of PhantomJS, the type: 'render' will trigger the screenshot script
window.top.callPhantom(options);
}
Credits
I got this script from this answer, adapted it and found by myself where to put it to make it work with karma.
My Karma entry for a customized phantomjs that takes snapshots looked like this:
module.exports = function (config) {
config.set({
..
browsers: [ 'PhantomJSCustom'],
customLaunchers: {
'PhantomJSCustom': {
base: 'PhantomJS',
options: {
onCallback: function(data){
if (data.type === "render") {
// this function will not have the scope of karma.conf.js so we must define any global variable inside it
if (window.renderId === undefined) { window.renderId = 0; }
page.render(data.fname || ("screenshot_" + (window.renderId++) + ".png"));
}
}
}
}
},
phantomjsLauncher: {
// Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing // phantom)
exitOnResourceError: true
},
..
})
Related
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
Lets say we are using setInterval inside of a hapi plugin, like so:
// index.js
internals = {
storage: {},
problemFunc: () => {
setInterval((storage) => {
storage.forEach((problem) => {
problem.foo = 'bar';
});
}, 500);
}
};
module.exports.register = (server, options, next) => {
server.on('start', () => { // called when the server starts
internals.storage.problem1 = {};
internals.storage.problem2 = {};
internals.storage.problem3 = {};
internals.problemFunc(internals.storage);
});
}
In our tests for this server, we may start up and stop the server many times to test different aspects of the server. Sometimes, we will get an error like cannot set property 'foo' of undefined. This is because the server gets shutdown right before that async code runs, and internals.storage.problem gets removed right along with the server stop.
This makes total sense, and I don't have a problem with that. I'd really like to know what would be some good ways to make sure my tests work 100% of the time rather than 90% of the time.
We could do:
problemFunc: () => {
setInterval((storage) => {
storage.forEach((problem) => {
if (problem !== undefined) { // check if deleted
problem.foo = 'bar';
}
});
}, 500);
}
or:
problemFunc: () => {
setInterval((storage = {}) => { // default assignment
storage.forEach((problem) => {
problem.foo = 'bar';
});
}, 500);
}
But I would rather not add conditionals to my code just so that my tests pass. Also, this can cause issues with keeping 100% code coverage because then sometimes that conditional will get run and sometimes it wont. What would be a better way to go about this?
It's absolutely normal to have slight differences in set-up and configuration when running code in a test environment.
A simple approach is to let the application know the current environment, so it can obtain the appropriate configuration and correctly set-up the service. Common environments are testing, development, staging and production.
Simple example, using an environment variable:
// env.js
module.exports.getName = function() {
return process.env['ENV'] || 'development'
}
// main.js
if (env.getName() !== 'testing') {
scheduleBackgroundTasks()
}
Then run your tests passing the ENV variable, or tell your test runner to do it:
ENV=testing npm test
My goal is to fake out getting some requirejs code working via babel. I've found that if I add the following: if (typeof define !== "function") { var define = require("amdefine")(module); } to the top of every file while running in nodejs things seem to work out.
Here is some code I wrote, which I thought would work or nearly work:
function injectDefine(babel) {
var header = 'if (typeof define !== "function") { var define = require("amdefine")(module); }';
return new babel.Plugin('amdefine', {
visitor: {
Program: {
enter: function(path, file) {
path.unshiftContainer(
'body',
babel.types.expressionStatement(
babel.types.stringLiteral(header)
)
);
},
},
},
});
}
require('babel-core/register')({
stage: 0,
plugins: [{transformer: injectDefine}],
});
require('../components/button');
The components/button file is just me trying to test that some file can load.
Other notes: I'm using babel 5, and I can't upgrade right now. I also can't use a .babelrc very easily right now.
Tip 1: the environment variable BABEL_DISABLE_CACHE=1 is needed if you are doing heavy testing of plugins. If you had a script that you ran like npm run unit you may instead want to run like BABEL_DISABLE_CACHE=1 npm run unit while testing your plugin.
Tip 2: babel.parse will give you a full program out of some source. The easiest thing you could do is babel.parse(header).program.body[0].
The following ended up working:
function injectDefine(babel) {
var header = 'if (typeof define !== "function") { var define = require("amdefine")(module); }';
return new babel.Plugin('amdefine', {
visitor: {
Program: {
enter: function(node, parent) {
node.body.unshift(
babel.parse(header).program.body[0]
);
},
},
},
});
}
require('babel-core/register')({
cache: false,
stage: 0,
plugins: [injectDefine],
});
At this stage, a cleaner solution can be to use #babel/traverse and #babel/types.
Let's suppose you want to append a comment to the top of every file, you could use some code like the following:
// Import the required modules
import * as t from "#babel/types";
import traverse from "#babel/traverse";
// Get your ast (for this, you can use #babel/parser)
// Traverse your ast
traverse(ast, {
// When the current node is the Program node (so the main node)
Program(path) {
// Insert at the beginning a string "Hello World" --> not valid JS code
path.unshiftContainer('body', t.stringLiteral("Hello World"));
}
});
I'm looking to create multiple HTML files from a single Jade template using Grunt.
Here's what I'm doing:
Grabbing the JSON data from an external file
Looping through that object
Creating a grunt config task for each value in that JSON object
Here's my code:
neighborhoods = grunt.file.readJSON('data/neighborhoods.json');
for(var i = 0; i < Object.keys(neighborhoods).length; i++) {
var neighborhood = {
"title" : Object.keys(neighborhoods)[i],
"data" : neighborhoods[Object.keys(neighborhoods)[i]]
};
grunt.config(['jade', neighborhood.title], {
options: {
data: function() {
return {
neighborhoods: neighborhood.data
}
}
},
files: {
"build/neighborhoods/<%= neighborhood.title %>.html": "layouts/neighborhood.jade"
}
});
}
The problem that I'm running in to is this
Running "jade:Art Museum" (jade) task
Warning: An error occurred while processing a template (Cannot read property 'title' of undefined). Use --force to continue.
If I make the filename a string, it runs fine but obviously creates all the files with the same filename, thus only creating one file. I need to make that filename dynamic.
I found the solution here:
Use Global Variable to Set Build Output Path in Grunt
The issue is that the module exports before those global variables get set, so they are all undefined in subsequent tasks defined within the initConfig() task.
This did the trick!
var neighborhoods = grunt.file.readJSON('data/neighborhoods.json');
for(var i = 0; i < Object.keys(neighborhoods).length; i++) {
var neighborhood = {
"title" : Object.keys(neighborhoods)[i],
"data" : neighborhoods[Object.keys(neighborhoods)[i]]
};
/*
* DEFINE VALUE AS GRUNT OPTION
*/
grunt.option('neighborhood_title', neighborhood.title);
grunt.config(['jade', neighborhood.title], {
options: {
data: function() {
return {
neighborhoods: neighborhood.data,
neighborhood_title: neighborhood.title
}
}
},
/*
* OUTPUT GRUNT OPTION AS FILENAME
*/
files: {
"build/neighborhoods/<%= grunt.option('neighborhood_title') %>.html": "layouts/neighborhood.jade"
}
});
}
This results in the desired output:
Running "jade:East Passyunk" (jade) task
File build/neighborhoods/Society Hill.html created.
Running "jade:Fishtown" (jade) task
File build/neighborhoods/Society Hill.html created.
Running "jade:Graduate Hospital" (jade) task
File build/neighborhoods/Society Hill.html created.
Running "jade:Midtown Village" (jade) task
File build/neighborhoods/Society Hill.html created.
Running "jade:Northern Liberties" (jade) task
File build/neighborhoods/Society Hill.html created.
...
I know this is an old post but I kept coming back here whilst trying to solve a similar problem. I wanted to output multiple html files from a single jade template file using a for-loop.
The two problems I came across was setting the output filename (a javascript object literal KEY) and making sure inline javascript functions are run immediately so that the loop variables are available.
Here is my full source code with comments. I hope this is of use to anyone else stumbling across this post.
Gruntfile.js:
module.exports = function(grunt) {
// Create basic grunt config (e.g. watch files)
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
grunt: { files: ['Gruntfile.js'] },
jade: {
files: 'src/*.jade',
tasks: ['jade']
}
}
});
// Load json to populate jade templates and build loop
var json = grunt.file.readJSON('test.json');
for(var i = 0; i < json.length; i++) {
var obj = json[i];
// For each json item create a new jade task with a custom 'target' name.
// Because a custom target is provided don't nest options/data/file parameters
// in another target like 'compile' as grunt wont't be able to find them
// Make sure that functions are called using immediate invocation or the variables will be lost
// http://stackoverflow.com/questions/939386/immediate-function-invocation-syntax
grunt.config(['jade', obj.filename], {
options: {
// Pass data to the jade template
data: (function(dest, src) {
return {
myJadeName: obj.myname,
from: src,
to: dest
};
}()) // <-- n.b. using() for immediate invocation
},
// Add files using custom function
files: (function() {
var files = {};
files['build/' + obj.filename + '.html'] = 'src/index.jade';
return files;
}()) // <-- n.b. using () for immediate invocation
});
}
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-watch');
// Register all the jade tasks using top level 'jade' task
// You can also run subtasks using the target name e.g. 'jade:cats'
grunt.registerTask('default', ['jade', 'watch']);
};
src/index.jade:
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 #{myJadeName} - node template engine
#container.col
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
test.json:
[{
"id" : "1",
"filename" : "cats",
"tid" : "2016-01-01 23:35",
"myname": "Cat Lady"
},
{
"id" : "2",
"filename" : "dogs",
"tid" : "2016-01-01 23:45",
"myname": "Dog Man"
}]
After running 'grunt' the output should be:
build/cats.html
build/dogs.html
Came across a similar requirement for a project I'm working on but couldn't get this to work. I kept getting only one file generated since the grunt option had same value for all tasks (the last value). So I ended up using <%= grunt.task.current.target %> for the file name which in your case would be same as neighborhood.title.
The project is: Backbone + Require + Underscore + Grunt + Grunt-Contrib-Jasmine + Grunt-Lib-PhantomJS
So two serious problems I've been battling. I know that phantomjs is running properly etc. as I get tons of runtime errors if I include my app src files. I've even ordered the deps properly such that Backbone does not barf with _ not being defined etc.
1) When I include my application src, I get the error can't find variable: define for all my source files. I've tried putting requirements into src[] isntead of vendor[] and even tried loading a RequireJSConfig.js that has the deps in it.
2) Here's the cruncher: I'm pretty certain I'm pointing at my spec files properly. If I just point to one test, it still says No Specs Executed. Is there a configuration error? In my case, I just point at my UserModelUnitTest.js, which is very simple. It does not execute. I'm going absolutely nuts!
The Spec (UserModelUnitTest.js):
describe('User Model Unit Tests', function() {
var USER_MODEL,
USER_CLASS,
JSON_OBJ;
beforeEach(function() {
USER_CLASS = testr('models/user/User', {});
});
afterEach(function() {
USER_MODEL = null;
USER_CLASS = null;
JSON_OBJ = null;
});
describe('Given a json object', function() {
it('should create a valid User', function() {
JSON_OBJ = {"databaseId": 123456,"loginName": "god","firstName": "Jesus","lastName": "Christ","phone": "666-666-6666","email": "satan#hell.org","isoCountryCode": "US","languageCode": "en","roles" : ["SALES_REP"]};
USER_MODEL = new USER_CLASS(JSON_OBJ, { parse: true });
expect(USER_MODEL).not.toBe(null);
});
// etc...
});
})
Here's my dir structure
/project
- src
- main
+ test
+ js
+unit
UserModelUnitTest.js
Here's my Gruntfile / Jasmine config
jasmine: {
test:{
vendor:[
'src/main/resources/js/lib-clean/jquery-2.1.0.js',
'src/main/resources/js/lib-clean/require-2.1.1.full.js',
'src/main/resources/js/lib-clean/underscore-1.5.2.min.js',
'src/main/resources/js/lib-clean/backbone-1.1.2.min.js'
],
src : [
// these all error like crazy. Can't find variable 'define' etc.
// 'src/main/**/*.js',
// 'src/main/**/**/*.js',
//'src/test/RequireJSConfig.js'
],
helpers : [
'src/test/js/helpers/dependencyHelper.js',
'src/test/js/helpers/errorHelper.js',
'src/test/js/helpers/requesetHelper.js',
'src/test/lib/testr.js',
// jasmine.js + jasmine-html.js etc
'src/test/lib/*.js',
// stubs
'src/test/js/stubs/*.js'
],
specs : [
'src/test/js/unit/UserModelUnitTest.js'
],
//specs : 'src/test/js/unit-headless.html',
timeout : 10000,
phantomjs : {
'ignore-ssl-errors' : true
}
}
},
I just had the same problem. You need to define vendor, specs, helpers within the options option.
jasmine: {
src: 'path/to/src',
options: {
vendor: 'path/to/vendor',
specs: 'path/to/specs',
helpers: 'path/to/specs'
// etc.
}
}
sometimes happen because: you did not created the spec folder and the spec file, also when you create the spec file you need create the test inside or will not run.