updates on my life…

Checking back in again on my monthly status report here.. not much has changed, SF is boring as usual. But there is no shortage of things I have to do.

1) I can’t get a home equity loan due to not being a US permanent resident (strangely I was able to get a mortgage tho?) so I have to rely on making a deposit for my Canadian home using cash instead. I have about $30k CAD in my bank there already so I need roughly $100k CAD ($75k USD) more saved up to get enough deposit for a $600k home in Vancouver. That means I need to save up quite a bit well into next year.

2) My company said I’m performing quite well enough to transition into full time, but while I think being a contractor means I lose out on PTO and stocks, I find the hassle of getting a visa very annoying. It took me 3(!) tries to get my visa last time when I crossed the border. such a hassle… not sure if its worth it.

3) I have to get the insurance company to reimburse me for my rental car accident which I got while driving to the DMV to get my license renewed.. its another big hassle

4) I have to get Walmart to reimburse me for the corporate credit card charges that I filed an expense report for back in January… Citibank keeps calling me, and yes its another hassle.

5) Everytime I take time off work as a contractor it hurts me. But I’ve been having breathing problems recently and had to go see the doctor and again.. its a hassle

6) I cancelled my chase rewards trip which I booked using points because I wanted to transfer the points somewhere else so that I could get a better deal on the trip – it cost me $100 to cancel and the rewards wont be refunded for 2 months. in the meantime I need to book a trip to Korea still so I had to pay that in cash since I’m not going to get the points back in time. So yes.. another hassle

7) I realized that Comcast has been charging me $10 a month to use their modem(!) for 3 years I’ve had to pay that insane fee thats $120 a year. So I have to get a new modem and send theirs back and make sure they dont bill me anymore for that! another hassle

8) I have to get my Google Pixel fixed because I dropped it and cracked the glass on the screen and it interferes with my camera – now you see refractions on the camera so thats another thing to do.

9) I tried transferring some Bitcoin into Bovada to be able to bet on the NBA games that I wanted but it seems that my transfer made it through but they still haven’t deposited that money into my account yet. So thats something else I have to talk to them about to make sure they get my money on time so that I can bet. Another hassle.

10) I have to transfer my webdomain over to a google domain so that I can host my website (this one) on my synology DS instead of using SiteGround so that I can save $100 a year on that.

11) Of course I still have to find a Korean girlfriend to marry, and right now I have only 2 weeks of vacation to go back to Korea. If I can’t find a girl to bring back during that 2 weeks, I’ll have to see who I can find when I move to Vancouver. This is easily the hardest thing to achieve on this list.

In other news.. Bitcoin / Ethereum are at all time highs and I have a little bit of each as hedges. Stock market is also at all time high so I’m a little wary. I am bullish on TSLA, AMZN, NFLX, NVDA, BABA and FB though. But waiting for good time to get in. Trump’s ongoing antics have been crazy and I think its just a matter of time before he gets impeached. Its been 5 months in and he’s already had a ton of scandals. And finally.. I went on a little bit of a spending / selling spree, sold my Gretsch White Penguin and my old drone and bought my friends Macbook Pro (2016) and the new Phantom 4 Advanced. The camera lens is amazing! see below:

and the Nintendo Switch as well… (was finally able to get my hands on it)

Oh and watch me assemble my guitar in fast time its pretty cool

Back to boring everyday living again…

These days trying to save up as much money as I can to help purchase a place in Vancouver hopefully next year.. ideally I want to 1) get my mortgage down to $200k 2) leverage my current SF home to get a home equity loan of at least $310k and 3) save up at least $60k this year in cash.
I want to take advantage of the US dollar strength because $310k + $60k = $370k which equals roughly $500k CAD which is just enough to get a decent 1 bedroom condo in a decent location in Vancouver. Of course, I want to purchase a home back in Canada for several reasons.

