In a proper unit test we want to isolate external dependencies as much as possible to guarantee a reliable test outcome. Http calls represent such external dependencies. Therefore, when testing our Angular components or services that rely on data ret…

The way to test router componet needs a little bit setup, first we need to create a "router-stubs.ts". This file is a helper file. // export for convenience. export { ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router'; impo…

When using Ngrx, we need to know how to test the component which has Router injected. Component: import {Component} from '@angular/core'; import {FormGroup} from '@angular/forms'; import {Store} from '@ngrx/store'; import * as fromAuth from '../../re…

If sometime you want to log out the comonent html to see whether the html render correctly, you can do : import {TestBed, async, ComponentFixture} from '@angular/core/testing'; import {AppComponent} from './app.component'; import {AuFaInputComponent}…

import {ComponentFixture, TestBed} from '@angular/core/testing'; import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; import {StockCounterComponent} from './stock-counter.component'; Te…

When you testing Component rendering, you often needs to call: fixture.detectChanges(); For example: it('should display original title', () => { fixture.detectChanges(); expect(el.textContent).toContain(comp.title); }); it('should display a different…

import { TestBed, ComponentFixture } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; import { FileSizePipe } from './file-size.pipe'; import {Compon…

import { Http, Response, ResponseOptions } from '@angular/http'; import { TestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; import { Observa…

http://social.technet.microsoft.com/wiki/contents/articles/32300.angularjs-unit-testing-using-karma-part-1.aspx Testing Controller Testing $httpbackend Testing Service…

The component test: describe('The component test', () => { let component, $componentController, $controller, $injector, $scope; beforeEach(module("componennts.module")); beforeEach(inject((_$componentController_, _$controller_, _$injector_, _…

Both what "TestBed.get" & "injector" trying to do is get service for the test component. But there is some diffenece which determined when use which. Register the service:  You need to mock the service, not using the real service!…

// backend test beforeEach(inject(function (_$compile_, _$httpBackend_, _$rootScope_, _$state_, _AnnouncementsService_, _CONFIG_) { compile = _$compile_; $httpBackend = _$httpBackend_; $scope = _$rootScope_.$new(); AnnouncementsService = _Announcemen…

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'filesize' }) export class FileSizePipe implements PipeTransform { transform(size: number, extension: string = 'MB') { return (size / (1024 * 1024)).toFixed(2) + extension; } } import…

HTML: <div ng-focus="vm.onFocus(month)", aria-focus="{{vm.focus == month}}", ng-keydown="vm.onKeydown($event, month)"> Component Controller: onKeydown(e, num) { switch(e.which) { : // enter : { // Space e.preventDefault…

Recently I am blocked by a very weird issue, from the VS installed machine, I can run performance testing which was distributed to multiple test agents successfully, but if try to run API testing, it is always failed, I have tried run in VS and also…

<div> <h2>{{vm.userInfo.number}} - {{vm.userInfo.name}}</h2> </div> 'use strict'; class CardTitleInformCtrl { constructor() { } } function CardTitleInformDirective() { return { restrict: 'EA', scope: {}, bindToController: { userInf…

Epics can be unit-tested just like any other function in your application - they have a very specific set of inputs (the action$ stream) and the output is always an Observable. We can subscribe to this output Observable to assert that the actions goi…

Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates. import…

This lesson shows you how to build a Toggle Button in Angular 2 from scratch. It covers using transclusion in Angular 2, setting up your own two-way binding, and making the button into a reusable component. toggle-button.ts: import {Component, Input,…

Component类似flask app下面的每个blueprint. import 'rxjs/add/operator/switchMap'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, ParamMap } from '@angular/router'; import { Location } from '@angular/common'; import { Hero } from…

When you want to access child component's method, you can use @ViewChild in the parent: Parent Component: import {Component, OnInit, ViewChild} from 'angular2/core'; import {HeroService, Hero} from './HeroService'; import {Observable} from 'rxjs/Rx';…

The test application demonstrates these key points: An Android test is itself an Android application that is linked to the application under test by entries in its AndroidManifest.xml file. //一个Android的测试本身是由被测项目在AndroidManifest.xml文件链接到应用程序的Android应…

目录(?)[-] Android automated testing 1 How to test Android applications Tip 2 Unit tests vs functional tests 3 JUnit 3 4 Running tests on a server without display Test hooks into the Android framework 1 Instrumentation 2 How the Android system executes…

The main idea for testing contianer component is to make sure it setup everythings correctlly. Call the onInit() lifecycle first, then the variables have the right value. Methods will be called with the right params. Container component: import { Com…

Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'stock-counter', changeDetection: ChangeDetectionStrategy.OnPush, template: ` <div class="stock-counter"> &l…

Software Testing Part I:The Big Picture 1.Software Testing Background Bug's formal definition 1.The software doesn't do something that the product specification says it should do. 2.The software does something that the product specification says it s…

Software Testing Testing with a Purpose Software testing is performed to verify that the completed software package functions according to the expectations defined by the requirements/specifications. The overall objective to not to find every softwar…

Oingial aritial --> Link Take away: import { Component, OnInit } from '@angular/core'; @Component({ selector : 'contacts-header', templateUrl: './header.component.html', styleUrls : ['./header.component.css'] }) export class HeaderComponent implement…

angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom.component'; @NgModule({ declarations:[AppComponent,customComponent], entryComponents:[customComponent] .... }) export class AppModule{} 全局注册: app.comp…

In this lesson, I use Enzyme and Jest to unit test a Counter Render Prop component. Writing integration tests are perfect for components that consume a Render Prop component. Likewise, unit tests are important to write for the Render Prop component i…