How can I visually see an integration test?

1

I’m confused about what’s going on in one of my integration tests, if I coud just see the component being rendered and clicked that would help trmemendously. Is there a way I can either capture a screenshot of the component to see its state, or have non-headless chrome so that I can view the test ?

2

You can run your tests in your browser with ember test --server. After that starts up you can view/run the tests by visiting http://localhost:7357/

You can also use the pauseTest helper from ember-test-helpers to pause your test:

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

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

  test('it renders', async function(assert) {
    await render(hbs`{{foo-bar}}`);

    await pauseTest();

    assert.equal(this.element.textContent.trim(), 'template block text');
  });
});

You can also check the “Development Mode” checkbox in the test runner in your browser to view the component in a full-screen-screen kinda view.

12%20PM

1 Like
3

Thanks for the example! You pointed me in the right direction. My problem is that I’m using ember-mocha , so while I’m able to see the test being run at localhost:7357 they run super fast and I can’t see what’s going on, and there is no development mode or any other option when I run tests in the browser. All I see is this:

image
image1065×791 16.1 KB

I tried using pauseTest but when I include import { render, pauseTest } from '@ember/test-helpers'; The tests simply do not run.

4

Hello @GregWeb, are you using the new testing API? which version of ember-mocha are you on?

If you want to use pauseTest from import { pauseTest } from '@ember/test-helpers'; you will need to use the new testing API and ember-mocha must be => v0.14.0-beta.1

If you’re on ember-mocha < 0.13.1 then you can simply do:

it('renders', function(done) {
  this.timeout(30000);
   //...
  this.render();
  setTimeout(() => done(), 30000);
  //...
});
5

Hi @esbanarango thanks for the tip. we’re using ember 2.18.1 with ember-mocha: 0.12.0. I will make a note to update. But what do you mean by the new test API? You mean in the post ember 3 changes?

6

@GregWeb Yeah, the new testing API is basically based on these RFCs 232 and 268. You can check the migration guide for mocha here: ember-mocha/migration.md at master · emberjs/ember-mocha · GitHub.

But since you’re on ember-mocha: 0.12.0 you can simply use this.timeout(xx); and setTimeout(() => done(), xx); as I showed before.

7

The new testing APIs aren’t tied to any particular ember version – you can update your tests to the new format whenever you want to, or keep a mix of old-style and new-style tests if there’s stuff you don’t want to change.

1 Like
8

Thanks again, got your example to work, however it required changing the global timeout in test-helper.js.

However I gotta say it’s a little silly to do it this way IMHO for what should just be a simple wait() or pause() or sleep(). I feel like if such a basic thing is lacking in ember-mocha there might be other simple issues we might run into in the long run, might as well switch back to qunit.

9

@GregWeb Great! You may want to read this thread :stuck_out_tongue: Why does rwjblue like Qunit so much more than Mocha?

1 Like