Angular Testing

Testing a Simple Component

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent Tests', () => {
  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 render greeting', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome!');
  }));
});

Testing Template


// EX1
import { async, TestBed } from '@angular/core/testing';
import { SomeComponent } from './some.component';

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [
      SomeComponent
    ],
    imports: [
      // HttpModule, etc.
    ],
    providers: [
      // { provide: ServiceA, useClass: TestServiceA }
    ]
  });
});

it('should do something', async(() => {
  TestBed.compileComponents().then(() => {
    const fixture = TestBed.createComponent(SomeComponent);

    // Access the dependency injected component instance
    const app = fixture.componentInstance;
    expect(app.something).toBe('something');

    // Access native element
    const element = fixture.nativeElement;

    // detect changes
    fixture.detectChanges();
    expect(element.textContent).toContain('something');
  });
}));


// EX2
it('should get quote', () => {

  fixture.debugElement.componentInstance.getQuote();
  fixture.detectChanges();
  var compiled = fixture.debugElement.nativeElement;

  expect(compiled.querySelector('div'))
    .toHaveText('Test Quote'); 
});
​

// EX3
import {TestBed, ComponentFixture, inject, async} from '@angular/core/testing';
import {LandingComponent, User} from './landing.component';
import {Component, DebugElement} from "@angular/core";
import {By} from "@angular/platform-browser";


describe('Component: Landing', () => {

  let component: LoginComponent;
  let fixture: ComponentFixture;
  let submitEl: DebugElement;
  let usernameEl: DebugElement;

  beforeEach(() => {

    // refine the test module by declaring the test component
    TestBed.configureTestingModule({
      declarations: [LandingComponent]
    });


    // create component and test fixture
    fixture = TestBed.createComponent(LandingComponent);

    // get test component from the fixture
    component = fixture.componentInstance;

    submitEl = fixture.debugElement.query(By.css('button'));
    usernameEl = fixture.debugElement.query(By.css('input[type=text]'));
  });

  it('Setting enabled to false disabled the submit button', () => {
    component.enabled = false;
    fixture.detectChanges();
    expect(submitEl.nativeElement.disabled).toBeTruthy();
  });

  it('Setting enabled to true enables the submit button', () => {
    component.enabled = true;
    fixture.detectChanges();
    expect(submitEl.nativeElement.disabled).toBeFalsy();
  });

  it('Entering email and password emits loggedIn event', () => {
    let user: User;
    usernameEl.nativeElement.value = "test";

    // Subscribe to the Observable and store the user in a local variable.
    component.loggedIn.subscribe((value) => user = value);

    // This sync emits the event and the subscribe callback gets executed above
    submitEl.triggerEventHandler('click', null);

    // Now we can check to make sure the emitted value is correct
    expect(user.name).toBe("test");
  });
});


Test a Simple Class


import { countries } from './countries';
import { Util } from './util';

let testClass: Util = null;
describe('Util Tests', () => {
  beforeEach(() => {
    testClass = new Util();
  });

  it('should ensure getCountries is based on countries file', () => {
    const actual = testClass.getCountries;
    expect(actual[0].id).toEqual(countries[0].id);
  });
});

import { countries } from './countries';
export class Util {

  public countries: any[] = countries;

  public getProducts() {
    return this.countries;
  }
}

Mock Event

  const mockEvent: Event = {
    srcElement: {
      classList: ''
    },
    charCode: 64,
    stopPropagation: ( ( e: any ) => { /**/ }),
    preventDefault: ( ( e: any ) => { /**/ }),
  };

Service Testing
https://semaphoreci.com/community/tutorials/testing-services-in-angular-2
https://blog.realworldfullstack.io/real-world-angular-part-9-unit-testing-c62ba20b1d93
https://stackoverflow.com/questions/42440234/unit-test-a-angular2-service-that-uses-rxjs-subjects

Template Testing
https://codecraft.tv/courses/angular/unit-testing/components/

GAnalytics
https://codeburst.io/using-google-analytics-with-angular-25c93bffaa18

Advertisements

JS Utils

JWT Token

Intereptor to Refresh Token
Ex1: https://medium.com/@alexandrubereghici/angular-tutorial-implement-refresh-token-with-httpinterceptor-bfa27b966f57

Ex2: https://codeforgeek.com/2018/03/refresh-token-jwt-nodejs-authentication/
Ex3: https://gist.github.com/Toilal/8849bd63d53bd2df2dd4df92d3b12f26

