ionic2
Testów jednostkowych

Wprowadzenie

Testy jednostkowe z Karma / Jasmine

Testy jednostkowe w jonie są takie same jak w każdej aplikacji kątowej.

W tym celu wykorzystamy kilka ram.

Karma - środowisko do przeprowadzania testów

Jasmine - framework do pisania testów

PhantomJS - aplikacja, która uruchamia javascript bez przeglądarki

Przede wszystkim zainstalujmy wszystko, więc upewnij się, że plik package.json zawiera te wiersze w zależnościach deweloperów. Uważam, że należy zauważyć, że zależności deweloperów w ogóle nie wpływają na twoją aplikację i służą pomocą programistom.

"@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"

Aby nieco przejść przez paczki

"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.

Powinniśmy również dodać ten skrypt do naszych skryptów package.json:

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

Zauważ również w tsconfig, że wykluczasz pliki spec.ts z kompilacji:

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

Ok, teraz weźmy aktualną konfigurację testową. Utwórz folder test-config folderze projektu. (Tak jak wspomniano w skrypcie package.json) W folderze utwórz 3 pliki:

webpack.test.js - który poinformuje webpack, jakie pliki załadować do procesu testowania

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 - który załaduje biblioteki powiązane z karma-test-shim.js , takie jak biblioteki stref i testowe, a także skonfiguruje moduł do testowania.

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 - określa konfigurację testowania z karmą. Tutaj możesz przełączyć się z Chrome na PhantomJS, aby między innymi ten proces był niewidoczny i szybszy.

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);
};

Teraz, gdy wszystko skonfigurowaliśmy, napiszmy prawdziwy test. W tym przykładzie napiszemy plik specyfikacji app.component. Jeśli chcesz zobaczyć testy strony, a nie główny składnik, możesz zajrzeć tutaj: https://github.com/driftyco/ionic-unit-testing-example/blob/master/src/pages/page1/page1. spec.ts

Najpierw musimy przetestować naszego konstruktora. Spowoduje to utworzenie i uruchomienie konstruktora naszego app.component

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

Deklaracja będzie zawierać naszą główną aplikację jonową. Importy będą importami potrzebnymi do tego testu. Nie wszystko.

Dostawcy uwzględnią elementy, które są wstrzykiwane do konstruktora, ale nie są częścią importu. Na przykład app.component wstrzykuje usługę platformy, ale ponieważ jest ona częścią IonicModule, nie trzeba wspominać o tym u dostawców.

Do następnych testów będziemy potrzebować wystąpienia naszego komponentu:

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

Następnie wykonaj kilka testów, aby sprawdzić, czy wszystko jest w porządku:

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

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

W końcu będziemy mieli coś takiego:

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);
  });

});

Przeprowadź testy przez

npm run test

I to tyle w przypadku podstawowych testów. Istnieje kilka sposobów skrócenia pisania testu, takich jak pisanie własnego TestBed i dziedziczenie w testach, które mogą pomóc w dłuższej perspektywie.