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

Tutorial Updates

Author: mansona

guides/release/tutorial/part-1/automated-testing.md

@@ -33,6 +33,8 @@ Once we are done patting ourselves on the back, go ahead and run the following c
 $ ember generate acceptance-test super-rentals
 installing acceptance-test
   create tests/acceptance/super-rentals-test.js
+
+Running "lint:fix" script...
 ```
 
 This is called a _[generator](https://cli.emberjs.com/release/basic-use/cli-commands/#generatemorefiles)_ command in Ember CLI. Generators automatically create files for us based on Ember's conventions and populate them with the appropriate boilerplate content, similar to how `ember new` initially created a skeleton app for us. It typically follows the pattern `ember generate <type> <name>`, where `<type>` is the kind of thing we are generating, and `<name>` is what we want to call it.

guides/release/tutorial/part-1/building-pages.md

@@ -2,11 +2,11 @@
 
 In this chapter, you will build the first few pages of your Ember app and set up links between them. By the end of this chapter, you should have two new pages – an about page and a contact page. These pages will be linked to from your landing page:
 
-<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="The Super Rentals app (homepage) by the end of the chapter" width="1024" height="250">
+<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="The Super Rentals app (homepage) by the end of the chapter" width="1024" height="251">
 
-<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="The Super Rentals app (about page) by the end of the chapter" width="1024" height="274">
+<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="The Super Rentals app (about page) by the end of the chapter" width="1024" height="275">
 
-<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="The Super Rentals app (contact page) by the end of the chapter" width="1024" height="444">
+<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="The Super Rentals app (contact page) by the end of the chapter" width="1024" height="445">
 
 While building these pages, you will learn about:
 
@@ -112,7 +112,7 @@ Ember comes with strong _conventions_ and sensible defaults—if we were startin
 
 Once you have added the route and the template above, we should have the new page available to us at `http://localhost:4200/getting-in-touch`.
 
-<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="Contact page" width="1024" height="394">
+<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="Contact page" width="1024" height="395">
 
 ## Linking Pages with the `<LinkTo>` Component
 
@@ -181,11 +181,11 @@ However, when clicking on one of these special links, Ember will intercept the c
 
 <!-- TODO: make this a gif instead -->
 
-<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="Index page after adding the link" width="1024" height="250">
+<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="Index page after adding the link" width="1024" height="251">
 
-<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="About page after adding the link" width="1024" height="274">
+<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="About page after adding the link" width="1024" height="275">
 
-<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="Contact page after adding the link" width="1024" height="444">
+<img src="/images/tutorial/part-1/building-pages/[email protected]" alt="Contact page after adding the link" width="1024" height="445">
 
 We will learn more about how all of this works soon. In the meantime, go ahead and click on the link in the browser. Did you notice how snappy that was?
 

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

