1. Create a new project.

ng new AngularTesting

2. app.component.spec.ts

import { TestBed, async } from @angular/core/testing;

import { AppComponent } from ./app.component;

describe(AppComponent, () => {

beforeEach( async( () => {

TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));

it(should create the app, async(() => {

const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));

it(`should have as title app works!`, async(() => {

const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual(app works!);
}));

});

To create a component using Angular CLI use the below command:

ng g c Counter
counter.component.html

<div>

<p>Number: {{counter}} </p>

<button (click)=increment()>Increment</button>

<button (click)=decrement()>Decrement</button>

</div>

counter.component.ts

import { Component } from @angular/core;

@Component({
selector: app-counter,
templateUrl: ./counter.component.html,
styleUrls: [./counter.component.css]
})
export class CounterComponent {
counter: number;
constructor() {
this.counter = 1;
}
increment() {
this.counter++;
}
decrement() {
this.counter--;
}
};
counter.component.spec.ts

import { async, ComponentFixture, TestBed } from @angular/core/testing;

import { DebugElement } from @angular/core;
import { CounterComponent } from ./counter.component;

describe(CounterComponent, () => {
let component: CounterComponent;
let fixture: ComponentFixture<CounterComponent>;
let debugElement: DebugElement;
let htmlElement: HTMLElement;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations : [CounterComponent]
}).compileComponents();
}));

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

fixture.detechChanges();

debugElement = fixture.debugElement.query(By.css(p));
htmlElement = debugElement.nativeElement;
});

it(should increment the counter number by one, () => {

// Arrange
const initialValue = component.counter;

//Act
component.increment();
fixture.detectChanges();
const newValue = component.counter;

// Assert
expect(newValue).toBeGreaterThan(initialValue);

});

it(should display the current number of the counter, () => {

// Assert that the text on screen is of Number: 1
 expect(htmlElement.textContent).toEqual(Number: 2);
});
});

Angular End to End Testing

1. Difference Unit/Component vs. End 2 end Testing:

Unit/Component:
Test a single Component, Service, Pipe etc.
Test a single specific behavior in a controlled environment.
Mock everything you need to test this functionality.
Use code coverage analysis to make sure everything is covered.
(Usually) Improves code structure and quality.
Test edge cases on the most detailed level.
Know if a change breaks a specific behavior.
Does not test if the whole application or a process works in a real life.

End to end Testing

Test complete processes End 2 End.

Test in real environment with the whole application.
Test real live situations.
Know if most important features work with the complete application.
Focussed on the overall functionality and not the specific code structure.
Does not test Edge cases.
Does not necessarily improve code quality.
2. Mini App example

I took this mini-app as an example:

ng new letslearn-ci

Example Code for app.component.html/ts:

 We have a points variable, a plus 1 button, a reset button and a title. If you click the button, the

Points are increased, if then you click reset, the points go back to 0.

3. Prepare e2e Page Object to Access the Elements

With @angular/cli, you get a e2e folder and structure that suggests to create a page object
which helps you to access the elements. The page object for the default page is found in
./e2e/app.po.ts.

What: Page Object: A class with functions that return elements like Buttons, Texts or
Whatever you need for the test.
 Why: If you change your page structure, you only have to change the Page Object, but the
Tests can stay the same.

4. Write e2e tests that walk through a process

Now we can write our e2e tests that use those elements to interact with the page and test its
result.
app.e2e-spec.ts

import { LetslearnPage } from './app.po';

describe('letslearn App', () => {

let page: LetslearnPage;

beforeEach(() => {
page = new LetslearnPage();
});

it('Should display Letslearn title', () => {

page.navigateTo();
expect(page.getTitle()).toEqual('Letslearn');
});

it('Should start with 1 point', () => {

page.navigateTo();
expect(page.getPoints()).toEqual('1');
});

it('Should increase points by clicking plus1', () => {

page.navigateTo();

expect(page.getPoints()).toEqual('1');
page.getPlus1Button().click();

expect(page.getPoints()).toEqual('2');

page.getPlus1Button().click();
page.getPlus1Button().click();
page.getPlus1Button().click();

expect(page.getPoints()).toEqual('5');
});

it('Should rest points by clicking plus1', () => {

page.navigateTo();

page.getPlus1Button().click();
page.getPlus1Button().click();
page.getPlus1Button().click();

expect(page.getPoints()).toEqual('4');

page.getResetButton().click();

expect(page.getPoints()).toEqual('0');
});

});

