Let’s implement some navigation in the Ember Speakers app.

• About
• Speakers

For this part we will work with faked out data. In the next part we will provide the Catalyst backend to push actual data.

Our first navigation test will be an easy one, create ember/tests/integration/about-page-test.js

import startApp from 'emberspeakers/tests/helpers/start-app';

var App;

module('Integration - About Page', {
  setup: function() {
    App = startApp();
  },
  teardown: function() {
    Ember.run(App, 'destroy');
  }
});

test('Should navigate to the About page', function() {
  visit('/').then(function() {
    click("a:contains('About')").then(function() {
      equal(find('h3').text(), 'About');
    });
  });
});

After writing this test we can confirm that our test is red in our browser.

To make this green we need to add an About route, a link from the landing page to the About route, and a template for the About route.

Route

// ember/app/router.js
Router.map(function() {
  this.route('about');
});

Link in Landing page Template

// ember/app/templates/application.hbs
<h2 id="title">Welcome to Boston Ember</h2>

{{link-to 'About' 'about'}}

{{outlet}}

Tempalte for about page

// ember/app/templates/about.hbs
<h3>About</h3>

<p>Boston Ember is the monthly meetup where awesome people get together
to do awesome Ember related things!</p>

Your test should now be green. If you navigate to the root path in your browser you should be able to click through the app. What about getting back to root? We can add a test to for this navigation as well.

// ember/tests/integration/landing-page-test.js
test('Should allow navigating back to root from another page', function() {
  visit('/about').then(function() {
    click('a:contains("Home")').then(function() {
      notEqual(find('h3').text(), 'About');
    });
  });
});

// ember/templates/application.hbs

{{link-to 'Home' 'application'}}
{{link-to 'About' 'about'}}

  
// ember/templates/application.hbs

{{link-to 'Home' 'application'}}
{{link-to 'About' 'about'}}

Nice, now we have very simple navigation and TDD working.

In next part let us have complex navigation linking with Speakers tab and integrate catalyst backend with dynamic list of speakers.