Merge pull request #2037 from ember-learn/super-rentals-tutorial

Tutorial Updates

guides/release/tutorial/part-1/component-basics.md

@@ -58,7 +58,7 @@ When invoking a component, Ember will replace the component tag with the content
 
 Let's try it out by editing the index template:
 
-```js { data-filename="app/templates/index.hbs" data-diff="-1,-2,+3,-7,+8" }
+```handlebars { data-filename="app/templates/index.hbs" data-diff="-1,-2,+3,-7,+8" }
 <div class="jumbo">
   <div class="right tomster"></div>
 <Jumbo>
@@ -79,7 +79,7 @@ After saving the changes, your page should automatically reload, and, _voilà_..
 
 Let's do the same for our other two pages as well.
 
-```js { data-filename="app/templates/about.hbs" data-diff="-1,-2,+3,-11,+12" }
+```handlebars { data-filename="app/templates/about.hbs" data-diff="-1,-2,+3,-11,+12" }
 <div class="jumbo">
   <div class="right tomster"></div>
 <Jumbo>
@@ -94,7 +94,7 @@ Let's do the same for our other two pages as well.
 </Jumbo>
 ```
 
-```js { data-filename="app/templates/contact.hbs" data-diff="-1,-2,+3,-19,+20" }
+```handlebars { data-filename="app/templates/contact.hbs" data-diff="-1,-2,+3,-19,+20" }
 <div class="jumbo">
   <div class="right tomster"></div>
 <Jumbo>
@@ -205,7 +205,7 @@ We can create a `<NavBar>` component at `app/components/nav-bar.hbs`:
 
 Next, we will add our `<NavBar>` component to the top of each page:
 
-```js { data-filename="app/templates/about.hbs" data-diff="+1" }
+```habdlebars { data-filename="app/templates/about.hbs" data-diff="+1" }
 <NavBar />
 <Jumbo>
   <h2>About Super Rentals</h2>
@@ -218,7 +218,7 @@ Next, we will add our `<NavBar>` component to the top of each page:
 </Jumbo>
 ```
 
-```js { data-filename="app/templates/contact.hbs" data-diff="+1" }
+```habdlebars { data-filename="app/templates/contact.hbs" data-diff="+1" }
 <NavBar />
 <Jumbo>
   <h2>Contact Us</h2>
@@ -239,7 +239,7 @@ Next, we will add our `<NavBar>` component to the top of each page:
 </Jumbo>
 ```
 
-```js { data-filename="app/templates/index.hbs" data-diff="+1" }
+```handlebars { data-filename="app/templates/index.hbs" data-diff="+1" }
 <NavBar />
 <Jumbo>
   <h2>Welcome to Super Rentals!</h2>
@@ -363,7 +363,7 @@ While we are at it, we will also add a container element that wraps around the w
 </div>
 ```
 
-```js { data-filename="app/templates/index.hbs" data-diff="-1" }
+```handlebars { data-filename="app/templates/index.hbs" data-diff="-1" }
 <NavBar />
 <Jumbo>
   <h2>Welcome to Super Rentals!</h2>
@@ -372,7 +372,7 @@ While we are at it, we will also add a container element that wraps around the w
 </Jumbo>
 ```
 
-```js { data-filename="app/templates/contact.hbs" data-diff="-1" }
+```handlebars { data-filename="app/templates/contact.hbs" data-diff="-1" }
 <NavBar />
 <Jumbo>
   <h2>Contact Us</h2>
@@ -393,7 +393,7 @@ While we are at it, we will also add a container element that wraps around the w
 </Jumbo>
 ```
 
-```js { data-filename="app/templates/about.hbs" data-diff="-1" }
+```handlebars { data-filename="app/templates/about.hbs" data-diff="-1" }
 <NavBar />
 <Jumbo>
   <h2>About Super Rentals</h2>

guides/release/tutorial/part-1/more-about-components.md

@@ -96,7 +96,7 @@ The test should pass.
 
 Finally, let's invoke this a couple of times from our index template to populate the page.
 
-```js { data-filename="app/templates/index.hbs" data-diff="+6,+7,+8,+9,+10,+11,+12,+13" }
+```handlebars { data-filename="app/templates/index.hbs" data-diff="+6,+7,+8,+9,+10,+11,+12,+13" }
 <Jumbo>
   <h2>Welcome to Super Rentals!</h2>
   <p>We hope you find exactly what you're looking for in a place to stay.</p>

guides/release/tutorial/part-2/ember-data.md

@@ -165,20 +165,19 @@ Running "lint:fix" script...
 
 The generator created some boilerplate code for us, which serves as a pretty good starting point for writing our test:
 
-```js { data-filename="tests/unit/models/rental-test.js" data-diff="-8,-9,+10,-12,-13,+14,+15,+16,+17,+18,+19,+20,+21,+22,+23,+24,+25,+26,+27,+28,+29,+30,+31,+32,+33,+34,+35,+36,+37,+38,+39,+40,+41,+42,+43" }
-import { module, test } from 'qunit';
-
+```js { data-filename="tests/unit/models/rental-test.js" data-diff="-7,-8,+9,-11,-12,+13,+14,+15,+16,+17,+18,+19,+20,+21,+22,+23,+24,+25,+26,+27,+28,+29,+30,+31,+32,+33,+34,+35,+36,+37,+38,+39,+40,+41,+42" }
 import { setupTest } from 'super-rentals/tests/helpers';
+import { module, test } from 'qunit';
 
 module('Unit | Model | rental', function (hooks) {
   setupTest(hooks);
 
   // Replace this with your real tests.
   test('it exists', function (assert) {
   test('it has the right type', function (assert) {
-    let store = this.owner.lookup('service:store');
-    let model = store.createRecord('rental', {});
-    assert.ok(model);
+    const store = this.owner.lookup('service:store');
+    const model = store.createRecord('rental', {});
+    assert.ok(model, 'model exists');
     let rental = store.createRecord('rental', {
       id: 'grand-old-mansion',
       title: 'Grand Old Mansion',

guides/release/tutorial/part-2/route-params.md

@@ -40,7 +40,7 @@ Notice that we are doing something a little different here. Instead of using the
 
 Now that we have this route in place, we can update our `<Rental>` component to actually _link_ to each of our detailed rental properties!
 
-```js { data-filename="app/components/rental.hbs" data-diff="-7,+8,+9,+10,+11,+12" }
+```handlebars { data-filename="app/components/rental.hbs" data-diff="-7,+8,+9,+10,+11,+12" }
 <article class="rental">
   <Rental::Image
     src={{@rental.image}}