AngularJS: Sort on a multi select - angularjs

I have a filter working on the multi select but when I try what I saw on the following link it doesn't work:
https://docs.angularjs.org/api/ng/filter/orderBy
How do I get the sort to change by clicking on the glyphicon?
<div>
<label>Available</label>
<label style="float: right; position: relative; left: 141px;">Assigned</label><br />
<input type="text" ng-model="filterText" style="width: 50px; position: relative; left:-36px;"/>
<button style="position: relative; left: -30px;">Filter</button>
<div style="position: relative; top: 0px; left: 311px; float: left;">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</div>
<br />
<select id="available-groups" multiple>
<option value="{{group._id}}" ng-repeat="group in rbacGroups | filter:filterText">{{group.name}}</option>
</select>
<button id="addGroup" style="position: relative; top: -72px; left: 21px;">Add »</button><br />
<button id="removeGroup" style="position: relative; top: -72px; left: 375px;">« Remove</button>
<br />
<select id="assigned-groups" ng-model="cgroups" multiple required="required">
</select>
</div>

Change
ng-repeat="group in rbacGroups | filter:filterText"
to
ng-repeat="group in rbacGroups | filter:filterText | orderBy:'name':reverse"
and also change
<a href="" ng-click="reverse=!reverse;order('name', reverse)">...
<a href="" ng-click="reverse=!reverse;order('name', reverse)">...
to
<a href="" ng-click="reverse=false">...
<a href="" ng-click="reverse=true">...

Related

React-select cypress

i want to test a combobox (react-select) with cypress, i got this error, can anyone help me in that? or is there another way to choose an option from the react-select combobox and test it?
Timed out retrying after 4000ms: expected '<input#Land>' to have value 'Angola', but the value was ''
<div class=" css-1kszcc2-container">
<span id="react-select-2-live-region" class="css-1f43avz-a11yText-A11yText"></span>
<span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-1f43avz-a11yText-A11yText"></span>
<div class=" css-1oa51g-control">
<div class=" css-k02lgv-ValueContainer">
<div class=" css-1cgt3sd-placeholder">Land</div>
<div class=" css-aic2ap-singleValue">Angola</div>
<div class=" css-6j8wv5-Input" data-value="">
<input class="" autocapitalize="none" autocomplete="off" autocorrect="off" id="Land" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-controls="react-select-2-listbox" aria-owns="react-select-2-listbox" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 0; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;">
</div>
</div>
</div>
</div>
onSubmitFormData.submitFirstFormData('Angola')
submitFirstFormData(land){
cy.get("[id^=Land]").type(land+"{enter}{enter}").should('have.value',land);
}
Reselect the input for the assertion. If there's a slow(ish) event handler, the way you have .should() chained off .type() my not be retrying the .get().
cy.get("[id^=Land]").type(land+"{enter}{enter}")
cy.get("[id^=Land]").should('have.value',land)

I want to select my <input> when pressing anywhere on the div that contains it

