ionic2
단위 테스트

소개

카르마 / 재스민과의 단위 테스트

이온 단위의 단위 테스트는 모든 각도 어플리케이션에서와 동일합니다.

이를 위해 몇 가지 프레임 워크를 사용할 것입니다.

카르마 - 테스트 실행을위한 프레임 워크

Jasmine - 테스트 작성을위한 프레임 워크

PhantomJS - 브라우저없이 자바 스크립트를 실행하는 응용 프로그램

우선 모든 것을 설치할 수 있으므로 package.json에 dev 종속성에이 줄이 포함되어 있는지 확인하십시오. 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"

또한 tsconfig에서 컴파일시 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 spec 파일을 작성합니다. 기본 구성 요소가 아닌 페이지에 대한 테스트를 보려면 다음을 참조하십시오. https://github.com/driftyco/ionic-unit-testing-example/blob/master/src/pages/page1/page1 사양

우리가 먼저해야할 일은 생성자를 테스트하는 것입니다. 이렇게하면 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를 작성하고 장기적으로 도움이 될 수있는 테스트에서 상속을받는 것처럼 몇 가지 방법으로 테스트 작성을 단축 할 수 있습니다.