One is that the US is not particularly friendly to immigrants and especially so since Trump took office, and I get harassed every time I go across the border, since I am not a green card holder, and the TN visa is not a dual intent visa which means I cannot apply for a green card on that visa. Furthermore, recent changes to the H1B, the only dual intent working visa, have made it more difficult for programmers / software engineers to obtain. This means that my time in the US is likely limited.
Two is that Canada is the place that I want to start a family and retire anyways. I have often said before after all my travels, is that America is the best place for working due to the high salary and low taxes and low cost of goods; China and Europe are the best places to travel due to all the history and natural beauty; Korea is the best place for nightlife and having fun; and Canada is the best place to start a family and actually live, since it has a combination of European and American culture, the tuition fees are lower, the healthcare costs are lower etc. And Vancouver is unique as the warmest city in Canada as well as being on the lovely West Coast, and having lots of Koreans (Long term workers not just students) there doesn’t hurt my future plans either.
Three is I want to finally be able to purchase my own place with my own money. I always felt like my SF home is kind of my parents home, since they helped out with 40% of the cash. I want to finally purchase a place all with my own cash and call it my own.

So I’m trying to save a lot of money, but of course this being myself I do buy some things still… among the things I purchased recently is the Milkman Amp 1 Watt Plus model. This is a Class A Tube Amplifier that was handmade in San Francisco so I thought I might support a local shop here. But don’t I already have a Class A hand-wired tube amp? Yes I do, the Swart Atomic Jr. But this one has more wattage (10W vs 5W), 12″ Alnico Blue speaker (vs the 8″ Ceramic in the Swart), built in attenuator (goes from 0.5W to 10W) and is better for traveling due to the tubes being covered (the Swart has uncovered tubes which makes it risky to travel with it, despite being lighter).

It definitely has more headroom than the Swart does. I’ve also finalized my pedal board! My pedalboard contains 10 pedals. I’ve gone through tens of different pedals in my career, and I’ve finally settled on this configuration (for now): (from first to last in the chain)
BBE Wah -> Boss Waza Tuner -> Dunlop EP101 Preamp -> Wampler Euphoria -> RambleFX Marvel Drive -> Keeley Magnetic Echo -> Xotic SP Compressor -> BBE Sonic Stomp Mini -> Hermida Reverb -> Boss RC3 Looper
Retired my Maxon TBO9 (served me well) and the Keeley Oxblood Germanium (might use as backup to the Euphoria), and had to get the Hermida Reverb due to the Milkman amp not having onboard reverb. It was a compromise I had to make, the bigger Half Pint model had onboard reverb, but it was also 5lbs heavier.

And I want to get rid of my Gretsch White Penguin and Traynor Amps, even though the Gretsch is a great guitar, it has intonation problems, and is still a bit heavy for my tastes. It’s definitely the best looking out of all my guitars though. So ideally I want to keep the custom Partscaster that I built (Fender Telecaster Thinline ’72 deluxe with Filtertron/WRH pickups) as my main jazz/blues guitar, with the Fender Stratocaster doing rock and blues as well, and the Martin OMJM as my acoustic doing mostly pop tunes.

I’m doing a lot of jazz guitar these days. I love it! Playing a lot of Larry Carlton and George Benson these days. And I also love that John Mayer’s new album (Search for Everything) has great funky jazz-type riffs like ‘Moving on and Getting over’ and ‘Still feel like your man’. That man is a genius. Best album for me since Battle Studies (Continuum obviously still everyone’s favorite). Here is my ranking of John Mayer albums btw (from best to worst) as well as my favorite songs from each album.

1. Continuum (blues/pop masterpiece) – Best song: Slow Dancing in a Burning Room
2. Room for Squares (great acoustic pop) – Best song: St. Patrick’s Day
3. Try! (his best guitar album, great blues/rock songs) – Best song: Gravity
4. Battle Studies (more great guitar-pop) – Best song: Friends, Lovers or Nothing
5. The Search for Everything (blends all his previous styles + adds funk/jazz) – Best song: Moving on and getting over
6. Born and Raised (acoustic-folk pop) – Best song: Walt Grace’s Submarine Test 1967
7. Inside Wants Out (like Room for Squares but more raw) – Best song: Victoria
8. Heavier Things (some songs are great, others not so much) – Best song: New Deep
9. Paradise Valley (not many songs I liked from this album) – Best song: Who you love

In other news I’ve also been playing games with my friend, being bored a lot at home these days makes you do that. We still play Far Cry 4 a lot despite it being a 3 year old game just because of how amazing the co-op experience is. I think I have like 30 videos on Youtube of our play sessions together. I even made my own map and published it!

