Angular 2 Challenge Day 19 - End To End Testing

Today we’re going to look at integration testing using the bundled ng end to end testing tool called Protractor.

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 run our integration test suite

ng e2e

[ ] Explore the directory e2e-spec.ts & .po.ts files

[ ] We’ll explore the role of Page objects to abstract elements and localise changes

[ ] Implement our TwitNgPage object (I would typically rename to FeedPage)

export class TwitNgPage {
  navigateTo() {
    return browser.get('/feed');
  }

  postTweet(tweetText) {
    element(by.name("body")).sendKeys(tweetText); 
    element(by.css("button")).click();
  }

 
}

[ ] Discuss selectors by.name by.id and by.css (not by.model)

[ ] Use the debugger

browser.pause();

[ ] And add an assertion to app.e2e-spec.ts

it("Should post a tweet", () => {
    page.navigateTo();
    page.postTweet("This is awesome");
    expect(page.getFeedCount()).toEqual(6);
  });

[ ] Implement our selector in app.po.ts

  getFeedCount()  {
    return element.all(by.css(".comment")).count();
  }

[ ] Let’s confirm it’s working by getting the text of the tweet in app.po.ts

getLatestTweet() {
    return element.all(by.css(".comment .content .text")).get(0).getText();
}

[ ] And asserting it in app.e2e-spec.ts

expect(page.getLatestTweet()).toEqual("This is awesome");

[ ] Let’s also test our retweet action in app.e2e-spec.ts

it("Should increment retweet count", () => {
    page.navigateTo();
    page.retweetLatestTweet();
    var rtCount = page.getLatestTweetRetweetCount();
    expect(rtCount).toEqual("2 Retweets");
  });

[ ] And implement the logic to retweet/count to the Page in app.po.ts

  retweetLatestTweet() {
    element.all(by.css(".comment .content .actions .retweet")).get(0).click();
  }

  getLatestTweetRetweetCount() {
    return element.all(by.css(".comment .content .actions .retweet")).get(0).getText();
  }

[ ] We have smashed end to end testing!

[ ] Tomorrow we look at quality tools