Is there any way to run ember acceptance test case in slow mode?

Question

I have written some ember acceptance test cases. The thing is when I visit the URL http://localhost:4200/tests and filter module by Acceptance, the test cases are running lightning fast. Even though those were written in async await function.

I want to put a time delay for each line using ember run loop run.later or run.next. But that's not the solution.

Is there a way to add slow mode somewhere in the top of the application (or) Is there any test helpers which is already present? So I can see test cases running in action.

Answer 1

There's no "slow mode" for Ember testing, but you can use regular JavaScript methods to slow down your tests yourself. For example, below we've created a wait method that you can call in between each step of the test.

This question was featured on an episode of May I Ask a Question! You can watch the recording to see examples of how to use the code below plus how to use the debugger and pauseTest.

This code will wait one second before moving to the next line, anywhere you put await wait():

import { module, test } from 'qunit';
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import { click, find } from '@ember/test-helpers';

function wait(timeout = 1000) {
  return new Promise((resolve) => {
    setTimeout(resolve, timeout);
  });
}

module('Acceptance | slowdown', function(hooks) {
  setupApplicationTest(hooks);

  test('clicking the button reveals text', async function(assert) {
    await visit('/');
    await wait();
    await click('.test-button-1');
    await wait();
    assert.equal(find('.some-message').innerText, 'first message');
    await click('.test-button-2');
    await wait();
    assert.equal(find('.some-message').innerText, 'second message');
  });
});

I also recommend using your browser's debugger to step through code at your own pace. It's really powerful and will probably help you more than slowing down tests, in most cases. this.pauseTest() is also very helpful.

There's also the possibility of using a JavaScript generator for some less-cluttered code, but if you use this, your tests won't exit properly, so it's a temporary approach:

import { module, test } from 'qunit';
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import { click, find } from '@ember/test-helpers';

function slowTest(message, generatorFunction) {
  test(message, async function(assert) {
    let generator = generatorFunction(assert);

    window.step = window.next = async () => {
      generator.next();
      await this.pauseTest();
    }

    window.finish = () => {
      generator.return();
      this.resumeTest();
    }

    await this.pauseTest();
  });

}

module('Acceptance | slowdown', function(hooks) {
  setupApplicationTest(hooks);

  slowTest('clicking the button reveals text', function*(assert) {
    yield visit('/');
    yield click('.test-button-1');

    assert.equal(find('.some-message').innerText, 'first message');

    yield click('.test-button-2');

    assert.equal(find('.some-message').innerText, 'second message');
  });
});