My app has a dashboard with 3 columns.
All three columns represent a different state(field of model) of that object.
When in the first column it's 'pending', when you approve it, it goes to the 'accepted' column.
I start off by creating 3 objects, 1 in each column.
Then I want to be able to press the approve button of the first column and test if it moved to column 2.
This is the structure of the code currently:
<div class="col-xs-3 pending-candidates">
<div class="collection-menu">
<h1>Candidates</h1>
<div class="icon-menu"></div>
<i class="material-icons">done</i>
</div>
<ul id="applied-desktop-dashboard-ajax">
<li class="collection-item applied-candidate" id="pending_8"> <=== NEED TO COUNT THIS
<div class="first-content">
<div class="candidate-details">
<a href="/employees/8">
<h1>Patrick M.</h1>
</a>
</div>
</div>
<div class="second-content" style="display: none;">
<a data-remote="true" rel="nofollow" data-method="patch" href="/matchings/216?state=denied">
<i class="material-icons close-deny">close</i>
</a>
<a data-remote="true" rel="nofollow" data-method="patch" href="/matchings/216?state=accepted">
<i class="material-icons close-accept">done</i>
</a>
</div>
</li>
</ul>
I try to accessing it like following:
expect(page).to have_selector('applied-desktop-dashboard-ajax li', count: 1)
expect(page).to have_css('applied-desktop-dashboard-ajax li', count: 1)
and it returns following error message:
expected to find css "applied-desktop-dashboard-ajax li" 1 time
but there were no matches
same goes for when I only want to check if it has the ul (its always there even if it has no objects loaded in).
Anyone has an idea how to count the list items?
I think you just forgot the ID prefix (#) in your selector, it should be:
expect(page).to have_css('#applied-desktop-dashboard-ajax li', count: 1)
Related
A user can click tabs, filtering the jobs on my page by category.
When a user clicks the tab, the page hits a search (I use the pg_search gem).
Problem: when clicking the tab, the page reloads and scrolls to the top. This is very bad for my UX. How do I prevent scrolling to top and keep on the height of the tabs-banner instead?
Here is my html.erb file:
<div class="tabs-banner">
<div class="tabs">
<a class="tab active" href="/vacancies?utf8=✓&query=">
<h2 style="color:white;"><br>All Jobs</h2>
</a>
<a class="tab" href="/vacancies?utf8=✓&query=developer">
<h2><br>Developer</h2>
</a>
<a class="tab" href="/vacancies?utf8=✓&query=marketing">
<h2><br>Marketing</h2>
</a>
<a class="tab hidden-xs" href="/vacancies?utf8=✓&query=design">
<h2><br>Design</h2>
</a>
<a class="tab hidden-xs" href="/vacancies?utf8=✓&query=finance">
<h2><br>Finance</h2>
</a>
<a class="tab hidden-xs" href="/vacancies?utf8=✓&query=internships">
<h2><br>Internships</h2>
</a>
</div>
</div>
As max said, you can use anchors as a quick fix. Add id to tabs-banner div and use it in the links
<div class="tabs-banner" id="category-tabs">
<div class="tabs">
<a class="tab active" href="/vacancies?utf8=✓&query=#category-tabs"">
<h2 style="color:white;"><br>All Jobs</h2>
</a>
# all other tabs
</div>
</div>
I'm trying to limit foreach item. here it is my source :
<div class="build-failed">
<h1 class="jenkins-status"><span data-bind="title"></span> FAILED</h1>
<ul class="list-nostyle list-failed">
<li data-foreach-item="failedJobs">
<div class="label" data-bind="item.label"></div>
<div class="value" data-bind="item.value"></div>
</li>
</ul>
</div>
<div class="build-succeeded">
<h1 class="jenkins-status">All <span data-bind="title"></span> builds are successful</h1>
<i class="fa fa-thumbs-o-up"></i>
</div>enter code here
<p class="updated-at" data-bind="updatedAtMessage"></p>
and I want to get only 3 results. I know that I have to add something in "data-foreach-item" but I don't know what is it.
With <iron-list>, your <ul> can be rewritten as
<ul>
<iron-list items="[[failedJobs]]">
<template>
<li>
<div class="label">[[item.label]]</div>
<div class="value">[[item.value]]</div>
</li>
</template>
</iron-list>
</ul>
Try and see if the property, maxPhysicalCount, can get you only three results ;)
I thought I would find an applicable filter in the documentation:
http://batmanjs.org/docs/filters.html
But I couldn't find one! first returns only one item and truncate works for strings only, so neither of those would work.
You can create your own filter:
https://www.softcover.io/read/b5c051f3/batmanjs_mvc_cookbook/html#sec-custom_filter
For example, to limit an array to three items:
Batman.Filters.limit = (array, limit) -> array?.slice(0, limit)
Then, use it in your binding:
<li data-foreach-item="failedJobs | limit 3">...</li>
(Hmm, I hope data-foreach works with filters!)
Anyhow, hope it helps :)
I am writing some Capybara tests, and am failing at what seemed to be quite straight forward search. I have HTML:
<div id="divId">
<div class="unimportantClass">
</div>
<form id="formId">
<div>
</div>
<h2>Irrelevant text</h2>
<p>Equally irrelevant</p>
<span class="remarkableSpan">
<i class="whatever"> </i>
Some text
<input id="targetTag">
</input>
</span>
</form>
</div>
I am trying to confirm existence of "targetTag"
Everything goes well in
expect(page).to have_css('div#divId form#formId span.remarkableSpan')
but with
expect(page).to have_css('div#divId form#formId span.remarkableSpan input')
or
expect(page).to have_css('div#divId form#formId span.remarkableSpan input#targetTag')
it fails to find it. Any ideas what is causing it?
I try to make a complete DIV as a link, but it is just working. This is what I have:
= link_to (user_orders_path(current_user)) do
.current_orders.box.tile.one_third.lightblue
.count
%i.icon-shopping-cart
=#current_orders
.link
- if #current_orders > 0
= link_to t('.current_orders'), user_orders_path(current_user)
- else
= t('.no_current_orders')
But somehow Rails is making it as:
<div id="current_orders" class="box tile one_third lightblue">
<a href="/users/1/orders">
<div class="count">
<i class="icon-shopping-cart"></i>
3
</div>
</a>
<div class="link">
Open bestellingen
</div>
</div>
What am I doing wrong? It should be generated as:
<a href="/users/1/orders">
<div id="current_orders" class="box tile one_third lightblue">
<div class="count">
<i class="icon-shopping-cart"></i>
3
</div>
<div class="link">
Open bestellingen
</div>
</div>
</a>
The first thing I see is that you have a link nested within a link, which will not work.
It sounds like the behavior you want is a link (1) that is only present if there are current_orders (just show a message if there are not), and (2) where the clickable area is the entire div. Is this correct?
If so, (1) use your if statement to conditionally render your div, and (2) place the div inside an ‘%a’ tag like so. Maybe something like this:
-if #current_orders > 0
%a{:href => user_orders_path(current_user)}
.current_orders.box.tile.one_third.lightblue
.count
%i.icon-shopping-cart
=t('.current_orders')
=#current_orders
- else
.current_orders.box.tile.one_third.lightblue
=t('.no_current_orders')
I am having issues determining if a particular dom object is visible or not. I have the following code outputting to the console and it always returns false even though I can see the element on the screen.
console.log(itemElement.innerText +" is visible: " + $(itemElement.id).is(':visible'));
The context that I am testing is to see whether a list item in a jQuery Accordion object is visible or not. I am iterating through all the list elements (including sub list elements) and performing this check. Always the check returns false. I have googled everywhere for an answer but couldn't find one.
Here is the html to show what the layout looks like. I have edited it a bit to keep it reasonable but you should get a good idea of how it is set up.
<div id="collection_form">
<div id="element_container">
<ul class="element_list element_group ui-sortable">
<li id="de_1" class="element_group_parent eg-collapsed element_group_leaf">
stuff in here is same as below
</li>
<li id="de_29" class="element_group_parent eg-collapsed element_group_leaf">
<div>
<span>Room Booking</span>
<span class="element_type"> - Group</span>
<span class="remove_element">remove</span>
<div style="clear:both"></div>
</div>
<ul class="element_group">
<li id="de_30" class="element_config_form element_group_leaf">
<div>
<span>Room Number</span>
<span class="element_type"> - Text</span>
<span class="remove_element">remove</span>
<div style="clear:both"></div>
</div>
</li>
</ul>
</li>
<li id="de_31" class="element_group_parent eg-collapsed element_group_leaf">
<div></div>
<ul class="element_group">
<li id="de_32" class="element_config_form element_group_leaf">
<div> more stuff </div>
</li>
</ul>
</li>
</ul>
</div>
</div>
What is it that I am doing wrong?
Try this :
$(itemElement).is(':visible'); // this works if itemElement is a DOM element, or even if itemElement is a jQuery wrapped DOM elemenent
i suspect your itemElement.id is undefined
But if itemElement.id is correctly defined (as the id of your itemElement, in this case means that itemElement is a DOM element) you can do both these :
$("#"+itemElement.id).is(':visible');
or even better :
$(itemElement).is(':visible');