Skip to content

@tracked decorator causes coverage issues - including on comment lines #418

@BillyRayPreachersSon

Description

@BillyRayPreachersSon

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions