Chatham NG4 Snippets Package

For all your ng4 needs.

• Description

• Usage

  • HTTP Service Snippets

  • Component Snippets

  • Directive Snippets

• Package Creation

• Extension Installation

• Known Issues

Description

This extension aims to provide you with a standarized code for angular 4 solutions in Chatham projects

Usage

You can use the following snippets by typing the prefix, the snippet will be suggested in a dropdown, you can trigger it by pressing ctrl + space or while typing:

HTTP Service Snippets

Chatham HTTP Service Class

• prefix:

    ch-service
  

• preview:

• body:

    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import { Observable } from 'rxjs/Rx';
  
    @Injectable()
    export class ServiceNameService {
        modelNameObserver: Observable<observableType>;
        baseUrl: string = 'baseUrl';
  
        constructor(private http: Http) { }
  
        getentityName(): Observable<observableType> {
            let requestUrl = `${this.baseUrl}/getEndpoint/`;
            return this.modelNameObserver = this.http.get(requestUrl).map(res => res.json());
        }
  
        postentityName(param: paramType): Observable<returnType> {
            let requestUrl = `${this.baseUrl}/postEndpoint/`;
            return this.http.post(requestUrl, { data : param }).map(res => res.json());
        }
  
  
    }
  

Chatham HTTP Service GET Method

• prefix:

    ch-service-get
  

• preview:

• body:

    getentityName(): Observable<observableType> {
        let requestUrl = `${this.baseUrl}/getEndpoint/`;
        return this.modelNameObserver = this.http.get(requestUrl).map(res => res.json());
    }
  

Chatham HTTP Service POST Method

• prefix:

    ch-service-post
  

• preview:

• body:

    postentityName(param: paramType): Observable<returnType> {
        let requestUrl = `${baseUrl}/postEndpoint/`;
        return this.http.post(requestUrl, { data : param }).map(res => res.json());
    }
  

Chatham HTTP Service Unit Tests Class

• prefix:

    ch-service-unit-tests
  

• preview:

• body:

    import { TestBed, async, inject } from '@angular/core/testing';
    import { Http, BaseRequestOptions, RequestMethod, ConnectionBackend, Response, ResponseOptions } from '@angular/http';
    import { MockBackend, MockConnection } from '@angular/http/testing';
  
    import {  ServiceClass } from './ service-file-name.service';
    import 'rxjs/add/operator/map';
  
    describe(' ServiceClass HTTP Service Tests', () => {
        let service;
  
        beforeEach(() => {
            TestBed.configureTestingModule({
                declarations: [],
                providers: [
                    BaseRequestOptions,
                    MockBackend,
                    ConnectionBackend,
                    {
                        provide: Http, useFactory: (backend, options) => new Http(backend, options),
                        deps: [MockBackend, BaseRequestOptions]
                    }
                ]
            });
        });
  
        it(' GetMethodName should return the data', (done) => {
            //Arrange
            let mockBackend: MockBackend = TestBed.get(MockBackend);
            let  mockResponse:  MockType= { }
  
            mockBackend.connections.subscribe((connection: MockConnection) => {
                const req = connection.request;
                const expectedUrl = '/ expectedGetUrl';
                expect(connection.request.method).toBe(RequestMethod.Get);
                expect(connection.request.url).toBe(expectedUrl);
  
                connection.mockRespond(new Response(new ResponseOptions({
                body: reportingHeaderFilers
                })));
            });
            let http = new Http(mockBackend, TestBed.get(BaseRequestOptions));
            let service = new GeneratedReportsFiltersService(http);
  
            //Act
            let observable = service. GetMethodName();
  
            //Assert
            observable.subscribe((result) => {
                expect(result).toBe(reportingHeaderFilers);
                done();
            });
        });
    })
  

Component Snippets

Chatham Component

• prefix:

    ch-component
  

• preview:

• body:

    import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
  
    @Component({
        selector: 'component-selector',
        template: `templateHTML`,
        styles: [require('./component-selector.component.scss')]
    })
    export class ComponentNameComponent implements OnInit {
        @Input() inputName: inputType;
        @Output() outputName = new EventEmitter<outputType>();
  
        constructor() { }
  
        ngOnInit() {
  
        }
    }
  

Chatham Component Unit Test

• prefix:

    ch-component-unit-tests
  

• preview:

• body:

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
    import { ComponentClass } from './component-file-name.component';
    import { ServiceClass } from '../service-file-name.service';
  
    describe('ComponentClass component tests', () => {
        let component: ComponentClassName;
        let fixture: ComponentFixture<ComponentClassName>;
        let mockServiceObject = {};
  
        beforeEach(async(() => {
            TestBed.configureTestingModule({
                declarations: [ComponentClassName],
                imports: [],
                providers: [
                    { provide: ServiceClass, useValue: mockServiceObject }
                ]
            })
            .compileComponents();
        }));
  
        beforeEach(() => {
            fixture = TestBed.createComponent(ComponentClassName);
            component = fixture.componentInstance;
            fixture.detectChanges();
        });
  
        it('should instantiate the ComponentClassName', () => {
            expect(component).toBeDefined();
        });
  
        describe('ngOnInit()', () => {
            it('should do something on ngInit', () => {
                //Arrange
                let mockModel: mockType = {};
                let serviceObject = TestBed.get(ServiceClass);
  
                serviceObject.serviceObjectMethod = (params: any) => {
                    return Observable.of(mockModel);
                }
  
                //Act
                component.ngOnInit();
  
                //Assert
                expect(component.componentProperty).toBe(mockModel.mockModelProperty);
                expect(serviceObject.serviceObjectMethod).toHaveBeenCalled();
            });
        });
    });
  

Directive Snippets

Chatham Directive

• prefix:

    ch-directive
  

• preview:

• body:

    import { Directive, ElementRef, Input } from '@angular/core';
  
    @Directive({
        selector: '[selector]'
    })
    export class DirectivetNameDirective {
        @Input() inputName: inputType;
  
        private element: HTMLElement;
  
        constructor(element: ElementRef) {
            this.element = element.nativeElement;
        }
  
        ngAfterContentChecked() {
  
        }
    }
  

Package Creation

• Get latest source:

    git clone git@git.chathamfinancial.com:frontend/ng4-vscode-snippets.git
  

• Install VSCode Extension Manager if you don't have it yet:

    npm install -g vsce
  

• In the source root run the following command:

    vsce package
  

• Finally install it via the supplied command:

    code --install-extension extension.vsix
  

Extension Installation

1. Install Visual Studio Code 1.5.0 or higher
2. Launch Code
3. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
4. Select Install Extension
5. Choose the 'Chatham NG4 Snippets' extension
6. Reload Visual Studio Code

Known Issues

• One of the extensions in the 'Angular Essentials' Extension may cause the snippets to take longer to be suggested.

Enjoy!