Knockoutjs sortable with helper:clone, doesn't clone and moves the original item - jquery-ui-sortable

Strange issue, I am struggling for couple days. I have a simple knockoutjs sortable page that binds to 2 lists as below. I would like to move copy an item from list A to B. I tried passing helper: 'clone' in options as in documentation, but it doesn’t create a copy and moves the original item.
Here is the http://jsfiddle.net/a5FL5/13/, that shows the problem. Try moving item from list A to B, and it moves the original item, and no copy is created.
I haven’t been able to figure out what the issues. Any help is appreciated.
<div class="A">
<ul data-bind="sortable: { data:stagingList.filteredTodos , options: {helper: 'clone', connectToSortable: '.okay'}}">
<li data-bind="text: itemlist"> </li>
</ul>
</div>
<div class="B">
<ul data-bind="sortable: { data: dayList.dfilteredTodos }">
<li class="okay" data-bind="text: itemlist"> </li>
</ul>
</div>
Regards
Srini

Related

remove tag and add additional css class to data-sly-resource

Here's my code and I want to add another css class toggleable-content to the existing code:
<sly data-sly-resource="${'item' # resourceType='components/header'}"></sly>
This code would look something like this:
<section aria-label="aria label">
<ul class="row">
<li class="col">
<div class="body px-3">
<h2 class="h3">
body
</h2>
<p>body text</p>
</div>
</li>
</ul>
</section>
I want to remove section tag and add another css class toggleable-content to the <ul> tag. Below is what I'd like to achieve:
<ul class="row toggleable-content">
<li class="col">
<div class="body px-3">
<h2 class="h3">
body
</h2>
<p>body text</p>
</div>
</li>
</ul>
I was wondering how to use slightly to achieve the above? I tried something below but it doesn't work:
<sly data-sly-resource="${'item' # resourceType='components/header', cssClassName='toggleable-content'}"></sly>
Assuming the section markup is managed by the included resource (components/header) then you cannot do it directly. Indirectly, with AEM, you can pass a parameter (through request attributes) and retrieve it in the components/header model, then add the section conditionally (using data-sly-unwrap for example).
Or you re-organize your code and switch from resource inclusion to template calling and pass the parameter directly using data-sly-call.

How to locate multiple text element within class in Protractor?

For on my test i need to verify highlighted text (Lexington, KY) using my protractor test.
<li id="address" class="list">
<div class="content">
<small class="mb-1">
<span>
Suite # 278
<br>
</span>
**Lexington, KY**
</small>
</li>
How to verify highlighted text using css OR cssContainingText locator?
Actually Protractor creators have put great documentation in place , and pls read it thoroughly to gain good knowledge on usage of css & cssContainingText. I will answer your question in short here - Use element(by.cssContainingText('.content','Lexington'))
UPDATE 1:
In case you want to add an assertion .. do this - expect(element(by.cssContainingText('.content','Lexington'))).toContain('Lexington, KY')
For one I am confused because it seems like you are never closing the content div...is it closed after the li is closed?
Anyway...I would simply change the HTML so that you don't need some crazy convoluted mess of a selector. I would do it like this:
<li id="address" class="list">
<div class="content">
<small class="mb-1">
<span>
Suite # 278
<br>
</span>
<cityState>Lexington, KY</cityState>
</small>
</li>
function checkCityState(){
return element(by.tagName('cityState')).getText();
}
expect(checkCityState()).toBe('Lexington, KY');

In Selenium how to select an option if the span class and div class are not unique

