Not clear how to debug component tests

[andreisebastianc]

Hello!

I have this test file. From #70 I assume the approach should work.

import { setupRenderingTest } from '@glimmer/test-helpers';
import hbs from '@glimmer/inline-precompile';

const { module, test } = QUnit;

module('Component: bar-chart', function(hooks) {
  setupRenderingTest(hooks);

  test('it renders with a message that no data is available', async function(assert) {
    await this.render(hbs`<bar-chart />`);
    assert.ok(this.containerElement.querySelector('p').innerText = 'No data available');
  });

  test('it renders an svg when data is available', async function(assert) {
    this.data = {
      "name": "display",
      "children": [
        {"name": "DirtySprite", "size": 8833},
        {"name": "LineSprite", "size": 1732},
        {"name": "RectSprite", "size": 3623},
        {"name": "TextSprite", "size": 10066}
      ]
    };
    await this.render(hbs`<bar-chart @data={{data}} />`);
    assert.ok(this.containerElement.querySelector('svg'));
  });
});

I get this result.

ok 1 Firefox 54.0 - Component: bar-chart: it renders with a message that no data is available
not ok 2 Firefox 54.0 - Component: bar-chart: it renders an svg when data is available
    ---
        actual: >
            null
        stack: >
            @http://localhost:7357/index.js:1455:5
            evaluate@http://localhost:7357/index.js:1310:9
            next@http://localhost:7357/index.js:6530:13
            next@http://localhost:7357/index.js:6568:16
            render@http://localhost:7357/index.js:7787:22
            boot@http://localhost:7357/index.js:7774:9
            render@http://localhost:7357/index.js:7031:5
            @http://localhost:7357/index.js:15404:19
            __awaiter$1</<@http://localhost:7357/index.js:15380:15
            __awaiter$1<@http://localhost:7357/index.js:15360:12
            @http://localhost:7357/index.js:15399:16
        message: >
            Promise rejected during it renders an svg when data is available: expr is null
        Log: |
    ...
ok 3 Chrome 60.0 - Component: bar-chart: it renders with a message that no data is available
not ok 4 Chrome 60.0 - Component: bar-chart: it renders an svg when data is available
    ---
        actual: >
            null
        stack: >
            TypeError: Cannot read property 'get' of null
                at APPEND_OPCODES.add (http://localhost:7357/index.js:1455:23)
                at AppendOpcodes.evaluate (http://localhost:7357/index.js:1310:9)
                at VM.next (http://localhost:7357/index.js:6530:28)
                at TemplateIterator.next (http://localhost:7357/index.js:6568:24)
                at App$1.render (http://localhost:7357/index.js:7787:39)
                at App$1.boot (http://localhost:7357/index.js:7774:14)
                at Object.render (http://localhost:7357/index.js:7031:9)
                at Object.<anonymous> (http://localhost:7357/index.js:15404:24)
                at Generator.next (<anonymous>)
                at http://localhost:7357/index.js:15380:71
        message: >
            Promise rejected during it renders an svg when data is available: Cannot read property 'get' of null
        Log: |
    ...

1..4
# tests 4
# pass  2
# skip  0
# fail  2

I would like to debug what's going on but the browsers always close. I tried using an alert to open up the dev tools and use the inline debugger but this doesn't quite work. Also, Chrome crashed after a few reruns.

Any config option that can help me with this one?

[andreisebastianc]

ember test -s works just fine