Testing Block Params in Ember

Last reviewed on January 27, 2024

Let's say we have a component that yields out block params, and we want to write tests to check those block params.

<LoadRecords as |records|>
  {{! I want to write assertions against `records` }}
</LoadRecords>

One way to do this would be to render out records and write assertions using QUnit DOM. While this works in some cases, this would be tedious if there are lots of properties in records that I want to check.

As of Ember 4.5, plain old functions can be used as helpers. With this, we can write a function in our test and use it as a helper so that we can use standard QUnit assertions on block params without rendering the block params.

module("Integration | Component | load-records", function (hooks) {
  setupRenderingTest(hooks);

  test("it renders", async function (assert) {
    let recordsBlockParam;

    this.capture = records => {
      recordsBlockParam = records;
    };

    await render(hbs`
      <LoadRecords as |records|>
        {{this.capture records}}
      </LoadRecords>
    `);

    assert.deepEqual(recordsBlockParam, [
      { id: 1, name: "David" },
      { id: 2, name: "Ed" },
    ]);
  });
});

This technique was helpful in the test above since it allowed me to use QUnit's deepEqual on the block param. The alternative would have been to render out all of the properties in records and write QUnit DOM assertions, which seems tedious. Also, if I wanted my test to be thorough, I'd have to ensure that all properties in records are rendered, resulting in more template code.

This technique could have also been helpful if I had wanted to test for strict equality on the block param using QUnit's strictEqual, which wouldn't be possible had I rendered out the data and using a QUnit DOM assertion.