@@ -2,7 +2,7 @@
 
 In this chapter, you will _[refactor](../../../components/introducing-components/#toc_breaking-it-into-pieces)_ your existing templates to use components. We will also be adding a site-wide navigation bar:
 
-<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="The Super Rentals app by the end of the chapter" width="1024" height="314">
+<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="The Super Rentals app by the end of the chapter" width="1024" height="315">
 
 In doing so, you will learn about:
 
@@ -73,7 +73,7 @@ Let's try it out by editing the index template:
 
 After saving the changes, your page should automatically reload, and, _voilà_... nothing changed? Well, that's exactly what we wanted to happen this time! We successfully _[refactored](../../../components/introducing-components/#toc_breaking-components-down-further)_ our index template to use the `<Jumbo>` component, and everything still works as expected. And the tests still pass!
 
-<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Index page – nothing changed" width="1024" height="250">
+<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Index page – nothing changed" width="1024" height="251">
 
 <img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Tests still passing after the refactor" width="1024" height="512">
 
@@ -119,9 +119,9 @@ Let's do the same for our other two pages as well.
 
 After saving, everything should look exactly the same as before, and all the tests should still pass. Very nice!
 
-<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="About page – nothing changed" width="1024" height="274">
+<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="About page – nothing changed" width="1024" height="275">
 
-<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Contact page – nothing changed" width="1024" height="444">
+<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Contact page – nothing changed" width="1024" height="445">
 
 <img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Tests still passing another round of refactor" width="1024" height="512">
 
@@ -135,6 +135,8 @@ Before we move on to the next component, let's write an automated test for our `
 $ ember generate component-test jumbo
 installing component-test
   create tests/integration/components/jumbo-test.js
+
+Running "lint:fix" script...
 ```
 
 Here, we used the generator to generate a _[component test](../../../testing/testing-components/)_, also known as a rendering test. These are used to render and test a single component at a time. This is in contrast to the acceptance tests that we wrote earlier, which have to navigate and render entire pages worth of content.
@@ -158,7 +160,7 @@ module('Integration | Component | jumbo', function (hooks) {
 
     await render(hbs`<Jumbo />`);
 
-    assert.dom(this.element).hasText('');
+    assert.dom().hasText('');
 
     // Template block usage:
     await render(hbs`
@@ -167,7 +169,7 @@ module('Integration | Component | jumbo', function (hooks) {
       </Jumbo>
     `);
 
-    assert.dom(this.element).hasText('template block text');
+    assert.dom().hasText('template block text');
     assert.dom('.jumbo').exists();
     assert.dom('.jumbo').hasText('Hello World');
     assert.dom('.jumbo .tomster').exists();
@@ -248,7 +250,7 @@ Next, we will add our `<NavBar>` component to the top of each page:
 
 Voilà, we made another component!
 
-<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Index page with nav" width="1024" height="314">
+<img src="/images/tutorial/part-1/component-basics/[email protected]" alt="Index page with nav" width="1024" height="315">
 
 <div class="cta">
   <div class="cta-note">

guides/release/tutorial/part-1/index.md

@@ -4,7 +4,7 @@ Welcome to the Ember Tutorial!
 
 In this tutorial, we will use Ember to build an application called Super Rentals. This will be a website for browsing interesting places to stay during your next vacation. Check out the [finished app](https://ember-super-rentals.netlify.com) to get a sense of the scope of the project.
 
-<img src="/images/tutorial/part-2/provider-components/[email protected]" alt="The finished Super Rentals app" width="1024" height="1327">
+<img src="/images/tutorial/part-2/provider-components/[email protected]" alt="The finished Super Rentals app" width="1024" height="1328">
 
 Along the way, you will learn everything you need to know to build a basic Ember application. If you get stuck at any point during the tutorial, feel free to download <https://github.com/ember-learn/super-rentals/tree/super-rentals-tutorial-output> for a complete working example.
 

guides/release/tutorial/part-1/interactive-components.md

@@ -4,7 +4,7 @@ In this chapter, you will add interactivity to the page, allowing the user to cl
 
 <!-- TODO: make this a gif instead -->
 
-<img src="/images/tutorial/part-1/interactive-components/[email protected]" alt="The Super Rentals app by the end of the chapter (default image size)" width="1024" height="1129">
+<img src="/images/tutorial/part-1/interactive-components/[email protected]" alt="The Super Rentals app by the end of the chapter (default image size)" width="1024" height="1130">
 
 <img src="/images/tutorial/part-1/interactive-components/[email protected]" alt="The Super Rentals app by the end of the chapter (large image size)" width="1024" height="1500">
 
@@ -34,6 +34,8 @@ Ember optionally allows us to associate JavaScript code with a component for exa
 $ ember generate component-class rental/image
 installing component-class
   create app/components/rental/image.js
+
+Running "lint:fix" script...
 ```
 
 This generated a JavaScript file with the same name as our component's template at `app/components/rental/image.js`. It contains a _[JavaScript class](https://javascript.info/class)_, _[inheriting](https://javascript.info/class-inheritance)_ from `@glimmer/component`.
@@ -199,7 +201,7 @@ With that, we have created our first _interactive_ component. Go ahead and try i
 
 <!-- TODO: make this a gif instead -->
 
-<img src="/images/tutorial/part-1/interactive-components/[email protected]" alt="&lt;Rental::Image&gt; (default size)" width="1024" height="1129">
+<img src="/images/tutorial/part-1/interactive-components/[email protected]" alt="&lt;Rental::Image&gt; (default size)" width="1024" height="1130">
 
 <img src="/images/tutorial/part-1/interactive-components/[email protected]" alt="&lt;Rental::Image&gt; (large size)" width="1024" height="1500">
 

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

@@ -2,7 +2,7 @@
 
 It's time to finally work on the rentals listing:
 
-<img src="/images/tutorial/part-1/more-about-components/[email protected]" alt="The Super Rentals app by the end of the chapter" width="1024" height="1129">
+<img src="/images/tutorial/part-1/more-about-components/[email protected]" alt="The Super Rentals app by the end of the chapter" width="1024" height="1130">
 
 While building this list of rental properties, you will learn about:
 
@@ -19,10 +19,12 @@ Let's start by creating the `<Rental>` component. This time, we will use the com
 $ ember generate component rental
 installing component
   create app/components/rental.hbs
-  skip app/components/rental.js
+  skip app/components/rental.ts
   tip to add a class, run `ember generate component-class rental`
 installing component-test
   create tests/integration/components/rental-test.js
+
+Running "lint:fix" script...
 ```
 
 The generator created two new files for us, a component template at `app/components/rental.hbs`, and a component test file at `tests/integration/components/rental-test.js`.
@@ -68,7 +70,7 @@ module('Integration | Component | rental', function (hooks) {
   test('it renders information about a rental property', async function (assert) {
     await render(hbs`<Rental />`);
 
-    assert.dom(this.element).hasText('');
+    assert.dom().hasText('');
 
     // Template block usage:
     await render(hbs`
@@ -77,7 +79,7 @@ module('Integration | Component | rental', function (hooks) {
       </Rental>
     `);
 
-    assert.dom(this.element).hasText('template block text');
+    assert.dom().hasText('template block text');
     assert.dom('article').hasClass('rental');
     assert.dom('article h3').hasText('Grand Old Mansion');
     assert.dom('article .detail.owner').includesText('Veruca Salt');
@@ -112,7 +114,7 @@ Finally, let's invoke this a couple of times from our index template to populate
 
 With that, we should see the `<Rental>` component showing our Grand Old Mansion three times on the page:
 
-<img src="/images/tutorial/part-1/more-about-components/[email protected]" alt="Three Grand Old Mansions" width="1024" height="1129">
+<img src="/images/tutorial/part-1/more-about-components/[email protected]" alt="Three Grand Old Mansions" width="1024" height="1130">
 
 Things are looking pretty convincing already; not bad for just a little bit of work!
 
@@ -124,10 +126,12 @@ Next, let's add the image for the rental property. We will use the component gen
 $ ember generate component rental/image
 installing component
   create app/components/rental/image.hbs
-  skip app/components/rental/image.js
+  skip app/components/rental/image.ts
   tip to add a class, run `ember generate component-class rental/image`
 installing component-test
   create tests/integration/components/rental/image-test.js
+
+Running "lint:fix" script...
 ```
 
 This time, we had a `/` in the component's name. This resulted in the component being created at `app/components/rental/image.hbs`, which can be invoked as `<Rental::Image>`.
@@ -173,7 +177,7 @@ Instead of hard-coding specific values for the `src` and `alt` attributes on the
 
 We specified a `src` and an `alt` HTML attribute here, which will be passed along to the component and attached to the element where `...attributes` is applied in the component template. You can think of this as being similar to `{{yield}}`, but for HTML attributes specifically, rather than displayed content. In fact, we have already used this feature [earlier](../building-pages/) when we passed a `class` attribute to `<LinkTo>`.
 
-<img src="/images/tutorial/part-1/more-about-components/[email protected]" alt="The &lt;Rental::Image&gt; component in action" width="1024" height="1129">
+<img src="/images/tutorial/part-1/more-about-components/[email protected]" alt="The &lt;Rental::Image&gt; component in action" width="1024" height="1130">
 
 This way, our `<Rental::Image>` component is not coupled to any specific rental property on the site. Of course, the hard-coding problem still exists (we simply moved it to the `<Rental>` component), but we will deal with that soon. We will limit all the hard-coding to the `<Rental>` component, so that we will have an easier time cleaning it up when we switch to fetching real data.
 
@@ -196,7 +200,7 @@ module('Integration | Component | rental/image', function (hooks) {
 
     await render(hbs`<Rental::Image />`);
 
-    assert.dom(this.element).hasText('');
+    assert.dom().hasText('');
 
     // Template block usage:
   test('it renders the given image', async function (assert) {
@@ -210,7 +214,7 @@ module('Integration | Component | rental/image', function (hooks) {
       />
     `);
 
-    assert.dom(this.element).hasText('template block text');
+    assert.dom().hasText('template block text');
     assert
       .dom('.image img')
       .exists()

guides/release/tutorial/part-1/orientation.md

@@ -24,8 +24,8 @@ To verify that your installation was successful, run:
 
 ```shell
 $ ember --version
-ember-cli: 4.5.0
-node: 14.19.1
+ember-cli: 5.6.0
+node: 18.19.1
 os: linux x64
 ```
 
@@ -38,7 +38,7 @@ We can create a new project using Ember CLI's `new` command. It follows the patt
 ```shell
 $ ember new super-rentals --lang en
 installing app
-Ember CLI v4.5.0
+Ember CLI v5.6.0
 
 Creating a new Ember app in /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals:
   create .editorconfig
@@ -48,6 +48,8 @@ Creating a new Ember app in /home/runner/work/super-rentals-tutorial/super-renta
   create .github/workflows/ci.yml
   create .prettierignore
   create .prettierrc.js
+  create .stylelintignore
+  create .stylelintrc.js
   create .template-lintrc.js
   create .watchmanconfig
   create README.md
@@ -75,7 +77,6 @@ Creating a new Ember app in /home/runner/work/super-rentals-tutorial/super-renta
   create tests/integration/.gitkeep
   create tests/test-helper.js
   create tests/unit/.gitkeep
-  create vendor/.gitkeep
 
 Installing packages... This might take a couple of minutes.
 npm: Installing dependencies ...
@@ -140,8 +141,6 @@ super-rentals
 │   │   └── .gitkeep
 │   ├── index.html
 │   └── test-helper.js
-├── vendor
-│   └── .gitkeep
 ├── .editorconfig
 ├── .ember-cli
 ├── .eslintcache
@@ -150,6 +149,8 @@ super-rentals
 ├── .gitignore
 ├── .prettierignore
 ├── .prettierrc.js
+├── .stylelintignore
+├── .stylelintrc.js
 ├── .template-lintrc.js
 ├── .watchmanconfig
 ├── README.md
@@ -158,25 +159,29 @@ super-rentals
 ├── package-lock.json
 └── testem.js
 
-17 directories, 36 files
+16 directories, 37 files
 ```
 
 We'll learn about the purposes of these files and folders as we go. For now, just know that we'll spend most of our time working within the `app` folder.
 
 ## Starting and Stopping the Development Server
 
-Ember CLI comes with a lot of different commands for a variety of development tasks, such as the `ember new` command that we saw earlier. It also comes with a _development server_, which we can launch with the `ember server` command:
+Ember CLI comes with a lot of different commands for a variety of development tasks, such as the `ember new` command that we saw earlier. It also comes with a _development server_, which we can launch within the project with the `npm start` command:
 
 ```shell
-$ ember server
+$ npm start
+
+> [email protected] start
+> ember serve
+
 building... 
 
 Build successful (9761ms) – Serving on http://localhost:4200/
 ```
 
 The development server is responsible for compiling our app and serving it to the browsers. It may take a while to boot up. Once it's up and running, open your favorite browser and head to <http://localhost:4200>. You should see the following welcome page:
 
-<img src="/images/tutorial/part-1/orientation/[email protected]" alt="Welcome to Ember!" width="1024" height="906">
+<img src="/images/tutorial/part-1/orientation/[email protected]" alt="Welcome to Ember!" width="1024" height="919">
 
 <div class="cta">
   <div class="cta-note">
@@ -190,7 +195,7 @@ The development server is responsible for compiling our app and serving it to th
   </div>
 </div>
 
-You can exit out of the development server at any time by typing `Ctrl + C` into the terminal window where `ember server` is running. That is, typing the "C" key on your keyboard _while_ holding down the "Ctrl" key at the same time. Once it has stopped, you can start it back up again with the same `ember server` command. We recommend having two terminal windows open: one to run the server in background, another to type other Ember CLI commands.
+You can exit out of the development server at any time by typing `Ctrl + C` into the terminal window where `npm start` is running. That is, typing the "C" key on your keyboard _while_ holding down the "Ctrl" key at the same time. Once it has stopped, you can start it back up again with the same `npm start` command. We recommend having two terminal windows open: one to run the server in background, another to type other Ember CLI commands.
 
 ## Editing Files and Live Reload
 
@@ -201,9 +206,9 @@ As text on the welcome page pointed out, the source code for the page is located
 ```handlebars { data-filename="app/templates/application.hbs" data-diff="-1,-2,-3,-4,-5,-6,-7,+8" }
 {{page-title "SuperRentals"}}
 
-{{!-- The following component displays Ember's default welcome message. --}}
+{{! The following component displays Ember's default welcome message. }}
 <WelcomePage />
-{{!-- Feel free to remove this! --}}
+{{! Feel free to remove this! }}
 
 {{outlet}}
 Hello World!!!