Other games I’ve been playing are the fantastic JRPGs Persona 5 and Yakuza 0. I’ve loved both these series (wayyy more interesting than Final Fantasy XV for me) so that’s no surprise. Also finished Root Letter (it was alright, but the ending was unsatisfying), and both Blazblue Central Fiction (love that series) and Steins Gate 0 (also love that series as well). Also bought Ghost Recon: Wildlands and Mass Effect: Andromeda mainly because both of them have co-op but both of them were letdowns for me. And of course still playing Hearthstone, which just released a new expansion (Journey to UnGoro).

Also looking forward to: Fire Emblem Echoes (3DS).. Akiba’s Beat (Vita).. Agents of Mayhem (PS4).. Quake Champions (PC).. Super Mario Odyssey (Switch)

And that’s the state of my life right now.. everyday work, go home and play games, and save money. Boring existence. When’s my next trip to Korea?

Unit Tests in Angular 2

Recently at my new company, Spigit, I’ve started on working on unit testing. Now, previously I’ve done unit testing and end to end testing using NighwatchJS at Walmart Labs.
And now with my new project, I have to use Angular 2.

After working with Angular 2 for a few months now and ReactJS last year, my feelings towards the two are: ReactJS is more flexible and lightweight, and Angular 2 comes with more out of the box features. It’s kind of like the old BackboneJS vs Angular 1 argument. Do you want a more lightweight, flexible framework, or do you want to go all in with one?

With ReactJS, you only have the “view” layer and you still have to use Flux or Redux to actually make service or API calls. Then you have to add Flow for type checking.
With Angular 2, you have that all out of the box with a comprehensive library + TypeScript which has built in type checking and is ES6 natively (but not exactly the same as ES6 as I found out later on). But Angular 2 is more heavy and you might not be using its full capability, so it’s not as flexible as ReactJS. It’s just like how Angular 1.x provided everything out of the box whereas BackboneJS required you to use UnderscoreJS, jQuery etc on top of it (which some companies expanded upon more with MarionetteJS, EpoxyJS, ThoraxJS, Lodash etc adding various capabilities onto Backbone).

Out of the two, ReactJS has a higher learning curve I feel. Having the markup in the JS files (JSX) and dealing with the component lifecycle and passing in props is a very different way of coding than the past.
Angular 2 (and Angular 4, etc) is also very different than AngularJS (that’s Angular 1.x btw), but its not quite the same chasm of difference that React is. AngularJS devs can migrate to Angular 2 fairly easily as there’s a guide for it, it still uses templates just like Backbone or AngularJS and you still have things like directives and pipes, but now everything is a component (let’s face it we live in an ES6 world now and you should be familiar with ES6 and dealing with importing/exporting components instead of the old MVC structure). Other AngularJS functions like `$scope.apply` have equivalents in Angular 2 like `changeDetectorRef.detectChanges()` But still out of the two new age popular frameworks, Angular 2 is easier to pick up. I technically prefer VueJS to either of them but it’s not quite as popular yet.

So my last 6 months with Walmart Labs I was mostly doing end to end testing using the NightwatchJS framework which uses the Selenium driver to automate browser testing. It puts less pressure on manual QA testing. We did testing on four major browsers: IE11, Firefox (last 3 versions), Chrome (last 3 versions), and Safari. We found some quirks with testing in certain browsers. For example on IE11, we would have to use clearValue twice to actually clear a value.


// For IE11
client.clearValue('input[type=text]');
client.clearValue('input[type=text]');

Which was weird, and also oddly enough on Firefox, clicking a button wouldn’t work unless the button was actually in the viewport. So we have to scroll down to it first.


// For Firefox
client.moveToElement('#main', 10, 10);
client.click("#main ul li a.first");

Very odd issues. But most people use Chrome as the standard and we only noticed the other failures since we integrated our CI with Admiral and SauceLabs.

