2016-07-21 5 views
0

シンプルなサービスに対してテストを作成しようとしていますが、「TypeError:オブジェクトがプロパティまたはメソッド 'map'をサポートしていません」というエラーが表示されます。実際の(テストではない)サービスはうまく動作し、問題はありません。私がAngular2のテストセットアップを取得しようとしているのは今回が初めてなので、何か不足している可能性があります。ここに私のコンポーネントがあります。私は片をつなぎ合わせることを試みてきたAngular2 http機能をサポートしているhttpサービスをテスト中

recentActivity.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 

import { Observable } from 'rxjs/Observable'; 
import * as toPromise from 'rxjs/add/operator/toPromise'; 
import * as map from 'rxjs/add/operator/map'; 

import { RecentActivity } from './recentActivity.model'; 

@Injectable() 
export class RecentActivityService { 

    private baseUrl = '/RecentActivity/'; 

    constructor(private http: Http) { 

    } 

    get(): Observable<any> { 
     //return undefined; 
     return this.http 
      .get(this.baseUrl + 'Get') 
      .map((response: Response) => response.json()) 
      //.toPromise() 
      ; 
    } 

} 

recentActivity.spec.ts

import { async, describe, it, expect, inject, beforeEach, beforeEachProviders } from '@angular/core/testing'; 
import { Http, BaseRequestOptions, Response, ResponseOptions } from '@angular/http'; 
import { MockBackend, MockConnection } from '@angular/http/testing'; 

import { RecentActivity } from './recentActivity.model'; 
import { RecentActivityService } from './recentActivity.service'; 

describe('Recent Activity Service',() => { 
    let service: RecentActivityService; 
    let mockBackend: MockBackend; 
    const mockResponseData: RecentActivity[] = [ 
     { Name: 'Test Result 1', Url: '#/TestResult1' }, 
     { Name: 'Test Result 2', Url: '#/TestResult2' }, 
     { Name: 'Test Result 3', Url: '#/TestResult3' } 
    ]; 

    beforeEachProviders(() => [ 
     RecentActivityService, 
     MockBackend, 
     BaseRequestOptions, 
     { 
      provide: Http, 
      useFactory: (backend, options) => new Http(backend, options), 
      deps: [MockBackend, BaseRequestOptions] 
     } 
    ]); 

    beforeEach(inject([RecentActivityService, MockBackend], (ras, mb) => { 
     service = ras; 
     mockBackend = mb; 
    })); 

    it('Can load list of recent activities', (done) => { 
     mockBackend.connections.subscribe((connection: MockConnection) => { 
      const responseOpts = new ResponseOptions({ body: JSON.stringify(mockResponseData) }); 
      connection.mockRespond(new Response(responseOpts)); 
     }); 

     service.get() 
      .subscribe((results: RecentActivity[]) => { 
       expect(results.length).toEqual(3); 
       expect(results[0].Name).toEqual('Test Result 1'); 
       expect(results[1].Name).toEqual('Test Result 2'); 
       expect(results[2].Name).toEqual('Test Result 3'); 
       done(); 
      }); 
    }); 
}); 

単位tests.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
    <title>Unit Tests</title> 
    <link rel="stylesheet" href="./libs/jasmine-core/lib/jasmine-core/jasmine.css"> 

    <script src="./libs/jasmine-core/lib/jasmine-core/jasmine.js"></script> 
    <script src="./libs/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> 
    <script src="./libs/jasmine-core/lib/jasmine-core/boot.js"></script> 

    <script src="./libs/core-js/client/shim.min.js"></script> 
    <script src="./libs/zone.js/dist/zone.js"></script> 
    <script src="./libs/reflect-metadata/Reflect.js"></script> 
    <script src="./libs/systemjs/dist/system.src.js"></script> 
    <script src="./libs/rxjs/bundles/Rx.js"></script> 

    <script src="~/lib/jquery/dist/jquery.js"></script> 
    <script src="~/lib/underscore/underscore.js"></script> 
    <script src="~/lib/moment/moment.js"></script> 
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 

    <script src="./systemjs.config.js"></script> 
    <script> 
     // #2. Configure systemjs to use the .js extension 
     //  for imports from the app folder 
     System.config({ 
      packages: { 
       'app': { defaultExtension: 'js' } 
      } 
     }); 

     // #3. Import the spec file explicitly 
     Promise.all([ 
      System.import('app/recentActivity/recentActivity.spec'), 
      System.import('app/pipes/styleVisibility.spec') 
     ]) 

     // #4. wait for all imports to load ... 
     //  then re-execute `window.onload` which 
     //  triggers the Jasmine test-runner start 
     //  or explain what went wrong. 
     .then(window.onload) 
     .catch(console.error.bind(console)); 
    </script> 
</head> 
<body> 
</body> 
</html> 

これを動作させるが、私は何が欠けているのか分からない。また、私はビジュアルスタジオ2015を使用しているサイドノートとして、また、 "プロパティマップはタイプ 'Observable'に存在しないという警告を出しています。

私はこのサービスを実際に実行するとすべてがうまくいくと言いました。私のバックエンドからの情報は問題なく返されます。

答えて

1

私がしなければならなかったすべては「観察可能rxjs /」から{}観察可能

インポートするrecentActivity.service.tsファイルでインポートを変更しました。 'rxjs/add/operator/map'をインポートします。

私はまだVisual Studioでエラーが発生しています。もし誰かが私にそれを取り除く方法を教えてくれたら、私はそれを感謝します。

0

上記の解決策も私のために機能します。私も.doというおよび.catchを使用していたので、しかし、私は同様にそれらをインポートする必要がありました:

インポート「をrxjsを//operator.doを追加します。 インポート 'rxjs/add/operator.catch;

他人にも役立ちます。

関連する問題