how nicely solve selenium promise? protractor - javascript

I wrote the following code (page object pattern). Works correctly.
However, I don't like this, because I can't remove "then" from "pressHelpLink". Instead add the code in getElementByLink.
I would like to see ElementFinder Promise (instead of ManagedPromise) as result of getElementByLink("Help")
How nicely solve selenium promise?
var self = Page.create({
url: {value: ''},
// function:
getElementByLink: {
value: function (link) {
return element.all(by.repeater('items')).then(function (el) {
var my_array = el.map(function (el) {
return el.element(self.by.xpath('a'));
});
var element_array_finder = protractor.ElementArrayFinder.fromArray(my_array);
var element = element_array_finder.filter(function (el) {
return el.getText().then(function (text) {
return text === link;
})
});
return element;
}).then(function (element) {
world.expect(element.length).equal(1);
return element[0];
});
}
},
// elements:
HelpLink: {
get: function () {
return self.getElementByLink('Help');
}
},
// method:
pressHelpLink: {
value: function () {
return self.HelpLink.then(function (el) {
return el.click()
});
}
},
});

Why not use cssContainingText? Maybe something like...
// elements:
HelpLink: {
get: function () {
return element(by.cssContainingText('a', 'Help');
}
},
// method:
pressHelpLink: {
value: function () {
return self.HelpLink.click()
}
},

Related

JavaScript Proxy not working properly on ie11

I am building a simple validation library and I need to use Proxy because I want to accept custom validation rules as chain object. I build something and its works properly on modern browsers but not works on IE11, I tried with proxy-polyfill but its also not work properly. My proxy code is below.
function contextProxy(context) {
return new Proxy(context, {
get(obj, prop) {
if (prop in obj) {
return obj[prop];
}
const newContext = contextProxy(context._clone());
if (definedRules.hasOwnProperty(prop)) {
return newContext._takeRule(definedRules[prop]);
}
if (customRules.hasOwnProperty(prop)) {
return newContext._takeRule(customRules[prop]);
}
},
});
}
And I use that proxy;
function validationL() {
return contextProxy(new ValidationLContext());
}
And I have definedRules object;
const definedRules = {
numeric: function () {
return function (text) {
return /^\d+$/.test(text);
};
},
lowercase: function () {
return function (text) {
return /^([a-z]+\s*)+$/.test(text);
};
},
uppercase: function () {
return function (text) {
return /^([A-Z]+\s*)+$/.test(text);
};
},
minLength: function (min) {
return function (text) {
return text.length >= min;
};
},
maxLength: function (max) {
return function (text) {
return text.length <= max;
};
},
alphaNumeric: function () {
return function (text) {
return /^([a-zA-Z0-9 _-]+)$/i.test(text);
};
},
specialChars: function () {
return function (text) {
return !/^([a-zA-Z0-9 _-]+)$/i.test(text);
};
},
email: function () {
return function (text) {
return /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(
text
);
};
}
};
ValidationLContext.js
function ValidationLContext(isNot = false, chain = []) {
this.chain = chain;
this.isNot = isNot;
}
ValidationLContext.prototype.not = function () {
this.isNot = true;
return this;
};
ValidationLContext.prototype._takeRule = function (ruleFn) {
return (...args) => {
this.chain.push({ fn: ruleFn.apply(this, args), isNot: this.isNot });
if (this.isNot) {
this.isNot = false;
}
return this;
};
};
ValidationLContext.prototype.validate = function (text) {
return this.chain.every((c) =>
c.isNot ? !c.fn.call(this, text) : c.fn.call(this, text)
);
};
ValidationLContext.prototype._clone = function () {
return new ValidationLContext(this.isNot, this.chain);
};
export default ValidationLContext;
So library usage like this;
validationL().numeric().minLength(3).validate("123");
validationL().not().numeric().minLength(3).validate("123");
I can use like above on modern browsers like Chrome but when I try on IE11 only not() function works so only objects functions can work.
Can anyone help me with this.

Error in Returning Promise ,Getting Error as .then is not a function in Angular JS

I am getting the error as modifyProduct.then is not a function, I have read through some article and it says because I have not returned any promises, How I can achieve this, Can someone help me
Here I am calling modifyProduct inside executionFromCompany function and then I am using executionFromCompany inside the controller
var app = angular.module('myApp', ["chart.js"]);
app.factory('ProductsService', function($http) {
function getProduct() {
return $http.get('finalmsodetails.json').then(function(response) {
//console.log(response.data);
return response.data;
});
}
function modifyProduct() {
return getProduct().then(function(rawData) {
newtest = rawData;
//console.log('test', newtest.length);
var lightData = rawData.map(function(item) {
// use Object.assign to prevent mutating original object
var newItem = Object.assign({}, item);
var lightExecutions = item.executions.map(function(d) {
var ld = {
id: d.id,
orderId: d.orderId,
executionStatus: d.executionStatus,
executedOn: d.executedOn,
executedBy: d.executedBy,
executedByDisplay: d.executedByDisplay,
};
return ld;
});
newItem.executions = lightExecutions;
return newItem;
});
return lightData;
});
}
function executionFromCompany() {
return modifyProduct.then(function(lightData) {
executionByCompany = $filter('filter')(lightData.executions, function(inputs) {
if ((inputs.executedBy == 'a')) return inputs;
});
console.log(executionByCompany);
return executionByCompany;
});
}
return {
getProduct: getProduct,
modifyProduct: modifyProduct,
executionFromCompany: executionFromCompany
};
});
app.controller('MainCtrl', function($scope, ProductsService) {
ProductsService.executionFromCompany().then(function(value) {
console.log(value);
}, function(err) {
// Here will be if there was an error
})
});
modifyProduct is a function, not an object
change this
modifyProduct.then
to this
modifyProduct().then

How to make module pattern each function a promise?

I use Angular 1.5 and I made a factory function which is return a literal object like this:
return {
item: null,
get: function() {
return item;
},
create: function() {
if (this.get()){
this.remove();
}
this.item = {};
},
remove: function() {
var item = this.get();
if (item) {
this.item = null;
}
},
add: function() {
if (!this.get()) {
this.create();
}
this.item.newprop = 'value';
}
}
please do not ask me to change to function declaration. I want a object with his own actions(functions) and properties that is working on.
This pattern (like get inside create so on..) I didn't copied from anywhere. so I'm wonder if has a name? It is best way to deal with function-black boxes?
What is the best way to put Promise inside? so every function should return a promise
every then function I need to use bind???
todo like this:
create: function () {
this.get()
.then(remove)
.then(function () {
this.item = {}; // BUT this === undefined!!
});
}
You have to use bind in every then callback function:
var myModule = {
item: null,
get: function() {
return Promise.resolve(this.item);
},
create: function() {
return this.remove().then(function() {
this.item = {};
}.bind(this));
},
remove: function() {
return this.get().then(function(item) {
if (item) {
this.item = null;
}
}.bind(this));
},
add: function() {
return this.get().then(function(item) {
return item || this.create();
}.bind(this)).then(function() {
this.item.newprop = 'value';
}.bind(this));
}
}
// Let see it working:
myModule.create().then(function() {
return myModule.get();
}).then(function(item) {
console.log("After create: ", item);
return myModule.remove();
}).then(function() {
return myModule.get();
}).then(function(item) {
console.log("After remove: ", item);
return myModule.add();
}).then(function() {
return myModule.get();
}).then(function(item) {
console.log("After add: ", item);
});

Wrapping a ajax call

I have a code, that will make inside the select function an ajax request.
oSelect
.select(function (oEvent) {
return oEvent.getSource();
})
.select(function (oControl) {
let oItem = oControl.getSelectedItem();
let aKeys = oItem.getKey().split("/");
return {plant: aKeys[0], wc: aKeys[1]};
})
.select(function (oSelectedItem) {
let oModel = self.getModel("weightProtocolService");
let oPlantFilter = new Filter("Plant", sap.ui.model.FilterOperator.EQ, oSelectedItem.plant);
let oWcFilter = new Filter("WorkCenter", sap.ui.model.FilterOperator.EQ, oSelectedItem.wc);
oModel.read("/CostCenterCalendarSet", {
success: function (oData, oResponse) {
return Rx.Observable.from(oResponse.data.results);
},
error: function (oError) {
return Rx.Observable.throw(oError);
},
filters: [oPlantFilter, oWcFilter]
});
})
.subscribe(function (oKey) {
console.log(oKey);
},
function (err) {
jQuery.sap.log.fatal(err);
});
My problem here is, that it will subscribe first before the ajax response appears.
How can I solve the problem?
Assuming RxJS 5, replace the last select with a mergeMap and return a new observable:
.mergeMap(function (oSelectedItem) {
let oModel = self.getModel("weightProtocolService");
let oPlantFilter = new Filter("Plant", sap.ui.model.FilterOperator.EQ, oSelectedItem.plant);
let oWcFilter = new Filter("WorkCenter", sap.ui.model.FilterOperator.EQ, oSelectedItem.wc);
return new Observable(observer => {
oModel.read("/CostCenterCalendarSet", {
success: function (oData, oResponse) {
observer.next(oResponse.data.results);
},
error: function (oError) {
observer.error(oError);
},
filters: [oPlantFilter, oWcFilter]
});
});
})
If oModel.read returns a promise, then you can simply do the following:
....
return Observable.fromPromise(oModel.read("/CostCenterCalendarSet", {
filters: [oPlantFilter, oWcFilter]
})
);
If oModel.read does not return a promise, then you would need a custom observable:
....
return Observable.create(function(observer) {
oModel.read("/CostCenterCalendarSet", {
success: function (oData, oResponse) {
return observer.onNext(oResponse.data.results); // or just .next(..) in case you are using rxjs5+
},
error: function (oError) {
return observer.onError(oError); // or just .error(..) in case you are using rxjs5+
},
filters: [oPlantFilter, oWcFilter]
});
});

Getting data from Angular Promise

I am trying to get the response of MotorRestangular.all('Motors').getList() assigned to the variable a so I can use it later. The problem is that if I try to access a inside my return function it is undefined. I know that this isn't the correct way to accomplish what I need but I have no clue how do to it any other way.
myApp.factory('Configurations', function(Restangular, MotorRestangular) {
var a;
var Motors = function() {
MotorRestangular.all('Motors').getList().then(function(Motors){
a = Motors;
});
}
return {
config: function(){
Motors();
console.log(a);
var g = _.groupBy(Motors, 'configuration');
console.log(g);
var mapped = _.map(g, function(m) {
return {
id: m[0].configuration,
configuration: m[0].configuration,
sizes: _.map(m, function(a) {return a.sizeMm})
}});
}
}
});
Please don't use deferred objects. If what you had in your answer worked - then this will work too:
myApp.factory('Configurations', function (Restangular, MotorRestangular, $q) {
var getConfigurations = function () {
return MotorRestangular.all('Motors').getList().then(function (Motors) {
//Group by Cofig
var g = _.groupBy(Motors, 'configuration');
//Map values
return _.map(g, function (m) {
return {
id: m[0].configuration,
configuration: m[0].configuration,
sizes: _.map(m, function (a) {
return a.sizeMm
})
}
});
});
};
return {
config: getConfigurations()
}
});
Additionally if an error happens, the returned promise is not left pending forever.
I just solved this. What was happening is that config: was returning before a was filled. The code below works.
myApp.factory('Configurations', function(Restangular, MotorRestangular, $q) {
var getConfigurations = function(){
var deferred = $q.defer();
MotorRestangular.all('Motors').getList().then(function(Motors){
//Group by Cofig
var g = _.groupBy(Motors, 'configuration');
//Map values
var mapped = _.map(g, function(m) {
return {
id: m[0].configuration,
configuration: m[0].configuration,
sizes: _.map(m, function(a) {return a.sizeMm})
}});
deferred.resolve(mapped);
});
return deferred.promise;
};
return {
config: getConfigurations()
}
});

Categories