I have some HTML
<tr data-automation="registerRow" ng-repeat="item in vm.registers | orderBy : 'name'" class="ng-scope">
<td data-automation="register-name" class="ng-binding">Lane 1</td>
<td data-automation="register-status" class="center capitalize ng-binding">Uncounted</td>
<td><div class="btn-group" role="group"><button type="button" class="btn btn-action" ng-click="vm.count()">Count</button></div></td>
</tr>
I'm able to count the number of rows
casper.test.assertElementCount('[data-automation="register-row"]', 2);
I would like to check the text of the of [data-automation="register-name"].
Does Casper wrap jquery or anything where I could do ('selector').text()?
What Can I call in Casper to verify the [data-automation="register-name"] === "XXX"
there are two ways to achieve this:
Using the gethtml method, there is a really good example in the documentation:
http://docs.casperjs.org/en/latest/modules/casper.html#gethtml
Or you can inject your js script into the page with the evaluate method, your script will run in the context of the page. You can easily use jquery to fetch the text!! Here is the link to the docs: http://docs.casperjs.org/en/latest/modules/casper.html#evaluate
And for testing you can use assertEquals(testValue, expected)
Related
I want to add sorting functionality on date header, I added orderBy filter but it's breaking the column.
How can I add sorting to date header? I would like for it to be possible for the user to click the header, which should change the sorting order.
main.html
<table>
<tr>
<th>File</th>
<th>{{date | orderBy: file.fileStat}}</th>
<th>Download</th>
</tr>
<tr ng-repeat="file in data">
<td>{{file.filename}}</td>
<td>{{file.fileStat |date : "dd.MM.y"}}</td>
<td><button type="button" class="btn btn-primary" ng-click="downloadServerFile(file.filename)">download</button></td>
</tr>
</table>
A few errors in the syntax you've attempted, but you've made a good start.
The first error is that the orderBy: applies only to the ng-repeat directive.
Let's first change <th>{{date}}</th>.
Next, let's look at ng-repeat. There's two things which are of use to us. See: OrderBy.
So we can tell it, using a String, which field to sort on, and with a boolean, whether to reverse the order or not. We can try something such <tr ng-repeat="file in data | orderBy: 'fileStat': false">.
We should also set the boolean to a variable, such that we can keep track of when the user changes it.
<tr ng-repeat="file in data | orderBy: 'fileStat': reversed">
Finally, let's have an ng-click, to allow the user to change the order. In this example, I am going to set it on the <th>.
<th ng-click="reversed = !reversed">{{date}}</th>
Please try this and let me know if you run into any errors.
I have used ng-src on img tags many times within ng-repeats with success, but for some reason I can't get this one to work.
I have an API call that returns some data, and for each item in the return, I basically do this:
<div ng-repeat="item in APIreturn">
<img ng-src="{{item.url}}" />
</div>
I have also tried src="{{item.url}}", ng-src="item.url" and so forth. I've verified that the url that is being used is valid, and works fine in src="{{item.url}}" outside of the ng-repeat.
Any ideas why it would be different in the ng-repeat?
Current HTML
<table ng-repeat="user in userInformation">
<tr>
<td>UserName:</td>
<td>{{user.UserName}}</td>
</tr>
<tr>
<td>Address:</td>
<td>{{user.Address}}</td>
</tr>
<tr>
<td>Gender:</td>
<td>{{user.Gender}}</td>
</tr>
<tr>
<td>Image:</td>
<td><img ng-src"user.image" /></td>
</tr>
</table>
You say you don't see the url if you put just <td>{{ user.image }}</td>. This indicate you access not existing property on yout object. Try json filter:
<td>{{ user | json }}</td>
to see more of your object. As I can see, you use capital letters, but user.image is lower cased.
EDIT: here is a working plunkr.
EDIT2: you missing assign sign.
try change to this. i think you forgot put = after ng-src .
<tr>
<td>Image:</td>
<td><img ng-src = "user.image" /></td>
</tr>
See Strict Contextual Escaping service.
Angular unsafes img src attributes so you'll need to trust it in order to make your images available.
Another approach is to use css to render the images:
For table, in ng-repeat, you have to use {{}} this interpolation in order to access the src file.
Try this one:
<td><img ng-src = "{{user.image}}"/></td>
Let me know if any issues.
I have an ng-repeat loop in my html. The variable involved in the looping is displayed in table rows. I need to allow the user to click on the desired value and have a js function receive the value so it can act on it.
An earlier version of my code that does not attempt to pass the value, just display it, is here and works as expected; showing the various host values from filteredList with link attributes (underlined, in my case)
<tr data-ng-repeat="update in filteredList">
<td> {{update.host}} </td>
<td> {{update.date}} </td>
<td> {{update.num}} </td>
</tr>
My attempt to pass the value of host that the user clicks on to my function "searcher" is here, but it does not work:
<tr data-ng-repeat="update in filteredList">
<td> {{update.host}} </td>
<td> {{update.date}} </td>
<td> {{update.num}} </td>
</tr>
When it is encountered, angularjs complains:
Error: [$parse.syntax] Syntax Error: Token 'update.host' is unexpected, expecting [:] at column 12 of the expression [searcher({{update.host}});] starting at [update.host}});].
Can someone please advise me of a way acceptable to angularjs to pass the clicked host value to my function?
Thanks very much.
As others have mentioned in the comments, this will work for you:
{{update.host}} </td>
Check out the documentation for ng-click, which indicates it accepts an expression (so you don't need the {{binding}} syntax).
This is the right way to do it
<tr data-ng-repeat="update in filteredList">
<td> {{update.host}} </td>
<td> {{update.date}} </td>
<td> {{update.num}} </td>
</tr>
Try:
<td> {{update.host}} </td>
As mentioned, you don't need the curly brackets around variables inside the ng-click. Neither in any angular directive parameter for that matter.
I start to play with angularjs, and having this data model :
friends = [
{name:'John**amine**allo'},
{name:'Mary**aaa**mmm'},
{name:'Mike**bb**kkk'}
]
I would like to split each name by '**' to create a table of names.
I don't know if there is more straightforward way to do this ( maybe using some filter in angular-filter module) but here what I have so far tried:
<table id="searchObjResults">
<tr><th>Name</th></tr>
<tr ng-repeat="x in friends">
<td ng-repeat="y in x.split('**')">
{{y}}
</td>
</tr>
thanks in advance for any help.
You need to split name property if the x elements:
<td ng-repeat="y in x.name.split('**')">{{y}}</td>
However this is probably not very good idea what you are trying to do. First of all, you need to take care of proper table structure (correct header colspan values). Secondary, it's better to render already processed data structure, rather then converting values inside templates. It just makes it overcomplicated, not to mention makes watch expression slower.
Demo: http://plnkr.co/edit/5PXTW1gjpKwg7e3S6hRM?p=preview
You can use a custom filter to specify the separator:
<table id="searchObjResults">
<tr><th>Name</th></tr>
<tr ng-repeat="x in friends">
<td ng-repeat="y in x.name | mysplit:'**'">
{{y}}
</td>
</tr>
</table>
JS:
app.filter('mysplit', function() {
return function(data, sep) {
return data.split(sep);
}
});
Plunker
<tr class="bg-row1">
<td class="td-highlighted-2">
<div align="left"><%=searchList1.getProjid()%></div>
</td>
<td class="td-highlighted-2">
<div align="left"><%=searchList1.getProjname()%></div>
</td>
</tr>
here jsp update request happens to be invoked by a link
in updateproject.jsp how can i refer projid and projname value in a text box
For this type of scenario POST is better suited,
Even if you want to stuck with GET , you can use javascript and use window.open() function for your purpose , and build URL dynamically reading fields