learning_angular.md

path	title
/learnings/learning_angular	Learnings: Angular

Table Of Contents

• General Angular Information
  • async patterns
    • asyncpipe - {{ blahblah | async}}
  • async as
  • order of callbacks:
• Architecture / Organization
  • Style Guides
  • Ways to talk to each other
    • EventEmitter
      • NOTE: Angular doesn’t offer an API to support event bubbling. (Have to use native DOM events for that)
    • @Input, @Output
  • Actually making loosely coupled components: Mediator pattern
    • or just seriously use >
      • Main concepts
  • and routes
  • and pulling DI provider items from component / library modules in the main app
  • Network communication
• Directives
• RxJS
  • Using DI in Angular
    • See also
    • Example @Component
  • gotchas
    • can not use a Typescript interface as a DI type for the provided parameter
• Testing Angular Applications
  • Configuring Karma for CI servers
    • Using headless Chrome with Karma
    • Actually running it...
  • Unit Tests
    • Shahow Tests
    • selecting DOM elements
    • routing tests
    • Overriding DI
      • See also
    • Testing Async code / network requests
      • Faking tests to seem sync
      • Using HttpClientTestingModule
• End To End / Integration Tests
  • Using Headless Chrome with Protractor
  • Questions
    • "Can we run this on Jenkins etc?"
    • Open questions:
      • Docker image with Protractor
    • Q: Can you use Selenium and/or Selenium Grid to run protractor created tests?
    • can I run multiple browsers in my test?
  • Using Pupetter With Protractor
    • See also:

General Angular Information

async patterns

asyncpipe - {{ blahblah | async}}

Will only do the filter when the observable has some value.

async as

Gives you a large object that you can route the value from the subscription into variable

order of callbacks:

0. Constructor
1. ngOnChanges
2. ngOnInit
3. ngDoCheck <-- each pass of change detector
4. ngAfterContextInit <-- after child component state inited and projection complete
5. ngAfterContentChecked
6. ngAfterViewInit
7. ngAfterViewChecked
8. ngDestroy

to pull those in inherit from interface that is the name without the Ng implements DoCheck for example

Architecture / Organization

Can separate project out into root Application and modules. (The add the component to the root application ‘s manifest and use the directives from the module(s) you imported)

Gyou could organize your modules by feature, or by component, maybe even by domain in a domain driven design approach.

Style Guides

• File Naming/Location Style Guide

Ways to talk to each other

• event emmitter
• Subject <-- RxJS
• BehaviorSubject <-- rxjs

EventEmitter

• [BOOKNOTE]:

You’ll notify the parent about the latest prices by emitting custom events via the @Output property of the component.

• Angular Component with Typescript @Input: lets you speciff essentially HTML attributes when you instantiate your compontent in an HTML template

@Output : way to send events up, from child -> parent (). (Repmember, one way data flow. To send data up you need to use events.)

NOTE: Angular doesn’t offer an API to support event bubbling. (Have to use native DOM events for that)

@Input, @Output

Actually making loosely coupled components: Mediator pattern

(Mediator handles @Ouput events from one component and sends them as @Input attributes into another).

(Could make this an injectable service too...)

or just seriously use <<Angular_NgRx>>

It’s redux but for Angular

And this time with RxJS backing it - subscribe the the store.

1. action
2. Effect
3. Reducer
4. (The Store)
5. Selectors

Main concepts

and routes

Routes are defined on a component / module level. export routes with forChild to do this.

By default / generator routes live in routing.module.ts

and pulling DI provider items from component / library modules in the main app

• [BOOKQUOTE]:

If a module is loaded eagerly, its providers can be used in the entire app, but each lazy-loaded module has its own injector that doesn’t expose providers. Providers declared in the @NgModule() decorator of a lazy-loaded module are available within such a module, but not to the entire application. L

• Angular Development with Typescript (Ed 2)

Network communication

Usually you'll stash all your HttpClient stuff into a service.

Can use Http Interceptors to add special things to the request, etc etc.

Directives

1. Componets
2. Structural Hirectives
3. Attribute Directives

RxJS

Using DI in Angular

See also

• Angular 7 and DI

Example @Component

(the "new / fancy" Angular 7+ providedIn syntax doesn't work here, for reasons...)

@Component( {
    selector: 'foobar',
    providers: [
        { provide: ContactService, useValue: aContactService }

    ]
})
export class ContactEditComponent {
    constructor(contactIn: ContactService) {
        this.contact = contactIn
    }
}

gotchas

can not use a Typescript interface as a DI type for the provided parameter

Because types son’t really exist / are removed by the compiler. use abstract classes instead (really) and your classes that conform to that interface should just inherit from that base class.

Testing Angular Applications

First: tools:

• unittests: jasmine / Karma
• integration tests: Protractor

Official Angular documentation on testing

Configuring Karma for CI servers

Using headless Chrome with Karma

add karma-chrome-launcher to devDependencies

Actually running it...

$ npm run karma run

Unit Tests

Shahow Tests

tost component one level deep: don't render child componets

selecting DOM elements

import { By } from '@amgular/platform-broswera

By.css('#hero_text')  // by directive too! .directive function

routing tests

RouterTestingModule

Overriding DI

TestBed.configureTestingModule({
    declarations: [ContactEditComponent, FavoriteIconDirective],
    // ^^^^ components you are using go here
    imports: [
        AppMaterialModule,
        FormsModule
    ],
    // ^^^^ array of modules that the component you are testing requires

    providers: [{provide: ContactService, useValue: contactServiceStub}]
    // ^^^ override DI. (here we inject a mock - using the same provider mechansim as our component declared
});

See also

• an excellent article explaining both how all these options work AND how tests work with it
• more on testing and DI in Angular

Testing Async code / network requests

Faking tests to seem sync

You can use fakeAsyc which enables you to write async code without having to deal with Jasmine's done callback.

Using HttpClientTestingModule

Angular builds in a module for mocking HTTP requests

this also automatically does fakeAsync work, so you don't have to call done.

(Also note HttpClient is an RxJS Obserable, so those rules apply.)

End To End / Integration Tests

Protractor (which bundles up Chrome, Firefox by way of WebDriver and/or Selenium). Firefox and and Chrome can support direct connections, without going though Selenium server, but all the other browsers you’ll have to use that.

Using Headless Chrome with Protractor

protractor tests on headless chrome

Questions

"Can we run this on Jenkins etc?"

Open questions:

• does Protractor end to end tests require the angular server running? (would potentially require a backend running) <-- how to replicate that???
• if it does, how to have port isolation to allow multiple end to end tests to run on the same Jenkins build agent (assume no build agent in separate Docker container isolation fanciness)

Docker image with Protractor

Because you need Firefox, Protractor, etc.

See how Grubhub does it with Docker containers.

Their setup got me thinking an interesting thought: do we use Docker compose or something to run the angular project in "one" container or along side the container to achieve isolation???

also points to their headless chrome container they use

Q: Can you use Selenium and/or Selenium Grid to run protractor created tests?

A: It seems so:

• instructions from TestingBot on how to do that

can I run multiple browsers in my test?

A: yes. set multiCapabilities

Using Pupetter With Protractor

Very easy: just point protractor towards the exec path from Puppetter?

See also:

• https://medium.com/@danharris_io/how-to-setup-angular-e2e-tests-on-vsts-ci-be0872f9dc31