kittencup / angular2-ama-cn

angular2 随便问
691 stars 101 forks source link

decorator 应该怎么被测试 #113

Open DotHide opened 8 years ago

DotHide commented 8 years ago

这个问题是针对 Ionic2 的,尽管不是纯的 Angular2 问题,但想来它主要基于 Angular2,可能有些共通之处,不知是否能请教一下,举例来说:当我们有个 Home 类,它是这样的:

// pages/home/home.ts
import {Page} from 'ionic-angular';
@Page({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {}

当我们去写测试的时候,其实类本身没有需要测试的内容,但它的 decorator Component 中有个变量,如果我需要测试,不知这样的测试应该如何去编写?

其实从编译后的结果去观察,它的 js 文件是这样的:

// build/pages/home/home.js
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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var ionic_angular_1 = require('ionic-angular');
var HomePage = (function () {
    function HomePage() {
    }
    HomePage = __decorate([
        ionic_angular_1.Page({
            template: "\n    <ion-navbar *navbar>\n      <ion-title>\n        Star Coffees\n      </ion-title>\n    </ion-navbar>\n\n    <ion-content class=\"home\">\n      <ion-card>\n        <ion-card-header>\n          Card Header\n        </ion-card-header>\n        <ion-card-content>\n          Hello World\n        </ion-card-content>\n      </ion-card>\n    </ion-content>\n  "
        }), 
        __metadata('design:paramtypes', [])
    ], HomePage);
    return HomePage;
})();
exports.HomePage = HomePage;

而我的测试文件是这样写的:

// pages/home/home.spec.ts
import { HomePage } from './home';
let homePage: HomePage = null;

export function main(): void {
  'use strict';
  describe('HomePage', () => {
    beforeEach(() => {
      homePage = new HomePage();
    });

    it('should initialize HomePage', () => {
      expect(homePage).not.toBeNull();
    });
  });
}

因此,每当我跑 code coverage 的时候,总跑不满 100%,发现其中的一个重要原因就是上面这段 __decorate 方法没有被测试到,还望请教一下,谢谢~

kittencup commented 8 years ago

Component decoate 中的变量其实就是类中的一个属性而已

DotHide commented 8 years ago

恩 只是不知道怎么去测试或者回避 TypeScript 生成的这些 helper 方法:__decorate__metadata 不做测试的话,跑 coverage 总提示没测到:

----------------------|----------|----------|----------|----------|----------------|
File                  |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------------------|----------|----------|----------|----------|----------------|
 test/                |    89.74 |    48.39 |       80 |    94.29 |                |
  app.js              |    89.66 |    48.28 |    85.71 |       96 |              5 |

当把这些 helper 方法去掉就能跑满 100% ,但由于这些方法的生成不受控制,因此 spec 文件中只能确保自己写的函数经过了测试。所以一直在寻找能测试甚至是回避这些 helper 的方法。

kittencup commented 8 years ago

coverage 能 ignore 某些 code么。 可以从这里下手。