I want to do protractor testing in my AngularJS application where my need is to find the count of checked checkboxes. There are about 44 checkboxes in a page out of which only 4 are checked.I wrote below code where the console prints
true,false,false,true,false,false,true,false,false,true; etc.
How to find how many true values are there?
var rows = element.all(by.model("accordoptionGroup[optgroup.id][objopt.id].value"));
rows.isSelected().then(function(isSelect){
console.log(isSelect);
});
There is a better way - use filter():
var rows = element.all(by.model("accordoptionGroup[optgroup.id][objopt.id].value"));
var count = rows.filter(function (row) {
return row.isSelected().then(function (isSelected) {
return isSelected;
});
}).count();
expect(count).toEqual(4);
You could do something like this -
var rows = element.all(by.model("accordoptionGroup[optgroup.id][objopt.id].value"));
rows.isSelected().then(function(selected){
count =0;
for(i=0;i<rows.length<i++) {
if(selected) {
count++;
}
}
expect(count).toEqual(4); // to check 4 checkboxes are checked
});
Then you could try giving a for loop and iterating it if selected it returns true and you can get the count!
Related
I am using Ag grid's row grouping feature and for some of the columns I have predefined aggFunc.
What I am trying to achieve is that once the grid is loaded with all the data, I want to hide some of the aggregate values (on row as well as leaf children) for some columns based on some conditions.
I checked AgGrid's API docs and tried below but unfortunately nothing works for me.
onButtonClick() {
this.gridApi.forEachNode((node, index) => {
if (node.field === 'xyz') {
// node.aggFunc.abc = 0; // not working
// node.aggData.abc = null; // not working
// node.setDataValue('abc', null); // not working
}
}
}
Any help would be appreciated.
Thanks
try this
columnApi.setColumnAggFunc(colKey, () => '')
I would like to obtain menu-ui items that user is able to click.
Unfortunately, isEnabled method returns always true for all of my items.
That's why I try another approach. I noticed that disabled ones, always have 'ui-state-disabled' class. As a consequence, I'm able to get all disabled items, using following function:
function getDisabledMenuItems() {
return getCustomGrid().all(by.className('menu-ui')).all(by.className('ui-state-disabled')).all(by.className('menu-item-text'));
}
and then all menu items using following one:
function getAllMenuItems() {
return getCustomGrid().all(by.className('menu-ui')).all(by.className('menu-item-text'));
}
Now I would like to exclude items returned by getDisabledMenuItems from items returned by getAllMenuItems.
Question
What is the easiest way to exclude ElementArrayFinder items that exists in another ElementArrayFinder?
I'm trying to do that by means of filter method as follows:
const disabledText = getDisabledMenuItems().getText();
const allItems = getAllMenuItems();
allItems.filter(function(elem, index) {
return elem.getText().then(function(text) {
return disabledText.indexOf(text) < 0 ;
});
});
but my code does not work (indexOf does not exists on type Promise<string>).
I also wonder what is the easiest way to do that.
Because getDisabledMenuItems().getText() return a promise, you have to consume its eventual value in then():
const disabledText = getDisabledMenuItems().getText();
const allItems = getAllMenuItems();
const enableItems = allItems.filter(function(elem, index) {
return elem.getText().then(function(text) {
return disabledText.then(function(txts){
return txts.includes(text) === false;
// or use return txts.indexOf(text) < 0;
});
});
});
I've a popover component and I added a multi-select list inside of it. I would like to set checked property to true for all items in case of the first item of list is selected. But selectionChange event works for every item's selection event. So, index value of the for loop always starts with zero. What should I do in this situation? Thanks for your suggestions.
Here is my part of a code and screenshot of image;
image url
new sap.m.List('statusTypesList', {
mode: 'MultiSelect',
selectedKeys: " ,1,2,3",
includeItemInSelection: true,
selectionChange: function(oEvent) {
var keyValues = "";
var itemArray = oEvent.oSource.getItems();
if(itemArray[0].getSelected()==true){
for (var i = 0; i < itemArray.length; i++) {
oEvent.oSource.setSelectedItem(itemArray[i], true, true);
}
}
}
})
Check if the item that fired the event is the first one in your list. Something like this:
function(oEvent) {
var changedItem = oEvent.getParameter('listItem');
if(changedItem isTheFirstItem){
//Where 'isTheFirstItem' is the condition you define to identify your first item
var keyValues = "";
var itemArray = oEvent.getSource().getItems();
if(itemArray[0].getSelected()==true){
for (var i = 0; i < itemArray.length; i++) {
oEvent.getSource().setSelectedItem(itemArray[i], true, true);
}
}
}
Define the condition you want in the if(changedItem isTheFirstItem) statement
Try this condition, maybe it works: if(changedItem === oEvent.getSource().getItems()[0])
If not, just build your own condition to check if it is the first one or not
NOTE: User getSource() to get the source from the event. It is always better than accessing the object directly
I'm using wbraganca dynamic-form. The problem I'am facing is that datepicker works fine for the first row of dynamic form. But on rest of the rows its not working. I have tried almost every possible solution for it but none of them worked for me.
The first alteration I did to code is by making changes in yii2-dynamic-form.js by replacing the code below
// "kartik-v/yii2-widget-datepicker"
var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datepicker]');
var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datepicker]');
if ($hasDatepicker.length > 0) {
$hasDatepicker.each(function() {
$(this).parent().removeData().datepicker('remove');
$(this).parent().datepicker(eval($(this).attr('data-krajee-datepicker')));
});
}
with this
// "kartik-v/yii2-widget-datepicker"
var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-kvdatepicker]');
if ($hasDatepicker.length > 0) {
$hasDatepicker.each(function() {
$(this).parent().removeData().kvDatepicker('remove');
$(this).parent().kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
});
}
and now it is showing an error in the console as below
Uncaught TypeError: Cannot read property 'deprecated' of undefined
at Datepicker.remove (bootstrap-datepicker.js:33)
at HTMLDivElement.<anonymous> (bootstrap-datepicker.js:1649)
at Function.each (jquery.js:365)
at jQuery.fn.init.each (jquery.js:137)
at jQuery.fn.init.datepickerPlugin [as kvDatepicker] (bootstrap-datepicker.js:1626)
at HTMLInputElement.<anonymous> (yii2-dynamic-form.js:316)
at Function.each (jquery.js:365)
at jQuery.fn.init.each (jquery.js:137)
at _restoreSpecialJs (yii2-dynamic-form.js:315)
at _addItem (yii2-dynamic-form.js:116)
Thanks in advance.
Actually, I was struggling for hours and finally came up with a simple solution, sometimes it is better to figure up a solution from your experience rather than searching for hours.
I did same as you did but then I made this simple modification
// "kartik-v/yii2-widget-datepicker"
var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-kvdatepicker]');
if ($hasDatepicker.length > 0) {
$hasDatepicker.each(function () {
// $(this).parent().removeData().kvDatepicker('remove');
// here is the solution
$(this).parent().find('.krajee-datepicker').kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
});
}
Jus catch the input that has .krajee-datepicker class and initialize it with KvDatepicker loading to it the options of the first datepicker element you have created.
It worked for me. tell me if it works
I was working on this problem on many embeded dynamic forms and the problem was solved in next way:
1.-Go to folder frontend/web/assets or backend/web/assets and delete all files there (cache files) except .gitignore if you're using git
2.-Go to vendor/wbraganca/yii2-dynamicform.js and comment paragraph block
// "kartik-v/yii2-widget-datepicker"
/*
var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-datepicker]');
if ($hasDatepicker.length > 0) {
$hasDatepicker.each(function() {
$(this).parent().removeData().datepicker('remove');
$(this).parent().datepicker(eval($(this).attr('data-krajee-datepicker')));
});
}
*/
3.-Paste next code there
// "kartik-v/yii2-widget-datepicker"
var $hasDatepicker = $(widgetOptionsRoot.widgetItem).find('[data-krajee-kvdatepicker]');
if ($hasDatepicker.length > 0) {
$hasDatepicker.each(function () {
console.log("Clonado2....");
$(this).parent().removeData().off();
//$(this).parent().removeData().kvDatepicker('remove');
$(this).parent().kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
//$(this).parent().find('.krajee-datepicker').kvDatepicker(eval($(this).attr('data-krajee-kvdatepicker')));
});
}
4.-Enjoy ;D
I'm trying to toggle two functions. When user clicks the pause button, the input fields are disabled, the label is text is changed to grey and the button changes to a different image. I thought I could use .toggle(), but I can't get the two functions to work either -- only the first one function runs (pauseEmailChannel();), not both on toggle click. I found the even/odd clicks detection script here on SO, but that is not "toggling" these two functions on the click event. My code may be ugly code, but I'm still learning and wanted to show how I am thinking -- right or wrong. At any rate, can someone give me a solution to how to do this? I didn't think it would be too difficult but I'm stuck. Thanks.
HTML
jQuery
$(".btn_pause").click(function(){
var count = 0;
count++;
//even odd click detect
var isEven = function(num) {
return (num % 2 === 0) ? true : false;
};
// on odd clicks do this
if (isEven(count) === false) {
pauseEmailChannel();
}
// on even clicks do this
else if (isEven(count) === true) {
restoreEmailChannel();
}
});
// when user clicks pause button - gray out/disable
function pauseEmailChannel(){
$("#channel-email").css("color", "#b1b1b1");
$("#notify-via-email").attr("disabled", true);
$("#pause-email").removeClass("btn_pause").addClass("btn_disable-pause");
}
// when user clicks cancel button - restore default
function restoreEmailChannel(){
$("#channel-email").css("color", "#000000");
$("#notify-email").attr("disabled", false);
$("#pause-email").removeClass("disable-pause").addClass("btn_pause");
$("input[value='email']").removeClass("btn_disable-remove").addClass("btn_remove");
}
try this code. It should work fine, except that I could make a mistake when it is even and when odd, but that should be easy to fix.
$(".btn_pause").click(function(){
var oddClick = $(this).data("oddClick");
$(this).data("oddClick", !oddClick);
if(oddClick) {
pauseEmailChannel();
}
else {
restoreEmailChannel();
}
});
The count variable is initialized and set to 0 every time .btn_pause is clicked. You need to move the variable to a higher scope.
For example,
$(".btn_pause").each(function(){
var count = 0;
$(this).click(function(){
count++;
...
});
});
In this way count is initialized only once and it is accessible in the click event handler.
As an alternative way you can also use:
$(".btn_pause").each(function(){
var count = 0;
$(this).click(function(){
[restoreEmailChannel, pauseEmailChannel][count = 1 - count]();
});
});
If the previous construct was too abstract, a more verbose one will look like this:
$(".btn_pause").each(function(){
/* Current element in the array to be executed */
var count = 0;
/* An array with references to Functions */
var fn = [pauseEmailChannel, restoreEmailChannel];
$(this).click(function(){
/* Get Function from the array and execute it */
fn[count]();
/* Calculate next array element to be executed.
* Notice this expression will make "count" loop between the values 0 and 1.
*/
count = 1 - count;
});
});