Code coverage for directive parameters is wrong

[bashirsouid]

We are also having a similar issue as #70 when using istanbul for code coverage in our Angular2 application that uses the standard @input decorator.

import { Component, Input } from '@angular/core';
import { PluginOptions } from '../../../plugin-contracts';
import { Template } from '../../../plugin-contracts';
 
@Component({
    selector: 'angular-component',
    templateUrl: './angular-component.component.html',
    styleUrls: ['./angular-component.component.scss'],
})
export class AngularComponent {
    /* istanbul ignore next */
    @Input()
    pluginOptions: PluginOptions;
 
    /* istanbul ignore next */
    @Input()
    template: Template;
}

Here is the typedef for the @input decorator:

/**
 * Type of the Input metadata.
 *
 * @stable
 */
export interface Input {
    /**
     * Name used when instantiating a component in the template.
     */
    bindingPropertyName?: string;
}

The code coverage shows up as missing branches in the @input decorator which is just an interface. Is it because it is an optional property? There is no way to directly cover this.

Any ideas?

[bcoe]

@bashirsouid we would need to dig into the transpiled code that gets generated by:

    /* istanbul ignore next */
    @Input()
    pluginOptions: PluginOptions;

depending on what the expanded code looks like, we might be able to tweak the instrumenter slightly to give coverage; does the ignore directive work as expected?

[Enderer]

@bcoe I'm getting the same issue on @Input() properties. Adding the ignore directive doesn't have an effect

[gernsdorfer]

For this problem I created a simple demo repository:
https://github.com/gernsdorfer/coverage-bug

External Interface's for Input's reduce the code coverage.

A workaround is to embed the interface:

@Input() test: ExternalBar; // coverage not working
@Input() testWorks: { externalBar: ExternalBar }; // // coverage work's

[troythacker]

I'm running into the same issue with @ViewChild

In the transpiled javascript, there seems to be two parts that are created for the decorators:

At the very top of the file:

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};

and after the component definition:

var SearchComponent = (function () {
    function SearchComponent(renderer) {
        this.renderer = renderer;
    }
   // Rest of prototype declarations here
   return SearchComponent;
}());
__decorate([
    core_1.ViewChild('searchContainer'),
    __metadata("design:type", core_1.ElementRef)
], SearchComponent.prototype, "searchContainer", void 0);
__decorate([
    core_1.ViewChild('searchInput'),
    __metadata("design:type", core_1.ElementRef)
], SearchComponent.prototype, "searchBox", void 0);

[bcoe]

@troythacker @bashirsouid @Enderer give babel-plugin-istanbul a shot, which can be used to instrument code as part of the transpilation process, which can provide more accurate coverage results for ES-next features.

Unfortunately, until some of these language features have landed in v8 itself, I can't promise we'll be able to find a workaround to get accurate coverage.

[maddy619]

Please try setting sourceMap to true in test configuration of angular.json