From d7c6f664d0bc582232b6fff9dae278e707c7a645 Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Thu, 26 Dec 2019 23:33:34 -0600
Subject: [PATCH] WIP Fixing tests

---
 ember-ui/app/components/header-nav-link.hbs   |   2 +-
 ember-ui/app/components/header-nav.hbs        |   9 +-
 ember-ui/app/components/loading-indicator.hbs |   2 +-
 ember-ui/app/components/meal-tag.hbs          |   2 +-
 ember-ui/app/components/recipe-add.hbs        |   3 +-
 ember-ui/app/serializers/application.js       |   4 -
 ember-ui/mirage/config.js                     |  31 ++
 ember-ui/mirage/scenarios/default.js          |   9 +
 ember-ui/mirage/serializers/application.js    |   4 +
 ember-ui/package-lock.json                    | 371 ++++++++++++++++++
 ember-ui/package.json                         |   1 +
 .../components/header-nav-link-test.js        |  17 +-
 .../integration/components/header-nav-test.js |  40 +-
 .../components/loading-indicator-test.js      |  15 +-
 .../integration/components/meal-tag-test.js   |  16 +-
 .../integration/components/recipe-add-test.js |  18 +-
 .../unit/serializers/application-test.js      |  23 --
 17 files changed, 467 insertions(+), 100 deletions(-)
 delete mode 100644 ember-ui/app/serializers/application.js
 create mode 100644 ember-ui/mirage/config.js
 create mode 100644 ember-ui/mirage/scenarios/default.js
 create mode 100644 ember-ui/mirage/serializers/application.js
 delete mode 100644 ember-ui/tests/unit/serializers/application-test.js

diff --git a/ember-ui/app/components/header-nav-link.hbs b/ember-ui/app/components/header-nav-link.hbs
index e1b5138..d78da63 100644
--- a/ember-ui/app/components/header-nav-link.hbs
+++ b/ember-ui/app/components/header-nav-link.hbs
@@ -1,3 +1,3 @@
-<a href={{@href}} class="block mt-4 md:inline-block md:mt-0 text-teal-200 hover:text-white focus:text-white mr-4">
+<a href={{@href}} class="block mt-4 md:inline-block md:mt-0 text-teal-200 hover:text-white focus:text-white mr-4" data-test-id="header-nav-link">
   {{yield}}
 </a>
diff --git a/ember-ui/app/components/header-nav.hbs b/ember-ui/app/components/header-nav.hbs
index ba5a0fc..5cfefdf 100644
--- a/ember-ui/app/components/header-nav.hbs
+++ b/ember-ui/app/components/header-nav.hbs
@@ -1,6 +1,6 @@
 <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
   <div class="flex items-center flex-shrink-0 text-white mr-6">
-    <LinkTo @route="index" class="flex border border-transparent hover:border-white focus:border-white rounded px-4 py-2">
+    <LinkTo @route="index" class="flex border border-transparent hover:border-white focus:border-white rounded px-4 py-2" data-test-id="branding-link">
       <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm6.997 20.486c2.444-2.019 4.003-5.072 4.003-8.486 0-6.071-4.929-11-11-11s-11 4.929-11 11c0 4.27 2.439 7.975 5.998 9.798v-3.228c0-.691-.441-.917-1.384-1.673-.698-.56-1.177-1.433-1.089-2.322.252-2.537.862-7.575.862-7.575l.909.003-.597 5.997h1.291l.005-6h1l-.002 6h1.003l-.001-6h1l.004 6 1.34.002-.675-6.002h.887c.002.011.675 5.008.951 7.55.098.902-.409 1.792-1.121 2.356-.95.751-1.382.967-1.382 1.669v4.243c.649.12 1.318.182 2.001.182 1.409 0 2.756-.265 3.994-.749l.001-3.251h-2.467c.802-6.996 3.103-12 4.66-12 .447 0 .804.357.807.851.008 1.164.004 6.814.002 12.635zm-7.563-6.486h-5.845c-.067.642-.26 1.387.651 2.117.938.754 1.758 1.231 1.758 2.453v3.678c.326.128.66.24 1.001.337v-4.01c0-1.237.811-1.7 1.761-2.453.944-.747.75-1.464.674-2.122zm6.561 7.222l.002-13.029c-1.14 1.352-2.563 4.206-3.31 9.809h2.308l-.001 3.8c.345-.176.679-.37 1.001-.58z"/>
       </svg>
@@ -12,11 +12,12 @@
   <div class="block md:hidden">
     <button
       {{on "click" this.toggle}}
-      class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
+      class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white"
+      data-test-id="toggle-menu">
       <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
     </button>
   </div>
-  <div class="w-full block flex-grow md:flex md:items-center md:w-auto {{if this.hideLinks "hidden"}}">
+  <div class="w-full block flex-grow md:flex md:items-center md:w-auto {{if this.hideLinks "hidden"}}" data-test-id="nav-links">
     <div class="text-sm md:flex-grow">
       <HeaderNavLink @href="https://github.com/adopted-ember-addons/ember-sortable">
         Ember-Sortable
@@ -29,7 +30,7 @@
       </HeaderNavLink>
     </div>
     <div>
-      <a href="https://gitlab.com/gaiety/sortable-recipes" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white hover:border-transparent focus:text-teal-500 focus:bg-white mt-4 md:mt-0">
+      <a href="https://gitlab.com/gaiety/sortable-recipes" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white hover:border-transparent focus:text-teal-500 focus:bg-white mt-4 md:mt-0" data-test-id="fork-link">
         <svg class="fill-current h-8 w-8 inline-block" width="54" height="54" viewBox="0 0 586 559" xmlns="http://www.w3.org/2000/svg">
           <path d="M461.48,298.35,443.7,243.72a7.72,7.72,0,0,0-.43-1.47L407.6,132.45a14.18,14.18,0,0,0-13.54-9.67,13.94,13.94,0,0,0-13.38,9.75l-34,104.63H239.37L205.32,132.53A13.94,13.94,0,0,0,192,122.78h-.08a14.22,14.22,0,0,0-13.5,9.76L142.72,242.47c0,.1-.08.18-.11.28l-18.1,55.61a20.29,20.29,0,0,0,7.37,22.71L288.26,434.7a8,8,0,0,0,9.45-.05l0,0L454.12,321.07A20.28,20.28,0,0,0,461.48,298.35ZM227.73,253.22l43.59,134.16L166.68,253.22Zm87,134.19,41.8-128.62,1.8-5.57h61.1L324.76,374.5Zm79.47-244.58,30.63,94.33H363.52ZM341.49,253.16l-30.37,93.46L293,402.28,244.58,253.16ZM191.85,142.83l30.69,94.33H161.27Zm-50.56,165.3a4.31,4.31,0,0,1-1.56-4.83L153.17,262l98.57,126.37Zm303.43,0L334.26,388.34l.37-.48L432.83,262l13.44,41.28A4.31,4.31,0,0,1,444.72,308.12Z"/>
         </svg>
