Angular 2
एक कोणीय 2 ऐप का परीक्षण
खोज…
जैस्मीन परीक्षण ढांचे की स्थापना
एंगुलर 2 ऐप्स को टेस्ट करने का सबसे आम तरीका जैस्मिन टेस्ट फ्रेमवर्क है। जैस्मीन आपको ब्राउज़र में अपने कोड का परीक्षण करने की अनुमति देती है।
इंस्टॉल
आरंभ करने के लिए, आपको jasmine-core पैकेज ( jasmine नहीं) की आवश्यकता है।
npm install jasmine-core --save-dev --save-exact
सत्यापित करें
यह सत्यापित करने के लिए कि जैस्मीन ठीक से सेट है, फ़ाइल बनाएँ ./src/unit-tests.html निम्न सामग्री के साथ और ब्राउज़र में खोलें।
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Ng App Unit Tests</title>
<link rel="stylesheet" href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
</head>
<body>
<!-- Unit Testing Chapter #1: Proof of life. -->
<script>
it('true is true', function () {
expect(true).toEqual(true);
});
</script>
</body>
</html>
गुलप, वेबपैक, कर्म और चमेली के साथ परीक्षण की स्थापना
पहली चीज जो हमें चाहिए वह यह है कि हम अपने परीक्षणों को पढ़ने के लिए वेबपैक का उपयोग करें, वेबपैक इंजन के लिए हमारे द्वारा निर्धारित कॉन्फ़िगरेशन के तहत। यहां, मैं बैबल का उपयोग कर रहा हूं क्योंकि मैं ईएस 6 में अपना कोड लिखता हूं, आप इसे अन्य फ्लेवर जैसे कि टाइपस्क्रिप्ट के लिए बदल सकते हैं। या मैं पग (पूर्व में जेड) टेम्पलेट्स का उपयोग करता हूं, आपके पास नहीं है।
फिर भी, रणनीति वही बनी हुई है।
तो, यह एक वेबपैक कॉन्फिगर है:
const webpack = require("webpack");
let packConfig = {
entry: {},
output: {},
plugins:[
new webpack.DefinePlugin({
ENVIRONMENT: JSON.stringify('test')
})
],
module: {
loaders: [
{
test: /\.js$/,
exclude:/(node_modules|bower_components)/,
loader: "babel",
query:{
presets:["es2015", "angular2"]
}
},
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
loader: "file"
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.pug$/,
loader: 'pug-html-loader'
},
]
},
devtool : 'inline-cheap-source-map'
};
module.exports = packConfig;
और फिर, हमें उस वेबपैक विन्यास का उपयोग करने के लिए एक karm.config.js फ़ाइल की आवश्यकता है:
const packConfig = require("./webpack.config.js");
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
exclude:[],
files: [
{pattern: './karma.shim.js', watched: false}
],
preprocessors: {
"./karma.shim.js":["webpack"]
},
webpack: packConfig,
webpackServer: {noInfo: true},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
browsers: ['PhantomJS'],
concurrency: Infinity,
autoWatch: false,
singleRun: true
});
};
अब तक, हमने कर्मा को वेबपैक का उपयोग करने के लिए कहा है, और हमने इसे कर्मा.शिम.जेएस नामक एक फ़ाइल में शुरू करने के लिए कहा है। इस फ़ाइल में वेबपैक के लिए शुरुआती बिंदु के रूप में अभिनय का काम होगा। वेबपैक इस फ़ाइल को पढ़ेगा और आयात का उपयोग करेगा और हमारे सभी निर्भरता को इकट्ठा करने और हमारे परीक्षण चलाने के लिए बयानों की आवश्यकता होगी ।
तो अब, कर्म k.shim.js फ़ाइल को देखें:
// Start of ES6 Specific stuff
import "es6-shim";
import "es6-promise";
import "reflect-metadata";
// End of ES6 Specific stuff
import "zone.js/dist/zone";
import "zone.js/dist/long-stack-trace-zone";
import "zone.js/dist/jasmine-patch";
import "zone.js/dist/async-test";
import "zone.js/dist/fake-async-test";
import "zone.js/dist/sync-test";
import "zone.js/dist/proxy-zone";
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';
Error.stackTraceLimit = Infinity;
import {TestBed} from "@angular/core/testing";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting} from "@angular/platform-browser-dynamic/testing";
TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting());
let testContext = require.context('../src/app', true, /\.spec\.js/);
testContext.keys().forEach(testContext);
संक्षेप में, हम कोणीय कोर परीक्षण से टेस्टबेड आयात कर रहे हैं, और पर्यावरण की शुरुआत कर रहे हैं, क्योंकि इसे हमारे सभी परीक्षणों के लिए केवल एक बार शुरू करने की आवश्यकता है। फिर, हम src / app निर्देशिका के माध्यम से पुनरावर्ती जा रहे हैं और .spec.js के साथ समाप्त होने वाली प्रत्येक फ़ाइल को पढ़ रहे हैं और उन्हें testContext को खिलाते हैं, इसलिए वे चलेंगे।
मैं आमतौर पर अपने परीक्षणों को कक्षा के समान स्थान देने की कोशिश करता हूं। व्यक्तिगत स्वाद, यह मेरे लिए वर्गों के साथ निर्भरता और रिफ्लेक्टर परीक्षणों को आयात करना आसान बनाता है। लेकिन अगर आप अपने परीक्षण कहीं और करना चाहते हैं, जैसे कि उदाहरण के लिए src / test निर्देशिका के तहत, तो यहां मौका है। karm.shim.js फ़ाइल में अंतिम से पहले लाइन बदलें।
उत्तम। क्या बचा है? आह, gulp कार्य जो कर्म का उपयोग करता है ।config.js फ़ाइल जो हमने ऊपर बनाई है:
gulp.task("karmaTests",function(done){
var Server = require("karma").Server;
new Server({
configFile : "./karma.config.js",
singleRun: true,
autoWatch: false
}, function(result){
return result ? done(new Error(`Karma failed with error code ${result}`)):done();
}).start();
});
मैं अब हमारे द्वारा बनाई गई कॉन्फ़िग फ़ाइल के साथ सर्वर शुरू कर रहा हूं, यह एक बार चलाने के लिए कह रहा हूं और परिवर्तनों के लिए नहीं देखता हूं। मुझे यह सूट करने के लिए बेहतर लगता है क्योंकि परीक्षण केवल तभी चलेंगे जब मैं उन्हें चलाने के लिए तैयार हूं, लेकिन निश्चित रूप से यदि आप अलग-अलग चाहते हैं तो आपको पता है कि कहां बदलना है।
और मेरे अंतिम कोड नमूने के रूप में, यहां एंगुलर 2 ट्यूटोरियल "टूर ऑफ हीरोज" के लिए परीक्षणों का एक सेट है।
import {
TestBed,
ComponentFixture,
async
} from "@angular/core/testing";
import {AppComponent} from "./app.component";
import {AppModule} from "./app.module";
import Hero from "./hero/hero";
describe("App Component", function () {
beforeEach(()=> {
TestBed.configureTestingModule({
imports: [AppModule]
});
this.fixture = TestBed.createComponent(AppComponent);
this.fixture.detectChanges();
});
it("Should have a title", async(()=> {
this.fixture.whenStable().then(()=> {
expect(this.fixture.componentInstance.title).toEqual("Tour of Heros");
});
}));
it("Should have a hero", async(()=> {
this.fixture.whenStable().then(()=> {
expect(this.fixture.componentInstance.selectedHero).toBeNull();
});
}));
it("Should have an array of heros", async(()=>
this.fixture.whenStable().then(()=> {
const cmp = this.fixture.componentInstance;
expect(cmp.heroes).toBeDefined("component should have a list of heroes");
expect(cmp.heroes.length).toEqual(10, "heroes list should have 10 members");
cmp.heroes.map((h, i)=> {
expect(h instanceof Hero).toBeTruthy(`member ${i} is not a Hero instance. ${h}`)
});
})));
it("Should have one list item per hero", async(()=>
this.fixture.whenStable().then(()=> {
const ul = this.fixture.nativeElement.querySelector("ul.heroes");
const li = Array.prototype.slice.call(
this.fixture.nativeElement.querySelectorAll("ul.heroes>li"));
const cmp = this.fixture.componentInstance;
expect(ul).toBeTruthy("There should be an unnumbered list for heroes");
expect(li.length).toEqual(cmp.heroes.length, "there should be one li for each hero");
li.forEach((li, i)=> {
expect(li.querySelector("span.badge"))
.toBeTruthy(`hero ${i} has to have a span for id`);
expect(li.querySelector("span.badge").textContent.trim())
.toEqual(cmp.heroes[i].id.toString(), `hero ${i} had wrong id displayed`);
expect(li.textContent)
.toMatch(cmp.heroes[i].name, `hero ${i} has wrong name displayed`);
});
})));
it("should have correct styling of hero items", async(()=>
this.fixture.whenStable().then(()=> {
const hero = this.fixture.nativeElement.querySelector("ul.heroes>li");
const win = hero.ownerDocument.defaultView ||hero.ownerDocument.parentWindow;
const styles = win.getComputedStyle(hero);
expect(styles["cursor"]).toEqual("pointer", "cursor should be pointer on hero");
expect(styles["borderRadius"]).toEqual("4px", "borderRadius should be 4px");
})));
it("should have a click handler for hero items",async(()=>
this.fixture.whenStable().then(()=>{
const cmp = this.fixture.componentInstance;
expect(cmp.onSelect)
.toBeDefined("should have a click handler for heros");
expect(this.fixture.nativeElement.querySelector("input.heroName"))
.toBeNull("should not show the hero details when no hero has been selected");
expect(this.fixture.nativeElement.querySelector("ul.heroes li.selected"))
.toBeNull("Should not have any selected heroes at start");
spyOn(cmp,"onSelect").and.callThrough();
this.fixture.nativeElement.querySelectorAll("ul.heroes li")[5].click();
expect(cmp.onSelect)
.toHaveBeenCalledWith(cmp.heroes[5]);
expect(cmp.selectedHero)
.toEqual(cmp.heroes[5], "click on hero should change hero");
})
));
});
इसमें उल्लेखनीय यह है कि हमारे पास पहले से कैसे है () एक परीक्षण मॉड्यूल को कॉन्फ़िगर करें और परीक्षण में घटक बनाएं, और हम कैसे पता लगाते हैंचैनगेस (), ताकि कोणीय वास्तव में डबल-बाइंडिंग और सभी के माध्यम से हो।
ध्यान दें कि प्रत्येक परीक्षण async () के लिए एक कॉल है और यह हमेशा स्थिरता की जांच करने से पहले हल करने के लिए जब वादा करने के लिए इंतजार करता है। यह तो componentInstance के माध्यम से और के माध्यम से nativeElement तत्व को घटक की पहुंच है।
एक परीक्षण है जो सही स्टाइल की जाँच कर रहा है। ट्यूटोरियल के हिस्से के रूप में, कोणीय टीम घटकों के अंदर शैलियों के उपयोग को प्रदर्शित करती है। हमारे परीक्षण में, हम getComputedStyle () का उपयोग करते हैं यह जांचने के लिए कि शैली हम कहाँ से निर्दिष्ट कर रहे हैं, हालांकि हमें इसके लिए विंडो ऑब्जेक्ट की आवश्यकता है, और हम इसे तत्व से प्राप्त कर रहे हैं जैसा कि आप परीक्षण में देख सकते हैं।
परीक्षण Http सेवा
आमतौर पर, सेवाएँ डेटा को पुनः प्राप्त / भेजने के लिए दूरस्थ Api को कॉल करती हैं। लेकिन यूनिट परीक्षण नेटवर्क कॉल नहीं करना चाहिए। कोणीय आंतरिक रूप से http अनुरोध करने के लिए XHRBackend वर्ग का उपयोग करता है। उपयोगकर्ता व्यवहार को बदलने के लिए इसे ओवरराइड कर सकता है। कोणीय परीक्षण मॉड्यूल MockBackend और MockConnection क्लासेस प्रदान करता है MockBackend उपयोग http अनुरोधों का परीक्षण करने और उनका दावा करने के लिए किया जा सकता है।
posts.service.ts यह सेवा पदों की सूची लाने के लिए एक posts.service.ts समापन बिंदु को हिट करती है।
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/rx';
import 'rxjs/add/operator/map';
export interface IPost {
userId: number;
id: number;
title: string;
body: string;
}
@Injectable()
export class PostsService {
posts: IPost[];
private postsUri = 'http://jsonplaceholder.typicode.com/posts';
constructor(private http: Http) {
}
get(): Observable<IPost[]> {
return this.http.get(this.postsUri)
.map((response) => response.json());
}
}
posts.service.spec.ts यहां, हम http एपीआई कॉल को posts.service.spec.ts करके सेवा के ऊपर परीक्षण करेंगे।
import { TestBed, inject, fakeAsync } from '@angular/core/testing';
import {
HttpModule,
XHRBackend,
ResponseOptions,
Response,
RequestMethod
} from '@angular/http';
import {
MockBackend,
MockConnection
} from '@angular/http/testing';
import { PostsService } from './posts.service';
describe('PostsService', () => {
// Mock http response
const mockResponse = [
{
'userId': 1,
'id': 1,
'title': 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
'body': 'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto'
},
{
'userId': 1,
'id': 2,
'title': 'qui est esse',
'body': 'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla'
},
{
'userId': 1,
'id': 3,
'title': 'ea molestias quasi exercitationem repellat qui ipsa sit aut',
'body': 'et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut'
},
{
'userId': 1,
'id': 4,
'title': 'eum et est occaecati',
'body': 'ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit'
}
];
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpModule],
providers: [
{
provide: XHRBackend,
// This provides mocked XHR backend
useClass: MockBackend
},
PostsService
]
});
});
it('should return posts retrieved from Api', fakeAsync(
inject([XHRBackend, PostsService],
(mockBackend, postsService) => {
mockBackend.connections.subscribe(
(connection: MockConnection) => {
// Assert that service has requested correct url with expected method
expect(connection.request.method).toBe(RequestMethod.Get);
expect(connection.request.url).toBe('http://jsonplaceholder.typicode.com/posts');
// Send mock response
connection.mockRespond(new Response(new ResponseOptions({
body: mockResponse
})));
});
postsService.get()
.subscribe((posts) => {
expect(posts).toBe(mockResponse);
});
})));
});
परीक्षण कोणीय घटक - मूल
घटक कोड नीचे दिया गया है।
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>{{title}}</h1>'
})
export class MyAppComponent{
title = 'welcome';
}
कोणीय परीक्षण के लिए, कोणीय परीक्षण रूपरेखा के साथ अपनी परीक्षण उपयोगिताओं को प्रदान करता है जो कोणीय में अच्छे परीक्षण मामले को लिखने में मदद करता है। कोणीय उपयोगिताओं को @angular/core/testing से आयात किया जा सकता है
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyAppComponent } from './banner-inline.component';
describe('Tests for MyAppComponent', () => {
let fixture: ComponentFixture<MyAppComponent>;
let comp: MyAppComponent;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
MyAppComponent
]
});
});
beforeEach(() => {
fixture = TestBed.createComponent(MyAppComponent);
comp = fixture.componentInstance;
});
it('should create the MyAppComponent', () => {
expect(comp).toBeTruthy();
});
});
उपरोक्त उदाहरण में, केवल एक परीक्षण मामला है जो घटक अस्तित्व के लिए परीक्षण मामले की व्याख्या करता है। उपरोक्त उदाहरण में टेस्टिंग TestBed और ComponentFixture जैसी कोणीय परीक्षण उपयोगिताओं का उपयोग किया जाता है।
TestBed का उपयोग कोणीय परीक्षण मॉड्यूल बनाने के लिए किया जाता है और हम उस मॉड्यूल को configureTestingModule करते हैं, जिसे हम परीक्षण करना चाहते हैं, उसके लिए मॉड्यूल वातावरण का निर्माण करने के लिए TestBed विधि से configureTestingModule करते हैं। परीक्षण मॉड्यूल को प्रत्येक परीक्षण मामले के निष्पादन से पहले कॉन्फ़िगर किया जाना है, यही कारण है कि हम परीक्षण मॉड्यूल को beforeEach फ़ंक्शन में कॉन्फ़िगर करते हैं।
createComponent की विधि TestBed परीक्षण के अंतर्गत घटक के उदाहरण बनाने के लिए प्रयोग किया जाता है। createComponent ने ComponentFixture लौटाया। स्थिरता घटक उदाहरण के लिए पहुँच प्रदान करता है।