ionic2
इकाई का परीक्षण

परिचय

कर्मा / जैस्मीन के साथ यूनिट टेस्ट

ईओण में इकाई परीक्षण किसी भी कोणीय ऐप के समान है।

हम ऐसा करने के लिए कुछ रूपरेखाओं का उपयोग करेंगे।

कर्म - परीक्षण चलाने के लिए एक रूपरेखा

जैस्मीन - परीक्षण लिखने के लिए एक रूपरेखा

PhantomJS - एक ब्राउज़र के बिना जावास्क्रिप्ट चलाने वाला एप्लिकेशन

सबसे पहले सब कुछ स्थापित करने की अनुमति देता है, इसलिए सुनिश्चित करें कि आपका पैकेज। Json में इन लाइनों को देव निर्भरता में शामिल किया गया है। मुझे यह ध्यान रखना महत्वपूर्ण है कि देव निर्भरता आपके ऐप को बिल्कुल प्रभावित नहीं करती है और डेवलपर की मदद करने के लिए बस वहाँ हैं।

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

हमें इस स्क्रिप्ट को अपने पैकेज में भी जोड़ना चाहिए।

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

Tsconfig में भी ध्यान दें कि आप संकलनों से फ़ाइलों को बाहर कर रहे हैं:

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

ठीक है, अब वास्तविक परीक्षण विन्यास लेने देता है। अपने प्रोजेक्ट फ़ोल्डर में एक test-config फ़ोल्डर बनाएँ। (जैसा कि यह पैकेज.जॉन स्क्रिप्ट में बताया गया था) अंदर फ़ोल्डर 3 फाइलें बनाता है:

webpack.test.js - जो 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 - जो कोणीय और संबंधित पुस्तकालयों, जैसे कि पुस्तकालय और परीक्षण पुस्तकालयों के साथ-साथ परीक्षण के लिए मॉड्यूल को कॉन्फ़िगर करेंगे।

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 file लिखेंगे। यदि आप एक पृष्ठ के लिए परीक्षण देखना चाहते हैं और मुख्य घटक नहीं जिसे आप यहाँ देख सकते हैं: https://github.com/driftyco/ionic-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

और यह बुनियादी परीक्षण के लिए इसके बारे में है। टेस्ट लिखने को शार्टकट करने के कुछ तरीके हैं जैसे अपना टेस्टबेड लिखना और टेस्ट में इनहेरिटेंस होना जो लंबे समय में आपकी मदद कर सकते हैं।