diff --git a/ember-ui/app/components/loading-indicator.hbs b/ember-ui/app/components/loading-indicator.hbs
index ef91e23..bad6b63 100644
--- a/ember-ui/app/components/loading-indicator.hbs
+++ b/ember-ui/app/components/loading-indicator.hbs
@@ -1,5 +1,5 @@
 {{!https://samherbert.net/svg-loaders/}}
-<svg class="fill-current text-teal-500 w-full h-8 my-4" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg">
+<svg class="fill-current text-teal-500 w-full h-8 my-4" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" data-test-id="loading-indicator">
   <rect y="10" width="15" height="120" rx="6">
     <animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" />
     <animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" />
diff --git a/ember-ui/app/components/meal-tag.hbs b/ember-ui/app/components/meal-tag.hbs
index 50c1b23..ddcebec 100644
--- a/ember-ui/app/components/meal-tag.hbs
+++ b/ember-ui/app/components/meal-tag.hbs
@@ -1,3 +1,3 @@
-<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
+<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2" data-test-id="meal-tag">
   #{{yield}}
 </span>
diff --git a/ember-ui/app/components/recipe-add.hbs b/ember-ui/app/components/recipe-add.hbs
index f47ffc8..7736c6b 100644
--- a/ember-ui/app/components/recipe-add.hbs
+++ b/ember-ui/app/components/recipe-add.hbs
@@ -4,6 +4,7 @@
 
 <button
   {{on "click" this.addRecipe}}
-  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">
+  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">
   Add Another Recipe
 </button>
diff --git a/ember-ui/app/serializers/application.js b/ember-ui/app/serializers/application.js
deleted file mode 100644
index 3686a2a..0000000
--- a/ember-ui/app/serializers/application.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import JSONAPISerializer from '@ember-data/serializer/json-api';
-
-export default class ApplicationSerializer extends JSONAPISerializer {
-}
diff --git a/ember-ui/mirage/config.js b/ember-ui/mirage/config.js
new file mode 100644
index 0000000..46b2015
--- /dev/null
+++ b/ember-ui/mirage/config.js
@@ -0,0 +1,31 @@
+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);
+  });
+}
diff --git a/ember-ui/mirage/scenarios/default.js b/ember-ui/mirage/scenarios/default.js
new file mode 100644
index 0000000..adb3af4
--- /dev/null
+++ b/ember-ui/mirage/scenarios/default.js
@@ -0,0 +1,9 @@
+export default function(/* server */) {
+
+  /*
+    Seed your development database using your factories.
+    This data will not be loaded in your tests.
+  */
+
+  // server.createList('post', 10);
+}
diff --git a/ember-ui/mirage/serializers/application.js b/ember-ui/mirage/serializers/application.js
new file mode 100644
index 0000000..6d47a36
--- /dev/null
+++ b/ember-ui/mirage/serializers/application.js
@@ -0,0 +1,4 @@
+import { JSONAPISerializer } from 'ember-cli-mirage';
+
+export default JSONAPISerializer.extend({
+});
diff --git a/ember-ui/package-lock.json b/ember-ui/package-lock.json
index 17b92c5..ff6bde5 100644
--- a/ember-ui/package-lock.json
+++ b/ember-ui/package-lock.json
@@ -1569,6 +1569,12 @@
       "integrity": "sha512-duAsm30uVK9jSysElCbLyU6QQYO2X9iLDLBIBUcCqck9qN1o3tK2qWiHbGK5d6g8E2AJ4H88UrfElkyaJlGrwg==",
       "dev": true
     },
+    "@miragejs/pretender-node-polyfill": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz",
+      "integrity": "sha512-M/BexG/p05C5lFfMunxo/QcgIJnMT2vDVCd00wNqK2ImZONIlEETZwWJu1QtLxtmYlSHlCFl3JNzp0tLe7OJ5g==",
+      "dev": true
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -7273,6 +7279,23 @@
       "integrity": "sha1-IMtop5D+D94kiN39jvu332/nZvI=",
       "dev": true
     },
+    "ember-cli-mirage": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/ember-cli-mirage/-/ember-cli-mirage-1.1.6.tgz",
+      "integrity": "sha512-xvW9ziv9JUKv9IA7SnmeCg0/pKiacro2Vg/kv8iqzFTRGMos51QrrsCI/2rXjAloGJM1SnaKL1TWUp25e76RVw==",
+      "dev": true,
+      "requires": {
+        "broccoli-file-creator": "^2.1.1",
+        "broccoli-funnel": "^2.0.1",
+        "broccoli-merge-trees": "^3.0.2",
+        "ember-auto-import": "^1.2.19",
+        "ember-cli-babel": "^7.5.0",
+        "ember-get-config": "^0.2.2",
+        "ember-inflector": "^2.0.0 || ^3.0.0",
+        "lodash-es": "^4.17.11",
+        "miragejs": "^0.1.31"
+      }
+    },
     "ember-cli-normalize-entity-name": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/ember-cli-normalize-entity-name/-/ember-cli-normalize-entity-name-1.0.0.tgz",
@@ -7658,6 +7681,163 @@
       "integrity": "sha512-B7wiurPgsxsSGzJuPFkpBWnaeuCu2PGpG2BjyrfA1VcL7//o+5RSnZqiCEY326y7qmxb2GoCgo0ft03KBU0rRw==",
       "dev": true
     },
