beforeEach (to prevent test pollution) not working as expected

Question

I've been doing the AngularJS tutorial and I came into a weird issue with beforeEach for one of the end to end tests. For context, I am currently in the Experiments section at step 3. The test code is here:

'use strict';

/* http://docs.angularjs.org/guide/dev_guide.e2e-testing */

describe('PhoneCat App', function() {

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

    beforeEach(function() {
      browser.get('app/index.html');
    });

    it('should filter the phone list as user types into the search box', function() {

      var phoneList = element.all(by.repeater('phone in phones'));
      var query = element(by.model('query'));

      expect(phoneList.count()).toBe(3);

      query.sendKeys('nexus');
      expect(phoneList.count()).toBe(1);

      query.clear();

      query.sendKeys('motorola');
      expect(phoneList.count()).toBe(2);
    });
  });

  it('should display current filter value within an element with id "status"', function() {

    var statusElement = element(by.id('status'));
    expect(statusElement.getText()).toMatch(/Current filter:\s*$/);


    element(by.model('query')).sendKeys('nexus');

    expect(statusElement.getText()).toMatch(/Current filter: nexus\s*$/);

  });
});

The beforeEach block should reload the page before each spec execution, but it seems it is not, since when I run this using protractor, the last text inserted into the query element in the first spec ('motorola') still exists when the second spec is executed, causing that second spec to fail.

Now, when I move the beforeEach to the outer describe block, all the specs pass successfully. Any ideas?

Answer 1

glepretre is correct. As structured in the above example your tests look like this

describe
  describe
    before
    it
  it

Because of this nesting the before runs only once, before the first it. Looking at what each it block is testing, I think they are both meant to be testing the Phone List View, in which case the correct nesting is as follows:

describe
  describe
    before
    it 
    it 

However, if the index page is not specific to the Phone List View but contains the whole app, then it should probably be loaded in the top-level describe block, making this the most correct approach:

describe
  before
  describe
    it
    it