Dynamic inline styles causes test server to crash

Performance
1

When using dynamic value for a style attribute (e.g. style="border: 3px solid {{this.borderColor}}") particularly 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.

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

Once the tests starts running

  • Test server hangs after running all test cases.

  • CPU usage spikes to 100%.

  • Manual kill required (Ctrl+C may not respond).

How I fixed it

  • Applying the style with an ember render modifier resolves this issue

    <li {{apply-styles styles=(hash border=this.borderStyle)}}> <!-- applies 'border: 3px solid red' -->

Im not sure how this does not cause the same problem.

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.

Once the test is completed you can see the test suite hangs. To confirm try rerunning the tests.

screen shot:

image
image1920×1084 166 KB

Please share your thoughts and knowledge on this topic