ember-cli-code-coverage
ember-cli-code-coverage copied to clipboard
@tracked decorator causes coverage issues - including on comment lines
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:
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:
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.