Merge branch 'master' into use-shikiji

Author: IgnaceMaes

guides/release/components/block-content.md

@@ -322,4 +322,98 @@ We can yield back multiple values as well, separated by spaces.
 </BlogPost>
 ```
 
+## Named Blocks
+
+If you want to yield content to different spots in the same component, you can use named blocks. You just need to specify a name for the yielded block, like this:
+
+```handlebars
+{{yield to="somePlace"}}
+```
+
+You could also want to pass some values. This is the same process as the default `yield`, but you just have to pass `to` as the last argument. An example would be the popover:
+
+```handlebars {data-filename=app/components/popover.hbs}
+<div class="popover">
+  <div class="popover__trigger">
+    {{yield this.isOpen to="trigger"}}
+  </div>
+  {{#if this.isOpen}}
+    <div class="popover__content">
+      {{yield to="content"}}
+    </div>
+  {{/if}}
+</div>
+```
+
+Without named blocks, we would certainly have to pass components as `args` to the popover. But this is much more practical!
+
+Here’s how we would call our named blocks as a consumer:
+
+```handlebars
+<Popover>
+  <:trigger as |open|>
+    <button type="button">Click to {{if open "close" "open"}}  the popover!</button>
+  </:trigger>
+  <:content>
+     This is what is shown when I'm opened!
+  </:content>
+</Popover>
+```
+
+We know the state of the popover because we passed it as an argument to the `yield`. To access its value, use the block parameters at the named block scope. It will not be accessible at the `Popover` level, so if you want the value to be available for all the blocks, you will have to pass it for each of them.
+
+Rendering the previous code example would give this as result:
+
+```html
+<!-- rendered -->
+<div class="popover">
+  <div class="popover__trigger">
+    <button type="button">Click to close the popover!</button>
+  </div>
+  <div class="popover__content">
+    This is what is showed when I'm opened!
+  </div>
+</div>
+```
+
+Don't worry, you can also still use `yield` by itself, and mix it with named blocks. Let’s take a card example:
+
+```handlebars {data-filename=app/components/card.hbs}
+<div class="card">
+  {{#if (has-block "title")}}
+    <div class="card__title">
+      {{yield to="title"}}
+    </div>
+  {{/if}}
+  <div class="card__content">
+    {{yield}}
+  </div>
+</div>
+```
+
+A yielded block without a name is called `default`. So to access it, it’s like any other named blocks.
+
+```handlebars
+<Card>
+  <:title>
+    <h3>It's nice to have me. Sometimes</h3>
+  </:title>
+  <:default>
+    The card content will appear here!
+  </:default>
+</Card>
+```
+
+The title being optional when you create a card, you can use the `(has-block)` helper with the named block by adding its name as a first parameter. That means you could also create this card:
+
+```handlebars
+<Card>
+  I don't want any title, and I only have a default content!
+</Card>
+```
+
+As you are not using named blocks, you can simply yield the content you would like to add, which becomes the default yield block.
+
+
+
 <!-- eof - needed for pages that end in a code block  -->

guides/release/configuring-ember/configuring-ember-cli.md

@@ -1,7 +1,7 @@
 In addition to configuring your app itself, you can also configure Ember CLI.
 These configurations can be made by adding them to the `.ember-cli` file in your application's root. Many can also be made by passing them as arguments to the command line program.
 
-For example, a common desire is to change the port that Ember CLI serves the app from. It's possible to pass the port number from the command line with `ember server --port 8080`. To make this configuration permanent, edit your `.ember-cli` file like so:
+For example, a common desire is to change the port that Ember CLI serves the app from. It's possible to pass the port number from the command line with `ember server --port 8080`, if you want to pass the port to your `npm start` script you would pass it with an extra `--` like this: `npm start -- --port 8080`. To make this configuration permanent, edit your `.ember-cli` file like so:
 
 ```json
 {

guides/release/getting-started/quick-start.md

@@ -51,7 +51,7 @@ Let's make sure everything is working properly.
 
 ```bash
 cd ember-quickstart
-ember serve
+npm start
 ```
 
 After a few seconds, you should see output that looks like this:

guides/release/testing/index.md

@@ -16,18 +16,12 @@ You have a few options for running tests.
 
 First, you can run the test suite by entering the command `ember test`, or `ember t`, in your terminal. This will run the suite just once.
 
-Suppose, instead, you want the suite to run after every file change. You can enter `ember test --server`, or `ember t -s`.
-
-Lastly, if you are already running a local development server (through `ember server`), you can visit the `/tests` URI. This will render the `tests/index.html` template.
+Running a local development server (through `npm start`), you can visit the `/tests` URI. This will render the `tests/index.html` template. This will also auto-update as you are changing files in your app.
 
 ```bash
 # Run all tests once
 ember test
 ember t
-
-# Run all tests after every file change
-ember test --server
-ember t -s
 ```
 
 ### How to Filter Tests
@@ -38,23 +32,23 @@ The `--module` option allows you to select a **module**—a group of tests that
 
 ```bash
 # Button component example
-ember test --server --module="Integration | Component | simple-button"
+ember test --module="Integration | Component | simple-button"
 
 # Run tests for a location service
-ember t -s -m="Unit | Service | location"
+ember t -m="Unit | Service | location"
 ```
 
 The `--filter` option is more versatile. You can provide a phrase to match against the modules and test descriptions. A test description is what appears in `test()` in QUnit.
 
 ```bash
 # Button component example
-ember test --server --filter="should show icon and label"
+ember test --filter="should show icon and label"
 
 # Test everything related to your dashboard
-ember t -s -f="Dashboard"
+ember t -f="Dashboard"
 
 # Run integration tests
-ember t -s -f="Integration"
+ember t -f="Integration"
 ```
 
 In QUnit, you can exclude tests by adding an exclamation point to the beginning of the filter, e.g. `ember test --filter="!Acceptance"`.

guides/release/testing/testing-application.md

@@ -148,7 +148,7 @@ During the development of your tests or when you refactor your application's cod
 To try them out, do the following steps:
 
 1. Add `await pauseTest();` in your test code.
-2. Run `ember server`.
+2. Run `npm start`.
 3. Visit `http://localhost:4200/tests` in your browser
 
 When the execution of the test come upon `await pauseTest()`, the test will be paused, allowing you to inspect the state of your application.

guides/release/testing/testing-components.md

@@ -71,8 +71,6 @@ module('Integration | Component | pretty-color', function(hooks) {
   setupRenderingTest(hooks);
 
   test('should change colors', async function(assert) {
-    assert.expect(1);
-
     // set the outer context to red
     this.set('colorValue', 'red');
 
@@ -102,8 +100,6 @@ module('Integration | Component | pretty-color', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    assert.expect(2);
-
     // set the outer context to red
     this.set('colorValue', 'red');
 
@@ -129,8 +125,6 @@ module('Integration | Component | pretty-color', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    assert.expect(2);
-
     this.set('colorValue', 'orange');
 
     await render(hbs`<PrettyColor @name={{this.colorValue}} />`);
@@ -189,8 +183,6 @@ module('Integration | Component | magic-title', function(hooks) {
   setupRenderingTest(hooks);
 
   test('should update title on button click', async function(assert) {
-    assert.expect(2);
-
     await render(hbs`<MagicTitle />`);
 
     assert.equal(this.element.querySelector('h2').textContent.trim(), 'Hello World', 'initial text is hello world');
@@ -241,8 +233,9 @@ export default class CommentFormComponent extends Component {
 ```
 
 Here's an example test that asserts that the specified `externalAction` function is invoked when the component's internal `submitComment` action is triggered by making use of a test double (dummy function).
-`assert.expect(1)` at the top of the test makes sure that the assertion inside the
-external action is called:
+The value from the external action is captured in a shared variable (if and when it is called),
+so that it can be explicitly asserted directly in the test function at the time where we
+expect the closure action to have been called.
 
 ```javascript {data-filename="tests/integration/components/comment-form-test.js"}
 import { module, test } from 'qunit';
@@ -254,12 +247,10 @@ module('Integration | Component | comment-form', function(hooks) {
   setupRenderingTest(hooks);
 
   test('should trigger external action on form submit', async function(assert) {
-    assert.expect(1);
-
     // test double for the external action
-    this.set('externalAction', (actual) => {
-      let expected = { comment: 'You are not a wizard!' };
-      assert.deepEqual(actual, expected, 'submitted value is passed to external action');
+    let actual;
+    this.set('externalAction', (data) => {
+      actual = data;
     });
 
     await render(hbs`<CommentForm @submitComment={{this.externalAction}} />`);
@@ -269,6 +260,9 @@ module('Integration | Component | comment-form', function(hooks) {
 
     // click the button to submit the form
     await click('.comment-input');
+
+    let expected = { comment: 'You are not a wizard!' };
+    assert.deepEqual(actual, expected, 'submitted value is passed to external action');
   });
 });
 ```
@@ -522,11 +516,11 @@ module('Integration | Component | delayed-typeahead', function(hooks) {
   ];
 
   test('should render results after typing a term', async function(assert) {
-    assert.expect(2);
-
     this.set('results', []);
-    this.set('fetchResults', (value) => {
-      assert.equal(value, 'test', 'fetch closure action called with search value');
+
+    let value;
+    this.set('fetchResults', (data) => {
+      value = data;
       this.set('results', stubResults);
     });
 
@@ -535,6 +529,7 @@ module('Integration | Component | delayed-typeahead', function(hooks) {
     this.element.querySelector('input').dispatchEvent(new Event('keyup'));
 
     await settled();
+    assert.equal(value, 'test', 'fetch closure action called with search value');
 
     assert.equal(this.element.querySelectorAll('.result').length, 2, 'two results rendered');
   });

guides/v2.10.0/tutorial/autocomplete-component.md

@@ -230,7 +230,7 @@ export default function() {
         city: 'Seattle',
         type: 'Condo',
         bedrooms: 1,
-        image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg',
+        image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg',
         description: "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
       }
     }, {

guides/v2.10.0/tutorial/installing-addons.md

@@ -66,7 +66,7 @@ export default function() {
           city: 'Seattle',
           type: 'Condo',
           bedrooms: 1,
-          image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
+          image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg'
         }
       }, {
         type: 'rentals',

guides/v2.10.0/tutorial/model-hook.md

@@ -29,7 +29,7 @@ let rentals = [{
   city: 'Seattle',
   type: 'Condo',
   bedrooms: 1,
-  image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
+  image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg'
 }, {
   id: 'downtown-charm',
   title: 'Downtown Charm',

guides/v2.10.0/tutorial/subroutes.md

@@ -182,7 +182,7 @@ export default function() {
         city: "Seattle",
         type: "Condo",
         bedrooms: 1,
-        image: "https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg",
+        image: "https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg",
         description: "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
       }
     },

guides/v2.11.0/tutorial/autocomplete-component.md

@@ -230,7 +230,7 @@ export default function() {
         city: 'Seattle',
         type: 'Condo',
         bedrooms: 1,
-        image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg',
+        image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg',
         description: "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
       }
     }, {

guides/v2.11.0/tutorial/ember-data.md

@@ -82,7 +82,7 @@ export default Ember.Route.extend({
       city: 'Seattle',
       type: 'Condo',
       bedrooms: 1,
-      image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg',
+      image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg',
       description: "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
     }, {
       id: 'downtown-charm',

guides/v2.11.0/tutorial/installing-addons.md

@@ -66,7 +66,7 @@ export default function() {
           city: 'Seattle',
           type: 'Condo',
           bedrooms: 1,
-          image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
+          image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg'
         }
       }, {
         type: 'rentals',

guides/v2.11.0/tutorial/model-hook.md

@@ -38,7 +38,7 @@ export default Ember.Route.extend({
       city: 'Seattle',
       type: 'Condo',
       bedrooms: 1,
-      image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg',
+      image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg',
       description: 'A commuters dream. This rental is within walking distance of 2 bus stops and the Metro.'
 
     }, {

guides/v2.11.0/tutorial/subroutes.md

@@ -183,7 +183,7 @@ export default function() {
         city: "Seattle",
         type: "Condo",
         bedrooms: 1,
-        image: "https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg",
+        image: "https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg",
         description: "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
       }
     },

guides/v2.12.0/tutorial/autocomplete-component.md

@@ -163,7 +163,7 @@ export default function() {
         city: 'Seattle',
         type: 'Condo',
         bedrooms: 1,
-        image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg',
+        image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg',
         description: "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
       }
     }, {

guides/v2.12.0/tutorial/ember-data.md

@@ -82,7 +82,7 @@ export default Ember.Route.extend({
       city: 'Seattle',
       type: 'Condo',
       bedrooms: 1,
-      image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg',
+      image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg',
       description: "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
     }, {
       id: 'downtown-charm',

guides/v2.12.0/tutorial/installing-addons.md

@@ -70,7 +70,7 @@ export default function() {
           city: 'Seattle',
           type: 'Condo',
           bedrooms: 1,
-          image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
+          image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg'
         }
       }, {
         type: 'rentals',

guides/v2.12.0/tutorial/model-hook.md

@@ -38,7 +38,7 @@ export default Ember.Route.extend({
       city: 'Seattle',
       type: 'Condo',
       bedrooms: 1,
-      image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg',
+      image: 'https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg',
       description: 'A commuters dream. This rental is within walking distance of 2 bus stops and the Metro.'
 
     }, {

guides/v2.12.0/tutorial/subroutes.md

@@ -183,7 +183,7 @@ export default function() {
         city: "Seattle",
         type: "Condo",
         bedrooms: 1,
-        image: "https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg",
+        image: "https://upload.wikimedia.org/wikipedia/commons/2/20/Seattle_-_Barnes_and_Bell_Buildings.jpg",
         description: "A commuters dream. This rental is within walking distance of 2 bus stops and the Metro."
       }
     },