Renamed recipe stuff to meal

ember-ui/app/components/meal-add.hbs

@@ -1,10 +1,10 @@
-{{#if this.fetchRecipe.isRunning}}
+{{#if this.fetchMeal.isRunning}}
   <LoadingIndicator />
 {{/if}}
 
 <button
-  {{on "click" this.addRecipe}}
+  {{on "click" this.addMeal}}
   class="w-full bg-teal-500 hover:bg-teal-400 focus:bg-teal-400 text-white font-bold mt-4 py-2 px-4 border-b-4 border-teal-700 hover:border-teal-500 focus:border-teal-500 rounded"
-  data-test-id="recipe-add-button">
+  data-test-id="meal-add-button">
-  Add Another Recipe
+  Add Another Meal
 </button>

ember-ui/app/components/meal-add.js

@@ -3,15 +3,15 @@ import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
 import { action } from "@ember/object";
 
-export default class RecipeAddComponent extends Component {
+export default class MealAddComponent extends Component {
   @service store;
 
   @(task(function * () {
     return yield this.store.queryRecord('meal', 'random');
-  })) fetchRecipe;
+  })) fetchMeal;
 
   @action
-  async addRecipe() {
+  async addMeal() {
-    await this.fetchRecipe.perform();
+    await this.fetchMeal.perform();
   }
 }

ember-ui/app/components/meal-item.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" data-test-id="recipe-link">
+<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="meal-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" data-test-id="recipe-preview-image">
+      <img src={{@meal.thumbnailUrl}} alt="" class="h-full w-full object-cover" data-test-id="meal-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" data-test-id="recipe-name">
+        <div class="text-gray-900 font-bold text-xl mb-2" data-test-id="meal-name">
           {{@meal.name}}
         </div>
-        <p class="text-gray-700 text-base" data-test-id="recipe-ingredients-list">
+        <p class="text-gray-700 text-base" data-test-id="meal-ingredients-list">
           {{@meal.ingredientsList}}
         </p>
       </div>
-      <div data-test-id="recipe-tags">
+      <div data-test-id="meal-tags">
         <MealTag>{{@meal.category}}</MealTag>
         <MealTag>{{@meal.area}}</MealTag>
       </div>

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

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

ember-ui/app/components/meal-list.js

@@ -4,7 +4,7 @@ import { action } from "@ember/object";
 import { A } from '@ember/array';
 import { inject as service } from '@ember/service';
 
-export default class RecipeListComponent extends Component {
+export default class MealListComponent extends Component {
   @service store;
   @tracked items = A([]);
 

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

@@ -4,15 +4,15 @@ import { setupMirage } from 'ember-cli-mirage/test-support';
 import { render, click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
-module('Integration | Component | recipe-add', function(hooks) {
+module('Integration | Component | meal-add', function(hooks) {
   setupRenderingTest(hooks);
   setupMirage(hooks);
 
-  test('it adds a new recipe (meal) when button is clicked', async function(assert) {
+  test('it adds a new meal (meal) when button is clicked', async function(assert) {
-    await render(hbs`<RecipeAdd />`);
+    await render(hbs`<MealAdd />`);
     let store = this.owner.lookup('service:store');
 
-    await click('[data-test-id=recipe-add-button]');
+    await click('[data-test-id=meal-add-button]');
     let randomMeal = await store.findRecord('meal', 'random');
 
     assert.ok(randomMeal);

ember-ui/tests/integration/components/meal-item-test.js

@@ -4,31 +4,31 @@ 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) {
+module('Integration | Component | meal-preview', function(hooks) {
   setupRenderingTest(hooks);
   setupMirage(hooks);
 
   hooks.beforeEach(initMeal);
 
   test('it renders a wrapper href', async function(assert) {
-    await render(hbs`<RecipePreview @meal={{meal}} />`);
+    await render(hbs`<MealItem @meal={{meal}} />`);
 
-    assert.dom('[data-test-id=recipe-link]').hasTagName('a');
+    assert.dom('[data-test-id=meal-link]').hasTagName('a');
   });
 
-  test('it renders recipe preview image', async function(assert) {
+  test('it renders meal preview image', async function(assert) {
-    await render(hbs`<RecipePreview @meal={{meal}} />`);
+    await render(hbs`<MealItem @meal={{meal}} />`);
 
-    assert.dom('[data-test-id=recipe-preview-image]').hasAttribute('src', 'image.jpg');
+    assert.dom('[data-test-id=meal-preview-image]').hasAttribute('src', 'image.jpg');
   });
 
-  test('it renders recipe data as text', async function(assert) {
+  test('it renders meal data as text', async function(assert) {
-    await render(hbs`<RecipePreview @meal={{meal}} />`);
+    await render(hbs`<MealItem @meal={{meal}} />`);
 
-    assert.dom('[data-test-id=recipe-name]').hasText('Cookies');
+    assert.dom('[data-test-id=meal-name]').hasText('Cookies');
-    assert.dom('[data-test-id=recipe-ingredients-list]').hasText('Love, Chocolate');
+    assert.dom('[data-test-id=meal-ingredients-list]').hasText('Love, Chocolate');
-    assert.dom('[data-test-id=recipe-tags]').includesText('Home');
+    assert.dom('[data-test-id=meal-tags]').includesText('Home');
-    assert.dom('[data-test-id=recipe-tags]').includesText('Desserts');
+    assert.dom('[data-test-id=meal-tags]').includesText('Desserts');
   });
 
   async function initMeal() {

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

@@ -5,20 +5,20 @@ import { render, find, findAll, focus, triggerKeyEvent } from '@ember/test-helpe
 import { drag }  from 'ember-sortable/test-support/helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
-module('Integration | Component | recipe-list', function(hooks) {
+module('Integration | Component | meal-list', function(hooks) {
   setupRenderingTest(hooks);
   setupMirage(hooks);
 
   hooks.beforeEach(initMeals);
 
   test('it renders existing meals into a list', async function(assert) {
-    await render(hbs`<RecipeList />`);
+    await render(hbs`<MealList />`);
 
-    assert.dom('[data-test-id=recipe-item]').exists({ count: 2 });
+    assert.dom('[data-test-id=meal-item]').exists({ count: 2 });
   });
 
   test('it can focus meal wrappers', async function(assert) {
-    await render(hbs`<RecipeList />`);
+    await render(hbs`<MealList />`);
 
     await focus('[data-sortable-handle]');
 
@@ -26,30 +26,30 @@ module('Integration | Component | recipe-list', function(hooks) {
   });
 
   test('it can reorder meals via keyboard shortcuts', async function(assert) {
-    await render(hbs`<RecipeList />`);
+    await render(hbs`<MealList />`);
 
-    assert.dom(findAll('[data-test-id=recipe-name]')[0]).includesText('Meal 1');
+    assert.dom(findAll('[data-test-id=meal-name]')[0]).includesText('Meal 1');
-    assert.dom(findAll('[data-test-id=recipe-name]')[1]).includesText('Meal 2');
+    assert.dom(findAll('[data-test-id=meal-name]')[1]).includesText('Meal 2');
 
     await focus('[data-sortable-handle]'); // Not technically required, but emulates user interaction
     await triggerKeyEvent('[data-sortable-handle]', 'keydown', 'Enter');
     await triggerKeyEvent('[data-sortable-handle]', 'keydown', 'ArrowDown');
     await triggerKeyEvent('[data-sortable-handle]', 'keydown', 'Enter');
 
-    assert.dom(findAll('[data-test-id=recipe-name]')[0]).includesText('Meal 2');
+    assert.dom(findAll('[data-test-id=meal-name]')[0]).includesText('Meal 2');
-    assert.dom(findAll('[data-test-id=recipe-name]')[1]).includesText('Meal 1');
+    assert.dom(findAll('[data-test-id=meal-name]')[1]).includesText('Meal 1');
   });
 
   test('it can drag and drop meals', async function(assert) {
-    await render(hbs`<RecipeList />`);
+    await render(hbs`<MealList />`);
 
-    assert.dom(findAll('[data-test-id=recipe-name]')[0]).includesText('Meal 1');
+    assert.dom(findAll('[data-test-id=meal-name]')[0]).includesText('Meal 1');
-    assert.dom(findAll('[data-test-id=recipe-name]')[1]).includesText('Meal 2');
+    assert.dom(findAll('[data-test-id=meal-name]')[1]).includesText('Meal 2');
 
     await drag('mouse', '[data-sortable-handle]', () => { return { dy: 100, dx: 0 } });
 
-    assert.dom(findAll('[data-test-id=recipe-name]')[0]).includesText('Meal 2');
+    assert.dom(findAll('[data-test-id=meal-name]')[0]).includesText('Meal 2');
-    assert.dom(findAll('[data-test-id=recipe-name]')[1]).includesText('Meal 1');
+    assert.dom(findAll('[data-test-id=meal-name]')[1]).includesText('Meal 1');
   });
 
   async function initMeals() {