Add Ember Suave & Ember CLI Template Lint

* Add ember suave and make changes to abide by styleguide
* Add `ember-cli-template-lint`

.jscsrc

@@ -0,0 +1,3 @@
+{
+  "preset": "ember-suave"
+}

.template-lintrc.js

@@ -0,0 +1,6 @@
+/* jshint node:true */
+'use strict';
+
+module.exports = {
+  extends: 'recommended'
+};

package.json

@@ -29,11 +29,13 @@
     "ember-cli-qunit": "^1.4.0",
     "ember-cli-release": "^0.2.9",
     "ember-cli-sri": "^2.1.0",
+    "ember-cli-template-lint": "0.4.11",
     "ember-cli-uglify": "^1.2.0",
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.5.1",
     "ember-resolver": "^2.0.3",
+    "ember-suave": "4.0.0",
     "loader.js": "^4.0.1"
   },
   "keywords": [

tests/acceptance/interactions-test.js

@@ -35,7 +35,7 @@ module('Acceptance: Interactions', {
 test('#checkByLabel finds a checkbox and checks it', (assert) => {
   andThen(checkByLabel('This is the second checkbox'));
   andThen(() => {
-    const checkedInput = find('#checkbox2:checked');
+    let checkedInput = find('#checkbox2:checked');
 
     assert.equal('second_checkbox', checkedInput.val(), `expected the second checkbox to be checked but found ${checkedInput.val()}`);
   });
@@ -60,46 +60,46 @@ test('#clickLink finds a link by its text and clicks it', function(assert) {
 
   andThen(clickLink('First link'));
   andThen(() => {
-    const url =  currentURL();
+    let url =  currentURL();
     assert.equal(url, '/first-link-target');
   });
 });
 
 test('#clickRadioByLabel adds checked attribute to corresponding input', (assert) => {
   andThen(clickRadioByLabel('Label for first radio'));
   andThen(() => {
-    const checkedInput = find('input:checked');
+    let checkedInput = find('input:checked');
     assert.equal('radio_1', checkedInput.val(), 'expected radio 1 to be checked');
   });
   andThen(clickRadioByLabel('Label for second radio'));
   andThen(() => {
-    const checkedInput = find('input:checked');
+    let checkedInput = find('input:checked');
     assert.equal('radio_2', checkedInput.val(), 'expected radio 2 to be checked');
   });
 });
 
 test('#fillInByLabel enters text into an input corresponding to a label', function(assert) {
-  const targetInput = 'form input.node-2';
-  const targetValue = 'Jane Doe';
+  let targetInput = 'form input.node-2';
+  let targetValue = 'Jane Doe';
 
   assert.expect(2);
 
   andThen(() => {
-    const val = find(targetInput).val();
+    let val = find(targetInput).val();
     assert.notEqual(val, targetValue, 'did not expect the input to contain the target value yet');
   });
 
   andThen(fillInByLabel('Name', targetValue));
   andThen(() => {
-    const val = find(targetInput).val();
+    let val = find(targetInput).val();
     assert.equal(val, targetValue, 'expected the input to contain the target value');
   });
 });
 
 test('#selectByLabel selects a dropdown option by label and option', (assert) => {
   andThen(selectByLabel('Label for first select', 'Value 2'));
   andThen(() => {
-    const selectedOption = find('option:selected');
+    let selectedOption = find('option:selected');
     assert.equal('value2', selectedOption.val(), 'expected option 2 to be selected');
   });
 });

tests/dummy/app/app.js

@@ -3,11 +3,13 @@ import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 
+const { Application } = Ember;
+
 let App;
 
 Ember.MODEL_FACTORY_INJECTIONS = true;
 
-App = Ember.Application.extend({
+App = Application.extend({
   modulePrefix: config.modulePrefix,
   podModulePrefix: config.podModulePrefix,
   Resolver

tests/dummy/app/controllers/index.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 
-let { Controller } = Ember;
+const { Controller } = Ember;
 
 export default Controller.extend({
   buttonClickedText: null

tests/dummy/app/router.js

@@ -1,7 +1,9 @@
 import Ember from 'ember';
 import config from './config/environment';
 
-let Router = Ember.Router.extend({
+const { Router: emberRouter } = Ember;
+
+let Router = emberRouter.extend({
   location: config.locationType
 });
 

tests/dummy/app/routes/index.js

@@ -1,7 +1,9 @@
 import Ember from 'ember';
 
-const { Route } = Ember;
-const set = Ember.set;
+const {
+  Route,
+  set
+} = Ember;
 
 export default Route.extend({
   actions: {

tests/dummy/app/templates/application.hbs

@@ -14,4 +14,4 @@
 {{partial "elements/select"}}
 {{partial "elements/table"}}
 {{partial "elements/ul"}}
-{{link-to 'First link' 'firstLink'}}
+{{link-to "First link" "firstLink"}}

tests/dummy/app/templates/elements/article.hbs

@@ -1,11 +1,3 @@
-<article class='post' id='post_3'>
-This is an article for John Doe.
-</article>
-
-<article class='post' id='post_1'>
-This is an article for Jane Doe.
-</article>
-
-<article class='post' id='post_2'>
-This is another article for Jane Doe.
-</article>
+<article class="post" id="post_3">This is an article for John Doe.</article>
+<article class="post" id="post_1">This is an article for Jane Doe.</article>
+<article class="post" id="post_2">This is another article for Jane Doe.</article>

tests/dummy/app/templates/elements/aside.hbs

@@ -1,12 +1,3 @@
-<!-- aside -->
-<aside class='post' id='post_1'>
-  John Doe
-</aside>
-
-<aside class='post' id='post_2'>
-  Jane Doe
-</aside>
-
-<aside class='post' id='post_3'>
-  Jane Doe
-</aside>
+<aside class="post" id="post_1">John Doe</aside>
+<aside class="post" id="post_2">Jane Doe</aside>
+<aside class="post" id="post_3">Jane Doe </aside>

tests/dummy/app/templates/elements/footer.hbs

@@ -1,12 +1,3 @@
-<!-- footer -->
-<footer class='post' id='post_1'>
-  John Doe
-</footer>
-
-<footer class='post' id='post_2'>
-  Jane Doe
-</footer>
-
-<footer class='post' id='post_3'>
-  Jane Doe
-</footer>
+<footer class="post" id="post_1">John Doe</footer>
+<footer class="post" id="post_2">Jane Doe</footer>
+<footer class="post" id="post_3">Jane Doe</footer>

tests/dummy/app/templates/elements/form.hbs

@@ -1,22 +1,21 @@
-<!-- form -->
-<form class='node-4 post' id='post_1'>
+<form class="node-4 post" id="post_1">
   John Doe
-  <label class='node-1' for='name'>Name</label>
-  <input class='node-2' id='name' value='John Doe'>
-  <label class='node-3' for='email'>Email</label>
-  <input class='node-5' id='email' value='[email protected]'>
+  <label class="node-1" for="name">Name</label>
+  <input class="node-2" id="name" value="John Doe">
+  <label class="node-3" for="email">Email</label>
+  <input class="node-5" id="email" value="[email protected]">
   <button {{action "buttonClicked" "First target button clicked"}}>First Target Button</button>
 </form>
 
-<form class='node-6 post' id='post_2'>
+<form class="node-6 post" id="post_2">
   Jane Doe
-  <input class='node-7' id='name' value='Jane Doe'>
-  <input class='node-8' id='email' value='[email protected]'>
+  <input class="node-7" id="name" value="Jane Doe">
+  <input class="node-8" id="email" value="[email protected]">
   <input type="button" {{action "buttonClicked" "Second target button clicked"}} value="Second Target Button">
 </form>
 
-<form class='node-9 post' id='post_3'>
+<form class="node-9 post" id="post_3">
   Jane Doe
-  <input class='node-10' id='name' value='Jane Doe'>
-  <input class='node-11' id='email' value='[email protected]'>
+  <input class="node-10" id="name" value="Jane Doe">
+  <input class="node-11" id="email" value="[email protected]">
 </form>

tests/dummy/app/templates/elements/header.hbs

@@ -1,12 +1,3 @@
-<!-- header -->
-<header class='post' id='post_1'>
-  John Doe
-</header>
-
-<header class='post' id='post_2'>
-  Jane Doe
-</header>
-
-<header class='post' id='post_3'>
-  Jane Doe
-</header>
+<header class="post" id="post_1">John Doe</header>
+<header class="post" id="post_2">Jane Doe</header>
+<header class="post" id="post_3">Jane Doe</header>

tests/dummy/app/templates/elements/img.hbs

@@ -1,2 +1 @@
-<!-- img -->
-<img src='http://example.com/johndoe' alt='John Doe'/>
+<img src="http://example.com/johndoe" alt="John Doe">

tests/dummy/app/templates/elements/input-radio.hbs

@@ -1,5 +1,3 @@
-<!-- input: radio -->
-<!-- radio inside of a radiogroup -->
 <fieldset>
   <input type="radio" id="radio_1" name="test" value="radio_1">
   <label for="radio_1">Label for first radio</label>

tests/dummy/app/templates/elements/nav.hbs

@@ -1,11 +1,3 @@
-<nav class='post' id='post_1'>
-  John Doe
-</nav>
-
-<nav class='post' id='post_2'>
-  Jane Doe
-</nav>
-
-<nav class='post' id='post_3'>
-  Jane Doe
-</nav>
+<nav class="post" id="post_1">John Doe</nav>
+<nav class="post" id="post_2">Jane Doe</nav>
+<nav class="post" id="post_3">Jane Doe</nav>

tests/dummy/app/templates/elements/ol.hbs

@@ -1,14 +1,3 @@
-<!-- ol -->
-<ol class='posts' id='post_3'>
-  John Doe
-</ol>
-
-<ol class='posts' id='post_2'>
-  Jane Doe
-</ol>
-
-<ol class='posts' id='post_1'>
-  Jane Doe
-</ol>
-
-
+<ol class="posts" id="post_3">John Doe</ol>
+<ol class="posts" id="post_2">Jane Doe</ol>
+<ol class="posts" id="post_1">Jane Doe</ol>

tests/dummy/app/templates/elements/p.hbs

@@ -1,12 +1,11 @@
-<!-- p -->
-<p class='post' id='post_3'>
+<p class="post" id="post_3">
   This is a paragraph with the unique string of John Doe.
 </p>
 
-<p class='post' id='post_2'>
+<p class="post" id="post_2">
   The first paragraph for Jane Doe.
 </p>
 
-<p class='post' id='post_1'>
+<p class="post" id="post_1">
   The second paragraph for Jane Doe.
 </p>

tests/dummy/app/templates/elements/section.hbs

@@ -1,12 +1,11 @@
-<!-- section -->
-<section class='post' id='post_3'>
+<section class="post" id="post_3">
   A section with John Doe.
 </section>
 
-<section class='post' id='post_1'>
+<section class="post" id="post_1">
   A section with Jane Doe.
 </section>
 
-<section class='post' id='post_2'>
+<section class="post" id="post_2">
   Another section with Jane Doe.
 </section>

tests/dummy/app/templates/elements/select.hbs

@@ -1,4 +1,3 @@
-<!-- selects -->
 <label for="select_1">Label for first select</label>
 <select id="select_1" name="select_1">
   <option value="value1" selected>Value 1</option>

tests/dummy/app/templates/elements/table.hbs

@@ -1,6 +1,5 @@
-<!-- table -->
 <head>
-  <meta name='title' content='CapybaraExtensions!' />
+  <meta name="title" content="CapybaraExtensions!">
 </head>
 <h1>Posts by John</h1>
 <table>

tests/dummy/app/templates/elements/ul.hbs

@@ -1,18 +1,9 @@
-<!-- ul -->
-<ul class='posts' id='post_3'>
-  John Doe
-</ul>
-
-<ul class='posts' id='post_2'>
-  Jane Doe
-</ul>
-
-<ul class='posts' id='post_1'>
-  Jane Doe
-</ul>
+<ul class="posts" id="post_3">John Doe</ul>
+<ul class="posts" id="post_2">Jane Doe</ul>
+<ul class="posts" id="post_1">Jane Doe</ul>
 
 <ul>
-  <li class='post' id='post_3'>foo</li>
-  <li class='post' id='post_2'>bar</li>
-  <li class='post' id='post_1'>bar</li>
+  <li class="post" id="post_3">foo</li>
+  <li class="post" id="post_2">bar</li>
+  <li class="post" id="post_1">bar</li>
 </ul>

tests/helpers/destroy-app.js

@@ -1,5 +1,7 @@
 import Ember from 'ember';
 
+const { run } = Ember;
+
 export default function destroyApp(application) {
-  Ember.run(application, 'destroy');
+  run(application, 'destroy');
 }

tests/helpers/module-for-acceptance.js

@@ -11,12 +11,12 @@ export default function(name, options = {}) {
       this.application = startApp();
 
       if (options.beforeEach) {
-        return options.beforeEach.apply(this, arguments);
+        return options.beforeEach(...arguments);
       }
     },
 
     afterEach() {
-      let afterEach = options.afterEach && options.afterEach.apply(this, arguments);
+      let afterEach = options.afterEach && options.afterEach(...arguments);
       return Promise.resolve(afterEach).then(() => destroyApp(this.application));
     }
   });

tests/helpers/start-app.js

@@ -2,13 +2,18 @@ import Ember from 'ember';
 import Application from '../../app';
 import config from '../../config/environment';
 
+const {
+  merge,
+  run
+} = Ember;
+
 export default function startApp(attrs) {
   let application;
 
-  let attributes = Ember.merge({}, config.APP);
-  attributes = Ember.merge(attributes, attrs); // use defaults, but you can override;
+  let attributes = merge({}, config.APP);
+  attributes = merge(attributes, attrs); // use defaults, but you can override;
 
-  Ember.run(() => {
+  run(() => {
     application = Application.create(attributes);
     application.setupForTesting();
     application.injectTestHelpers();