ionic2
Unit Testing

Einführung

Unit-Tests mit Karma / Jasmin

Unit-Tests in Ionic sind die gleichen wie in jeder Winkel-App.

Wir werden dazu ein paar Frameworks verwenden.

Karma - ein Rahmen für die Durchführung von Tests

Jasmine - ein Rahmen zum Schreiben von Tests

PhantomJS - eine Anwendung, die Javascript ohne Browser ausführt

Zunächst einmal können wir alles installieren. Vergewissern Sie sich daher, dass package.json diese Zeilen in den dev-Abhängigkeiten enthält. Ich denke, es ist wichtig zu wissen, dass die Abhängigkeiten der Entwickler Ihre App überhaupt nicht beeinflussen und dem Entwickler lediglich helfen.

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

Pakete ein bisschen durchgehen

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

Wir sollten dieses Skript auch unseren package.json-Skripten hinzufügen:

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

Beachten Sie auch in tsconfig, dass Sie die spec.ts-Dateien von der Kompilierung ausschließen:

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

Ok, jetzt nehmen wir die eigentliche Testkonfiguration. Erstellen Sie einen test-config in Ihrem Projektordner. (So ​​wie es im package.json-Skript erwähnt wurde) Erstellen Sie im Ordner 3 Dateien:

webpack.test.js - gibt dem Webpack an, welche Dateien für den Testvorgang geladen werden sollen

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 - karma-test-shim.js die karma-test-shim.js Bibliotheken wie Zonen- und Testbibliotheken sowie das Modul zum Testen.

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 - karma.conf.js die Konfiguration für das Testen mit Karma. Hier können Sie von Chrome zu PhantomJS wechseln, um diesen Prozess unter anderem unsichtbar und schneller zu machen.

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

Nun, da wir alles konfiguriert haben, können wir einige Tests schreiben. Für dieses Beispiel schreiben wir eine app.component-Spezifikationsdatei. Wenn Sie Tests für eine Seite und nicht für die Hauptkomponente anzeigen möchten, können Sie hier nachsehen: https://github.com/driftyco/ionic-unit-testingexample/blob/master/src/pages/page1/page1. spez.ts

Zuerst müssen wir unseren Konstruktor testen. Dadurch wird der Konstruktor unserer app.component erstellt und ausgeführt

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

Die Erklärung wird unsere Haupt-App für ionische Anwendungen enthalten. Die Importe werden für diesen Test benötigt. Nicht alles.

Die Provider enthalten die Elemente, die in den Konstruktor eingefügt werden, jedoch nicht Teil des Imports sind. Zum Beispiel fügt app.component den Platform-Dienst ein, aber da es ein Teil des IonicModule ist, muss es in den Anbietern nicht erwähnt werden.

Für die nächsten Tests benötigen wir eine Instanz unserer Komponente:

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

Als nächstes ein paar Tests, um zu sehen, dass alles in Ordnung ist:

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

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

Am Ende haben wir also so etwas:

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

});

Führen Sie die Tests durch

npm run test

Und das ist schon alles beim Basis-Test. Es gibt verschiedene Möglichkeiten, um das Schreiben von Tests zu verkürzen, z. B. das Schreiben Ihres eigenen TestBed und die Vererbung von Tests, die Ihnen auf lange Sicht helfen können.