Refactor test: use step helper called from template instead of DOM assertions

Agent-Logs-Url: https://github.com/emberjs/ember.js/sessions/509a66ed-dd19-4b09-aadc-523e8e19e5f6

Co-authored-by: NullVoxPopuli <[email protected]>

Author: Copilot

packages/@glimmer-workspace/integration-tests/lib/suites/in-element-document-fragment.ts

@@ -136,64 +136,44 @@ export class InElementDocumentFragmentSuite extends RenderTest {
   'After fragment is attached to DOM, text updates and new conditional elements appear in the container'() {
     const fragment = document.createDocumentFragment();
     const container = document.createElement('div');
+    const step = (text: string) => this.assert.step(text);
 
     this.render(
       '{{#in-element this.fragment}}' +
-        '<p id="msg">{{this.message}}</p>' +
-        '{{#if this.show}}<span id="extra">extra</span>{{/if}}' +
+        '<p id="msg">{{this.message}} {{this.step "message rendered"}}</p>' +
+        '{{#if this.show}}' +
+        '<span id="extra">extra {{this.step "extra rendered"}}</span>' +
+        '{{/if}}' +
         '{{/in-element}}',
       {
         fragment,
         message: 'initial',
         show: false,
+        step,
       }
     );
 
-    this.assert.step('initial render into fragment');
-    const p = fragment.querySelector('#msg') as HTMLElement;
-    this.assert.strictEqual(p?.textContent, 'initial', 'p rendered in fragment');
-    this.assert.notOk(fragment.querySelector('#extra'), 'no extra span in fragment yet');
+    this.assert.verifySteps(['message rendered'], 'initial render fires step from inside fragment');
 
     // Move fragment's children (including Glimmer's comment bounds) into the container
     container.appendChild(fragment);
-    this.assert.step('fragment attached to DOM');
     this.assert.strictEqual(fragment.childNodes.length, 0, 'fragment is empty after append');
-    this.assert.strictEqual(
-      container.querySelector('#msg')?.textContent,
-      'initial',
-      'p is in the container'
-    );
 
     // Text-node update: Glimmer holds a direct reference to the text node, so the
     // update is visible in the container even though the fragment is now empty.
     this.rerender({ message: 'updated' });
-    this.assert.step('text updated');
-    this.assert.strictEqual(
-      container.querySelector('#msg')?.textContent,
-      'updated',
-      'text update is reflected in the container'
+    this.assert.verifySteps(
+      ['message rendered'],
+      'text update fires step even after fragment was attached to the DOM'
     );
-    this.assert.strictEqual(fragment.childNodes.length, 0, 'fragment remains empty after text update');
 
     // New-element update: Glimmer inserts the span relative to the comment bounds,
     // which also moved to the container, so the new element appears in the container.
     this.rerender({ show: true });
-    this.assert.step('conditional element shown');
-    this.assert.ok(
-      container.querySelector('#extra'),
-      'new conditional element appears in the container (comment bounds moved with the fragment)'
-    );
-    this.assert.notOk(
-      fragment.querySelector('#extra'),
-      'new conditional element is not in the (now-empty) fragment'
+    this.assert.verifySteps(
+      ['message rendered', 'extra rendered'],
+      'new conditional element fires step in the container after fragment was attached to the DOM'
     );
-
-    this.assert.verifySteps([
-      'initial render into fragment',
-      'fragment attached to DOM',
-      'text updated',
-      'conditional element shown',
-    ]);
   }
 
   @test