I'm looking for any intellisense for protractor that will load required files.
For example I have this Page Object.
var example_page = function()
{
this.abcde = element(by.model('abc'));
};
module.exports = new example_page();
And this spec file
describe('angularjs homepage', function() {
var example_page = require('./example_po.js');
example_page.abcde // I want intellisense that finds this property.
});
So basically I want intellisense that finds page objects and finds every property and function in them to display for me, because I'm tired of going from file to file looking for properties...
Related
This might seem a little convoluted, so I apologize in advance if it does.
I'm attempting to create a build tool in Node.js for Chrome Extensions, so the final JS file has to be ES5 compliant.
I have separate JS files for each setting within the extension that export an object, the function within this object needs to be imported into the contentScript.js file and placed within it's own settings object.
I've put together a basic screenshot that shows how this should flow, but I'm not sure of how to approach this issue. I've considered some type of string interpolation within the contentScript which Node would then replace, but that seems more of a workaround than a solution.
Say we have a folder called settings, within those settings are two JavaScript files, each with a different name, type, and function, they'd look like this.
// settingName1.js
module.exports = {
name: 'Setting Name 1',
type: 'switch',
function: () => {
console.log('Setting 1 initialized');
}
}
Ideally, both of these files would have their respective functions imported into the contentScript, under a settings object, for example.
// contentScript.js
// Settings Functions Go Here
const settings = {
settingName1: function() {
console.log('Setting 1 initialized')
},
settingName2: function() {
console.log('Setting 2 initialized')
}
}
});
Basically cutting/copying the function from the source setting file itself, and pasting it under a function (named using the file's name) within the contentScript's settings object.
Here's an idea for the generated file:
// header on the file
const capturedExports = [];
// insert this prologue before each inserted file
(function() {
// =============================
// insert settingName1.js here
module.exports = {
name: 'Setting Name 1',
type: 'switch',
function: () => {
console.log('Setting 1 initialized');
}
}
// =============================
// insert this epilogue after each inserted file
})();
capturedExports.push(module.exports);
// insert this prologue before each inserted file
(function() {
// =============================
// insert settingName2.js here
module.exports = {
name: 'Setting Name 2',
type: 'switch',
function: () => {
console.log('Setting 2 initialized');
}
}
// =============================
// insert this epilogue after each inserted file
})();
capturedExports.push(module.exports);
// insert code that builds the settings object
const settings = {};
for (let exportItem of capturedExports) {
let name = exportItem.name.replace(/\s/, "");
name = name.slice(0, 1).toLowerCase() + name.slice(1);
settings[name] = exportItem.function;
}
You do the following steps to output a new file that is collection of all the settingNamex.js files.
Create the new file.
Write a header to it with the const capturedExports = []; line and the start of the IIFE.
For each settingNameX.js file, write that file to it.
Then write the close of the IIFE and the capturedExports.push(module.exports); after it. This will grab whatever the previous code assigned to module.exports and add it to the caputuredExports array.
Repeat this process for each settingNameX.js file.
Then, insert the code that builds the settings object from the capturedExports array.
Enclosing each inserted module in its own IIFE, gives it its own scope so it doesn't create symbol conflicts with the other inserted modules.
This makes the following assumptions.
It assumes that the code from each of the settingNameX.js files assigns the appropriate object to module.exports like your examples show. In the real world, you probably want to add a bunch of tests to see if the right thing is assigned to module.exports (proper defensive coding).
It assumes that the inserted modules are not assigning conflicting things to the global object.
It assumes your own module doesn't need the module.exports or can overwrite it at the end after the inserted modules have used it. If this assumption isn't OK, then you'd have to manually change module.exports = to something else that you define in your master module.
Im writing some Protractor testcases by using a pageobject. However im having trouble using elements directly from the Pageobject file, in the spec file.
Possibly im missing some JS nuance, since i havent written that much in JS.
i would like to use some elements defined in Pageobject like so:
var PageObject = function()
{
var loginUsername = element(by.id('loginusername'));
//other methods
};
module.exports = PageObject;
to be used in my spec file like so:
var PageObject = require('./pageObject.page.js');
describe( ' Login page ', function(){
it('type something in the usernamefield', function(){
var pageObject = new PageObject();
pageObject.get();
pageObject.loginUsername.sendKeys('Test');
});
});
Using methods (for example get but also others)works fine, but using elements directly causes some undefined errors.
Im trying to copy from something like this, where supposedly it should work.
https://ramonvictor.github.io/protractor/slides/#/33
Something you are missing,
bind your variable to object in pageObject.page.js, using this keyword
var PageObject = function()
{
this.loginUsername = element(by.id('loginusername'));
......
};
module.exports = PageObject;
In Spec first get the real application and do real work
it('type something in the usernamefield', function(){
browser.get('"https://....');
var pageObject = new PageObject();
pageObject.loginUsername.sendKeys('Test');
});
This works for me perfect,
I am new to javascript and Node.js and having problems testing some code I wrote recently. I am trying to test code written in a file called "compareCrowe.js" with "testCrowe.js" using Node.js.
Here are the contents of testCrowe.js:
var compareCrowe = required['./compareCrowe'];
console.log('begin test');
var connection = {Type:1, Label:"label", linkTo:null};
var table1 = {name:"table1", body:"description1", out:[connection]};
var table2 = {name:"table2", body:"description2", out:null};
connection.linkTo = table2;
var crowe = [table1, table2];
var result = compareCrowe.compareCrowesFoot(crowe, crowe);
console.log(result.feedback);
where the function "compareCrowesFoot" is defined in compareCrowe.js. From the console on an Ubuntu virtual machine I ran:
node compareCrowe.js testCrowe.js
however, nothing was printed. There were no errors or warnings or explanation of any kind. It didn't even print the "begin test" line I placed at the top of testCrowe.js. If I run the command:
node testCrowe.js
it complains that compareCrowesFoot is undefined. How can I test the contents of compareCrowe.js?
Welcome to the party of JS.
I'm not sure where you're learning from, but a few of the resources that have helped me and many others are superherojs.com, nodeschool.io, the MDN developer docs, Node.js API docs, and Youtube (seriously).
The basic idea of Node.js is that it operates with modules (chunks of reusable code), which is what NPM is made up of. These can then be included in other modules and used anywhere else in your application.
So for a basic example, say you had compareCrowe.js, to make it includable/reusable in another file, you could write something like:
module.exports = function() {
var compareCrowesFoot = function(crowe1, crowe2) { /* compare crows feet and return something here */ }
return { compareCrowesFoot: compareCrowesFoot };
// return an object with a property of whatever you want to access it as , and the value as your function name
// e.g. - you could return { compare: compareCrowesFoot };
}
Then in testCrowe.js you could require compareCrowe like this:
var compareCrowe = require("./compareCrowe");
/* your code here... */
var result = compareCrowe.compareCrowesFoot(crowe1, crowe2);
// if your returned object was { compare: compareCrowesFoot };
// this would be compareCrowe.compare(crowe1, crowe1);
And to run your tests, you could then run node testCrowe.js from the command line.
In your case it seems like you've got your syntax a little messed up. It should be more like:
var compareCrowe = require('./compareCrowe.js');
That would make any methods you've exported in compareCrowe.js, such as your compareCrowe.compareCrowesFoot function, available to testCrowe.js.
Then, in your terminal, you would run the following:
node testCrowe.js
And that should do the trick provided you don't have any further errors in your code.
My problem in short: I've created an object constructor in a js file (file name: generation.js) and I would like to create an object with that constructor in an other js file (file name: timeline.js). When I try to do this, I get the error message: Uncaught ReferenceError: generation (the object I want to create) is not defined.
In the HTML I have the js files in proper order: first the generation.js, then timeline.js. I also have the jQuery line in place.
If I try to use the constructor in the same file where the object definition is (in generation.js), it works properly. Then I copy + past that code to the new file and it doesn't work anymore.
The code:
Generation.JS:
This is where I defined the object constructor
$(document).ready(function(){
function generation() {
this.var1 = '';
.... // some variables
this.genFactory = function(agents) { // some function that creates even more
objects and other functions
};
};
});
Timeline.JS:
This is where I would like to create an instance of the generation object
$(document).ready(function(){
$('#start').click(function(){
console.log('ASD'); //just to check if the file works
gen1 = new generation(); //the error message points here
gen1.genFactory(3);
gen1.shuffle(individuals); //this is just an other method of the
generation object
});
});
Just to make sure that Timeline.js works: The console logs 'ASD'.
Looking forward for any suggestions!
You should expose your generation function to the public by assigning it to the window. A general approach in such cases is to have an app variable which contains all such object constructors and variables. In your Generation.js file you should use this code:
$(document).ready(function(){
window.app = window.app || {};
app.generation = function () {
this.var1 = '';
.... // some variables
this.genFactory = function(agents) { // some function that creates even more
objects and other functions
};
};
});
And in your Timeline.js file you will call your constructor as follows:
$(document).ready(function(){
window.app = window.app || {};
$('#start').click(function(){
console.log('ASD'); //just to check if the file works
gen1 = new app.generation(); //the error message points here
gen1.genFactory(3);
gen1.shuffle(individuals); //this is just an other method of the
generation object
});
})
Hey there!
I submitted my add on to the Mozilla add ons site and the editor got back and told me only one problem:
Your preliminary review request has
been approved.
Here are a few things that you need to
fix in your next version, specially if
you want to apply for full approval:
1) In order to prevent conflicts with
other add-ons that may be installed by
users, you need to wrap your "loose"
variables and functions within a
JavaScript object. You can see
examples on how to do this at
https://developer.mozilla.org/en/XUL_School/JavaScript_Object_Management.
So I went there and started reading up... but it's a lot of stuff that feels like gibberish to me and I confused myself (not hard to do at all!)
Using the first example on that page, can you kindly tell me how to modify my xul file?
Presently it looks like this:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<overlay id="quickfilterOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://quickfilter/content/quickfilter.js">
</script>
</overlay>
Thanks in advance!
R
EDIT:
Have uploaded the entire add on here: http://www.mediafire.com/?fff6bjzjy6n39nx
It is advisable to encapsulate your code in a namespace to avoid name collisions. Here's what I always do in my addons:
if(!org) var org={};
if(!org.janek) org.janek={};
org.janek.Addon = function() {
var pub = {};
var self = this;
pub.init = function() {
//
// Initialize addon, setup listeners, ...
//
}
...
self.thisIsAPrivateMethod = function(arg) {
// method that's only visible inside org.janek.Addon
}
return pub;
}();
// Init addin after window loaded
window.addEventListener("load",
org.janek.Addon.init,
false);
First, I create my own namespace org.janek, making sure it doesn't already exist. Then I add the object Addon which will contain the code for my addon.
Please note the "pub" and "self" objects. Every method that should be callable from other objects is added to the pub object. Private methods are added to self.
To be more specific, I would change the quickfilter_extension to the following code (I included the global prefManager object as an example):
var quickfilter_extension = function() {
var pub = {};
// interface for preferences
pub.prefManager = Components.classes["#mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
pub.init = function() {
//Initiating the progressListerner
gBrowser.addProgressListener(quickfilter_urlBarListener, Components.interfaces.nsIWebProgress.NOTIFY_STATE_DOCUMENT);
//Load the block list xml form server
quickfilter_quickfilter.request_xml();
},
pub.uninit = function() {
// Remove the progressListerner
gBrowser.removeProgressListener(quickfilter_urlBarListener);
}
return pub;
}();
Code that uses the prefManager object now needs to go through the quickfilter_extension object:
redirectToAnotherUrl:function()
{
[ ... omitted ...]
qucikFilterRedirectCount = quickfilter_extension.prefManager.getCharPref("extensions.quickfilter_redirect_count");
[ ... omitted ...]
}
The blog for Yahoo's javascript library YUI has a nice article about the pattern.
The reviewer is talking about your JS code, suggesting that you have global variables/functions.
For example:
var x = 1;
function foo() {}
Compare that with:
MyPluginName = {};
MyPluginName.x = 1;
MyPluginName.foo = function(){}