You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/markdown/tutorial/part-1/01-orientation.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
<!--lint disable no-undefined-references-->
2
2
3
-
In this chapter, you will install [Ember CLI](https://cli.emberjs.com/release/), use it to generate a new Ember project, and add some basic templates and styles to your new app. By the end of this chapter, you should have a landing page with Professor Tomster's cute little face featured on it:
3
+
In this chapter, you will install *[Ember CLI](https://cli.emberjs.com/release/)*, use it to generate a new Ember project, and add some basic templates and styles to your new app. By the end of this chapter, you should have a landing page with Professor Tomster's cute little face featured on it:
4
4
5
5

> The `localhost` address in the URL means that you can only access the development server from your local machine. If you would like to share your work with the world, you will have to [deploy](https://cli.emberjs.com/release/basic-use/deploying/) your app to the public Internet. We'll cover how to do that in Part 2 of the tutorial.
257
+
> The `localhost` address in the URL means that you can only access the development server from your local machine. If you would like to share your work with the world, you will have to *[deploy](https://cli.emberjs.com/release/basic-use/deploying/)* your app to the public Internet. We'll cover how to do that in Part 2 of the tutorial.
258
258
259
259
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.
We just put so much effort into making these pages, we need to make sure people can find them! The way we do that on the web is by using [hyperlinks](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), or *links* for short.
127
+
We just put so much effort into making these pages, we need to make sure people can find them! The way we do that on the web is by using *[hyperlinks](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)*, or *links* for short.
128
128
129
129
Since Ember offers great support for URLs out-of-the-box, we *could* just link our pages together using the `<a>` tag with the appropriate `href`. However, clicking on those links would require the browser to make a *[full-page refresh][TODO: link to full page refresh]*, which means that it would have to make a trip back to the server to fetch the page, and then load everything from scratch again.
130
130
@@ -153,15 +153,15 @@ With Ember, we can do better than that! Instead of the plain-old `<a>` tag, Embe
153
153
154
154
There is quite a bit going on here, so let's break it down.
155
155
156
-
`<LinkTo>` is an example of a [component](../../../components/introducing-components/) in Ember—you can tell them apart from regular HTML tags because they start with an uppercase letter. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface.
156
+
`<LinkTo>` is an example of a *[component](../../../components/introducing-components/)* in Ember—you can tell them apart from regular HTML tags because they start with an uppercase letter. Along with regular HTML tags, components are a key building block that we can use to build up an app's user interface.
157
157
158
158
We have a lot more to say about components later, but for now, you can think of them as a way to provide *[custom tags][TODO: link to custom tags]* to supplement the built-in ones that came with the browser.
159
159
160
-
The `@route=...` part is how we pass [arguments](../../../components/component-arguments-and-html-attributes/) into the component. Here, we use this argument to specify *which* route we want to link to. (Note that this should be the *name* of the route, not the path, which is why we specified `"about"` instead of `"/about"`, and `"contact"` instead of `"/getting-in-touch"`.)
160
+
The `@route=...` part is how we pass *[arguments](../../../components/component-arguments-and-html-attributes/)* into the component. Here, we use this argument to specify *which* route we want to link to. (Note that this should be the *name* of the route, not the path, which is why we specified `"about"` instead of `"/about"`, and `"contact"` instead of `"/getting-in-touch"`.)
161
161
162
162
In addition to arguments, components can also take the usual HTML attributes as well. In our example, we added a `"button"` class for styling purposes, but we could also specify other attributes as we see fit, such as the [ARIA](https://webaim.org/techniques/aria/)[`role` attribute](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Roles). These are passed without the `@` symbol (`class=...` as opposed to `@class=...`), so that Ember will know they are just regular HTML attributes.
163
163
164
-
Under the hood, the `<LinkTo>` component generates a regular `<a>` tag for us with the appropriate `href` for the specific route. This `<a>` tag works just fine with [screen readers](https://webaim.org/projects/screenreadersurvey/), as well as allowing our users to bookmark the link or open it in a new tab.
164
+
Under the hood, the `<LinkTo>` component generates a regular `<a>` tag for us with the appropriate `href` for the specific route. This `<a>` tag works just fine with *[screen readers](https://webaim.org/projects/screenreadersurvey/)*, as well as allowing our users to bookmark the link or open it in a new tab.
165
165
166
166
However, when clicking on one of these special links, Ember will intercept the click, render the content for the new page, and update the URL—all performed locally without having to wait for the server, thus avoiding a full page refresh.
Copy file name to clipboardExpand all lines: src/markdown/tutorial/part-1/03-automated-testing.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -27,7 +27,7 @@ After all, most of us have experienced (or heard horror stories about) making a
27
27
28
28
Maybe we can write a checklist somewhere of all the things to check after making changes to our site. But surely, this will get out of hand as we add more features to our app. It is also going to get old really quickly—repetitive tasks like that are best left to robots.
29
29
30
-
Hmm, robots. That's an idea. What if we can write this checklist and just get the computer to check everything for us? I think we just invented the idea of [automated testing](../../../testing/)! Okay, maybe we were not the first to come up with the concept, but we independently discovered it so we still deserve some credit.
30
+
Hmm, robots. That's an idea. What if we can write this checklist and just get the computer to check everything for us? I think we just invented the idea of *[automated testing](../../../testing/)*! Okay, maybe we were not the first to come up with the concept, but we independently discovered it so we still deserve some credit.
31
31
32
32
## Adding Acceptance Tests with Generators
33
33
@@ -37,9 +37,9 @@ Once we are done patting ourselves on the back, go ahead and run the following c
37
37
ember generate acceptance-test super-rentals
38
38
```
39
39
40
-
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.
40
+
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.
41
41
42
-
In this case, we generated an [acceptance test](../../../testing/test-types/#toc_application-tests) located at `tests/acceptance/super-rentals-test.js`.
42
+
In this case, we generated an *[acceptance test](../../../testing/test-types/#toc_application-tests)* located at `tests/acceptance/super-rentals-test.js`.
43
43
44
44
```run:command hidden=true cwd=super-rentals
45
45
git add tests/acceptance/super-rentals-test.js
@@ -84,15 +84,15 @@ Let's open the generated test file and replace the boilerplate test with our own
84
84
85
85
First, we instruct the test robot to navigate to the `/` URL of our app by using the `visit` *test helper* provided by Ember. This is akin to us typing `http://localhost:4200/` in the browser's address bar and hitting the `enter` key.
86
86
87
-
Because the page is going to take some time to load, this is known as an [async](https://developer.mozilla.org/docs/Learn/JavaScript/Asynchronous/Concepts) (short for *asynchronous*) step, so we will need to tell the test robot to wait by using JavaScript's `await` keyword. That way, it will wait until the page completely finishes loading before moving on to the next step.
87
+
Because the page is going to take some time to load, this is known as an *[async](https://developer.mozilla.org/docs/Learn/JavaScript/Asynchronous/Concepts)* (short for *asynchronous*) step, so we will need to tell the test robot to wait by using JavaScript's `await` keyword. That way, it will wait until the page completely finishes loading before moving on to the next step.
88
88
89
89
This is almost always the behavior we want, so we will almost always use `await` and `visit` as a pair. This applies to other kinds of simulated interaction too, such as clicking on a button or a link, as they all take time to complete. Even though sometimes these actions may seem imperceptibly fast to us, we have to remember that our test robot has really, really fast hands, as we will see in a moment.
90
90
91
-
After navigating to the `/`URL and waiting for things to settle, we check that the current URL matches the URL that we expect (`/`). We can use the `currentURL` test helper here, as well as `equal` [assertion](https://github.com/emberjs/ember-test-helpers/blob/master/API.md). This is how we encode our "checklist" into code—by specifying, or asserting how things *should* behave, we will be alerted if our app does *not* behave in the way that we expect.
91
+
After navigating to the `/`URL and waiting for things to settle, we check that the current URL matches the URL that we expect (`/`). We can use the `currentURL` test helper here, as well as `equal`*[assertion](https://github.com/emberjs/ember-test-helpers/blob/master/API.md)*. This is how we encode our "checklist" into code—by specifying, or asserting how things *should* behave, we will be alerted if our app does *not* behave in the way that we expect.
92
92
93
93
Next, we confirmed that the page has an `<h2>` tag that contains the text "Welcome to Super Rentals!". Knowingthis is true means that we can be quite certain that the correct template has been rendered, without errors.
94
94
95
-
Then, we looked for a link with the text `About Us`, located using the [CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors) `.jumbo a.button`. This is the same syntax we used in our stylesheet, which means "look inside the tag with the `jumbo` class for an `<a>` tag with the `button` class." This matches up with the HTML structure in our template.
95
+
Then, we looked for a link with the text `About Us`, located using the *[CSS selector](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors)* `.jumbo a.button`. This is the same syntax we used in our stylesheet, which means "look inside the tag with the `jumbo` class for an `<a>` tag with the `button` class." This matches up with the HTML structure in our template.
96
96
97
97
Once the existence ofthis element on the page was confirmed, we told the test robot to click on thislink. As mentioned above, this is a user interaction, so it needs to be `await`-ed.
0 commit comments