Making ElementArrayFinder from an array of ElementFinders - javascript

This is a follow-up question to Take elements while a condition evaluates to true (extending ElementArrayFinder) topic and #cvakiitho's answer in particular.
The problem:
After executing the following code:
var i = 0;
var el = element.all(by.css('ul li a'));
var tableItems = [];
(function loop() {
el.get(i).getText().then(function(text){
if(text){
tableItems.push(el.get(i));
i+=1;
loop();
}
});
}());
tableItems would contain an array of ElementFinder instances - or, to put it simple - an array of web elements.
The Question:
Is it possible to convert an array of ElementFinders to an ElementArrayFinder instance?
The Motivation:
The reason I want this is to have all of the convenient ElementArrayFinder functional utilities, like map(), each(), reduce() and to be able to call getText() on it producing a promise which would resolve into an array of element texts.

Constructor of ElementArrayFinder basically requires two main arguments: protractor instance and a function getWebElements, which should return a promise resolving to an array of Web Elements. As soon as every ElementFinder has a method to get it's Web Element called getWebElement, it is possible to create such a function.
var arrayOfElementFinders = [el1, el2, el3];
var getWebElements = function () {
// create array of WebElements from array of ElementFinders
var webElements = arrayOfElementFinders.map(function (ef) {
return ef.getWebElement();
});
// immediately resolve and return promise
return protractor.promise.fulfilled(webElements);
};
Now when all requirements are satisfied, it is possible to create a new instance of ElementArrayFinder:
var elArrayFinder = new protractor.ElementArrayFinder(protractor, getWebElements);
To make it easy to use I would add a static method to ElementArrayFinder constructor and include it somewhere before tests start:
protractor.ElementArrayFinder.fromArray = function (arrayOfElementFinders) {
var getWebElements = function () {
var webElements = arrayOfElementFinders.map(function (ef) {
return ef.getWebElement();
})
return protractor.promise.fulfilled(webElements);
};
return new protractor.ElementArrayFinder(protractor, getWebElements);
};
And use it in tests like:
var elArrayFinder = protractor.ElementArrayFinder.fromArray(arrayOfElementFinders);

Related

best way to handle callback initialization and functions that hold data between function calls

I have this code that is called in an ajax callback once the data is fetched:
function onFetchCallback(data) {
onFetchCallback.accumData ??= [];
onFetchCallback.timeLine ??= [];
onFetchCallback.tempValues1 ??= [];
onFetchCallback.tempValues2 ??= [];
onFetchCallback.char;
const hasNulls = data.includes(null);
if (!hasNulls) {
//push values into different arrays
} else {
//push the rest of no nulls if there is any...
}
}
I dont find this clean, bacause I am checking if the arrays that accumulate the data are initialized for every callback call. I think it woull be better to have the callback function initialized, so that the arrays are created, and then call the functions that will store the data in the arrays.
So I did:
function onFetchCallback() {
function init() {
onFetchCallback.accumData ??= [];
onFetchCallback.timeLine ??= [];
onFetchCallback.tempValues1 ??= [];
onFetchCallback.tempValues2 ??= [];
onFetchCallback.char;
}
function store(data) {
const hasNulls = data.includes(null);
if (!hasNulls) {
//push values into different arrays
} else {
//push the rest of no nulls if there is any...
}
}
onFetchCallback.init = init;
onFetchCallback.store = store;
}
So then when I need to use my callback I do:
onFetchCallback();
onFetchCallback.init();
myWhateverFunc(onFetchCallback.store);
Being myWhateverFunc the one calling the callback:
function myWhateverFunc(callback) {
$.ajax({
//whatever
})
.done(function (data) {
callback(data); //CALL
});
}
This works and I find it super javasScriptic so I do it all the time. Meaning the onFetchCallback initialization + other methods call to handle the function members. I do not know js in depth so I would like to know of there are any flaws with this pattern, or if there is any other better/cooler/javaScriptStylish way to do this.
The pattern you're using has a lot of resemblence with the function constructor which is more commonly used in JavaScript.
An implementation of your code in the function constructor pattern would like like this:
function FetchCallback() {
this.accumData = [];
this.timeLine = [];
this.tempValues1 = [];
this.tempValues2 = [];
this.char;
}
FetchCallback.prototype.store = function(data) {
const hasNulls = data.includes(null);
if (!hasNulls) {
// push values into different arrays
} else {
// push the rest of no nulls if there is any...
}
};
It enables you to create an object with properties and methods which are predefined. This removes the hassle of repetition when you need multiple instances of this same object.
To use the constructor you'll need to create a new instance with the new keyword. This will return an object with all the properties and methods set.
const fetchCallback = new FetchCallback();
// Note the .bind() method!
myWhateverFunc(fetchCallback.store.bind(fetchCallback));
Edit
You'll need to specifically set the value of this to the created instance that is stored in fetchCallback. You can do this with the bind() method. This methods explicitly tells that this should refer to a specific object.
The reason to do this is that whenever you pass the store method as the callback to the myWhateverFunc, it loses it's context with the FetchCallback function. You can read more about this in this post
The main difference between this and your code is that here the FetchCallback function will be unaltered, where your function is reassigned every time you call onFetchCallback() and onFetchCallback.init(). The constructor pattern will result in more predictable behavior, albeit that the this keyword has a learning curve.

