add hint about paper-wormhole for integration tests using paper-dialo…

…g in cookbook (fix adopted-ember-addons#630)

tests/dummy/app/templates/cookbook.hbs

@@ -7,6 +7,11 @@
     Material Design <a href="https://material.google.com/components/text-fields.html#text-fields-character-counter">requires that a character count is displayed</a> for input elements which have a length restriction. However, when forms have many input elements, some may prefer to display the count only when the element is focused or invalid. This CSS achieves this.
   </p>
   {{code-snippet name="cookbook.no-char-count.scss"}}
+  <h3>Integration tests with <code>\{{paper-dialog}}</code></h3>
+  <p>
+    To use <code>\{{paper-dialog}}</code> in your integration test you need to define a target for `ember-wormhole`:
+    {{code-snippet name="cookbook.paper-dialog-tests.js"}}
+  </p>
   <h3>Recipe contributions</h3>
   <p>
     Have a great tip or solution for <code>ember-paper</code>? <a href="https://github.com/miguelcobain/ember-paper/pulls">Submit a pull request</a> on GitHub or discuss it with the team on <a href="https://embercommunity.slack.com/messages/e-paper/"> Slack #e-paper</a> for inclusion here.

tests/dummy/snippets/cookbook.paper-dialog-tests.js

@@ -0,0 +1,12 @@
+moduleForComponent('your-component', 'Integration | Component | your component', {
+  integration: true,
+  beforeEach() {
+    this.$dialog = (selector) => document.querySelector('#paper-wormhole').querySelector(selector);
+  }
+});
+
+test('it displays dialog title', function(assert) {
+  this.render(hbs`<div id="paper-wormhole"></div>{{your-component}}`);
+
+  assert.equal(this.$dialog('h1').text(), 'Dialog title', 'Check h1 in paper-dialog');
+});