Merge pull request #190 from ember-learn/prep-for-beta

3.27

Author: chancancode

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"
   }
 }

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
 ```
 
-<!-- patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
-```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
-```
-
-<!-- end patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
 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...

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
 ```
 
-<!-- patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
-```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
-```
-
-<!-- end patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
 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`<Jumbo />`);
 -
--    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:
 -      </Jumbo>
 -    `);
 -
--    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`<Jumbo>Hello World</Jumbo>`);
 +

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
 ```
 
-<!-- patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
-```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
-```
-
-<!-- end patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
 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`<Rental />`);
 -
--    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
 -      </Rental>
 -    `);
 -
--    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`<Rental />`);
 +
@@ -170,30 +147,6 @@ git add app/components/rental/image.hbs
 git add tests/integration/components/rental/image-test.js
 ```
 
-<!-- patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
-```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
-```
-
-<!-- end patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
-
 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&mdash;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`<Rental::Image />`);
 -
--    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!
 -      </Rental::Image>
 -    `);
 -
--    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`
 +      <Rental::Image

src/markdown/tutorial/part-1/06-interactive-components.md

@@ -54,13 +54,14 @@ This generated a JavaScript file with the same name as our component's template
 Ember will create an *[instance][TODO: link to instance]* of the class whenever our component is invoked. We can use that instance to store our state:
 
 ```run:file:patch lang=js cwd=super-rentals filename=app/components/rental/image.js
-@@ -3,2 +3,6 @@
- export default class RentalImageComponent extends Component {
+@@ -3 +3,6 @@
+-export default class RentalImageComponent extends Component {}
++export default class RentalImageComponent extends Component {
 +  constructor(...args) {
 +    super(...args);
 +    this.isLarge = false;
 +  }
- }
++}
 ```
 
 Here, in the *[component's constructor][TODO: link to component's constructor]*, we *[initialized][TODO: link to initialized]* the *[instance variable][TODO: link to instance variable]* `this.isLarge` with the value `false`, since this is the default state that we want for our component.

src/markdown/tutorial/part-1/07-reusable-components.md

@@ -98,43 +98,21 @@ git add app/components/map.js
 git add tests/integration/components/map-test.js
 ```
 
-<!-- patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
-```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
-```
-
-<!-- end patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
 ## 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`<Map
 +      @lat="37.7797"
@@ -212,7 +190,7 @@ We just added a lot of behavior into a single component, so let's write some tes
 +      .hasAttribute('width', '150')
 +      .hasAttribute('height', '120');
 
--    assert.equal(this.element.textContent.trim(), '');
+-    assert.dom(this.element).hasText('');
 +    let { src } = find('.map img');
 +    let token = encodeURIComponent(ENV.MAPBOX_ACCESS_TOKEN);
 
@@ -227,7 +205,7 @@ We just added a lot of behavior into a single component, so let's write some tes
 +      'the src starts with "https://api.mapbox.com/"'
 +    );
 
--    assert.equal(this.element.textContent.trim(), 'template block text');
+-    assert.dom(this.element).hasText('template block text');
 +    assert.ok(
 +      src.includes('-122.4184,37.7797,10'),
 +      'the src should include the lng,lat,zoom parameter'

src/markdown/tutorial/part-2/09-route-params.md

@@ -177,30 +177,6 @@ git add app/components/rental/detailed.hbs
 git add tests/integration/components/rental/detailed-test.js
 ```
 
-<!-- patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
-```run:file:patch hidden=true cwd=super-rentals filename=tests/integration/components/rental/detailed-test.js
-@@ -5,8 +5,8 @@
-
--module('Integration | Component | rental/detailed', function(hooks) {
-+module('Integration | Component | rental/detailed', 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/detailed-test.js
-```
-
-<!-- end patch for https://github.com/emberjs/ember.js/issues/19333 -->
-
-
 ```run:file:patch lang=handlebars cwd=super-rentals filename=app/components/rental/detailed.hbs
 @@ -1 +1,44 @@
 -{{yield}}
@@ -267,7 +243,7 @@ Now that we have this template in place, we can add some tests for this new comp
 
 -  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) { ... });
 +  hooks.beforeEach(function () {
 +    this.setProperties({
 +      rental: {
@@ -294,7 +270,7 @@ Now that we have this template in place, we can add some tests for this new comp
 +  test('it renders a header with a share button', async function (assert) {
 +    await render(hbs`<Rental::Detailed @rental={{this.rental}} />`);
 
--    assert.equal(this.element.textContent.trim(), '');
+-    assert.dom(this.element).hasText('');
 +    assert.dom('.jumbo').exists();
 +    assert.dom('.jumbo h2').containsText('Grand Old Mansion');
 +    assert
@@ -312,7 +288,7 @@ Now that we have this template in place, we can add some tests for this new comp
 +  test('it renders detailed information about a rental property', async function (assert) {
 +    await render(hbs`<Rental::Detailed @rental={{this.rental}} />`);
 
--    assert.equal(this.element.textContent.trim(), 'template block text');
+-    assert.dom(this.element).hasText('template block text');
 +    assert.dom('article').hasClass('rental');
 +    assert.dom('article h3').containsText('About Grand Old Mansion');
 +    assert.dom('article .detail.owner').containsText('Veruca Salt');