javascript array value as variable name , how I get them from function

I'm using array value as variable and then call the function N method, how I get them in function N.
I really want to simulate the Javascript array method, I don't want to use parameters to achieve it. For example,
var p1 = [1,2,3,4,5]; p1.push(6);
function _Array() {
this._this = this;
}
_Array.prototype.show = function () {
this._this.forEach(function(item){alert(item);}) //how to print 1,2,3,4,5
};
var p1 = [1,2,3,4,5];
p1 = new _Array();
//p1._Array.call(p1); //not work
// new _Array().show.call(p1); //not work
// p1.show(); //not work
You have to store that in the instance
function N(arr) {
this._this = arr
}
N.prototype.say = function () {
this._this.forEach(function (item) {
console.log(item)
})
}
p1 = new N([1, 2, 3, 4, 5])
p1.say()
If you are insistent on wanting to write a method that takes the array by reference, you can modify the array prototype like so:
Array.prototype.show = function() {
this.forEach(item => alert(item));
}
However, it is a VERY BAD IDEA to modify the built in object prototypes, as this can cause conflicts with external libraries implementing their own "show" function that is being used differently, or cause incompatibilities with future versions of JS that implements this method.
It would be far more prudent in most situations to pass the array as a parameter, unless you have a very specific reason why you're not doing so. In that case, you should at least prefix the method with some sort of project identifier to minimize the chances of conflicts occurring.

meaning of push: function in javascript

