ionic2
Examen de la unidad

Introducción

Pruebas unitarias con karma / jazmín

La prueba de unidad en iónico es la misma que en cualquier aplicación angular.

Usaremos algunos marcos para hacer esto.

Karma - un marco para ejecutar pruebas

Jasmine - un marco para escribir pruebas

PhantomJS - una aplicación que ejecuta javascript sin un navegador

En primer lugar, instalemos todo, así que asegúrese de que su package.json incluya estas líneas en las dependencias de desarrollo. Creo que es importante tener en cuenta que las dependencias de desarrollo no afectan en absoluto a tu aplicación y solo están ahí para ayudar al desarrollador.

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

Repasar un poco los paquetes.

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

También deberíamos agregar este script a nuestros scripts package.json:

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

También tome nota en tsconfig que está excluyendo los archivos spec.ts de la compilación:

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

Ok, ahora vamos a tomar la configuración de prueba real. Cree una carpeta de test-config en su carpeta de proyecto. (Tal como se mencionó en el script package.json) Dentro de la carpeta, cree 3 archivos:

webpack.test.js - que le dirá al paquete web qué archivos cargar para el proceso de prueba

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 - que cargará las bibliotecas relacionadas angulares, como las bibliotecas de zona y de prueba, además de configurar el módulo para la prueba.

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 - define la configuración de cómo probar con karma. Aquí puede cambiar de Chrome a PhantomJS para que este proceso sea invisible y más rápido, entre otras cosas.

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

Ahora que hemos configurado todo, vamos a escribir alguna prueba real. Para este ejemplo escribiremos un archivo de especificaciones de app.component. Si desea ver las pruebas de una página y no el componente principal, puede consultar aquí: https://github.com/driftyco/ionic-unit-testing-example/blob/master/src/pages/page1/page1. espec.ts

Lo que debemos hacer primero es probar nuestro constructor. Esto creará y ejecutará el constructor de nuestra app.component

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

La declaración incluirá nuestra principal aplicación iónica. Las importaciones serán las importaciones necesarias para esta prueba. No todo.

Los proveedores incluirán las cosas que se inyectan en el constructor, pero que no forman parte de la importación. Por ejemplo, app.component inyecta el servicio de la Plataforma, pero como es parte de IonicModule, no es necesario mencionarlo en los proveedores.

Para las próximas pruebas necesitaremos obtener una instancia de nuestro componente:

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

A continuación algunas pruebas para ver que todo está en orden:

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

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

Así que al final tendremos algo como esto:

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

});

Ejecutar las pruebas por

npm run test

Y eso es todo para las pruebas básicas. Hay algunas formas de atajar la escritura de prueba, como escribir su propio TestBed y tener herencia en las pruebas que podrían ayudarlo a largo plazo.