+    "ember-get-config": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/ember-get-config/-/ember-get-config-0.2.4.tgz",
+      "integrity": "sha1-EYSSoqA9c+RgBO13eSiUICH+Hs0=",
+      "dev": true,
+      "requires": {
+        "broccoli-file-creator": "^1.1.1",
+        "ember-cli-babel": "^6.3.0"
+      },
+      "dependencies": {
+        "amd-name-resolver": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/amd-name-resolver/-/amd-name-resolver-1.2.0.tgz",
+          "integrity": "sha512-hlSTWGS1t6/xq5YCed7YALg7tKZL3rkl7UwEZ/eCIkn8JxmM6fU6Qs/1hwtjQqfuYxlffuUcgYEm0f5xP4YKaA==",
+          "dev": true,
+          "requires": {
+            "ensure-posix-path": "^1.0.1"
+          }
+        },
+        "babel-plugin-debug-macros": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-debug-macros/-/babel-plugin-debug-macros-0.2.0.tgz",
+          "integrity": "sha512-Wpmw4TbhR3Eq2t3W51eBAQSdKlr+uAyF0GI4GtPfMCD12Y4cIdpKC9l0RjNTH/P9isFypSqqewMPm7//fnZlNA==",
+          "dev": true,
+          "requires": {
+            "semver": "^5.3.0"
+          }
+        },
+        "broccoli-babel-transpiler": {
+          "version": "6.5.1",
+          "resolved": "https://registry.npmjs.org/broccoli-babel-transpiler/-/broccoli-babel-transpiler-6.5.1.tgz",
+          "integrity": "sha512-w6GcnkxvHcNCte5FcLGEG1hUdQvlfvSN/6PtGWU/otg69Ugk8rUk51h41R0Ugoc+TNxyeFG1opRt2RlA87XzNw==",
+          "dev": true,
+          "requires": {
+            "babel-core": "^6.26.0",
+            "broccoli-funnel": "^2.0.1",
+            "broccoli-merge-trees": "^2.0.0",
+            "broccoli-persistent-filter": "^1.4.3",
+            "clone": "^2.0.0",
+            "hash-for-dep": "^1.2.3",
+            "heimdalljs-logger": "^0.1.7",
+            "json-stable-stringify": "^1.0.0",
+            "rsvp": "^4.8.2",
+            "workerpool": "^2.3.0"
+          }
+        },
+        "broccoli-file-creator": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/broccoli-file-creator/-/broccoli-file-creator-1.2.0.tgz",
+          "integrity": "sha512-l9zthHg6bAtnOfRr/ieZ1srRQEsufMZID7xGYRW3aBDv3u/3Eux+Iawl10tAGYE5pL9YB4n5X4vxkp6iNOoZ9g==",
+          "dev": true,
+          "requires": {
+            "broccoli-plugin": "^1.1.0",
+            "mkdirp": "^0.5.1"
+          }
+        },
+        "broccoli-merge-trees": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/broccoli-merge-trees/-/broccoli-merge-trees-2.0.1.tgz",
+          "integrity": "sha512-WjaexJ+I8BxP5V5RNn6um/qDRSmKoiBC/QkRi79FT9ClHfldxRyCDs9mcV7mmoaPlsshmmPaUz5jdtcKA6DClQ==",
+          "dev": true,
+          "requires": {
+            "broccoli-plugin": "^1.3.0",
+            "merge-trees": "^1.0.1"
+          }
+        },
+        "broccoli-persistent-filter": {
+          "version": "1.4.6",
+          "resolved": "https://registry.npmjs.org/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz",
+          "integrity": "sha512-0RejLwoC95kv4kta8KAa+FmECJCK78Qgm8SRDEK7YyU0N9Cx6KpY3UCDy9WELl3mCXLN8TokNxc7/hp3lL4lfw==",
+          "dev": true,
+          "requires": {
+            "async-disk-cache": "^1.2.1",
+            "async-promise-queue": "^1.0.3",
+            "broccoli-plugin": "^1.0.0",
+            "fs-tree-diff": "^0.5.2",
+            "hash-for-dep": "^1.0.2",
+            "heimdalljs": "^0.2.1",
+            "heimdalljs-logger": "^0.1.7",
+            "mkdirp": "^0.5.1",
+            "promise-map-series": "^0.2.1",
+            "rimraf": "^2.6.1",
+            "rsvp": "^3.0.18",
+            "symlink-or-copy": "^1.0.1",
+            "walk-sync": "^0.3.1"
+          },
+          "dependencies": {
+            "rsvp": {
+              "version": "3.6.2",
+              "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.6.2.tgz",
+              "integrity": "sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw==",
+              "dev": true
+            }
+          }
+        },
+        "ember-cli-babel": {
+          "version": "6.18.0",
+          "resolved": "https://registry.npmjs.org/ember-cli-babel/-/ember-cli-babel-6.18.0.tgz",
+          "integrity": "sha512-7ceC8joNYxY2wES16iIBlbPSxwKDBhYwC8drU3ZEvuPDMwVv1KzxCNu1fvxyFEBWhwaRNTUxSCsEVoTd9nosGA==",
+          "dev": true,
+          "requires": {
+            "amd-name-resolver": "1.2.0",
+            "babel-plugin-debug-macros": "^0.2.0-beta.6",
+            "babel-plugin-ember-modules-api-polyfill": "^2.6.0",
+            "babel-plugin-transform-es2015-modules-amd": "^6.24.0",
+            "babel-polyfill": "^6.26.0",
+            "babel-preset-env": "^1.7.0",
+            "broccoli-babel-transpiler": "^6.5.0",
+            "broccoli-debug": "^0.6.4",
+            "broccoli-funnel": "^2.0.0",
+            "broccoli-source": "^1.1.0",
+            "clone": "^2.0.0",
+            "ember-cli-version-checker": "^2.1.2",
+            "semver": "^5.5.0"
+          }
+        },
+        "ember-cli-version-checker": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/ember-cli-version-checker/-/ember-cli-version-checker-2.2.0.tgz",
+          "integrity": "sha512-G+KtYIVlSOWGcNaTFHk76xR4GdzDLzAS4uxZUKdASuFX0KJE43C6DaqL+y3VTpUFLI2FIkAS6HZ4I1YBi+S3hg==",
+          "dev": true,
+          "requires": {
+            "resolve": "^1.3.3",
+            "semver": "^5.3.0"
+          }
+        },
+        "merge-trees": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/merge-trees/-/merge-trees-1.0.1.tgz",
+          "integrity": "sha1-zL5nRWl4f53vF/1G5lJfVwC70j4=",
+          "dev": true,
+          "requires": {
+            "can-symlink": "^1.0.0",
+            "fs-tree-diff": "^0.5.4",
+            "heimdalljs": "^0.2.1",
+            "heimdalljs-logger": "^0.1.7",
+            "rimraf": "^2.4.3",
+            "symlink-or-copy": "^1.0.0"
+          }
+        },
+        "rsvp": {
+          "version": "4.8.5",
+          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
+          "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
+          "dev": true
+        },
+        "workerpool": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-2.3.3.tgz",
+          "integrity": "sha512-L1ovlYHp6UObYqElXXpbd214GgbEKDED0d3sj7pRdFXjNkb2+un/AUcCkceHizO0IVI6SOGGncrcjozruCkRgA==",
+          "dev": true,
+          "requires": {
+            "object-assign": "4.1.1"
+          }
+        }
+      }
+    },
     "ember-inflector": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ember-inflector/-/ember-inflector-3.0.1.tgz",
