ionic2
Тестирование устройства
Поиск…
Вступление
Единичное тестирование в целом обеспечивает дополнительную безопасность продукта для предотвращения проблем при изменении / добавлении функций. Защитная сетка, в которой говорится: «ВСЕ ЕЩЕ ЕЩЕ». Тесты модулей никоим образом не заменяют фактические пользовательские тесты, которые может выполнять надлежащий QA.
В этом документе мы опишем примеры в этом репозитории: https://github.com/driftycoionion-unit-testing-example
Единичные тесты с кармой / жасмином
Единичное тестирование в ионном режиме такое же, как в любом угловом приложении.
Для этого мы будем использовать несколько фреймворков.
Карма - основа для проведения тестов
Жасмин - основа для написания тестов
PhantomJS - приложение, которое запускает javascript без браузера
Прежде всего, установите все, чтобы убедиться, что ваш пакет 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
- что скажет веб-пакет, какие файлы загружать для процесса тестирования
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
, такие как библиотеки зон и тестов, а также настроить модуль для тестирования.
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. Если вы хотите увидеть тесты для страницы, а не основной компонент, вы можете посмотреть здесь: https://github.com/driftycoion/inic-unit-testing-example/blob/master/src/pages/page1/page1. spec.ts
Сначала нам нужно проверить наш конструктор. Это создаст и запустит конструктор нашего app.component
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [MyApp],
imports: [
IonicModule.forRoot(MyApp)
],
providers: [
StatusBar,
SplashScreen
]
})
}));
Декларация будет включать наше основное ионное приложение. Импорт будет импорт, необходимый для этого теста. Не все.
Поставщики будут включать в себя вещи, которые вводятся в конструктор, но не являются частью импорта. Например, app.component внедряет службу платформы, но, поскольку она является частью 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 и наличие наследования в тестах, которые могут помочь вам в долгосрочной перспективе.