import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import { later } from '@ember/runloop';

module('Integration | Component | loading bar', function(hooks) {
  setupRenderingTest(hooks);

  test('it renders', async function (assert) {
    const bar = '.bar';
    this.set('isLoading', true);

    // don't `await` this render as the internal task that never stops will keep this test running forever
    render(hbs`{{loading-bar isLoading=isLoading}}`);
    // we need to give the bar a moment to actually change state and we
    // cannot use wait here because the task actually keeps running forever preventing
    // any kind of settled state
    await later(async () => {
      assert.ok(find(bar).getAttribute('value').trim() > 0);
      this.set('isLoading', false);
      await later(() => {
        assert.equal(find(bar).getAttribute('value').trim(), 0);
      }, 2000);
    }, 1000);
  });
});

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, find, waitFor } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import { later } from '@ember/runloop';

module('Integration | Component | loading bar', function(hooks) {
  setupRenderingTest(hooks);

  test('it renders', async function (assert) {
    const bar = '.bar';
    const emptyBar = '.bar[value="0"]';
    this.set('isLoading', true);

    // don't `await` this render as the internal task that never stops will keep this test running forever
    render(hbs`{{loading-bar isLoading=isLoading}}`);
    await waitFor(bar);
    // we need to give the bar a moment to actually change state and we
    // cannot use wait here because the task actually keeps running forever preventing
    // any kind of settled state
    await later(async () => {
      assert.ok(find(bar).getAttribute('value').trim() > 0);
      this.set('isLoading', false);
      await waitFor(emptyBar);
      assert.equal(find(bar).getAttribute('value').trim(), 0);
    }, 500);
  });
});

Improve async loading bar test
Improve async loading bar test

The waitFor helper is allows us to wait for what we are actually testing
instead of a time which sometimes blocks the rendering and causes the
test to be flaky.