@@ -9478,6 +9658,12 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "dev": true
     },
+    "fake-xml-http-request": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/fake-xml-http-request/-/fake-xml-http-request-2.1.1.tgz",
+      "integrity": "sha512-Kn2WYYS6cDBS5jq/voOfSGCA0TafOYAUPbEp8mUVpD/DVV5bQIDjlq+MLLvNUokkbTpjBVlLDaM5PnX+PwZMlw==",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
@@ -11328,6 +11514,12 @@
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
       "dev": true
     },
+    "inflected": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inflected/-/inflected-2.0.4.tgz",
+      "integrity": "sha512-HQPzFLTTUvwfeUH6RAGjD8cHS069mBqXG5n4qaxX7sJXBhVQrsGgF+0ZJGkSuN6a8pcUWB/GXStta11kKi/WvA==",
+      "dev": true
+    },
     "inflection": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.12.0.tgz",
@@ -12096,6 +12288,12 @@
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
       "dev": true
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==",
+      "dev": true
+    },
     "lodash._baseassign": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz",
@@ -12174,6 +12372,12 @@
       "integrity": "sha1-uo31+4QesKPoBEIysOJjqNxqKKI=",
       "dev": true
     },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "dev": true
+    },
     "lodash.castarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
@@ -12186,6 +12390,12 @@
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
+    "lodash.compact": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.compact/-/lodash.compact-3.0.1.tgz",
+      "integrity": "sha1-VAzjg3dFl1gHRx4WtKK6IeclbKU=",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-3.1.1.tgz",
@@ -12223,6 +12433,30 @@
       "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=",
       "dev": true
     },
