Nesting ember acceptance test helpers in "andThen"

Question

I've always written ember tests like this:

test('should add new post', function(assert) {
  visit('/posts/new');

  fillIn('input.title', 'My new post');
  click('button.submit');

  andThen(() => {
    assert.equal(find('ul.posts li:first').text(), 'My new post')
  });

  click('button.edit');
  fillIn('input.title', 'My edited post');
  click('button.submit');

  andThen(() => {
    assert.equal(find('ul.posts li:first').text(), 'My edited post')
  });
});

but I also see tests written "nested" style like this:

test('should add new post', function(assert) {
  visit('/posts/new');

  fillIn('input.title', 'My new post');
  click('button.submit');

  andThen(() => {
    assert.equal(find('ul.posts li:first').text(), 'My new post')

    click('button.edit');
    fillIn('input.title', 'My edited post');
    click('button.submit');

    andThen(() => {
      assert.equal(find('ul.posts li:first').text(), 'My edited post')
    });
  });
});

Is one way better than the other or correct? Could the first style be a source of race conditions?

I looked up some open source ember apps on github and see most of them doing it the way I do it:

https://github.com/cowbell/splittypie/blob/master/tests/acceptance/event-test.js

and here's an example of nesting:

https://github.com/HospitalRun/hospitalrun-frontend/blob/master/tests/acceptance/admin-test.js

There's no reason to wrap [async helpers](https://guides.emberjs.com/v2.8.0/testing/acceptance/) in an `andThen`. — steveax, Sep 23 '16 at 17:26
That's my understanding, so why would anyone do it? The only reason I can imagine is that you can set a breakpoint on an async helper if you wrap it, otherwise you can't. — Matt McGinnis, Sep 23 '16 at 18:49

score 0 · Answer 1 · answered Sep 23 '16 at 21:53

Some of the reasons you would nest are

If the tests that follow are dependent on the initial tests
If a particular sequence is needed

I personally prefer nesting along with assert.async()

Eg:

test('should add new post', function(assert) {
  var done = assert.async();
  visit('/posts/new');

  fillIn('input.title', 'My new post');
  click('button.submit');

  andThen(() => {
    assert.equal(find('ul.posts li:first').text(), 'My new post')

    click('button.edit');
    fillIn('input.title', 'My edited post');
    click('button.submit');

    andThen(() => {
      assert.equal(find('ul.posts li:first').text(), 'My edited post')
      done();
    });
  });
});

From my personal experience andThen does not always occur as expected especially if you have a timer in your dev code, so using done makes sure that all my tests are successfully and in order are completed

score 0 · Answer 2 · answered Mar 13 '18 at 20:59

There is no good reason to use nesting with andThen, especially now that you can use async/await in Ember. The second example could be rewritten:

test('should add new post', async function(assert) {
  await visit('/posts/new');

  fillIn('input.title', 'My new post');
  await click('button.submit');

  assert.equal(find('ul.posts li:first').text(), 'My new post')

  await click('button.edit');
  fillIn('input.title', 'My edited post');
  await click('button.submit');

  assert.equal(find('ul.posts li:first').text(), 'My edited post')
});

Nesting ember acceptance test helpers in "andThen"

2 Answers2