intern.js refactoring to before block behavior not consistent

Question

I'm using the intern.js library with Chai and BDD to test my javascript application. I have the following code:

// Login as admin
bdd.before(function() {
  indexPage = new IndexPage(this.remote, adminUsername, adminPass);
});

bdd.it('should turn a user to an input box', function () {
  return indexPage.login(baseUrl)
    .clearLocalStorage()
    .get(baseUrl + '#/details')
    .findAllByCssSelector('.user-filter')
    .findByName('user')
    .clearValue()
    .click().pressKeys(['Functional Test', '\uE015', '\uE006'])
    .end()
    .findByXpath('//td[@class="grid-column-user"]/span')
    .click()
    .end()
    .findByXpath('//td[@class="grid-column-user"]/input')
      .then(function (elem) {
        assert.lengthOf(elem, 1, "Yay");
      })
    .end();
});

bdd.it('should get the error state class when incorrect input is added', function () {
  return indexPage.login(baseUrl)
    .clearLocalStorage()
    .get(baseUrl + '#/details')
    .findAllByCssSelector('.user-filter')
    .findByName('user')
    .clearValue()
    .click().pressKeys(['Functional Tes', '\uE015', '\uE006'])
    .end()
    .findByXpath('//td[@class="grid-column-user"]/span')
    .click()
    .pressKeys(['adsf', '\uE006'])
    .end()
    .findByXpath('//td[@class="grid-column-user"]/input[@class="user-error"]')
      .then(function (elem) {
        assert.lengthOf(elem, 1, "User should be input");
      })
    .end();
});

So I want to extrapolate out a lot of the logic that is duplicated between the tests. It seems like the following code could be in the before block:

bdd.before(function() {
  indexPage = new IndexPage(this.remote, adminUsername, adminPass);
  testUser = indexPage.login(baseUrl)
    .clearLocalStorage()
    .get(baseUrl + '#/details')
    .findAllByCssSelector('.user-filter')
    .findByName('user')
    .clearValue()
    .click().pressKeys(['Functional Test', '\uE015', '\uE006'])
});

bdd.it('should get the error state class when incorrect input is added',      function () {
  return testUser.end()
    .findByXpath('//td[@class="grid-column-user"]/span')
    .click()
    .pressKeys(['adsf', '\uE006'])
    .end()
    .findByXpath('//td[@class="grid-column-user"]/input[@class="user-error"]')
      .then(function (elem) {
        assert.lengthOf(elem, 1, "User should be input");
      })
    .end();
});

When I put this code into the before block and store it as a variable, the behavior of the code doesn't run as it did when it was all in one long chained call and not in the before block. I'm not sure what I'm doing wrong here as I've tried multiple different iterations on what I've extrapolated out.

Thanks!

Answer 1

In your original code, you're resetting the page state for each test by logging in to a new session and clearing local storage. In your new code, you're only doing that once at the beginning of the suite, so all of the tests within the suite are going to run in the same session on the test page.

To replicate the behavior of your original tests, use a beforeEach rather than a before.