+    "lodash.forin": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.forin/-/lodash.forin-4.4.0.tgz",
+      "integrity": "sha1-XT8grlZAEfvog4H32YlJyclRlzE=",
+      "dev": true
+    },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=",
+      "dev": true
+    },
+    "lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI=",
+      "dev": true
+    },
+    "lodash.invokemap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.invokemap/-/lodash.invokemap-4.6.0.tgz",
+      "integrity": "sha1-F0jNpdiw74NpxOs+xUwh/rofLWI=",
+      "dev": true
+    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -12235,6 +12469,36 @@
       "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
       "dev": true
     },
+    "lodash.isempty": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
+      "integrity": "sha1-b4bL7di+TsmHvpqvM8loTbGzHn4=",
+      "dev": true
+    },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
+      "dev": true
+    },
+    "lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==",
+      "dev": true
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=",
+      "dev": true
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
+      "dev": true
+    },
     "lodash.keys": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
@@ -12246,6 +12510,24 @@
         "lodash.isarray": "^3.0.0"
       }
     },
+    "lodash.lowerfirst": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/lodash.lowerfirst/-/lodash.lowerfirst-4.3.1.tgz",
+      "integrity": "sha1-3jx7EuAsZSSgBZwvbLfFxSZVoT0=",
+      "dev": true
+    },
+    "lodash.map": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
+      "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=",
+      "dev": true
+    },
+    "lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=",
+      "dev": true
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -12258,12 +12540,24 @@
       "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=",
       "dev": true
     },
+    "lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=",
+      "dev": true
+    },
     "lodash.restparam": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
       "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=",
       "dev": true
     },
+    "lodash.snakecase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
+      "integrity": "sha1-OdcUo1NXFHg3rv1ktdy7Fr7Nj40=",
+      "dev": true
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -12307,6 +12601,12 @@
       "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=",
       "dev": true
     },
+    "lodash.values": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.values/-/lodash.values-4.3.0.tgz",
+      "integrity": "sha1-o6bCsOvsxcLLocF+bmIP6BtT00c=",
+      "dev": true
+    },
     "log-symbols": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
@@ -12724,6 +13024,54 @@
         "yallist": "^3.0.0"
       }
     },
+    "miragejs": {
+      "version": "0.1.32",
+      "resolved": "https://registry.npmjs.org/miragejs/-/miragejs-0.1.32.tgz",
+      "integrity": "sha512-HVA79I/Ta3H9/uQ60XcsKyeiq9vGUN0JDyaC6XZrGnSBXxj2ZEZurrdkvYNXeYd2cJELD/f3750IjB0lRkXBgA==",
+      "dev": true,
+      "requires": {
+        "@miragejs/pretender-node-polyfill": "^0.1.0",
+        "inflected": "^2.0.4",
+        "lodash.assign": "^4.2.0",
+        "lodash.camelcase": "^4.3.0",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.compact": "^3.0.1",
+        "lodash.find": "^4.6.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.forin": "^4.4.0",
+        "lodash.get": "^4.4.2",
+        "lodash.has": "^4.5.2",
+        "lodash.invokemap": "^4.6.0",
+        "lodash.isempty": "^4.4.0",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.lowerfirst": "^4.3.1",
+        "lodash.map": "^4.6.0",
+        "lodash.mapvalues": "^4.6.0",
+        "lodash.pick": "^4.4.0",
+        "lodash.snakecase": "^4.1.1",
+        "lodash.uniq": "^4.5.0",
+        "lodash.uniqby": "^4.7.0",
+        "lodash.values": "^4.3.0",
+        "pretender": "3.1.0"
+      },
+      "dependencies": {
+        "lodash.assign": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+          "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
+          "dev": true
+        },
+        "lodash.flatten": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+          "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=",
+          "dev": true
+        }
+      }
+    },
     "mississippi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@@ -14056,6 +14404,17 @@
       "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
       "dev": true
     },
