How do I use resume() in Angular JS e2e testing? - angularjs

I am going through step three of this angular js tutorial. http://docs.angularjs.org/tutorial/step_03
The very last task is to "Add a pause() statement inside of an end-to-end test and rerun it."
I was able to add pause() and the test paused as it should. The question is, how to resume?
The documentation for pause() here indicates calling resume() in the console or clicking the resume link in the Runner UI, but I can't seem to figure out how to call resume from the console, nor can I find the resume link in the Runner UI.
How do you call resume()?

My guess is you put the pause() function call in the wrong place in your test\e2e\scenarios.js file. I did this same thing - the test doesn't pause, it finishes the first or both or neither, depending on where you put the pause() call.
Put the pause() call in your beforeEach(...) call like so
beforeEach(function() {
browser().navigateTo('app/index.html');
pause();
});
Then add the new it(...) method given in the tutorial directly after the closing parenthesis of the it('should filter the phone...) function.
Now the e2e test page will pause before executing each it(...) section and let you change the DOM contents before the test runs. For example, if you click 'resume' without searching for anything the first test passes because there are 3 phone entries in the list. But if you search for xyz it will fail because there will not be any phone entries in the list.
You can also place the pause() call before each expect(repeater(...)) or input('...') call to have the test pause before each sub test. By placing a pause() before each expect(...) call you can edit the DOM after the input('...') call has changed it but before the assertion is made so you can see how the input changes the content and why changing that content yourself might cause an asssertion (expect(...)) to fail or succeed.

Related

how can I return from an asynchronous protractor test?

I have created an asynchronous protractor test, but am unsure when I should call the done() function? How can I determine when all of the subfolders in the each loop has completed? If you see my code below, you can see that I have placed the done() obviously in the incorrect location. Can anyone tell me how / where I should place the done?
it('should make sure that there are no edit or delete buttons beside subfolders',function(done){
folderContentPg.subFolders.each(function(subFolder){
//get fid of subfolder
subFolder.getAttribute('fid').then(
function(subFolderFid){
expect(folderContentPg.subFolderDeleteBtn(subFolderFid).isPresent()).toBe(false);
expect(folderContentPg.subFolderEditBtn(subFolderFid).isPresent()).toBe(false);
}
);
done();
})
});
You don't need the done callbacks. Protractor uses promises and WebDriver's controlFlow to handle execution.

Waiting for the click event in PhantomJS 2 with Jasmine 2.x and AngularJS

I am trying to test an Angular directive that uses the click event and getting nowhere. I can get the event to fire just fine, but PhantomJS2 just takes forever to make the event happen and I can't figure out a way to get Jasmine to wait for it to happen before running the assertion. I've searched quite a bit and the most common response is this: How to wait for a click() event to load in phantomjs before continuing?. Sadly, that guy hasn't figured it out either, and I'm not waiting for a page to load, just for the click event to finally register. I'm hoping that someone else has and just didn't see that question or didn't want to start a reply on such an old question. For reference, the directive in question selects the text within an input tag if there is none already selected. I've tried every permutation of timeouts that I can think of, but nothing works. The last attempt involved using the done() function from Jasmine, but still no luck.
//the default value in the input is "unchanged"
it('should not select anything if there is already a selection in the element', function(done) {
element[0].setSelectionRange(2, element[0].value.length);
element.triggerHandler('click');
scope.$digest();
expect(theWindow.getSelection().toString()).toEqual('changed');
done();
});
All reasonable suggestions will be considered. I'd be ecstatic if someone had a link to a solution that I somehow didn't find with my Google-foo.
Note: I got the idea about using setTimeout from here: https://newspaint.wordpress.com/2013/03/19/how-to-click-on-a-div-or-span-using-phantomjs/

Protractors waitForAngular and angularfire/firebase

From my understanding, waitForAngular is executed on each step, and it waits for any kind of angular rendering and/or $http calls before proceeding to the next step.
My problem I am having is, I'm using Angularfire/Firebase as my backend, and in my tests when I click on a button for example - the waitForAngular is executed too fast, and then next step has occured before firebase has come back with a result.
Does anyone know a simple way to extend waitForAngular to also wait for any Angularfire call?. That would solve my problem and I could get rid of all of these dreaded sleep calls.
If you're using something like this
element(by.css('.btn')).click()
ptor.waitForAngular();
//execute something after
You can try converting it to a nested promise resolve pattern like this
var ptor = protractor.getInstance();
ptor.findElement(protractor.By.css('.btn')).click().then(function(){
//execute something after
});
I only have some basic info about firebase but haven't used it ever. But I guess this should help with promises/http requests.

How can I see what karma sees when I use browser().navigateTo()

I am just getting started with karma, and although it seems that everything is hooked up properly and my unit tests are being run as expected, I can't get my end to end tests to find any elements.
When I go to the debug page, I can see a very brief flash of my application, which says to me that my proxy and config in general is hooked up properly, but when I run
describe('my app', function() {
beforeEach(function(){
browser().navigateTo('/');
});
it('should display the home page', function() {
expect(element('title').text()).toEqual('my title');
});
});
it never finds an element, no matter the selector I put in.
My question, though, is... is there some way that I can see what it is seeing? Can I get karma to dump the full text of the html response? If I could do that, I could at least see what it is getting back. As it stands, I am getting no debugging information at all and it is kind of frustrating.
Feel free to ask for more information if I can make it easier to answer the question. Thank you for any help you can provide.
You can use pause() inside your test to pause the execution, then you can resume from the UI.
The docs for pause() are here.
You can also use sleep(seconds) to make a timed pause, if you want to auto resume.

Angular-UI Bootstrap Modal requiring a timeout to close without error when closing from event

I'm getting an error current is null when I am executing the following code in the controller of the modal.
$scope.$on('cart:item_updated',function(evt, item){
$modalInstance.close();
//$timeout($modalInstance.close, 500);
});
I had to add the timeout to get it to work. I believe it has to do with the digest cycle, but my concern is that the timeout fix is a hack that will not work depending on how quickly a user's device is able to process the code. I'd rather know what is going on here and solve this properly. If I execute the .close() via a user initiated action from a button within the modal it seems to perform the action as expected with no errors.
The code is pretty limited to answer, however I am giving it a shot, you may try to use $scope.$watch instead of $scope.$on.

Resources