This is my HTML:
<div ng-repeat="product in productsCurrency"
value="{{product}}"
style="margin-bottom: 0px;">
<div style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;"
class="row"
ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''),
'beacon_padding_bottom': $root.isUsingDevice}">
<input checked
id="{{product.id}}"
type="radio"
name="shipping_method"
value="{{product.id}}"
ng-model="$root.shippingMethod"
style="align-self: center;">
<label for="{{product.id}}"
ng-class="{'beacon_margin_left': $root.isUsingDevice === false}"
style="margin-top: 28px; margin-left: 5px;">
</label>
<span style="margin-left: 10px; width: calc(100% - 120px);margin-bottom: 20px;">
<p class="beacon_text beacon_text_title beacon_shipping_title" style="font-weight: 400 !important;">
{{ product.name}}
</p>
<p class="beacon_text beacon_shipping_subtitle">
{{ product.description}}
</p>
</span>
<span class="beacon_text beacon_sum beacon_shipping_sum"
ng-class="{'beacon_shipping_sum_selected': $root.shippingMethod == (product.id + ''),
'beacon_sum_mobile': $root.isUsingDevice}">
{{unit.currencySymbol(product.currency) + roundPrice(product.price,1)}}
</span>
</div>
<div style="width: 100%; height: 1px; background: #979797;"
ng-class="{'beacon_remove_margin_divider': $root.isUsingDevice === false}">
</div>
</div>
I am using AngularJS and it goes through a list of products, and creates a div (view) for all of them.
Now I want the <input> that I have included in the div, to be selected when the user pressed on the view. How can I achieve this?
This is actually simple to achieve. You can use label for every product row and put content inside it as shown below.
It seems that you're trying to adjust a lot to create a product row with inline CSS styles. I suggest that you use CSS flexbox properties to achieve a predictable layout without doing a lot of width, height, margin related properties, only if you need further help on this.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
console.log('ExampleController');
$scope.productsCurrency = [
{
id: 1,
name: 'Product 1'
},
{
id: 2,
name: 'Product 2'
},
{
id: 3,
name: 'Product 3'
}
]
});
.layout,
.layout-row,
.layout-column {
display: flex;
}
.layout-row {
flex-direction: row;
}
.layout-column {
flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp" ng-controller="ExampleController">
<div ng-repeat="product in productsCurrency"
value="{{product}}"
style="margin-bottom: 0px;">
<label for="{{product.id}}" style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;"
class="row"
ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''),
'beacon_padding_bottom': $root.isUsingDevice}">
<input checked
id="{{product.id}}"
type="radio"
name="shipping_method"
value="{{product.id}}"
ng-model="$root.shippingMethod"
style="align-self: center;">
<div for="{{product.id}}"
ng-class="{'beacon_margin_left': $root.isUsingDevice === false}"
style="margin-top: 28px; margin-left: 5px;">
</div>
<span style="margin-left: 10px; width: calc(100% - 120px);margin-bottom: 20px;">
<p class="beacon_text beacon_text_title beacon_shipping_title" style="font-weight: 400 !important;">
{{ product.name}}
</p>
<p class="beacon_text beacon_shipping_subtitle">
{{ product.description}}
</p>
</span>
<span class="beacon_text beacon_sum beacon_shipping_sum"
ng-class="{'beacon_shipping_sum_selected': $root.shippingMethod == (product.id + ''),
'beacon_sum_mobile': $root.isUsingDevice}">
{{unit.currencySymbol(product.currency) + roundPrice(product.price,1)}}
</span>
</label>
<div style="width: 100%; height: 1px; background: #979797;"
ng-class="{'beacon_remove_margin_divider': $root.isUsingDevice === false}">
</div>
</div>
</div>
I used a ng-click on the div like this:
HTML:
<div style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;" class="row" ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''), 'beacon_padding_bottom': $root.isUsingDevice}" ng-click="selectInput(product.id)">
JS:
$scope.selectInput = function(input) {
$rootScope.shippingMethod = input;
};
My input watches $rootScope.shippingMethod, so it will change accordingly

Cypress with the ContextMenu not work - React Contextify

i'm using a library called React Contexty, and it has a menu that is inside of the Contextify and is called of ContextMenu, when i do request for it to click in the Item of the ContextMenu, it click but the action not happens.
Cypress:
cy.get("img[data-test=img--menu-candidate]")
.click({
force: true
})
cy.get(".testinhoImg").click({
force: true
})
My MenuContext:
<ContextMenu id={`menu-${this.props.candidate.id}`} animation={animation.fade} theme={theme.light}>
<Item>
<div style={{ width: '50px', marginLeft: '0.5em', marginRight: '0.5em' }}>
<img src={ViewSrc} alt="View" />
</div>
<span className="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span>
</Item>
Somebody know why? And help-me please?
HTML:
<div class="react-contexify react-contexify__theme--light react-contexify__will-enter--fade" style="left: 447px; top: 308px; opacity: 1;">
<div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/view.2844f64a.svg" alt="View"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60"> View </span></div>
</div>
<div class="react-contexify__separator"></div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/move.f7f8dc44.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Move to folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; padding-right: 1em;"><img src="/static/media/email.330dcb30.svg" alt="Send Email" style="padding-right: 1em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Send Email</span></div>
</div>
<div class="react-contexify__item react-contexify__item--disabled" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 65px;"><img src="/static/media/remove-folder.d620c9fb.svg" alt="Move to folder" style="margin-left: 0.5em; margin-right: 0.5em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Remove from folder</span></div>
</div>
<div class="react-contexify__item" role="presentation">
<div class="react-contexify__item__data">
<div style="width: 50px; margin-left: 0.5em; margin-right: 0.5em;"><img src="/static/media/delete.e899d653.svg" alt="Delete" style="padding-right: 1.2em;"></div><span class="ibm-plex-sans-serif-regular ibm-textcolor-blue-60">Delete</span></div>
</div>
</div>
</div>

