I want to run an e2e-test using angular.
This is my html file:
<html>
<div>
<table class="table table-bordered">
<thread>
<tr>
.
.
.
<th class="icon">
<i ng-click="test" ng-show="isQuestionEditable()" class="icon-plus"></i>
</th>
</tr>
</thread>
</div>
</html>
How do I call ng-click properly?
I tried:
it('test', function(){
element('test').click();
});
But I get the error message: Selector [ng\:model="test"] did not match any elements.
I am accessing the right page for sure. I wrote:
beforeEach(function() {
browser().navigateTo('/');
});
'/' being proxied as http://localhost:8080/test
One work around would be to give the button an id="button" and then your selector would be element('#button').
Also check the caveat at the bottom of http://docs.angularjs.org/guide/dev_guide.e2e-testing
Its hard to tell from your example if you are manually bootstrapping angular or using ng-app.
Related
Hi I'm having the below issue.
Below is my html page
<div class="content" ng-controller="DataController">
<table class="table table-striped" id="show" ng-if="datalist.length>0">
<thead>
<th>State</th>
<th>District</th>
<th>Non-DND's</th>
</thead>
<tbody>
<tr dir-paginate="data in datalist| filter:search|orderBy:sortKey:reverse|itemsPerPage:10" style="cursor:pointer;">
<td>{{data.state}}</td>
<td>{{data.district}}</td>
<td><a ng-click="getnre(data.nondnd,data.dnd,data.land,data.email)" ui-sref="numsemailsdata" target="_blank">{{data.nondnd.length}}</a></td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true" style="float:right" ng-if="datalist.length>0">
</dir-pagination-controls>
</div>
Below is the code in my controller.js
app.controller("DataController", function($scope, DataService) {
$scope.datalist=DataService.getData();
$scope.getnre=function(ndnd,dnd,land,email) {
$scope.numsem = {
ndnds : ndnd,
dnds : dnd,
lands : land,
emails : email
}
}
});
Below is the numsdetails.html
<div class="content" ng-controller="DataController">
<table class="table table-striped">
<thead>
<th>Non-DND's</th>
</thead>
<tbody>
<tr ng-repeat="ndnd in numsems.ndnds">
<td>{{ndnd}}</td>
</tr>
</tbody>
</table>
</div>
Here I'm displaying the non-dnd's count in my first html page and I need to display the non-dnd's in new tab which is numsemails.html
When I'm trying to bind the data to numsemails.html, I'm getting the data as undefined even I'm binding the data from same controller.
Please help me with a solution.
The reason you are getting undefined for numsems is because when you open a new page (blank) you create an entire new instance of your app. It is like loading the page for the first time. Think of it as a totally different browser instance, because that is what it is. You can pass a parameter using stateparams, this gets passed in the url, however you are trying to pass an entire object so it becomes a bit more difficult.
There are multiple solutions to your problem. You can pass some data in the url, or you can use localstorage, $window, or cookies to store the data. I'm sure there are also other solutions. Choose one of these methods to hand your data properly and we can help you with it.
This issue has been discussed in other threads.
ui-router: open state in new tab with target=“_blank” with object params
Your controller code is wrong, you're missing brackets and braces:
app.controller("DataController", function($scope) {
$scope.datalist = DataService.getData();
$scope.getnre = function(ndnd,dnd,land,email) {
$scope.numsem = {
ndnds : ndnd,
dnds : dnd,
lands : land,
emails : email
};
}
});
I am using ui-bootstrap for accordian, I have included ui.bootstrap in app.js. I am getting this error -
Controller 'accordion', required by directive 'accordionGroup', can't be found!
Here is the code I am using -
<accordian close-others="oneAtATime">
<accordion-group is-open="false" heading="Requests">
<div ng-repeat="">
< accordion-group heading="">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>H</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="" ng-init="inner=$index">
<td>{{}}</td>
<td>{{}}</td>
</tr>
</tbody>
</table>
</accordion-group>
</div>
</accordion-group>
</accordian>
<accordian close-others="oneAtATime">
^
You got a typo here
I am assuming that you have not made any syntax/spelling mistakes. If you still get the same error, then probably it has something to do with your dependencies. Make sure you have included the right files.
And for ui-bootstrap dependency, "accordion" is a template, so you have to include src = "ui-bootstrap-tpls.js" and not "ui-bootstrap.js". Hope this helps
I see from the sample code you posted there are some decrependacies in the spelling of your element tags, accordion and accordian have you checked these? Is that not the possble issue here? I'm using accordion without any issues myself in my current project.
I am learning Protractor and am trying to sendKeys in an input field in the angularjs.org page but I am getting this error:
NoSuchElementError: No element found using locator:
By.model("projectList.search")
Here is my code:
describe ("Search list", function() {
it ("should search for jQuery and display 1 result", function() {
browser.get("https://angularjs.org/");
element(by.model("projectList.search")).sendKeys("jQuery");
});
});
I tried using by.id and got the same error. I am assuming that this is caused because element is not visible yet. When I add browser.pause() and go step by step (slowly), the test passes. What is the best way to solve this?
Related HTML from angularjs.org
<input type="text" ng-model="projectList.search" class="search-query" id="projects_search"
placeholder="Search">
<table>
<thead>
<tr>
<th>Project</th>
<th>Description</th>
<th><i class="icon-plus-sign"></i></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="project in projectList.projects | filter:projectList.search | orderBy:'name'">
<td><a ng-href="{{project.site}}" target="_blank">{{project.name}}</a></td>
<td>{{project.description}}</td>
<td>
<a ng-href="#/edit/{{project.$id}}"><i class="icon-pencil"></i></a>
</td>
</tr>
</tbody>
</table>
I managed to find a small library called waitReady.js and it has solved my problem. Here is my final code,
require './waitReady.js')
var searchBtnElm = element(by.model('projectList.search'));
searchBtnElm.waitReady().then(function() {
searchBtnElm.sendKeys("myText");
});
You can try something like that :
var elementSelector = by.model("projectList.search");
browser.driver.isElementPresent(elementSelector).then(function(isPresent){
element(elementSelector).sendKeys("jQuery");
});
See protractor docs for more usefull functions
Is waitReady.js really works for you ?
Have tried to use it to click on stale elements but sometimes anyway exceptions occurs.
Have written function to click on element:
function clickWait(element) {
(element).waitReady().then(function () {
return element.click();
});
};
And invoke it like that:
clickWait(element);
framework: jasmine2
I'm using esvit' ngTable. to display a big collectiong of data.
But when I try to add a ng-class(fn). First rendering it works (displays info class), but when I manipulate the data (as when i change the attribute winner on user (from the ng-click="(toggleWinner(user))"), it throws an error instead of updating the class.
ngTable:
<div ng-show="(answers).length > 0">
<table ng-table="tableParams" template-pagination="custom/pager" class="table table-striped table-bordered table-hover" style="margin-top: 12px;">
<tr style="cursor:pointer;" ng-click="toggleWinner(user);" ng-repeat="user in $data" ng-class="getClass(user)">
<td data-title="'Bruger'" sortable="'name'">{{user.name}}</td>
<td data-title="'Email'" sortable="'email'">{{user.email}}</td>
<td data-title="'Firma'" sortable="'company'">{{user.company}}</td>
<td data-title="'Mobil'" sortable="'mobile'">{{user.mobile}}</td>
<td data-title="'Vundet dato'" >{{getPreviousWinnings(user.email)}}</td>
<td data-title="'Udvælg Vinder'" >
<span ng-show="user.winner == true" class="glyphicon glyphicon-ok" style="color:darkgreen"></span>
</td>
</tr>
</table>
</div>
getClass(user):
$scope.getClass = function(user) {
if (user.winner) {
return "success";
} else if ($scope.getPreviousWinnings(user.email).length > 0) {
return "info";
} else {
return "";
}
};
I hope you can help, and thanks for taking a look
Error description:
TypeError: undefined is not a function
at Object.k [as fn] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:136:370)
at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:106:311)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:109:287)
at HTMLTableRowElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:189:372)
at HTMLTableRowElement.m.event.dispatch (local/js/libs/jquery-1.11.1.min.js:3:8436)
at HTMLTableRowElement.r.handle (local/js/libs/jquery-1.11.1.min.js:3:5146)
Most important thing first (solution):
Check your versions of libs to make sure they are the same
I was using angularjs 1.2.16 and angular-animate 1.2.10.
This resulted in angularjs calling it's own (it thought) $animate.setClass().
But in angular-animate 1.2.10 it is not there, and since I import the animate, it overwrites the $animate then there was no method to be called. Hard to see when using minified versions.
Anyways, thanks Kostia for making me make plunker so I could see it functioning.
I'm working in a project where we are using Angular with ng-bootstrap and various other plugins and it's Great.
But when using ng-repeat inside a ng-template for some popover content, the placement of the popover gets wonky.
<script id="broken.html" type="text/ng-template">
<div>
<table class="table table-condensed table-popover">
<tbody ng-repeat="a in test">
<tr>
<th>test</th>
<td>aaa</td>
</tr>
</tbody>
</table>
</div>
</script>
Plunker example.
The "Broken" button that uses ng-repeat spwans a popup that is too far down. While the "Works" button that has the table hard coded works as intended.
Does anyone have an idea of how one might fix this problem?
Best regards, Fredrik