ember-cli-code-coverage icon indicating copy to clipboard operation
ember-cli-code-coverage copied to clipboard

@tracked decorator causes coverage issues - including on comment lines

Open BillyRayPreachersSon opened this issue 6 months ago • 8 comments

I've recently found that using the @tracked decorator is causing coverage issues. The odd thing is our project has many files containing @tracked, and yet only one particular file seems to be affected by this issue.

We're using: "ember-cli": "3.24.0" "ember-source": "3.24.7" "ember-cli-code-coverage": "1.0.3" "istanbul": "0.4.5"

The issue is that the line after the @tracked property will show as having no coverage. What's ever weirder is that if I /* istanbul ignore next */ the allegedly uncovered line, the ignore comment itself will show as being uncovered - and yet comments cannot have coverage.

Our project is private, so I can't link to it... but I've managed to reproduce the issue on an out-of-the-box 3.24.0 install, with the addition of the ember-cli-code-coverage and istanbul versions mentioned above.

If I generate the following class-backed component, add it to the application.hbs file, and then run COVERAGE=true ember s, opening the coverage report shows the constructor line as not having coverage - even though it has to have run in order for the test to pass.

covered-component.js:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class extends Component {

  @tracked
  foo = null;

  constructor() {
    super(...arguments);

    this.foo = 'bar';
  }

}

covered-component.hbs:

this.foo: {{this.foo}}

covered-component-test.js:

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

module('Integration | Component | covered-component', function(hooks) {
  setupRenderingTest(hooks);

  test('it renders', async function(assert) {
    await render(hbs`<CoveredComponent />`);
    assert.equal(this.element.textContent.trim(), 'this.foo: bar');
  });
});

The coverage report for the code above shows this: image

If I update the constructor line to be ignored...:

/* istanbul ignore next */
constructor() {
  super(...arguments);

  this.foo = 'bar';
}

...re-running the tests and refreshing the coverage report shows the coverage comment is uncovered: image

The only way I've found to prevent this issue is to put the ignore directive before the @tracked decorator, but we'd rather not do this on our project as it gives a false impression that covered code is not covered.

It's also worth noting that exactly the same behaviour happens if I update to "ember-cli-code-coverage": "2.0.2" - the same pink marks show in the reports in the same places.

BillyRayPreachersSon avatar Aug 08 '24 07:08 BillyRayPreachersSon