Test server crash

[ashik-ts-12418]

---

🐞 Describe the Bug

When using partial string interpolation inside a style attribute (e.g. style="border: 3px solid {{this.borderColor}}") inside an {{#each}} block, the test suite hangs and CPU usage spikes to 100%—but only during testing (ember test --server). This issue becomes worse when multiple tests visit the same page repeatedly, as each visit seems to increase memory or DOM processing load.

This issue does not occur in the browser and happens even if the bound values are static or never change.
(may be because the app doesn't render again and again such as tests)

---

🔬 Minimal Reproduction

Tested even in Ember’s official Super Rentals example.
https://github.com/ember-learn/super-rentals/tree/super-rentals-tutorial-output

Controller:

export default class IndexController {
  arrayOfNames = [
    'apple white', 'aqua', 'aqua marine', 'bisque', 'black',
    'blanched almond', 'blue', 'blue violet', 'brown', 'chocolate',
    'crimson red', 'cyan', 'dark blue', 'dark cyan', 'dark green',
    'fire brick', 'floral white', 'ghost white', 'grey', 'yellow green'
  ];

  borderColor = 'red';
}

Template:

<ul>
  {{#each this.arrayOfNames as |name|}}
    <li style="border: 3px solid {{this.borderColor}}">{{name}}</li>
  {{/each}}
</ul>

Acceptance Test:

module('Acceptance | repeated visit', function(hooks) {
  setupApplicationTest(hooks);

  test('checking all li elements are present', async function (assert) {
    await visit('/');
    assert.dom('li').exists({ count: 20 });
  });

  test('checking li element - apple white', async function (assert) {
    await visit('/');
    assert.dom('li').containsText('apple white');
  });

  test('checking li element - aqua', async function (assert) {
    await visit('/');
    assert.dom('li').containsText('aqua');
  });

  // ... similar tests for remaining items
});

Run using:

ember test --server

---

😕 Actual Behavior

• Test server hangs after several test cases.
• CPU usage spikes to 100%.
• Manual kill required (Ctrl+C may not respond).
• More repeated renders = faster hangs.

---

🤔 Expected Behavior

• CPU and memory usage should remain stable.
• Static style interpolations should not trigger test instability.

---

🌍 Environment

{
  "ember": "6.4.0",
  "ember-cli": "~6.4.0",
  "ember-qunit": "^9.0.2",
  "node": "22.12.0",
  "yarn": "1.22.10",
  "os": "macOS 15.5 (Intel + M1 tested)",
  "volta": {
    "node": "22.12.0",
    "yarn": "1.22.10"
  }
}

---

➕ Additional Context

• Rewriting the style like this avoids the issue:

  <li style="{{this.computedStyle}}"> <!-- returns 'border: 3px solid red' -->

Example:
https://stackblitz.com/edit/github-yu36hthb?file=tests%2Facceptance%2Findex-test.js

You can run ember t -s in this app to replicate this issue

screen shot:

[NullVoxPopuli]

is something wrong with the repro?

i get this in the stackblitz

[ashik-ts-12418]

Sorry about that — I’ve fixed it now.

The test may still fail, but please check whether the server hangs while running it.
It’s a good idea to monitor your CPU usage in Activity Monitor during the test run.

[ashik-ts-12418]

@NullVoxPopuli after all the tests have finished, click 'Go' again—you’ll notice that the test service shuts down.

[kategengler]

You're saying this doesn't happen when running tests via localhost:4200/tests?

[ashik-ts-12418]

No, the server crashes anyway.
The issue appears to be an out-of-memory error triggered when an element’s style attribute contains a value with partial string interpolation such as:
<li style="border: 3px solid {{this.borderColor}}">{{this.name}}</li>