We have tabs called Community, Resources and Support which have the same section class Div Class and Span Class attributes as seen in the html code below.
How to "select" or choose one of the tabs and then traverse down the path to the links.
<section class="s-fn-item">
<div class="s-fn-wrapper-item">
<h5 class="s-fn-title-item">
<span class="s-fn-item-link">Community</span>
</h5>
<div class="s-fn-wrapper-sub-menu bg-base bg-shadow-down-medium fn- offscreen" style="display: block; height: 245px;">
<ul class="s-fn-sub-menu-item">
<li class="s-fn-promo-sub-menu-item">QA Community Home
</li>
<li class="s-fn-promo-sub-menu-item">Community Home
</li>
<li class="s-fn-promo-sub-menu-item">Community Events
</li>
</ul>
</div>
</div>
</section>
<section class="s-fn-item">
<div class="s-fn-wrapper-item">
<h5 class="s-fn-title-item">
<span class="s-fn-item-link">Resources</span>
</h5>
<div class="s-fn-wrapper-sub-menu bg-base bg-shadow-down-medium fn-offscreen" style="display: block; height: 227px;">
<ul class="s-fn-sub-menu-item">
<li class="s-fn-promo-sub-menu-item">Articles and How-Tos
</li>
<li class="s-fn-promo-sub-menu-item">Blog
</li>
Storymakers
Support
Support Home
Contact Us
Installation and Licensing
I agree with #user1433852 for using relative xpaths as they make life easier.. :) . I have formulated relative xpaths below to find the menu Community/Resources and then the xpath for a sub-menu item under them:
//span[.='Community']
This will select the 'span' element with the exact inner HTML or text as 'Community'.
//span[.='Community']/ancestor::div[#class='s-fn-wrapper-item']//a[#title='QA Community Home']
This will select the 'a' element with title 'QA Community Home' under the div element with class 's-fn-wrapper-item' which is the ancestor of the 'span' element with the exact inner HTML or text as 'Community'.
Similarly,
//span[.='Resources']
This will select the 'span' element with the exact inner HTML or text as 'Resources'.
//span[.='Resources']/ancestor::div[#class='s-fn-wrapper-item']//a[#title='Articles and How-Tos']
This will select the 'a' element with title 'Articles and How-Tos' under the div element with class 's-fn-wrapper-item' which is the ancestor of the 'span' element with the exact inner HTML or text as 'Resources'.
So, in both the cases above I am using the the primary items, i.e., Community and Resources to get to their submenu items, that are, QA Community Home and
Articles and How-Tos, respectively.

Selecting a element in a drop-down menu in protractor

I have a drop-down menu on my page. My goal for protractor testing is to click one of the options of this drop-down menu and have protractor check the results:
<ul class="dropdown">
<li class="nav-header">portfolio</li>
<li class="divider"></li>
<li class="dropdown-submenu"> ... </li>
<li ng-repeat="p in user.portfolios">
<!-- this is the option we will click for our testing -->
<a href ng-click="displayPortfolio(p)>Portfolio 1 </a>
</li>
<li ng-repeat="p in user.portfolios">
<a href ng-click="displayPortfolio(p)>Portfolio 2 </a>
</li>
<li ng-repeat="p in user.portfolios">
<a href ng-click="displayPortfolio(p)>Portfolio 3 </a>
</li>
</ul>
my protractor test looks something like:
it('should display relevant portfolio when clicked',function(){
ptor.ignoreSynchronization = true;
element.all(by.xpath("//a[#ng-click='displayPortfolio(p)'])).then(function(list){
list[0].click();
expect(... some assertion here);
});
ptor.ignoreSynchronization = false;
}
Just in case you were wondering, ptor.ignoreSynchronization is enabled because my web-page is constantly polling the backend for some updates.
Protractor throw the following error when I run the test:
ElementNotVisisbleError: element not visible
I don't quiet understand what this error is about. The element is surely visible since when I do view source of the page, I can see it in the DOM structure.
Kindly advice
I have handled same case by setting value directly. locate the element and set the value using "sendKeys".
Try the same for your scenario.
Have you tried using the repeater locator?
it('should display relevant portfolio when clicked',function(){
var elements = element.all(by.repeater('p in user.portfolios'));
elements.get(0).click().then(function(){
expect(... some assertion here);
});
}

How to handle Multiple DOM elements with iScroll (while using jQTouch)

I've my markups as
<div id="home" class="current">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller">
<ul id="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<!-- Events Details -->
<div id="events">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller"> <!-- stuffsss --></div>
</div>
<div class="footer">Footer</div>
</div>
For iScroll (http://cubiq.org/iscroll) to work, I need the #scroller as ID (as per the javascript Code I'm using to initialize iScroll.
//for iScroll
var myScroll = new iScroll('scroller', {desktopCompatibility:true});
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
But since I can't have two different elements with the same ID (please notice I've got two elements with same id scroller in my markup above), some conflicts are there and the iScroll isn't working properly.
I want to be able to implement the iScroll on the markup by changing the id as classes. I tried to change them into classes and see if it works but I couldnt get it right.
Can anyone help me change the codes so that it works by implementing classes instead of the the id??
Rob is right, but you can change your code to scroller classes as you said.
Then initialise your scrollers within unique wrappers like this:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
I'm not totally clear on what you are trying to achieve but if you want two parts of your page to scroll I would suggest changing the IDs to be unique and instantiate two iScrolls with the different IDs.
I am sure you have figured it out, but for other users still struggling with similar layout (multiple scrollers) and want to make them work. Here is the answer from other thread
https://stackoverflow.com/a/7584694/1232232
but for this to work you need to assign ID's to your classed (div containers)
like
<div id="home" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<div id="home2" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
Note: Remember not to assign same ID to multiple elements, always use classes for that purpose.