Angular 2 E 2テスト入門

E 2 Eテスト(統合テスト)は、ユーザの行動をシミュレートするテストです.(demo-appトップページを例に)
E 2 Eテストとユニットテストの違い:

ユニットテストは、テストコードの自己動作である.ユーザから見れば何もしていないようだが,その方法が所望の目的を達成できることを確保できる.

E 2 E 2テストは、ユーザの動作をシミュレートするテストである.ブラウザでの手動操作の代わりにe 2 eのJavaScript APIを使用し、このプロセスを見ることができます.

環境設定

Angular-cliを使用して開発、インストールコマンド

    npm install -g angular-cli@latest

Angular 2エンドツーエンドテストはprotractorツールを使用して実行し、インストールコマンド

    npm install -g protractor

プロジェクト起動(e 2 eテストを実行する前にプロジェクトを起動する必要がある)

    ng serve

実行テスト

    protractor
    ng e2e
    yarn e2e

シーンのテスト

アプリケーションの初期化後、リスト項目には合計13個のデータが表示されます.

アプリケーションの初期化後、demo-moduleタイトルが表示されます.

リスト項目のいずれかをクリックすると、ページは対応するページにジャンプできます.

ユーザー名、パスワードを入力し、ログインをクリックしてログイン状態に戻ります.

e 2 eテストインスタンスの作成
単一の機能が1つしかない場合は、app.e 2 e-spec.tsファイルに直接追加できます.複数の機能またはより複雑なシーンをテストする必要がある場合は、e 2 eフォルダにフォルダを新規作成し、対応するフォルダにテストファイルを作成できます.各テストファイルは.e 2 e-spec.tsで終わる必要があります.これにより、Protractorテストツールがロードされます.

import { browser, element, by } from 'protractor'; //            browswe    

describe('Demo App', function () {
   beforeEach(() => {
    browser.get('/');  //     
  });
});

テスト初期化時に13個のデータをロード

    it('should show thirteen items when we first load the demo app', () => {
    browser.get('/');
    const items = element.all(by.css('app-root ion-content button')); //      
    const expectCount = 13;

    expect(items.count()).toBe(expectCount); // items.count()      
  });

テストアプリケーションの初期化後、demo-moduleタイトルが表示されます.

    it('should display message title demo-module', () => {
    browser.get('/');
    const title = element(by.css('app-root ion-title'));
    const titleText = title.getText(); //      

    expect(titleText).toEqual('demo-module');
  });

はリスト項目のいずれかをテストし、ページは対応するページにジャンプすることができる.

   it('should display fifthItem details message', () => {
    browser.get('/');
    const itemNumber = 4;
    const fifthItem = element.all(by.css('app-root ion-content button')).get(itemNumber);

    fifthItem.click(); //    
    const outText = element(by.css('app-root sino-text-content')).getText();

    expect(outText).toContain('               ');
  });

試験登録機能

   it('should show message of login', () => {
    browser.get('/#/login'); //  deepLink      ，          
    const loginContent = element(by.css('sino-login'));
    const loginContentEl = loginContent.getText();

    expect(loginContentEl).toContain('    ');

    const userName = element(by.css('.userName')).sendKeys('   '); //        
    const password = element(by.css('.password')).sendKeys('1');
    const button = element(by.css('sino-login button'));

    button.click(); //    

    const toast = element(by.css('.toast-message'));
    const toastEl = toast.getText();

    expect(browser.ExpectedConditions).toBe('    !');

  });

参考資料

Protractor API

Angular 2エンドツーエンドのテスト

を初歩的に理解