Angular 2 Challenge Day 20 - Linting and Code Coverage and Mocking

Angular 2 has gone final! Yay! Today we’re going to look at linting, code coverage and mocking in the latest Angular CLI (Beta 14).

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] First, we’ll migrate everything to the latest CLI using this migration guide

[ ] Basically we spark a new project, and copy our src and e2e folders over.

[ ] Next will fix the broken, by removing module.id everywhere, moving our assets to src/assets (and fix matching links). Tests are a world of broken, too. We’ll talk about them shortly.

[ ] Let’s lint our file

ng lint

[ ] What that actually does is just run npm run lint

"scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",

[ ] How to configure your linting rules via tslint.json in the root of your project

"no-trailing-whitespace": false,

"indent": [
  true,
  "spaces"
],

[ ] And let’s tidy up our Tweet class appropriately

[ ] Look up the docs

ng doc TestBed

[ ] Let’s have a look at code coverage

ng test

[ ] Let’s enhance our FeedComponent with an mock call

it('should retrieve things on init..', () => {
    let fixture = TestBed.createComponent(FeedComponent);
    let app = fixture.debugElement.componentInstance as FeedComponent;
    expect(app.loaded).toBeFalsy();
    expect(app.tweets.length).toEqual(0);

    app.ngOnInit();
    expect(app.tweets.length).toEqual(2);
    expect(app.loaded).toBeTruthy();
  });

[ ] And the same for favorites and retweets

it('should favorite and retweet appropriately..', () => {

    let fixture = TestBed.createComponent(FeedComponent);
    let app = fixture.debugElement.componentInstance as FeedComponent;

    let tweet = new Tweet(125, 'Another Mock Tweet', 'Glen', new Date(), [], []);

    expect(tweet.favorites.length).toEqual(0);
    app.OnFavorite(tweet);
    expect(tweet.favorites.length).toEqual(1);

    expect(tweet.retweets.length).toEqual(0);
    app.OnRetweet(tweet);
    expect(tweet.retweets.length).toEqual(1);

  });

[ ] Celebrate our awesome coverage!

[ ] Tomorrow we look at where to go from here