Merge pull request #172 from ember-learn/fix-page-title

Fix build for page-title change

Author: chancancode

.github/workflows/pull-requests.yml

@@ -182,7 +182,7 @@ del package.json
 +          details.runtime = totalRuntime;
 +        });
 +
-+        QUnit.begin(function( details ) {
++        QUnit.begin(details => {
 +          let ua = document.getElementById('qunit-userAgent');
 +          ua.innerText = ua.innerText.replace(/QUnit [0-9\.]+/g, 'QUnit');
 +          ua.innerText = ua.innerText.replace(/(WebKit|Chrome|Safari)\/[0-9\.]+/g, '$1');
@@ -265,7 +265,9 @@ The development server has a feature called *live reload*, which monitors your a
 As text on the welcome page pointed out, the source code for the page is located in `app/templates/application.hbs`. Let's try to edit that file and replace it with our own content:
 
 ```run:file:patch lang=handlebars cwd=super-rentals filename=app/templates/application.hbs
-@@ -1,5 +1 @@
+@@ -1,7 +1 @@
+-{{page-title "SuperRentals"}}
+-
 -{{!-- The following component displays Ember's default welcome message. --}}
 -<WelcomePage />
 -{{!-- Feel free to remove this! --}}

src/markdown/tutorial/part-1/01-orientation.md

@@ -29,10 +29,12 @@ This time, we would like the page to be served on the `/about` URL. In order to
 The place to manage what pages are available is the *[router][TODO: link to router]*. Go ahead and open `app/router.js` and make the following change:
 
 ```run:file:patch lang=js cwd=super-rentals filename=app/router.js
-@@ -9,2 +9,3 @@
- Router.map(function() {
+@@ -8,2 +8,4 @@
+
+-Router.map(function () {});
++Router.map(function () {
 +  this.route('about');
- });
++});
 ```
 
 This adds a *[route](../../../routing/defining-your-routes/)* named "about", which is served at the `/about` URL by default.

src/markdown/tutorial/part-1/02-building-pages.md

@@ -45,6 +45,26 @@ 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...
@@ -65,11 +85,11 @@ Let's open the generated test file and replace the boilerplate test with our own
  import { setupApplicationTest } from 'ember-qunit';
 @@ -7,6 +7,12 @@
 
--  test('visiting /super-rentals', async function(assert) {
+-  test('visiting /super-rentals', async function (assert) {
 -    await visit('/super-rentals');
 -
 -    assert.equal(currentURL(), '/super-rentals');
-+  test('visiting /', async function(assert) {
++  test('visiting /', async function (assert) {
 +    await visit('/');
 +
 +    assert.equal(currentURL(), '/');
@@ -149,7 +169,7 @@ Let's practice what we learned by adding tests for the remaining pages:
 @@ -18,2 +18,26 @@
    });
 +
-+  test('visiting /about', async function(assert) {
++  test('visiting /about', async function (assert) {
 +    await visit('/about');
 +
 +    assert.equal(currentURL(), '/about');
@@ -161,7 +181,7 @@ Let's practice what we learned by adding tests for the remaining pages:
 +    assert.equal(currentURL(), '/getting-in-touch');
 +  });
 +
-+  test('visiting /getting-in-touch', async function(assert) {
++  test('visiting /getting-in-touch', async function (assert) {
 +    await visit('/getting-in-touch');
 +
 +    assert.equal(currentURL(), '/getting-in-touch');

src/markdown/tutorial/part-1/03-automated-testing.md

@@ -153,16 +153,39 @@ 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:
 
 ```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/jumbo-test.js
 @@ -8,18 +8,8 @@
 
--  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) { ... });
 -
 -    await render(hbs`<Jumbo />`);
 -
@@ -176,7 +199,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');
-+  test('it renders the content inside a jumbo header with a tomster', async function(assert) {
++  test('it renders the content inside a jumbo header with a tomster', async function (assert) {
 +    await render(hbs`<Jumbo>Hello World</Jumbo>`);
 +
 +    assert.dom('.jumbo').exists();
@@ -282,7 +305,7 @@ But what kind of test? We *could* write a component test for the `<NavBar>` by i
 @@ -42,2 +48,20 @@
    });
 +
-+  test('navigating using the nav-bar', async function(assert) {
++  test('navigating using the nav-bar', async function (assert) {
 +    await visit('/');
 +
 +    assert.dom('nav').exists();

src/markdown/tutorial/part-1/04-component-basics.md

@@ -31,6 +31,29 @@ 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
@@ -61,9 +84,9 @@ Then, we will write a test to ensure all of the details are present. We will rep
 ```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental-test.js
 @@ -8,18 +8,11 @@
 
--  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) { ... });
 -
 -    await render(hbs`<Rental />`);
 -
@@ -77,7 +100,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');
-+  test('it renders information about a rental property', async function(assert) {
++  test('it renders information about a rental property', async function (assert) {
 +    await render(hbs`<Rental />`);
 +
 +    assert.dom('article').hasClass('rental');
@@ -147,6 +170,30 @@ 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`
@@ -188,11 +235,11 @@ In general, it is a good idea to add `...attributes` to the primary element in y
 Let's write a test for our new component!
 
 ```run:file:patch lang=js cwd=super-rentals filename=tests/integration/components/rental/image-test.js
-@@ -8,18 +8,13 @@
+@@ -8,18 +8,15 @@
 
--  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) { ... });
 -
 -    await render(hbs`<Rental::Image />`);
 -
@@ -206,17 +253,19 @@ Let's write a test for our new component!
 -    `);
 -
 -    assert.equal(this.element.textContent.trim(), 'template block text');
-+  test('it renders the given image', async function(assert) {
++  test('it renders the given image', async function (assert) {
 +    await render(hbs`
 +      <Rental::Image
 +        src="/assets/images/teaching-tomster.png"
 +        alt="Teaching Tomster"
 +      />
 +    `);
 +
-+    assert.dom('.image').exists();
-+    assert.dom('.image img').hasAttribute('src', '/assets/images/teaching-tomster.png');
-+    assert.dom('.image img').hasAttribute('alt', 'Teaching Tomster');
++    assert
++      .dom('.image img')
++      .exists()
++      .hasAttribute('src', '/assets/images/teaching-tomster.png')
++      .hasAttribute('alt', 'Teaching Tomster');
    });
 ```
 

src/markdown/tutorial/part-1/05-more-about-components.md

@@ -240,7 +240,7 @@ Finally, let's write a test for this new behavior:
 @@ -20,2 +21,26 @@
    });
 +
-+  test('clicking on the component toggles its size', async function(assert) {
++  test('clicking on the component toggles its size', async function (assert) {
 +    await render(hbs`
 +      <Rental::Image
 +        src="/assets/images/teaching-tomster.png"