All basic tests passing

ember-ui/app/components/recipe-list.hbs

@@ -6,6 +6,7 @@
     {{#each group.model as |meal|}}
       <group.item
         @model={{meal}}
+        data-test-id="recipe-item"
         as |item|>
         <item.handle>
           <RecipePreview @meal={{meal}} {{on "click" this.openMealDetails}} />

ember-ui/app/components/recipe-preview.hbs

@@ -1,18 +1,18 @@
-<LinkTo @route="meal" @model={{@meal}} class="block bg-white border border-gray-400 focus:border-teal-500 focus:shadow-sm focus:bg-teal-100 outline-none">
+<LinkTo @route="meal" @model={{@meal}} class="block bg-white border border-gray-400 focus:border-teal-500 focus:shadow-sm focus:bg-teal-100 outline-none" data-test-id="recipe-link">
   <div class="max-w-sm w-full lg:max-w-full lg:flex">
     <div class="h-48 lg:h-auto lg:w-48 flex-none">
-      <img src={{@meal.thumbnailUrl}} alt="" class="h-full w-full object-cover">
+      <img src={{@meal.thumbnailUrl}} alt="" class="h-full w-full object-cover" data-test-id="recipe-preview-image">
     </div>
     <div class="p-4 flex flex-col justify-between leading-normal">
       <div class="mb-8">
-        <div class="text-gray-900 font-bold text-xl mb-2">
+        <div class="text-gray-900 font-bold text-xl mb-2" data-test-id="recipe-name">
           {{@meal.name}}
         </div>
-        <p class="text-gray-700 text-base">
+        <p class="text-gray-700 text-base" data-test-id="recipe-ingredients-list">
           {{@meal.ingredientsList}}
         </p>
       </div>
-      <div>
+      <div data-test-id="recipe-tags">
         <MealTag>{{@meal.category}}</MealTag>
         <MealTag>{{@meal.area}}</MealTag>
       </div>

ember-ui/app/models/meal.js

@@ -6,13 +6,13 @@ export default class MealModel extends Model {
   @attr area;
   @attr category;
   @attr dateModified;
+  @attr ingredients;
   @attr instructions;
   @attr name;
   @attr sourceUrl;
   @attr tags;
   @attr thumbnailUrl;
   @attr youtubeUrl;
-  @attr ingredients;
 
   @attr('number', { defaultValue: Infinity }) listOrder;
 

ember-ui/mirage/config.js

@@ -1,31 +1,12 @@
 export default function() {
-
-  // These comments are here to help you get started. Feel free to delete them.
-
-  /*
-    Config (with defaults).
-
-    Note: these only affect routes defined *after* them!
-  */
-
-  // this.urlPrefix = '';    // make this `http://localhost:8080`, for example, if your API is on a different server
-  // this.namespace = '';    // make this `/api`, for example, if your API is namespaced
-  // this.timing = 400;      // delay for each request, automatically set to 0 during testing
-
-  /*
-    Shorthand cheatsheet:
-
-    this.get('/posts');
-    this.post('/posts');
-    this.get('/posts/:id');
-    this.put('/posts/:id'); // or this.patch
-    this.del('/posts/:id');
-
-    https://www.ember-cli-mirage.com/docs/route-handlers/shorthands
-  */
   this.urlPrefix = 'http://localhost:8000/';
 
-  this.get('/meals/random', (schema, request) => {
-    return schema.meals.find(1);
+  this.get('/meals/random', (schema) => {
+    let id = 'random';
+    schema.meals.create({id});
+    return schema.meals.find(id);
   });
+
+  this.get('/meal/:id');
 }
+

ember-ui/mirage/factories/meal.js

@@ -0,0 +1,5 @@
+import { Factory } from 'ember-cli-mirage';
+
+export default Factory.extend({
+  ingredients: [],
+});

ember-ui/tests/integration/components/recipe-add-test.js

@@ -8,9 +8,14 @@ module('Integration | Component | recipe-add', function(hooks) {
   setupRenderingTest(hooks);
   setupMirage(hooks);
 
-  test('it renders', async function(assert) {
+  test('it adds a new recipe (meal) when button is clicked', async function(assert) {
     await render(hbs`<RecipeAdd />`);
+    let store = this.owner.lookup('service:store');
 
     await click('[data-test-id=recipe-add-button]');
+    let randomMeal = await store.findRecord('meal', 'random');
+
+    assert.ok(randomMeal);
+    assert.equal(store.peekAll('meal').length, 1);
   });
 });

ember-ui/tests/integration/components/recipe-list-test.js

@@ -1,26 +1,22 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
+import { setupMirage } from 'ember-cli-mirage/test-support';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | recipe-list', function(hooks) {
   setupRenderingTest(hooks);
+  setupMirage(hooks);
 
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
+  test('it renders existing meals into a list', async function(assert) {
+    let store = this.owner.lookup('service:store');
+    this.server.create('meal', { id: 1 });
+    this.server.create('meal', { id: 2 });
+    await store.findRecord('meal', 1);
+    await store.findRecord('meal', 2);
 
     await render(hbs`<RecipeList />`);
 
-    assert.equal(this.element.textContent.trim(), '');
-
-    // Template block usage:
-    await render(hbs`
-      <RecipeList>
-        template block text
-      </RecipeList>
-    `);
-
-    assert.equal(this.element.textContent.trim(), 'template block text');
+    assert.dom('[data-test-id=recipe-item]').exists({ count: 2 });
   });
 });

ember-ui/tests/integration/components/recipe-preview-test.js

@@ -1,26 +1,54 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
+import { setupMirage } from 'ember-cli-mirage/test-support';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | recipe-preview', function(hooks) {
   setupRenderingTest(hooks);
+  setupMirage(hooks);
 
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
+  hooks.beforeEach(initMeal);
 
-    await render(hbs`<RecipePreview />`);
+  test('it renders a wrapper href', async function(assert) {
+    await render(hbs`<RecipePreview @meal={{meal}} />`);
 
-    assert.equal(this.element.textContent.trim(), '');
-
-    // Template block usage:
-    await render(hbs`
-      <RecipePreview>
-        template block text
-      </RecipePreview>
-    `);
-
-    assert.equal(this.element.textContent.trim(), 'template block text');
+    assert.dom('[data-test-id=recipe-link]').hasTagName('a');
   });
+
+  test('it renders recipe preview image', async function(assert) {
+    await render(hbs`<RecipePreview @meal={{meal}} />`);
+
+    assert.dom('[data-test-id=recipe-preview-image]').hasAttribute('src', 'image.jpg');
+  });
+
+  test('it renders recipe data as text', async function(assert) {
+    await render(hbs`<RecipePreview @meal={{meal}} />`);
+
+    assert.dom('[data-test-id=recipe-name]').hasText('Cookies');
+    assert.dom('[data-test-id=recipe-ingredients-list]').hasText('Love, Chocolate');
+    assert.dom('[data-test-id=recipe-tags]').includesText('Home');
+    assert.dom('[data-test-id=recipe-tags]').includesText('Desserts');
+  });
+
+  async function initMeal() {
+    let store = this.owner.lookup('service:store');
+    this.server.create('meal', {
+      area: 'Home',
+      category: 'Desserts',
+      id: 1,
+      ingredients: [
+        {
+          name: 'Love',
+          measure: 'Infinity',
+        }, {
+          name: 'Chocolate',
+          measure: 'As Much As You Desire',
+        },
+      ],
+      name: 'Cookies',
+      thumbnailUrl: 'image.jpg',
+    });
+    this.set('meal', await store.findRecord('meal', 1));
+  }
 });

ember-ui/tests/unit/models/meal-test.js

@@ -4,10 +4,27 @@ import { setupTest } from 'ember-qunit';
 module('Unit | Model | meal', function(hooks) {
   setupTest(hooks);
 
-  // Replace this with your real tests.
   test('it exists', function(assert) {
     let store = this.owner.lookup('service:store');
     let model = store.createRecord('meal', {});
+
     assert.ok(model);
   });
+
+  test('it creates comma separated ingredients list', function(assert) {
+    let store = this.owner.lookup('service:store');
+    let model = store.createRecord('meal', {
+      ingredients: [
+        {
+          name: 'Love',
+          measure: 'Infinity',
+        }, {
+          name: 'Chocolate',
+          measure: 'As Much As You Desire',
+        },
+      ],
+    });
+
+    assert.equal(model.ingredientsList, 'Love, Chocolate');
+  });
 });