角度プロトラクターe2eテスト

Question

私は角度アプリケーションのためにプロトラクターを使用してエンドツーエンドテストを作成しています。私は単体テスト用のhttpBackendをモックすることができますが、実際にサーバーを呼び出してJSON応答を取得し、返されたデータを再度テストしたいと思います。
私はstackoverflowで多くを読んだことがありますが、これがどのように行われたのか理解できません。

私は$ httpを使用しますか？ジャスミン試験にどのように注入すればいいですか？応答JSONをジャスミンテストに戻すにはどうすればよいですか？

これに関する指示があるリソースへのヘルプやリンクが役立ちます。

もう一度サーバーにモックしたくないので、サーバーにヒットしてJSONを取得します。

ありがとうございます！

Answer 1

分度器は、フルスタックのエンドツーエンドテストに使用する必要があります。

このシナリオでは、典型的には、角型アプリケーション（フォームを記入し、ボタンを押す）を実行します。角型アプリケーションがRESTサーバーを呼び出してデータを返します。エンドツーエンドのテストがアサートされます。

これはそれを行うためにどのように分度器

を開始する前に、あなたはおそらく（私が思うの角度アプリケーションをホストし、RESTのバックエンドである、）アプリケーションサーバーを開始したいということは、分度器のための適用範囲外です。

通常、データベースの設定方法は難しいので、e2eテストではJSONサービスへのリターンとして期待することが分かっています。

Answer 2

私は現時点で自分自身で作業しています。私が思うに短い答えは、自分で手動でテストしていたのとまったく同じようにアプリケーションをセットアップするということです.Practractorは本当に単なるロボットユーザーであり、アプリケーションの内部へのアクセスはほとんどありません。

アプリケーションがWebサーバーを必要とする場合は、そのWebサーバーを起動し、分度器をブラウザ経由でアプリケーションに接続して実行させます。

私の場合は、傾きを使用して基本的なデータベース設定を行うタスクを呼び出すことを目指しています。これは分度器e2eテストの実行を開始します。これにより、既知のデータベース状態が得られます。

この例については、私はAngularJSとRailsの4を使用するためのチュートリアルを書いてきた、E2Eテストのために分度器を使って上のセクションでは、レールの固有のものではなく、便利かもしれません： 以下http://technpol.wordpress.com/2013/11/16/5-end-to-end-testing/

Answer 3

ですe2eテストの実行中にのみ独立したノードサーバーを自動的に開始および停止する方法の例。シンプルなエクスプレスモックサーバースクリプトがサンプルAPIとして含まれています。

protractor.conf.js

const {SpecReporter} = require('jasmine-spec-reporter'); 
const forever = require('forever-monitor'); 

const child = new (forever.Monitor)('index.js', { 
    max: 10, 
    silent: false, 
    args: ["--port", "3001"], 
    sourceDir: 'mock-server' 
}); 

let startResolve; 
let stopResolve; 
const startPromise = new Promise((resolve) => startResolve = resolve); 
const stopPromise = new Promise((resolve) => stopResolve = resolve); 

child.on('start', function() { 
    console.info('Forever started mocks.'); 
    startResolve(); 
}); 

child.on('restart', function() { 
    console.info('Forever restarting mocks for ' + child.times + ' time'); 
}); 

child.on('exit:code', function (code) { 
    if (code) { 
    console.info('Forever exit mocks with code ' + code); 
    } else { 
    console.info('Forever exited mocks.'); 
    } 
    stopResolve(); 
}); 

exports.config = { 
    allScriptsTimeout: 11000, 
    specs: [ 
    './e2e/**/*.e2e-spec.ts' 
    ], 
    capabilities: { 
    'browserName': 'chrome' 
    }, 
    directConnect: true, 
    baseUrl: 'http://localhost:4200/', 
    framework: 'jasmine', 
    jasmineNodeOpts: { 
    showColors: true, 
    defaultTimeoutInterval: 30000, 
    print: function() { 
    } 
    }, 
    beforeLaunch: function() { 
    child.start(); 

    require('ts-node').register({ 
     project: 'e2e/tsconfig.e2e.json' 
    }); 

    return startPromise; 
    }, 
    onPrepare() { 
    jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}})); 
    }, 
    onCleanUp() { 
    child.stop(); 

    return stopPromise; 
    } 
}; 

モックサーバー/インデックス。JS継続的インテグレーション環境で

// npm install --save express 
// npm install --save body-parser 
// npm install --save minimist 

const express = require('express'); 
const bodyParser = require('body-parser'); 
const minimist = require('minimist'); 

const API_DELAY = 0; 
const app = express(); 
app.use(bodyParser.json({limit: '50mb'})); 

// Turn on CORS for browser testing. 
app.use(function (req, res, next) { 
    let accessHeaderInReq = false; 
    if (req.headers.origin) { 
    res.header('Access-Control-Allow-Origin', req.headers.origin); 
    accessHeaderInReq = true; 
    } 
    if (req.headers['access-control-request-method']) { 
    res.header('Access-Control-Allow-Methods', req.headers['access-control-request-method']); 
    accessHeaderInReq = true; 
    } 
    if (req.headers['access-control-request-headers']) { 
    res.header('Access-Control-Allow-Headers', req.headers['access-control-request-headers']); 
    accessHeaderInReq = true; 
    } 
    if (accessHeaderInReq) { 
    res.header('Access-Control-Max-Age', 60 * 60 * 24 * 365); 
    } 

    // Intercept OPTIONS method for angular preflight checks. 
    if (accessHeaderInReq && req.method === 'OPTIONS') { 
    return res.sendStatus(200); 
    } 
    else { 
    next(); 
    } 
}); 

app.get('/api/foo', function (req, res, next) { 
    console.info('GET - returning foo', req.body); 
    setTimeout(() => { 
    res.json({ 
     foo: "bar" 
    }); 
    }, API_DELAY); 
}); 

const argv = minimist(process.argv.slice(2)); 
const port = argv.port || 3000; 
console.log("Starting express on port", port); 
app.listen(port); 

、あなたがこのようなディレクトリを変更することなく、モックサーバーnode_modulesをインストールすることができます。

npm --prefix ./mock-server install ./mock-server