ionic2
Enhetstestning

Introduktion

Enhetstester med Karma / Jasmine

Enhetstestning i joniska är samma som i alla vinkelappar.

Vi kommer att använda några ramar för att göra detta.

Karma - ett ramverk för körtest

Jasmine - ett ramverk för att skriva tester

PhantomJS - ett program som kör javascript utan webbläsare

Låt oss först och främst installera allt, så se till att ditt package.json innehåller dessa rader i dev-beroenden. Jag anser att det är viktigt att notera att de dev-beroenden inte påverkar din app alls och att de bara är där för att hjälpa utvecklaren.

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

För att gå lite över paket

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

Vi bör också lägga till detta skript till våra paket.json-skript:

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

Observera också i tsconfig att du utesluter spec.ts-filerna från sammanställningen:

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

Ok, nu kan vi ta den faktiska testkonfigurationen. Skapa en test-config i din projektmapp. (Precis som det nämndes i paket.json-skriptet) Inuti mappen skapar du 3 filer:

webpack.test.js - som kommer att berätta för webpacken vilka filer som ska laddas för testprocessen

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 - som kommer att ladda vinkelrelaterade bibliotek, t.ex. karma-test-shim.js samt konfigurera modulen för testning.

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 - definierar konfigurationen för hur man testar med karma. Här kan du växla från Chrome till PhantomJS för att göra denna process osynlig och snabbare bland annat.

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

Nu när vi konfigurerade allt låter vi skriva ett faktiskt test. För detta exempel kommer vi att skriva en app.component-specifik fil. Om du vill se tester för en sida och inte huvudkomponenten kan du titta här: https://github.com/driftyco/ionic-unit-testing-example/blob/master/src/pages/page1/page1. spec.ts

Det vi behöver göra först är att testa vår konstruktör. Detta skapar och kör konstruktören för vår app.component

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

Förklaringen kommer att innehålla vår viktigaste joniska app. Importen kommer att importeras som behövs för detta test. Inte allt.

Leverantörerna kommer att inkludera de saker som injiceras i konstruktören men inte ingår i importen. Till exempel injicerar app.componenten plattformstjänsten men eftersom den är en del av IonicModule finns det inget behov att nämna den i leverantörerna.

För de kommande testerna måste vi få en instans av vår komponent:

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

Därefter några tester för att se att allt är i ordning:

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

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

Så till slut kommer vi att ha något liknande:

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

});

Kör testerna av

npm run test

Och det handlar om det för den grundläggande testningen. Det finns några sätt att genväga testskrivningen som att skriva din egen TestBed och ha arv i tester som kan hjälpa dig på lång sikt.