+    "pretender": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pretender/-/pretender-3.1.0.tgz",
+      "integrity": "sha512-BxCsLXzbD7LsHBF7t8phgDa9EBWxJEYR8YqvYgrwri/YHnm9r6EiDThqHumW5FdxHlk4F10/xT2rv24C929r1Q==",
+      "dev": true,
+      "requires": {
+        "fake-xml-http-request": "^2.1.1",
+        "route-recognizer": "^0.3.3",
+        "whatwg-fetch": "^3.0.0"
+      }
+    },
     "pretty-hrtime": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
@@ -14812,6 +15171,12 @@
         "estree-walker": "^0.6.1"
       }
     },
+    "route-recognizer": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.3.4.tgz",
+      "integrity": "sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==",
+      "dev": true
+    },
     "rsvp": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.6.2.tgz",
@@ -17197,6 +17562,12 @@
         "iconv-lite": "0.4.24"
       }
     },
+    "whatwg-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==",
+      "dev": true
+    },
     "whatwg-mimetype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
diff --git a/ember-ui/package.json b/ember-ui/package.json
index 54d3bb4..fdf6665 100644
--- a/ember-ui/package.json
+++ b/ember-ui/package.json
@@ -31,6 +31,7 @@
     "ember-cli-dependency-checker": "^3.1.0",
     "ember-cli-htmlbars": "^4.0.0",
     "ember-cli-inject-live-reload": "^2.0.1",
+    "ember-cli-mirage": "^1.1.6",
     "ember-cli-postcss": "^5.0.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-uglify": "^3.0.0",
diff --git a/ember-ui/tests/integration/components/header-nav-link-test.js b/ember-ui/tests/integration/components/header-nav-link-test.js
index 75e7585..8add06d 100644
--- a/ember-ui/tests/integration/components/header-nav-link-test.js
+++ b/ember-ui/tests/integration/components/header-nav-link-test.js
@@ -6,21 +6,14 @@ import { hbs } from 'ember-cli-htmlbars';
 module('Integration | Component | header-nav-link', function(hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
-    await render(hbs`<HeaderNavLink />`);
-
-    assert.equal(this.element.textContent.trim(), '');
-
-    // Template block usage:
+  test('it renders link with href', async function(assert) {
     await render(hbs`
-      <HeaderNavLink>
-        template block text
+      <HeaderNavLink @href="foo">
+        bar
       </HeaderNavLink>
     `);
 
-    assert.equal(this.element.textContent.trim(), 'template block text');
+    assert.dom('[data-test-id=header-nav-link]').hasAttribute('href', 'foo');
+    assert.dom('[data-test-id=header-nav-link]').includesText('bar');
   });
 });
diff --git a/ember-ui/tests/integration/components/header-nav-test.js b/ember-ui/tests/integration/components/header-nav-test.js
index 91deec9..710d803 100644
--- a/ember-ui/tests/integration/components/header-nav-test.js
+++ b/ember-ui/tests/integration/components/header-nav-test.js
@@ -1,26 +1,40 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 
 module('Integration | Component | header-nav', function(hooks) {
   setupRenderingTest(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 branding', async function(assert) {
     await render(hbs`<HeaderNav />`);
 
-    assert.equal(this.element.textContent.trim(), '');
+    assert.dom('[data-test-id=branding-link]').hasTagName('a');
+    assert.dom('[data-test-id=branding-link]').includesText('Sortable Recipes');
+  });
 
-    // Template block usage:
-    await render(hbs`
-      <HeaderNav>
-        template block text
-      </HeaderNav>
-    `);
+  test('it renders fork link', async function(assert) {
+    await render(hbs`<HeaderNav />`);
 
-    assert.equal(this.element.textContent.trim(), 'template block text');
+    assert.dom('[data-test-id=fork-link]').hasTagName('a');
+    assert.dom('[data-test-id=fork-link]').includesText('Fork');
+  });
+
+  test('it renders links', async function(assert) {
+    await render(hbs`<HeaderNav />`);
+
+    assert.dom('[data-test-id=nav-links] a').exists();
+  });
+
+  test('it can toggle link visibility', async function(assert) {
+    await render(hbs`<HeaderNav />`);
+
+    assert.dom('[data-test-id=nav-links]').hasClass('hidden');
+
+    await click('[data-test-id=toggle-menu]');
+    assert.dom('[data-test-id=nav-links]').doesNotHaveClass('hidden');
+
+    await click('[data-test-id=toggle-menu]');
+    assert.dom('[data-test-id=nav-links]').hasClass('hidden');
   });
 });