Slider and Angular routing issue

I'm using slider in my web, it works when i used it in a simple page without Angular, but when i using Angular routing it does not work!! it makes me confuse, what is the problem?
this is the slider:
<div id="leo-slideshow" class="clearfix">
<div class="banner" style="padding-right: 20px !important;height:375px;padding: 0px; margin: 0px; overflow: visible;">
<div class="columns-container">
<div id="columns" class="container">
<div id="slider_row" class="row">
<div id="top_column" class="center_column col-xs-12 col-sm-12 col-md-12">
<!-- Module HomeSlider -->
<div id="homepage-slider" class="col-xs-8 col-sm-8 col-md-8">
<div class="bx-wrapper" style="max-width: 779px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 448px;">
<ul id="homeslider" style="max-height: 448px; width: 515%; position: relative; left: -2336.98px;">
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-2">
<img src="~/Content/Images/Slider/sample-2.jpg" width="779" height="448" alt="sample-2">
</a>
</li>
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-3">
<img src="~/Content/Images/Slider/sample-3.jpg" width="779" height="448" alt="sample-3">
</a>
</li>
<li class="homeslider-container bx-clone" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-1">
<img src="~/Content/Images/Slider/sample-1.jpg" width="779" height="448" alt="sample-1">
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- /Module HomeSlider -->
<div id="htmlcontent_top " class="animation_group_165 animated fadeInUp ">
<ul class="htmlcontent-home clearfix row">
<li class="htmlcontent-item-1 col-xs-4 col-sm-4 col-md-4 pull-left ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img6.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
<li class="htmlcontent-item-2 col-xs-4 col-sm-4 col-md-4 ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img7.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
and the script:
$(document).ready(function(){
if (typeof(homeslider_speed) == 'undefined')
homeslider_speed = 500;
if (typeof(homeslider_pause) == 'undefined')
homeslider_pause = 3000;
if (typeof(homeslider_loop) == 'undefined')
homeslider_loop = true;
if (typeof(homeslider_width) == 'undefined')
homeslider_width = 779;
$('.homeslider-description').click(function () {
window.location.href = $(this).prev('a').prop('href');
});
if ($('#htmlcontent_top').length > 0)
$('#homepage-slider').addClass('col-xs-8');
else
$('#homepage-slider').addClass('col-xs-12');
if (!!$.prototype.bxSlider)
$('#homeslider').bxSlider({
useCSS: false,
maxSlides: 1,
slideWidth: homeslider_width,
infiniteLoop: homeslider_loop,
hideControlOnEnd: true,
pager: false,
autoHover: true,
auto: homeslider_loop,
speed: parseInt(homeslider_speed),
pause: homeslider_pause,
controls: true
});
});
Note: i am using bxslider.

locators in Selenium Webdriver

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 1002; outline: 0px none; position: absolute; height: auto; width: 500px; top: 156px; left: 706px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-comment-dialog">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div id="comment-dialog" class="ui-dialog-content ui-widget-content" style="background-color: white; width: auto; min-height: 0px; height: 208.267px;">
<div class="ui-resizable-handle ui-resizable-n"></div>
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-w"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002;"></div>
<div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003;"></div>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004;"></div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Edit Approved Data</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
<span class="ui-button-text">Cancel</span>
i want to locate the "Edit Approved Data" button but gets an error always saying element not found.
//div[#class='ui-dialog-buttonset']/button
//div[#class='ui-dialog-buttonset']/button[1]
//div[#class='ui-dialog-buttonset']/button/span
//span[text()='Edit Approved Data']
//\*[text()='Edit Approved Data']
The way to use:
driver.findElement(By.xpath(xpath)).click();
Every presented xpath should work

Resources