Profile Picture

Hi, I'm Sheeju Alex.

I'm a developer, living in Bangalore, India and this is my personal development blog. I plan to share my technical stuff here, long back but not so long back I used to share my technical and crazy stuff on Sheeju Alex, Blog Spot.

Shoot me an email if you'd like to be in touch.

Check out my Resume here

Sheeju Alex

Building an Ember App with PERL MVC framework - Part 3

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() {, '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.


// ember/app/router.js {

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

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


Tempalte for about page

// ember/app/templates/about.hbs

<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.

comments powered by Disqus