What is the meaning of return { push:function ..... in below code snippet. When I googled I found that push() method adds new items to the end of an array, and returns the new length. So I am not sure what is push:. It seems to be some kind of syntax. Can someone please explain me.
function(notificationsArchive) {
var MAX_LEN = 10;
var notifications = [];
return {
push: function(notification) {
var notificationToArchive;
var newLen = notifications.unshift(notification);
//push method can rely on the closure scope now!
if (newLen > MAX_LEN) {
notificationToArchive = this.notifications.pop();
notificationsArchive.archive(notificationToArchive);
}
},
// other methods of the NotificationsService
};
The method push you are referencing has nothing to do with push with Arrays, it is a public method exposed by the module pattern. It only exposes methods and properties that the author of the code wants you to be able to call/set. It hides the variables MAX_LEN and notifications so they can not be changed from outside.
References on OO Module patterns:
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript
http://www.raymondcamden.com/2013/05/13/JavaScript-Design-Patterns-The-Revealing-Module-Pattern

Race Condition of Backbone.Collection fetch

I'm generating date list in a selected month where for every date, I will make a Backbone.Collection fetch.
Here is how I loop for every single date in a month
for (var i = 1; i <= numOfDays; i++) {
var d = i < 10 ? '0'+i:i;
var v = new View({
dt: this.year + this.month + (d),
param: this.array
});
this.$el.append(v.render().el);
}
As you can see above, each view (backbone.view) will represent a date and param object. Then I loop the param object using UnderscoreJs _.each method upon callin render()
_.each(this.param, this.reading, this);
and later it will initiate a new object of backbone.collection and perform fetch right away.
reading: function (value, key) {
var _this = this;
this.fetchData(new Data.Collection(), '/api/ + value.ipid').done(function(coll) {
var input = $('<input>').val(value.ipid).attr('data-inid', coll.first().get('in_id'));
_this.$el.append(input);
});
}
I separate a function this.fetchData like this
fetchData: function (obj, url) {
var deferred = $.Deferred(),
collection = obj;
collection.url = url;
var xhr = collection.fetch().done(function(data, textStatus, jqXHR) {
deferred.resolve(collection, data, textStatus, jqXHR);
}).fail(deferred.reject);
var promise = deferred.promise();
promise.abort = _.bind(xhr.abort, xhr);
return promise;
}
Unfortunately, for each view, the order of item inside param object will shift because it depends on race condition of backbone.ajax. Let see the items of param object
[{ipid: 44, measure: "cumec"},{ipid: 45, measure: "meter"},{ipid: 46, measure: "milimeter"}{ipid: 47, measure: "cumec"}]
The object items are in proper order. 44, 45, 46 and 47. But to get the listing as we pass it initially will change after fetch operation.
How do I tell backbonejs or underscorejs to wait every fetch operation to complete before start looping another item inside param object
I just want the loop (_.each) to wait for the fetch operation to complete before it continue looping
Hope somebody can enlighten the way to achieve this. Thank you and have a good day
If you create and append the DOM element at view creation time (i.e. inside the reading function), then reference from inside the done callback, the elements will be in the same order as inside your param array.
Side note: You can instantiate the collection with the url directly, and there is no need to wrap another jQuery promise around the promise returned by fetch.
I think the solution to your problem is using the iterator provided by Async.js library, so your code would look like:
async.eachSeries(this.param, _.bind(this.reading, this), yourCallbackWhenTheArrayIsFinished);
reading: function (value, callback) {
var _this = this;
this.fetchData(new Data.Collection(), '/api/ + value.ipid').done(function(coll) {
var input = $('<input>').val(value.ipid).attr('data-inid', coll.first().get('in_id'));
_this.$el.append(input);
callback();
});
}
So until callback() is called from the done handler, eachSeries doesn't process the next element

javascript - how to get object from array, and use its methods?

i have a problem using a class methods, after it was inserted into array. when i pull it back i can no longer use it methods.
and i know javascript does not have class, when i say class i mean object -or js equal.
suppose i have the following:
// a simple atomic class
function raw_msg(msg) {
this.msg = msg;
this.print = function () {
console.log(this.msg);
}
}
// and then i have this container for this "atomic" class
// which accept array of unknown object (known to me though..) = in_buffer
// i.e in_buffer is just an array of objects (one type of object)
function buffer(in_buffer) {
this.trans_buffer = null;
if (in_buffer!=null)
this.set_buffer (in_buffer);
this.set_buffer = function (buffer) {
this.trans_buffer = [];
var length = buffer.length,
row, new_raw_msg;
for(var x = 0; x < length; x++) {
row = buffer[x];
this.trans_buffer.push(new raw_msg(row));
}
console.log(this.trans_buffer);
}
this.use_some_raw_msg_method = function () {
var firstrow = this.trans_buffer[0];
firstrow.print(); // here is the problem!!!
//this here where i need help as it yield the error:
//Uncaught TypeError: Object #<Object> has no method 'print'
}
}
// this is how i use it, this code sits in a diffrent yet another class...
// this here im just building fake array
var buffer_in = [];
for (var x=0;x<10;x++)
buffer_in.push ("whatever" + x);
this.trans_buffer = new trans_helper(buffer_in);
this.trans_buffer.use_some_raw_msg_method (); // will yield the error as described
i hope this here, is clear, ask away if you need clarifications.
thanks for your help!
note to future readers - there is no problem in retrieving an object and using its methods.
You had several problems with your code.
Associative array does not have .push() method so the following line failed:
buffer_in.push ("whatever" + x);
To fix this just declare plain array:
var buffer_in = [];
You tried to create instance of function called trans_helper which does not exist. The name is buffer instead, so fix would be:
var trans_buffer = new buffer(buffer_in);
Last but not least, you tried to call function in the "class" when it still did not exist yet. JavaScript does not "compile" functions in advance, when inside function it will go line by line. So in this line in your code:
this.set_buffer (in_buffer);
There was still no function called "set_buffer" in your class. To fix this, place the function declaration above, on top.
Live test case.

Categories