Hello Ember App

components.nav-bar.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'nav'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Hello Ember App'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('index', { path: '/' });
  this.route('about', { path: '/about' });
});

export default Router;

routes.about.js

import Ember from 'ember';

export default Ember.Route.extend({
   model() {
    return {
      header: 'Header 1',
      color: 'black',
      pointData: '20, 100 40,60 70,80 100,20'
    };
  }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return [ { 
      header: 'Header 1',
      value: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas 2017 molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.' 
    }, {
      header: 'Header 2',
      value: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.'
    }];
  }
});

styles.app.css

body {
  padding: 20px;
  float: center;
}

nav {
  width: 300px;
}

.app {
  width: 320px;
}

.app, nav {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

a, a:visited {
  color: rgb(255,255,255);
}
a:hover {
  color: black;
}

ul {
  list-style-type: none;
}

.content {
  padding: 20px;
  height: 500px;
  overflow-y: scroll;
  background-color: white;
}

.label {
  color: rgba(0,0,0,0.65);
  font-weight: bold;
  margin-right: 0.3em;
}

.splitter {
  color: rgba(255,255,255,0.1);
  font-weight: bold;
  margin-left: 12px;
  margin-right: 12px;
}
.splitter::before { 
  content: '|';
}

nav {
  z-index: 1;
  background-color: #3367d6;
  padding-left: 20px;
}
nav:first-child {
  padding-top: 16px;
  padding-bottom: 10px;
  margin-bottom: 2px;
}
nav:last-child {
  padding-top: 10px;
  padding-bottom: 16px;
  margin-top: 2px;
}

hr {
  padding: 0;
  margin-top: 22px;
  background-color: white;
	border-top: 2px solid rgba(0,0,128,0.05);
  border-left-width: 0;
  border-top-width: 1;
  border-bottom-width: 0;
  margin-left: 44px;
  margin-right: 44px;
}

templates.about.hbs

<article>
  <header class="label">{{model.header}}</header>
</article>

templates.application.hbs

<div class="app">
  {{nav-bar}}
  <div class="content">
    {{outlet}}
  </div> 
  {{nav-bar}}
</div>

templates.components.nav-bar.hbs

{{#link-to "index"}}Side 1{{/link-to}}<span class="splitter"></span>{{#link-to "about"}}Om{{/link-to}}
{{yield}}

templates.index.hbs

{{#each model as |item|}}
  <article>
    <header class="label">{{item.header}}</header>
    <p>{{item.value}}</p>
  </article>
{{/each}}

tests.acceptance.about-test.js

import { test } from 'qunit';
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';

moduleForAcceptance('/about acceptance tests');

test('current url should be "/about"', function(assert) {
  visit('/about');
  andThen(function() {
    assert.equal(currentURL(), '/about');
  });
});

test('current path should be "about"', function(assert) {
  visit('/about');
  andThen(function() {
    assert.equal(currentPath(), 'about');
  });
});

test('current route should be "about"', function(assert) {
  visit('/about');
  andThen(function() {
    assert.equal(currentRouteName(), 'about');
  });
});

test('should only have one label.', function (assert) {
  visit('/about');
  andThen(function() {
    assert.equal(find('.label').length, 1);
  });
});

test('article header should read "Header 1"', function (assert) {
  visit('/about');
  andThen(function() {
    assert.equal(find('article').first().find('header').first().text(), 'Header 1');
  });
});

tests.acceptance.index-test.js

import { test } from 'qunit';
import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';

moduleForAcceptance('/index acceptance test');

test('current url should be /', function(assert) {
  visit('/');
  andThen(function() {
    assert.equal(currentURL(), '/');
  });
});

test('should contain 2 labels.', function (assert) {
  visit('/');
  andThen(function() {
    assert.equal(find('.label').length, 2);
  });
});

test('should contain 2 articles', function (assert) {
  visit('/');
  andThen(function() {
    assert.equal(find('article').length, 2);
  });
});

test('header of 1st article should be "Header 1"', function (assert) {
  visit('/');
  andThen(function() {
    var first = find('article').first().find('.label').first();
    assert.equal(first.text(), 'Header 1');
  });
});

test('header of 2nd article should be "Header 2"', function (assert) {
  visit('/');
  andThen(function() {
    var first = find('article').next().find('.label').first();
    assert.equal(first.text(), 'Header 2');
  });
});

tests.helpers.destroy-app.js

import Ember from 'ember';

export default function destroyApp(application) {
  Ember.run(application, 'destroy');
}

tests.helpers.module-for-acceptance.js

import { module } from 'qunit';
import Ember from 'ember';
import startApp from '../helpers/start-app';
import destroyApp from '../helpers/destroy-app';

const { RSVP: { Promise } } = Ember;

export default function(name, options = {}) {
  module(name, {
    beforeEach() {
      this.application = startApp();

      if (options.beforeEach) {
        return options.beforeEach.apply(this, arguments);
      }
    },

    afterEach() {
      let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
      return Promise.resolve(afterEach).then(() => destroyApp(this.application));
    }
  });
}

tests.helpers.resolver.js

import Resolver from '../../resolver';
import config from '../../config/environment';

const resolver = Resolver.create();

resolver.namespace = {
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix
};

export default resolver;

tests.helpers.start-app.js

import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import resolver from './helpers/resolver';
import {
  setResolver
} from 'ember-qunit';

setResolver(resolver);

tests.unit.routes.index-test.js

import { moduleFor, test } from 'ember-qunit';

moduleFor('route:index', '/index route tests', {
  // Specify the other units that are required for this test.
  // needs: ['controller:foo']
});

test('it exists', function(assert) {
  let route = this.subject();
  assert.ok(route);
});

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}