Chapter 12

app/components/rentals.hbs

@@ -0,0 +1,14 @@
+<div class="rentals">
+  <label>
+    <span>Where would you like to stay?</span>
+    <Input @value={{this.query}} class="light" />
+  </label>
+
+  <ul class="results">
+    <Rentals::Filter @rentals={{@rentals}} @query={{this.query}} as |results|>
+      {{#each results as |rental|}}
+        <li><Rental @rental={{rental}} /></li>
+      {{/each}}
+    </Rentals::Filter>
+  </ul>
+</div>

app/components/rentals.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class RentalsComponent extends Component {
+  @tracked query = '';
+}

app/components/rentals/filter.hbs

@@ -0,0 +1 @@
+{{yield this.results}}

app/components/rentals/filter.js

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+
+export default class RentalsFilterComponent extends Component {
+  get results() {
+    let { rentals, query } = this.args;
+
+    if (query) {
+      rentals = rentals.filter((rental) => rental.title.includes(query));
+    }
+
+    return rentals;
+  }
+}

app/templates/index.hbs

@@ -4,10 +4,4 @@
   <LinkTo @route="about" class="button">About Us</LinkTo>
 </Jumbo>
 
-<div class="rentals">
-  <ul class="results">
-    {{#each @model as |rental|}}
-      <li><Rental @rental={{rental}} /></li>
-    {{/each}}
-  </ul>
-</div>
+<Rentals @rentals={{@model}} />

tests/integration/components/rentals-test.js

@@ -0,0 +1,107 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, fillIn } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rentals', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.setProperties({
+      rentals: [
+        {
+          id: 'grand-old-mansion',
+          title: 'Grand Old Mansion',
+          owner: 'Veruca Salt',
+          city: 'San Francisco',
+          location: {
+            lat: 37.7749,
+            lng: -122.4194,
+          },
+          category: 'Estate',
+          type: 'Standalone',
+          bedrooms: 15,
+          image:
+            'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg',
+          description:
+            'This grand old mansion sits on over 100 acres of rolling hills and dense redwood forests.',
+        },
+        {
+          id: 'urban-living',
+          title: 'Urban Living',
+          owner: 'Mike Teavee',
+          city: 'Seattle',
+          location: {
+            lat: 47.6062,
+            lng: -122.3321,
+          },
+          category: 'Condo',
+          type: 'Community',
+          bedrooms: 1,
+          image:
+            'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg',
+          description:
+            'A commuters dream. This rental is within walking distance of 2 bus stops and the Metro.',
+        },
+        {
+          id: 'downtown-charm',
+          title: 'Downtown Charm',
+          owner: 'Violet Beauregarde',
+          city: 'Portland',
+          location: {
+            lat: 45.5175,
+            lng: -122.6801,
+          },
+          category: 'Apartment',
+          type: 'Community',
+          bedrooms: 3,
+          image:
+            'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg',
+          description:
+            'Convenience is at your doorstep with this charming downtown rental. Great restaurants and active night life are within a few feet.',
+        },
+      ],
+    });
+  });
+
+  test('it renders all given rental properties by default', async function (assert) {
+    await render(hbs`<Rentals @rentals={{this.rentals}} />`);
+
+    assert.dom('.rentals').exists();
+    assert.dom('.rentals input').exists();
+
+    assert.dom('.rentals .results').exists();
+    assert.dom('.rentals .results li').exists({ count: 3 });
+
+    assert
+      .dom('.rentals .results li:nth-of-type(1)')
+      .containsText('Grand Old Mansion');
+
+    assert
+      .dom('.rentals .results li:nth-of-type(2)')
+      .containsText('Urban Living');
+
+    assert
+      .dom('.rentals .results li:nth-of-type(3)')
+      .containsText('Downtown Charm');
+  });
+
+  test('it updates the results according to the search query', async function (assert) {
+    await render(hbs`<Rentals @rentals={{this.rentals}} />`);
+
+    assert.dom('.rentals').exists();
+    assert.dom('.rentals input').exists();
+
+    await fillIn('.rentals input', 'Downtown');
+
+    assert.dom('.rentals .results').exists();
+    assert.dom('.rentals .results li').exists({ count: 1 });
+    assert.dom('.rentals .results li').containsText('Downtown Charm');
+
+    await fillIn('.rentals input', 'Mansion');
+
+    assert.dom('.rentals .results').exists();
+    assert.dom('.rentals .results li').exists({ count: 1 });
+    assert.dom('.rentals .results li').containsText('Grand Old Mansion');
+  });
+});