diff --git a/ember-ui/tests/integration/components/loading-indicator-test.js b/ember-ui/tests/integration/components/loading-indicator-test.js
index 3ff8544..c1b252c 100644
--- a/ember-ui/tests/integration/components/loading-indicator-test.js
+++ b/ember-ui/tests/integration/components/loading-indicator-test.js
@@ -7,20 +7,9 @@ module('Integration | Component | loading-indicator', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
     await render(hbs`<LoadingIndicator />`);
 
-    assert.equal(this.element.textContent.trim(), '');
-
-    // Template block usage:
-    await render(hbs`
-      <LoadingIndicator>
-        template block text
-      </LoadingIndicator>
-    `);
-
-    assert.equal(this.element.textContent.trim(), 'template block text');
+    assert.dom('[data-test-id=loading-indicator]').hasTagName('svg');
+    assert.dom('[data-test-id=loading-indicator] animate').exists();
   });
 });
diff --git a/ember-ui/tests/integration/components/meal-tag-test.js b/ember-ui/tests/integration/components/meal-tag-test.js
index f6599db..5ac4b85 100644
--- a/ember-ui/tests/integration/components/meal-tag-test.js
+++ b/ember-ui/tests/integration/components/meal-tag-test.js
@@ -6,21 +6,11 @@ import { hbs } from 'ember-cli-htmlbars';
 module('Integration | Component | meal-tag', function(hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
-    await render(hbs`<MealTag />`);
-
-    assert.equal(this.element.textContent.trim(), '');
-
-    // Template block usage:
+  test('it renders with hashtag', async function(assert) {
     await render(hbs`
-      <MealTag>
-        template block text
-      </MealTag>
+      <MealTag>foo</MealTag>
     `);
 
-    assert.equal(this.element.textContent.trim(), 'template block text');
+    assert.dom('[data-test-id="meal-tag"]').includesText('#foo');
   });
 });
diff --git a/ember-ui/tests/integration/components/recipe-add-test.js b/ember-ui/tests/integration/components/recipe-add-test.js
index fcdd6bc..2d87344 100644
--- a/ember-ui/tests/integration/components/recipe-add-test.js
+++ b/ember-ui/tests/integration/components/recipe-add-test.js
@@ -1,26 +1,16 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+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) {
   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) { ... });
-
     await render(hbs`<RecipeAdd />`);
 
-    assert.equal(this.element.textContent.trim(), '');
-
-    // Template block usage:
-    await render(hbs`
-      <RecipeAdd>
-        template block text
-      </RecipeAdd>
-    `);
-
-    assert.equal(this.element.textContent.trim(), 'template block text');
+    await click('[data-test-id=recipe-add-button]');
   });
 });
diff --git a/ember-ui/tests/unit/serializers/application-test.js b/ember-ui/tests/unit/serializers/application-test.js
deleted file mode 100644
index d197afe..0000000
--- a/ember-ui/tests/unit/serializers/application-test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { module, test } from 'qunit';
-import { setupTest } from 'ember-qunit';
-
-module('Unit | Serializer | application', function(hooks) {
-  setupTest(hooks);
-
-  // Replace this with your real tests.
-  test('it exists', function(assert) {
-    let store = this.owner.lookup('service:store');
-    let serializer = store.serializerFor('application');
-
-    assert.ok(serializer);
-  });
-
-  test('it serializes records', function(assert) {
-    let store = this.owner.lookup('service:store');
-    let record = store.createRecord('application', {});
-
-    let serializedRecord = record.serialize();
-
-    assert.ok(serializedRecord);
-  });
-});