Test for the number of elements using Jasmine in AngularJS

Question

I am writing an end to end test using Jasmine for AngularJS. I am using Protractor to run the test. I have the following markup

<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}">
  </li>
</ul>

And I want to test that for a particular page instance I have four of these images. Here's what I have so far

describe('Phone detail view', function() {

    beforeEach(function() {
      browser.get('app/index.html#/phones/nexus-s');
    });

    it('should display four thumbnails on the nexus-s page', function() {
      expect(element(by.css('.phone-thumbs li img')).length()).toBe(4);
    });
  });

Problem is that I get an error saying

TypeError: Object #<Object> has no method 'length'

Where am I going wrong?

Answer 1

This question is part of the Experiments section in tutorial 8 of the AngularJS tutorial.

Here is how I solved it. I took the different road of counting the images rendered rather than testing the repeater/model directly.

it('should display four thumbnails of the nexus-s', function() {
  var imgsCount = element.all(by.css('.phone-thumbs li img')).count();
  expect(imgsCount).toBe(4);
});

Answer 2

For anyone who needs to know this. Here's how I did it.

it('should display four thumbnails on the nexus-s page', function() {
      var images = element.all(by.repeater('img in phone.images')).count();
      expect(images).toBe(4);
    });