Minimalist Example:
Ex1: http://jasonwatmore.com/post/2018/05/23/angular-6-jwt-authentication-example-tutorial

Prevent SQL Injection

RegEx Playground: https://regex101.com/

  • 2 int followed by 4 caps: ^[A-Z]{2}[0-9]{4}$
  • Example2: ^[A-Za-z ][A-Za-z0-9!@#$%^&*’ ]{1,20}$

str.replace(/<[^>]*>/g, ”)

var str = '
<h2>Hello</h2>
';
str.replace(/]*&gt;/g, '');

Sort array of objects by ID

var data = [1, 2, 3, 4, 5]
  .map(el => {
    return {
      id: el,
      name: 'alpha',
      title: 'Mr.',
      description: 'laziest objects',
      age: (el * 10)
    };
  });
data.sort(function(a, b){return b.id - a.year});

Date Diff

d2 = new Date(2019, 3, 18);
d1 = new Date(2018, 9, 18);

Date.diffInMonths = function(d1, d2) {
  return Math.round((d2 - d1) / (60 * 30 * 60 * 24 * 1000));
}

Date.DateDiff = {

    inDays: function(d1, d2) {
        var t2 = d2.getTime();
        var t1 = d1.getTime();

        return parseInt((t2-t1)/(24*3600*1000));
    },

    inWeeks: function(d1, d2) {
        var t2 = d2.getTime();
        var t1 = d1.getTime();

        return parseInt((t2-t1)/(24*3600*1000*7));
    },

    inMonths: function(d1, d2) {
        var d1Y = d1.getFullYear();
        var d2Y = d2.getFullYear();
        var d1M = d1.getMonth();
        var d2M = d2.getMonth();

        return (d2M+12*d2Y)-(d1M+12*d1Y);
    },

    inYears: function(d1, d2) {
        return d2.getFullYear()-d1.getFullYear();
    }
}

Date.DateDiff.inDays(d1,d2);

 

Response Mapping

REST API
http://jsonplaceholder.typicode.com/users/

export class MyApp {
  private users = [];

  constructor(http: Http) {
    http.get('http://jsonplaceholder.typicode.com/users/')
        .flatMap((response) => response.json())
        .filter((person) => person.id > 5)
        .map((person) => "Mr. " + person.name)
        .subscribe((data) => {
          this.users.push(data);
        });
  }
}


On Console:
var users = [];
[
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771"
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net"
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net",
    "address": {
      "street": "Douglas Extension",
      "suite": "Suite 847",
      "city": "McKenziehaven",
      "zipcode": "59590-4157"
    },
    "phone": "1-463-123-4447",
    "website": "ramiro.info"
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
    "email": "Lucio_Hettinger@annie.ca",
    "address": {
      "street": "Skiles Walks",
      "suite": "Suite 351",
      "city": "Roscoeview",
      "zipcode": "33263"
    },
    "phone": "(254)954-1289",
    "website": "demarco.info"
  },
  {
    "id": 6,
    "name": "Mrs. Dennis Schulist",
    "username": "Leopoldo_Corkery",
    "address": {
      "street": "Norberto Crossing",
      "suite": "Apt. 950",
      "city": "South Christy",
      "zipcode": "23505-1337"
    },
    "phone": "1-477-935-8478 x6430",
    "website": "ola.org"
  }
].map((response) => response)
        .filter((person) => person.id > 3)
        .map((person) => { 
          return {
            name: 'Mr.' + person.name,
            company: 'laziest approach to constructing objs',
            id: person.id
          };
        })
        .map((data) => {
          users.push(data);
        });

Callbacks

function eat(at, callback) {
  setTimeout(function() {
    console.log('3. In 3 secs');
  }, 3000);
  console.log(`1. eat at ${at} & `);
  callback(5);
}

function sleep(at){
  setTimeout(function() {
    console.log(`2. sleep at ${at}`);
  }, 2000);
}

eat(3, sleep);

/> This does nothing

function greetWorld() {
  console.log(new Date() + ': Hello, world!');
}
var timerId = setTimeout(greetWorld, 2000);
clearTimeout(timerId);

Ex2:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
function log() {
  console.log('LG');
}

async function demo() {
  setTimeout("console.log('first');", 5000);
  await sleep(5000);
  console.log('second one');log();
}
demo();