Tests should speak for themselves, meaning that you should be able to read them top down as if
it was a story ( with some imaginiation).
 5. Run the tests

ng e2e

Top 7 rxjs patterns for angular developers

1. Static vs Instance Methods

Problem: You want to use RxJS methods in Angular4.

Solution: You only import the operators you need (tree shaking) from RxJS. There are two types
of RxJS operators Static and Instance. A static method is applied to the Observable class itself.
This concept is important because the methods are located in different places.

Instance rxjs/add/operator/{method}
Static - rxjs/add/observable/{method}

Heres how we use RxJS instance method:

import { Observable } from rxjs/observable;

import rxjs/add/operator/combineLatest;

let hello = Observable.of(Hello)

let world = Observable.of( World)

hello.combineLatest(world)

And heres how to use a static method:

import rxjs/add/observable/combineLatest ;
Observable.combineLatest(hello, world);

2. Subscribe to Observable Data

Problem: You want to extract data from an observable.

Solution: You extract data by subscribing to Observables. You have two main ways of going
about this in Angular.
( 1 ). Subscribe with async pipe in the HTML or
 ( 2 ). Subscribe manually in the TypeScript.
In this example, we use method 1 for cats and method 2 for dogs. The result is exactly the same.

cats: FirebaseListObservable<any[]>;
dogs: Array<any[]>;
ngOnInit() {
this.cats = this.db.list('/cats')
this.db.list('/dogs').subscribe(dogs => {
this.dogs = dogs
})
}

In the HTML, we unwrap cats with the async pipe, but dogs are just iterated over like a normal

array.

<div *ngFor=let cat of cats | async></div>

<div *ngFor=let dog of dogs></div>

3. Unsubscribing from Observable Data

Problem: You want to prevent memory leaks by unsubscribing from observable data.

Solution: When you use the async pipe this will be handled automatically. If you created a

Subscription in the TypeScript, you will need to unsubscribe manually. The OnDestroy

Lifecycle hook is useful for ending subscriptions.

ngOnDestroy() {
this.subscription.unsubscribe()
})

4. The SwitchMap (MergeMap ) Pattern

Problem: You need to extract data from observableA before you can load a related
observable.

Solution: This is a common problem with authentication. You might need to load a user,
then fetch their associated data from the database. In this example, we load the human,
 then load the pets that are owned by this human. We use the switchMap operator ( aka
mergeMap) to make this possible.

human: FirebaseObjectObservable<any>;
dogs: Observable<any[]>;
ngOnInit() {
this.human = this.db.object('/humans/jeff')
this.dogs = this.human.switchMap(human => {
return this.db.list('/dogs', {
query: {
orderByChild: 'owner',
equalTo: human.name
}
})
})
}

5. Mapping Observables

Problem: You want to transform the structure of the data inside an observable.

Solution: Lets say we want to return the length of a list observable, rather than the data itself.
The map operator allows us to change convert the array into a number by returning its length.
We can also take an object observable and return one of its properties a string observable.

catCount: Observable<number>;
dogName: Observable<string>;
ngOnInit() {
this.catCount = this.db.list('/cats')
.map(cats => {
return cats.length
})
this.dogName = this.db.object('/dogs/-KpRuD47u8810-BXEn5Q')
.map(dog => {
return dog.name
})
 }

6. Combining Observables

Problem: You want two object observables as a single array observable.

Solution: Let add a cat and dog into their own observable using the combineLatest operator.
There are many different combine operators in RxJS, so check out the docs to see what works
best in your situation.

animals: Observable<any[]>
ngOnInit() {
this.cat = this.db.object('/cats/-KpRuC...Id')
this.dog = this.db.object('/dogs/-KpRuD...Id')
this.animals = Observable
.combineLatest(this.cat, this.dog)
}

7. The BehaviorSubject Pattern

Problem: You need to share current data across components or services.

A BehaviorSubject is an observable that can receive new data by calling next(data). In this
example, make one of the dogs a the currentDog, then subscribe to it in the HTML.

This may seem trivial in a single component, but you can create subjects in services, then share
the current state of data throughout your application by injecting the service into components.

dogs: FirebaseListObservable<any[]>;
currentDog = new BehaviorSubject(null);
ngOnInit() {
this.dogs = this.db.list('/dogs')
}
changeDog(dog) {
this.currentDog.next(dog)
}
 <div *ngFor = let dog of dogs | async (click)=changeDog(dog)>
{{ dog.name }}
<img [src]=dog.url/>
</div>

