diff --git a/package.json b/package.json
index b78bb2a..71a2f03 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
"postbuild": "yarn lint:md:dist"
},
"volta": {
- "node": "12.18.3",
- "yarn": "1.22.4"
+ "node": "12.22.1",
+ "yarn": "1.22.10"
}
}
diff --git a/src/markdown/tutorial/part-1/03-automated-testing.md b/src/markdown/tutorial/part-1/03-automated-testing.md
index b7ff9cc..f6b75c7 100644
--- a/src/markdown/tutorial/part-1/03-automated-testing.md
+++ b/src/markdown/tutorial/part-1/03-automated-testing.md
@@ -45,26 +45,6 @@ In this case, we generated an *[acceptance test](../../../testing/test-types/#to
git add tests/acceptance/super-rentals-test.js
```
-
-
-```run:file:patch hidden=true cwd=super-rentals filename=tests/acceptance/super-rentals-test.js
-@@ -4,6 +4,6 @@
-
--module('Acceptance | super rentals', function(hooks) {
-+module('Acceptance | super rentals', function (hooks) {
- setupApplicationTest(hooks);
-
-- test('visiting /super-rentals', async function(assert) {
-+ test('visiting /super-rentals', async function (assert) {
- await visit('/super-rentals');
-```
-
-```run:command hidden=true cwd=super-rentals
-git add tests/acceptance/super-rentals-test.js
-```
-
-
-
Generators aren't required; we *could* have created the file ourselves which would have accomplished the exact same thing. But, generators certainly save us a lot of typing. Go ahead and take a peek at the acceptance test file and see for yourself.
> Zoey says...
diff --git a/src/markdown/tutorial/part-1/04-component-basics.md b/src/markdown/tutorial/part-1/04-component-basics.md
index e5c8efc..a8f793d 100644
--- a/src/markdown/tutorial/part-1/04-component-basics.md
+++ b/src/markdown/tutorial/part-1/04-component-basics.md
@@ -153,29 +153,6 @@ ember generate component-test jumbo
git add tests/integration/components/jumbo-test.js
```
-
-
-```run:file:patch hidden=true cwd=super-rentals filename=tests/integration/components/jumbo-test.js
-@@ -5,8 +5,8 @@
-
--module('Integration | Component | jumbo', function(hooks) {
-+module('Integration | Component | jumbo', function (hooks) {
- setupRenderingTest(hooks);
-
-- test('it renders', async function(assert) {
-+ test('it renders', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
-- // Handle any actions with this.set('myAction', function(val) { ... });
-+ // Handle any actions with this.set('myAction', function (val) { ... });
-
-```
-
-```run:command hidden=true cwd=super-rentals
-git add tests/integration/components/jumbo-test.js
-```
-
-
-
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.
Let's replace the boilerplate code that was generated for us with our own test:
@@ -185,11 +162,11 @@ Let's replace the boilerplate code that was generated for us with our own test:
- test('it renders', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
-- // Handle any actions with this.set('myAction', function (val) { ... });
+- // Handle any actions with this.set('myAction', function(val) { ... });
-
- await render(hbs``);
-
-- assert.equal(this.element.textContent.trim(), '');
+- assert.dom(this.element).hasText('');
-
- // Template block usage:
- await render(hbs`
@@ -198,7 +175,7 @@ Let's replace the boilerplate code that was generated for us with our own test:
-
- `);
-
-- assert.equal(this.element.textContent.trim(), 'template block text');
+- assert.dom(this.element).hasText('template block text');
+ test('it renders the content inside a jumbo header with a tomster', async function (assert) {
+ await render(hbs`Hello World`);
+
diff --git a/src/markdown/tutorial/part-1/05-more-about-components.md b/src/markdown/tutorial/part-1/05-more-about-components.md
index 86d592b..154c358 100644
--- a/src/markdown/tutorial/part-1/05-more-about-components.md
+++ b/src/markdown/tutorial/part-1/05-more-about-components.md
@@ -31,29 +31,6 @@ git add app/components/rental.hbs
git add tests/integration/components/rental-test.js
```
-
-
-```run:file:patch hidden=true cwd=super-rentals filename=tests/integration/components/rental-test.js
-@@ -5,8 +5,8 @@
-
--module('Integration | Component | rental', function(hooks) {
-+module('Integration | Component | rental', function (hooks) {
- setupRenderingTest(hooks);
-
-- test('it renders', async function(assert) {
-+ test('it renders', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
-- // Handle any actions with this.set('myAction', function(val) { ... });
-+ // Handle any actions with this.set('myAction', function (val) { ... });
-
-```
-
-```run:command hidden=true cwd=super-rentals
-git add tests/integration/components/rental-test.js
-```
-
-
-
We will start by editing the template. Let's *[hard-code](https://en.wikipedia.org/wiki/Hard_coding)* the details for one rental property for now, and replace it with the real data from the server later on.
```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental.hbs
@@ -86,11 +63,11 @@ Then, we will write a test to ensure all of the details are present. We will rep
- test('it renders', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
-- // Handle any actions with this.set('myAction', function (val) { ... });
+- // Handle any actions with this.set('myAction', function(val) { ... });
-
- await render(hbs``);
-
-- assert.equal(this.element.textContent.trim(), '');
+- assert.dom(this.element).hasText('');
-
- // Template block usage:
- await render(hbs`
@@ -99,7 +76,7 @@ Then, we will write a test to ensure all of the details are present. We will rep
-
- `);
-
-- assert.equal(this.element.textContent.trim(), 'template block text');
+- assert.dom(this.element).hasText('template block text');
+ test('it renders information about a rental property', async function (assert) {
+ await render(hbs``);
+
@@ -170,30 +147,6 @@ git add app/components/rental/image.hbs
git add tests/integration/components/rental/image-test.js
```
-
-
-```run:file:patch hidden=true cwd=super-rentals filename=tests/integration/components/rental/image-test.js
-@@ -5,8 +5,8 @@
-
--module('Integration | Component | rental/image', function(hooks) {
-+module('Integration | Component | rental/image', function (hooks) {
- setupRenderingTest(hooks);
-
-- test('it renders', async function(assert) {
-+ test('it renders', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
-- // Handle any actions with this.set('myAction', function(val) { ... });
-+ // Handle any actions with this.set('myAction', function (val) { ... });
-
-```
-
-```run:command hidden=true cwd=super-rentals
-git add tests/integration/components/rental/image-test.js
-```
-
-
-
-
Components like these are known as *[namespaced](https://en.wikipedia.org/wiki/Namespace)* components. Namespacing allows us to organize our components by folders according to their purpose. This is completely optional—namespaced components are not special in any way.
## Forwarding HTML Attributes with `...attributes`
@@ -239,11 +192,11 @@ Let's write a test for our new component!
- test('it renders', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
-- // Handle any actions with this.set('myAction', function (val) { ... });
+- // Handle any actions with this.set('myAction', function(val) { ... });
-
- await render(hbs``);
-
-- assert.equal(this.element.textContent.trim(), '');
+- assert.dom(this.element).hasText('');
-
- // Template block usage:
- await render(hbs`
@@ -252,7 +205,7 @@ Let's write a test for our new component!
-
- `);
-
-- assert.equal(this.element.textContent.trim(), 'template block text');
+- assert.dom(this.element).hasText('template block text');
+ test('it renders the given image', async function (assert) {
+ await render(hbs`
+
-
-```run:file:patch hidden=true cwd=super-rentals filename=tests/integration/components/map-test.js
-@@ -5,8 +5,8 @@
-
--module('Integration | Component | map', function(hooks) {
-+module('Integration | Component | map', function (hooks) {
- setupRenderingTest(hooks);
-
-- test('it renders', async function(assert) {
-+ test('it renders', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
-- // Handle any actions with this.set('myAction', function(val) { ... });
-+ // Handle any actions with this.set('myAction', function (val) { ... });
-
-```
-
-```run:command hidden=true cwd=super-rentals
-git add tests/integration/components/map-test.js
-```
-
-
-
## Parameterizing Components with Arguments
Let's start with our JavaScript file:
```run:file:patch lang=js cwd=super-rentals filename=app/components/map.js
-@@ -1,4 +1,8 @@
+@@ -1,3 +1,8 @@
import Component from '@glimmer/component';
+import ENV from 'super-rentals/config/environment';
- export default class MapComponent extends Component {
+-export default class MapComponent extends Component {}
++export default class MapComponent extends Component {
+ get token() {
+ return encodeURIComponent(ENV.MAPBOX_ACCESS_TOKEN);
+ }
- }
++}
```
Here, we import the access token from the config file and return it from a `token` *[getter](https://javascript.info/property-accessors)*. This allows us to access our token as `this.token` both inside the `MapComponent` class body, as well as the component's template. It is also important to [URL-encode](https://javascript.info/url#encoding-strings) the token, just in case it contains any special characters that are not URL-safe.
@@ -193,7 +171,7 @@ We just added a lot of behavior into a single component, so let's write some tes
- test('it renders', async function (assert) {
- // Set any properties with this.set('myProperty', 'value');
-- // Handle any actions with this.set('myAction', function (val) { ... });
+- // Handle any actions with this.set('myAction', function(val) { ... });
+ test('it renders a map image for the specified parameters', async function (assert) {
+ await render(hbs`