Migrate the {{element}} helper tests to a plain .gjs test with setupRenderingTest

[NullVoxPopuli-ai-agent]

element-test.gjs is now a test as in an app. It uses setupRenderingTest from ember-qunit, render and settled from @ember/test-helpers, and <template>. It uses nothing from internal-test-helpers.

module('Helpers test: {{element}}', function (hooks) {
  setupRenderingTest(hooks);

  test('it renders a tag with the given tag name', async function (assert) {
    await render(
      <template>{{#let (element "h1") as |Tag|}}<Tag id="content">hello world!</Tag>{{/let}}</template>
    );

    assert.strictEqual(this.element.innerHTML, '<h1 id="content">hello world!</h1>');
  });
});

How to read this PR

Read it commit by commit. GitHub shows the test as one deleted file and one new file in the full diff.

1. Add @ember/test-helpers to the test build: the same config changes as in Use settled from @ember/test-helpers in the RouterService transitionTo tests #21658.
2. Add ember-qunit to the test build: the setup that the real setupRenderingTest needs.
3. Rename element-test.js to element-test.gjs: no content change.
4. Migrate the {{element}} helper tests to a plain .gjs test: the one file change.

The test file

The 14 test names, the 15 templates and the error patterns are the same.

Before	After
moduleFor + RenderingTestCase	module + setupRenderingTest(hooks)
template('...', { scope })	<template>...</template>
this.renderComponent(X, { expect })	await render(X) + this.element.innerHTML
runTask(() => (state.x = y))	state.x = y; await settled();
this.assertHTML(html)	assert.strictEqual(this.element.innerHTML, html)
this.assertText(text)	assert.strictEqual(this.element.textContent, text)
assert.throws(() => render)	await assert.rejects(render(...))

Three things are not the same:

• this.renderComponent() also ran assertStableRerender(). A plain test has no equivalent, so that check is gone.
• assertHTML ignored the order of attributes, and innerHTML does not. One expected string now has id before type.
• The build compiles <template>. template() compiled in the browser.

The setup

• ember-qunit is a devDependency. Its macro config turns off its theme and its container styles, because index.html loads the QUnit styles and tests render into #qunit-fixture.
• broccoli/app-ember-satisfies-plugin.cjs answers appEmberSatisfies(...) with the version of this repo. @embroider/macros reads that version from the dependencies of the app, and ember-source cannot depend on itself. Without the plugin, render() takes the outlet path and all 14 tests fail.
• index.html starts QUnit itself, after the tests and testem.js are loaded. ember-qunit turns autostart off on import. It also calls the testem hook on import, and testem throws on a second hook, so testem.js now loads after the tests.
• index.html imports QUnit by package name, and the dev server pre-bundles it. A test can then import { module, test } from 'qunit'.
• setup-test-helpers.js gives each test its own Application. An app passes one Application to setApplication(), but moduleFor fails a test that leaves a namespace behind.
• The same file restores testing mode and the backburner debug flag before each test, because teardownContext() and setupContext() change them. Without that, two Route tests fail.

Two small effects on the whole suite, both from the import of ember-qunit: QUnit.config.testTimeout is 60 seconds, and the QUnit toolbar gets the "Hide container" and "Development mode" checkboxes.

Verification

• The 14 element tests pass on five builds (development with and without NODE_ENV, production, stable decorators, TypeScript emit) and on five runtime variants (deprecations and optional features).
• Full suite, 0 failures in each build:
  • development: 9513 tests, 9495 pass, 18 skipped
  • production: 9351 tests, 9286 pass, 65 skipped
  • stable decorators: 9513 tests, 9495 pass, 18 skipped
  • stable decorators with TypeScript emit: 9513 tests, 9495 pass, 18 skipped
• With the await settled() lines removed, "it renders when the tag name changes" fails.
• pnpm start (the vite dev server) in headless Chrome: the 14 tests pass, and a moduleFor module passes too.
• The rename commit passes alone.
• pnpm type-check:internals, eslint and prettier pass. pnpm build passes and leaves no diff. This repo does not lint or format .gjs files.

Related

• Use settled from @ember/test-helpers in the RouterService transitionTo tests #21658 has the same first commit. The PR that merges second loses that commit in a rebase.
• An upstream fix is possible: appEmberSatisfies in @embroider/macros can use the version of the app when the app is ember-source. Then the babel plugin here can go.

🤖 Generated with Claude Code