<h2>Current Dog </h2>

<div>
{{ (currentDog | async)?.name }}
<img [src]=(currentDog | async)?.url>
</div>

Sharing Data between Angular Components

- Four Methods
Data sharing is an essential concept to understand before diving into your first Angular project. In this
lesson, I provide four different methods for sharing data between Angular components.
The Parent-Child-Sibling structure of our Angular app.

Parent to Child: Sharing Data via Input()

This is probably the most common and straightforward method of sharing data. It works by using
the Input() decorator to allow data to be passed via the template.

parent.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-parent',
template: `
<app-child [childMessage]="parentMessage"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent{
parentMessage = "message from parent"
constructor() { }
}

child.component.ts

import { Component, Input } from '@angular/core';

@Component({
selector: 'app-child',
template: `
Say {{message}}
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() childMessage: string;
 constructor() { }
}

Child to Parent: Sharing Data via ViewChild()

ViewChild allows a one component to be injected into another, giving the parent access to its attributes
and functions. One caveat, however, is that child wont be available until after the view has been
initialized. This means we need to implement the AfterViewInit lifecycle hook to receive the data from
the child.

parent.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import { ChildComponent } from "../child/child.component";
@Component({
selector: 'app-parent',
template: `
Message: {{message}}
<app-child></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {
@ViewChild(ChildComponent) child;
constructor() { }
message:string;
ngAfterViewInit() {
this.message = this.child.message
}
}

child.component.ts

import { Component} from '@angular/core';

@Component({
 selector: 'app-child',
template: `
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message: string = "Hola Mundo!"
constructor() { }
}

Child to Parent: Sharing Data via Output() and EventEmitter

Another way to share data is to emit data from the child, which can be listed to by the parent. This
approach is ideal when you want to share data changes that occur on things like button clicks, form
entires, and other user events.

In the parent, we create a function to receive the message and set it equal to the message variable.

In the child, we declare a messageEvent variable with the Output decorator and set it equal to a new
event emitter. Then we create a function named sendMessage that calls emit on this event with the
message we want to send. Lastly, we create a button to trigger this function.

The parent can now subscribe to this messageEvent thats outputted by the child component, then run
the receive message function whenever this event occurs.

parent.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-parent',
template: `
Message: {{message}}
<app-child (messageEvent)="receiveMessage($event)"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
 message:string;
receiveMessage($event) {
this.message = $event
}
}

child.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-child',
template: `
<button (click)="sendMessage()">Send Message</button>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message: string = "Hola Mundo!"
@Output() messageEvent = new EventEmitter<string>();
constructor() { }
sendMessage() {
this.messageEvent.emit(this.message)
}
}

Unrelated Components: Sharing Data with a Service

When passing data between components that lack a direct connection, such as siblings, grandchildren,
etc, you should you a shared service. When you have data that should aways been in sync, I find
the RxJS BehaviorSubject very useful in this situation.
You can also use a regular RxJS Subject for sharing data via the service, but heres why I prefer a
BehaviorSubject.

It will always return the current value on subscription - there is no need to call onnext
 It has a getValue() function to extract the last value as raw data.

It ensures that the component always receives the most recent data.

In the service, we create a private BehaviorSubject that will hold the current value of the message. We
define a currentMessage variable handle this data stream as an observable that will be used by the
components. Lastly, we create function that calls next on the BehaviorSubject to change its value.

The parent, child, and sibling components all receive the same treatment. We inject the DataService in
the constructor, then subscribe to the currentMessage observable and set its value equal to the
message variable.

Now if we create a function in any one of these components that changes the value of the message.
when this function is executed the new data its automatically broadcast to all other components.

data.service.ts

import { Injectable } from '@angular/core';

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject<string>("default message");
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}

parent.component.ts

import { Component, OnInit } from '@angular/core';

import { DataService } from "../data.service";
@Component({
selector: 'app-parent',
template: `
{{message}}
`,
 styleUrls: ['./sibling.component.css']
})
export class ParentComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
}

sibling.component.ts

import { Component, OnInit } from '@angular/core';

import { DataService } from "../data.service";
@Component({
selector: 'app-sibling',
template: `
{{message}}
<button (click)="newMessage()">New Message</button>
`,
styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
newMessage() {
this.data.changeMessage("Hello from Sibling")
}
}