ionic2
ユニットテスト

前書き

カルマ/ジャスミンのユニットテスト

イオンでのユニットテストは、どの角度アプリでも同じです。

これを行うためにいくつかのフレームワークを使用します。

カルマ - テストを実行するためのフレームワーク

ジャスミン - テストを書くためのフレームワーク

PhantomJS - ブラウザなしでjavascriptを実行するアプリケーション

まず第一にすべてをインストールできるので、package.jsonにdevの依存関係にこれらの行が含まれていることを確認してください。私は、開発者の依存関係はあなたのアプリケーションにまったく影響を与えず、開発者を助けるためだけにあることに注意することが重要だと感じています。

"@ionic/app-scripts": "1.1.4",
"@ionic/cli-build-ionic-angular": "0.0.3",
"@ionic/cli-plugin-cordova": "0.0.9",
"@types/jasmine": "^2.5.41",
"@types/node": "^7.0.8",
"angular2-template-loader": "^0.6.2",
"html-loader": "^0.4.5",
"jasmine": "^2.5.3",
"karma": "^1.5.0",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.3",
"null-loader": "^0.1.1",
"ts-loader": "^2.0.3",
"typescript": "2.0.9"

パッケージをちょっと調べる

"angular2-template-loader": "^0.6.2", - will load and compile the angular2 html files.

"ts-loader": "^2.0.3", - will compile the actual typescript files

"null-loader": "^0.1.1", - will not load the assets that will be missing, such as fonts and images. We are testing, not image lurking.

また、このスクリプトをpackage.jsonスクリプトに追加する必要があります。

"test": "karma start ./test-config/karma.conf.js"

また、コンパイル時にspec.tsファイルを除外していることに注意してください。

 "exclude": [
    "node_modules",
    "src/**/*.spec.ts"
  ],

さて、実際のテスト構成を取ることができます。プロジェクトフォルダにtest-configフォルダを作成します。 （ちょうどpackage.jsonスクリプトで言及されたように）フォルダの中に3つのファイルを作成します：

webpack.test.js - テストプロセスのためにロードするファイルをwebpackに通知します

var webpack = require('webpack');
var path = require('path');

module.exports = {
  devtool: 'inline-source-map',

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'ts-loader'
          } , 'angular2-template-loader'
        ]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'null-loader'
      }
    ]
  },

  plugins: [
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      root('./src'), // location of your src
      {} // a map of your routes
    )
  ]
};

function root(localPath) {
  return path.resolve(__dirname, localPath);
}

karma-test-shim.js - ゾーンライブラリやテストライブラリなどの角度関係のライブラリを読み込むだけでなく、モジュールをテスト用に設定します。

Error.stackTraceLimit = Infinity;

require('core-js/es6');
require('core-js/es7/reflect');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

var appContext = require.context('../src', true, /\.spec\.ts/);

appContext.keys().forEach(appContext);

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

karma.conf.js - カルマでテストする方法の設定を定義します。ここでは、ChromeからPhantomJSに切り替えることで、このプロセスを目に見えないものにすることができます。

var webpackConfig = require('./webpack.test.js');

module.exports = function (config) {
  var _config = {
    basePath: '',

    frameworks: ['jasmine'],

    files: [
      {pattern: './karma-test-shim.js', watched: true}
    ],

    preprocessors: {
      './karma-test-shim.js': ['webpack', 'sourcemap']
    },

    webpack: webpackConfig,

    webpackMiddleware: {
      stats: 'errors-only'
    },

    webpackServer: {
      noInfo: true
    },

    browserConsoleLogOptions: {
      level: 'log',
      format: '%b %T: %m',
      terminal: true
    },

    reporters: ['kjhtml', 'dots'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  };

  config.set(_config);
};

これですべてを構成して実際のテストを書くことができました。この例では、app.component仕様ファイルを作成します。メインコンポーネントではなくページのテストを表示したい場合は、こちらをご覧ください ： https : //github.com/driftyco/ionic-unit-testing-example/blob/master/src/pages/page1/page1 spec.ts

最初に行う必要があるのは、コンストラクタをテストすることです。これにより、app.componentのコンストラクタが作成され、実行されます

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyApp],
      imports: [
        IonicModule.forRoot(MyApp)
      ],
      providers: [
        StatusBar,
        SplashScreen
      ]
    })
  }));

宣言には主なイオンアプリが含まれます。輸入は、この試験に必要な輸入品です。すべてではない。

プロバイダは、コンストラクタに注入されたものをインクルードに含めますが、インポートの一部ではありません。たとえば、app.componentはPlatformサービスを注入しますが、IonicModuleの一部であるため、プロバイダでそれを言及する必要はありません。

次のテストでは、コンポーネントのインスタンスを取得する必要があります。

  beforeEach(() => {
    fixture = TestBed.createComponent(MyApp);
    component = fixture.componentInstance;
  });

次は、すべてが順調であることを確認するためのテストです。

  it ('should be created', () => {
    expect(component instanceof MyApp).toBe(true);
  });

  it ('should have two pages', () => {
    expect(component.pages.length).toBe(2);
  });

最終的に我々はこのようなことをするでしょう：

import { async, TestBed } from '@angular/core/testing';
import { IonicModule } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { MyApp } from './app.component';

describe('MyApp Component', () => {
  let fixture;
  let component;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyApp],
      imports: [
        IonicModule.forRoot(MyApp)
      ],
      providers: [
        StatusBar,
        SplashScreen
      ]
    })
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyApp);
    component = fixture.componentInstance;
  });

  it ('should be created', () => {
    expect(component instanceof MyApp).toBe(true);
  });

  it ('should have two pages', () => {
    expect(component.pages.length).toBe(2);
  });

});

テストを

npm run test

それは基本的なテストのためです。あなた自身のTestBedを作成し、長期的にあなたを助けるかもしれないテストで継承を持つようなテストライティングをショートカットするいくつかの方法があります。