Out of E2E testing and unit testing, Both are important, but when choosing which one to start out with, I feel unit testing is the more fundamental one to start out with. If you have a great QA team already, then you can make do without E2E testing since all it really does is automate integration testing. Unit tests also help catch regressions but on a more fundamental component level, whereas E2E catches regressions on the UI level. QAs can actually write E2E tests. But QAs usually don’t write unit tests; that’s the developers job since they know their own code the best.

ReactJS uses Mocha for unit testing (and Sinon for spies), while Angular uses Jasmine which come with their own spies. So starting out on Angular 2’s testing guide, its a big long ass intimidating page to read, and there’s tons of testing functions in there. I recommend reading the first half as the latter half are for very niche scenarios. There’s also a great plnkr link at the bottom of the page which contains ALL the unit tests in their whole, and I recommend looking at that because just showing code snippets is really not good enough. Sometimes you might be missing imports or stubs or declarations that you don’t see in the code snippets.

One of issues I ran into on the guide is using stubs vs mock classes. When we are testing components, we have to choose between using one of those if we have a function that reaches out to a service. We don’t want to call the real service. So, if we want more flexibility we can use a mock class, but the problem is Angular’s example doesn’t really work for me… when I put in the mock class as a provider using `useClass` and then using `overrideComponents`, Angular complains about it in my IDE.. I posted a question on stack overflow about it, but no one seems to reply.
So, I’m stuck using stubs instead, which is fine if the component doesn’t do too many service calls, but you lose out on the power of mock classes, but oh well. With Stubs we have to use `useValue` instead. Oh, and another gotcha I encountered… Jasmine spies by default only intercept the function but don’t call through to the real function. You have to use `spyOn(foo, ‘bar’).and.callThrough();` to actually go into the real function, which is useful when you have multiple spies on functions that call other functions.

Now I know there’s a lot of Angular 2 testing articles out there… and a lot of them have different strategies.. this is the one that worked for me…


