AngularJS e2e Testing with Protractor and remote api

Question

I would like to test my Angular app that is heavily dependent on an API. The API is being tested separately with phpunit and we are creating fixtures so ideally I was hoping to not have to create another set of mocked fixtures in Angular. I am using Protractor with the chrome driver only right now.

First I have to login through a page that is NOT an Angular app.

I then go to a page that shows a loader with ng-if='loadingCards' and hides a table with ng-if='!loadingCards' and then when the API call to retrieve cards is finished, the value of loadingCards is flipped.

Below is the beginning of the test spec which gets you through the non angular login and then takes you to the card listing page. All I would like to do is to see the contents of the cards $scope variable to see that the API has indeed returned something but I always get an empty array.

describe('User cards page', function() {
  var driver;
  var ptor;

  beforeEach(function() {
    ptor = protractor.getInstance();
    ptor.ignoreSynchronization = true;
    browser.ignoreSynchronization = true;
    driver = ptor.driver;
  });

  it('should login', function() {
    driver.get('http://local.local.com/login');
    driver.findElement(protractor.By.name('_username')).sendKeys('admin');
    driver.findElement(protractor.By.name('_password')).sendKeys('admin');
    driver.findElement(protractor.By.css('input[type="submit"]')).click();
  });

  it('should list cards', function() {
    browser.get('http://local.local.com/cms/cards');

    var ucards = element.all(by.repeater('card in cards')).then(function(cards) {
        console.log(cards);
    });
    //expect(ucards.count()).toEqual(3);
  });
});

Answer 1

i think you are mixing up two things. You can either write:

element.all(by.repeater('card in cards')).then(function(cards) {
    console.log(cards);
});

or:

var ucards = element.all(by.repeater('card in cards'));
ucards.then(function(cards) {
    console.log(cards);
});

but you are making kind of ... both.

Do you get any errors? Could you check for your current url?

expect(browser.getCurrentUrl()).toEqual('http://local.local.com/cms/cards');

Greetings!

Answer 2

Perhaps it() where the login takes place, follows the it() where you do the check of the card count. I would recommend moving the login part to the beforeEach.

And if that doesn't work, perhaps a ptor.sleep(300) could help. Place that just below the browser.get() of the page. The api may not have returned a value.

Answer 3

Walter helped me debug this by using the sleep command to keep the chromedriver iwndow open longer so I could see that the URL I was using was incorrect. One more test to create. Closing this.