// call books api
this.bookService.getBooks()
  .subscribe(
    response => {
      this.booksLoaded = true;
      this.books = response;
    },
    err => {
      console.log(‘books failed to load: ' + JSON.stringify(err));
  });

Aside

Angular5 part-3

a minimalist quiz component in Angular5 in less than 100 lines of code (including its data).

/> Typescript source

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

@Component({
  selector: 'app-authors',
  templateUrl: './authors.component.html',
  styleUrls: ['./authors.component.css']
})
export class AuthorsComponent {

  // maintains the state of the quiz
  private queId: number = -1;
  private current: number = 0;

  // capture user interaction
  public user: any = {};
  private responses: any = [];

  questions: any = [{
            question: 'Which is the largest country in the world by population?',
            options: ['India', 'USA', 'China', 'Russia'],
            answer: 3
        }, {
            question: 'When did the second world war end?',
            options: ['1945', '1939', '1944', '1942'],
            answer: 1
        }, {
            question: 'Which was the first country to issue paper currency?',
            options: ['USA', 'France', 'Italy', 'China'],
            answer: 4
        }, {
            question: 'Which city hosted the 1996 Summer Olympics?',
            options: ['Atlanta', 'Sydney', 'Athens', 'Beijing'],
            answer: 1
        }, {
            question: 'Who invented telephone?',
            options: ['Albert Einstein', 'Alexander Graham Bell', 'Isaac Newton', 'Marie Curie'],
            answer: 1
        }];

  constructor() {
    this.queId = this.getRandom(0, 4);
    this.user.response = '';
    this.user.score = 0;
    this.user.responses = [];
    this.updateState();
  }

  get isQuizMode() {
      return (this.responses.length <= 4);
  }

  get score(): number {
    return this.user.score;
  }

  onNext() {
    event.preventDefault();
    if (this.current = 2) {
         if (this.responses.length < this.current) {
             this.responses.push({'response': this.user.response, 'queId': this.queId});
         }
         this.queId = this.responses[this.current - 2].queId;
         this.user.response = this.responses[this.current - 2].response;
         this.current--;
     }// console.log(this.responses);
  }

  updateState (): void {
      if (!this.isQuizMode) {
          for (let i = 0; i < 5; i++) {
              let usrRes = this.responses[i].response;
              let ans = this.questions[this.responses[i].queId].answer;
              if (usrRes == ans) {
                  this.user.score++;
              }
          }
          this.user.score *= 20;
      } else {
          this.current++;
      }
  }

  getRandom(min, max): number {
      return Math.floor(Math.random() * (max - min + 1)) + min;
  }
}

/> The Markup


<!-- render questions //-->
<div>
    
<div style="text-align:left;">
            {{current}}. {{questions[queId].question}}
<ul>
	<li>{{questions[queId].options[0]}}</li>
	<li>{{questions[queId].options[1]}}</li>
	<li>{{questions[queId].options[2]}}</li>
	<li>{{questions[queId].options[3]}}</li>
</ul>
</div>
Next
        Prev
    </div>
<!-- show summary //-->

<h2>Results</h2>
<h3>Your Score: {{score}}</h3>
<p>
            {{i+1}}. queid: {{questions[resp.queId].question}}
correct ans: {{questions[resp.queId].answer}}
            user sel: {{resp.response}}


breaking down, package.json

01 | Using Config within package.json

package.json
{
  "name": "npm-labs",
  "version": "1.0.0",
  "description": "",
  "main": "start.js",
  "config": {
    "env": "dev"
  },
  "scripts": {
    "show-conf": "echo env: $npm_package_config_env",
    "first-task": "npm run second-task",
    "second-task": "npm run build --env=$npm_package_config_env",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node start.js"
  },
  "author": "hamzeen",
  "license": "ISC"
}

02 | Update & Publish NPM Module

git clone npm-module.git
git checkout -b feature/new-feature
// make changes & version bump -->
npm install
npm publish
git add . && git commit -m "message" && git push origin feature/new-feature

use it in dependant projects 🙂

start.js
console.log("name:" + process.env.npm_config_env);

usage:

$ npm run first-task

03 | Passing args to JS file

package.json
{
  "name": "npm-labs",
  "version": "1.0.0",
  "description": "",
  "main": "start.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node start.js"
  },
  "author": "hamzeen",
  "license": "ISC"
}
start.js
console.log("name:" + process.env.npm_config_name);

usage:

$ npm run build --name=app-name