// In addition to importing all the modules and services / providers you are using here, you need the core libraries...
import { fakeAsync, tick, async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { By } from '@angular/platform-browser';


describe('HeaderComponent', () => {

let comp: HeaderComponent;
let fixture: ComponentFixture;
let sessionServiceStub: any;
let utilsServiceStub: any;

beforeEach(async(() => {
utilsServiceStub = {
getPageName: jasmine.createSpy('getPageName').and.callFake(
() => ''
)
};
sessionServiceStub = {
getUserInfo: jasmine.createSpy('getUserInfo').and.callFake(() => {
return {
displayName: 'Jack'
};
}),
getSiteInfo: jasmine.createSpy('getSiteInfo').and.callFake(
() => Promise.resolve(true).then(() => {})
)
};
TestBed.configureTestingModule({
declarations: [HeaderComponent],
imports: [TranslateModule.forRoot()],
providers: [
{ provide: SessionService, useValue: sessionServiceStub },
{ provide: UtilsService, useValue: utilsServiceStub }
],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
}).compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(HeaderComponent);
comp = fixture.componentInstance;
comp.nav = [
{
pageName: 'Home',
tabLabel: 'tablabels.home'
},
{
pageName: 'PostIdea',
tabLabel: 'tablabels.post_idea'
},
{
pageName: 'ViewIdeas',
tabLabel: 'tablabels.view_ideas'
}
];
});

describe('component onInit', () => {
it('can instantiate it', () => {
expect(comp).not.toBeNull();
});

it('should init the header logo', () => {
const headerLogoEl = fixture.debugElement.query(By.css('.header-logo'));
expect(headerLogoEl.nativeElement.textContent).not.toBeNull();
});

it('should init the header menu', () => {
const headerMenuEl = fixture.debugElement.query(By.css('.header-menu'));
expect(headerMenuEl.nativeElement.textContent).not.toBeNull();
});

it('should init the right services on init', () => {
fixture.detectChanges();
expect(utilsServiceStub.getPageName.calls.count()).toBe(1);
expect(sessionServiceStub.getUserInfo.calls.count()).toBe(1);
expect(sessionServiceStub.getSiteInfo.calls.count()).toBe(1);
});
});

describe('buildMenu()', () => {
it('should init the menu holder', () => {
const navBarEl = fixture.debugElement.query(By.css('.navbar-spigit'));
spyOn(comp, 'buildMenu');
navBarEl.triggerEventHandler('showMoreMenu', null);
expect(comp.buildMenu).toHaveBeenCalled();
const menuHolder = fixture.debugElement.query(By.css('.more-menu-holder'));
const menuHolderContent = menuHolder.nativeElement.textContent;
expect(menuHolderContent).not.toBeNull();
});

it('should show dropdown menu when moreMenuConfig is visible', () => {
let dropdownMenu = fixture.debugElement.query(By.css('.dropdown-menu'));
expect(dropdownMenu).toBeNull();
comp.moreMenuConfig = {
visible : true,
mouseOutIntervalTime : 300,
mouseOutInterval: null,
moreMenuButtonVisible: true
};
// dropdown menu should be visible now
fixture.detectChanges();
dropdownMenu = fixture.debugElement.query(By.css('.dropdown-menu'));
expect(dropdownMenu).not.toBeNull();
});
});
});

and if you’re using Angular Bootstrap.. it actually does async stuff under the hood so you have to be careful about selecting DOM elements if they are using Bootstrap…


it('should call onScroll when scrolling on menu', async(() => {
fixture.detectChanges();
fixture.whenStable().then(() => { // wait for promise to return
fixture.detectChanges();
const menuEl = fixture.debugElement.query(By.css('.dropdown-menu'));
menuEl.triggerEventHandler('scroll', {
target: {
scrollHeight: 100,
scrollTop: 0,
clientHeight: 0
}
});
expect(comp.onScroll).toHaveBeenCalled();
expect(comp.getCommunities).toHaveBeenCalled();
})
}));

And sometimes when you are testing service calls, you also want to test for functions or code that executes in the callback of the promise as well… then you need `fakeAsync` for the job:


it('should get mini profile', fakeAsync(() => {
nameElmt.triggerEventHandler('mouseover', null); // mouseover triggers async service call
fixture.detectChanges();
tick(); // this essentially forwards the promise to the 'then' callback function
expect(userServiceStub.getMiniProfile.calls.count()).toBe(1);
}));

That’s just some sample code for testing components… now for testing services it gets more difficult since the Angular 2 testing guide doesn’t explain this very thoroughly… this is how I did it


import * as data from './data.json';

Now in TypeScript we can’t actually import json without it complaining about it missing a module definition.. unlike in native ES6. So we have to use a workaround hack .. we have to create another separate file in the same directory as the json file with the same name (including .json) so we have a file called `data.json.ts` and inside it the only content we have is

export default '';

And that’s it! Now the importing works. It’s weird but yes we have to do that until TypeScript natively supports importing JSON.

then in the test file…


describe('PageService', () => {

let utilsServiceStub: any;
const mockResponse:any = data; // Typescript will not recognize anything in the json data unless we force a type on it

beforeEach(async(() => {
utilsServiceStub = {
getPageName: jasmine.createSpy('getPageName').and.callFake((param: string) => '')
};
TestBed.configureTestingModule({
imports: [HttpModule],
providers: [
PageService,
MockBackend,
{ provide: UtilsService, useValue: utilsServiceStub },
{ provide: XHRBackend, useClass: MockBackend }
],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
}).compileComponents();
}));

describe('getPagePromise()', () => {
it ('should return appropiate response', async(
inject([PageService, MockBackend], (pageService, mockBackend) => {

mockBackend.connections.subscribe((connection: MockConnection) => {
connection.mockRespond(new Response(new ResponseOptions({
body: JSON.stringify(mockResponse)
})));
});

pageService.getPagePromise().then((pageData) => {
expect(utilsServiceStub.getPageName.calls.count()).toBe(1, 'getPageName called once');
expect(pageData.ideaStages.length).toBe(6);
expect(pageData.numLifecycleStages).toBe(7);
expect(pageData.creatorName).toEqual('Viviana Arandia');
expect(pageData.ideaTitle).toEqual('ONE POPULAR STAR WARS PLANET THAT ALMOST SHOWED UP IN ROGUE ONE');
expect(pageData.hasViewed).toBe(false);
});

})));
});
});

So those are my component and service tests… let me know if that helps anyone! the existing Angular 2 unit testing articles are very confusing and contradictory for me so.. this is what worked for me.