diff --git a/ui/app/components/placement-failure.js b/ui/app/components/placement-failure.js
new file mode 100644
index 000000000..00d6fa37e
--- /dev/null
+++ b/ui/app/components/placement-failure.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({});
diff --git a/ui/app/templates/components/placement-failure.hbs b/ui/app/templates/components/placement-failure.hbs
new file mode 100644
index 000000000..5066f2d32
--- /dev/null
+++ b/ui/app/templates/components/placement-failure.hbs
@@ -0,0 +1,40 @@
+{{#if taskGroup.placementFailures}}
+  {{#with taskGroup.placementFailures as |failures|}}
+    <h3 class="title is-5">
+      {{taskGroup.name}}
+      <span class="badge is-light">{{inc failures.coalescedFailures}} unplaced</span>
+    </h3>
+    <ul class="simple-list">
+      {{#if (eq failures.nodesEvaluated 0)}}
+        <li>No nodes were eligible for evaluation</li>
+      {{/if}}
+      {{#each-in failures.nodesAvailable as |datacenter available|}}
+        {{#if (eq available 0)}}
+          <li>No nodes are available in datacenter {{datacenter}}</li>
+        {{/if}}
+      {{/each-in}}
+      {{#each-in failures.classFiltered as |class count|}}
+        <li>Class {{class}} filtered {{count}} {{pluralize "node" count}}</li>
+      {{/each-in}}
+      {{#each-in failures.constraintFiltered as |constraint count|}}
+        <li>Constraint <code>{{constraint}}</code> filtered {{count}} {{pluralize "node" count}}</li>
+      {{/each-in}}
+      {{#if failures.nodesExhausted}}
+        <li>Resources exhausted on {{failures.nodesExhausted}} {{pluralize "node" failures.nodesExhausted}}</li>
+      {{/if}}
+      {{#each-in failures.classExhausted as |class count|}}
+        <li>Class {{class}} exhausted on {{count}} {{pluralize "node" count}}</li>
+      {{/each-in}}
+      {{#each-in failures.dimensionExhausted as |dimension count|}}
+        <li>Dimension {{dimension}} exhausted on {{count}} {{pluralize "node" count}}</li>
+      {{/each-in}}
+      {{#each-in failures.quotaExhausted as |quota dimension|}}
+        <li>Quota limit hit {{dimension}}</li>
+      {{/each-in}}
+      {{#each-in failures.scores as |name score|}}
+        <li>Score {{name}} = {{score}}</li>
+      {{/each-in}}
+    </ul>
+  {{/with}}
+{{/if}}
+
diff --git a/ui/app/templates/jobs/job/index.hbs b/ui/app/templates/jobs/job/index.hbs
index 8a0ac1c0d..347b7081a 100644
--- a/ui/app/templates/jobs/job/index.hbs
+++ b/ui/app/templates/jobs/job/index.hbs
@@ -56,45 +56,7 @@
         </div>
         <div class="boxed-section-body">
           {{#each model.taskGroups as |taskGroup|}}
-            {{#if taskGroup.placementFailures}}
-              {{#with taskGroup.placementFailures as |failures|}}
-                  <h3 class="title is-5" data-test-placement-failure-task-group>
-                    {{taskGroup.name}}
-                    <span class="badge is-light">{{inc failures.coalescedFailures}} unplaced</span>
-                  </h3>
-                  <ul class="simple-list">
-                    {{#if (eq failures.nodesEvaluated 0)}}
-                      <li>No nodes were eligible for evaluation</li>
-                    {{/if}}
-                    {{#each-in failures.nodesAvailable as |datacenter available|}}
-                      {{#if (eq available 0)}}
-                        <li>No nodes are available in datacenter {{datacenter}}</li>
-                      {{/if}}
-                    {{/each-in}}
-                    {{#each-in failures.classFiltered as |class count|}}
-                      <li>Class {{class}} filtered {{count}} {{pluralize "node" count}}</li>
-                    {{/each-in}}
-                    {{#each-in failures.constraintFiltered as |constraint count|}}
-                      <li>Constraint <code>{{constraint}}</code> filtered {{count}} {{pluralize "node" count}}</li>
-                    {{/each-in}}
-                    {{#if failures.nodesExhausted}}
-                      <li>Resources exhausted on {{failures.nodesExhausted}} {{pluralize "node" failures.nodesExhausted}}</li>
-                    {{/if}}
-                    {{#each-in failures.classExhausted as |class count|}}
-                      <li>Class {{class}} exhausted on {{count}} {{pluralize "node" count}}</li>
-                    {{/each-in}}
-                    {{#each-in failures.dimensionExhausted as |dimension count|}}
-                      <li>Dimension {{dimension}} exhausted on {{count}} {{pluralize "node" count}}</li>
-                    {{/each-in}}
-                    {{#each-in failures.quotaExhausted as |quota dimension|}}
-                      <li>Quota limit hit {{dimension}}</li>
-                    {{/each-in}}
-                    {{#each-in failures.scores as |name score|}}
-                      <li>Score {{name}} = {{score}}</li>
-                    {{/each-in}}
-                  </ul>
-              {{/with}}
-            {{/if}}
+            {{#placement-failure taskGroup=taskGroup}}{{/placement-failure}}
           {{/each}}
         </div>
       </div>
diff --git a/ui/tests/integration/cleanWhitespace.js b/ui/tests/integration/cleanWhitespace.js
new file mode 100644
index 000000000..c589984b6
--- /dev/null
+++ b/ui/tests/integration/cleanWhitespace.js
@@ -0,0 +1,6 @@
+export default function cleanWhitespace(string) {
+  return string
+    .replace(/\n/g, '')
+    .replace(/ +/g, ' ')
+    .trim();
+}
diff --git a/ui/tests/integration/job-diff-test.js b/ui/tests/integration/job-diff-test.js
index d1821e452..f9fac114c 100644
--- a/ui/tests/integration/job-diff-test.js
+++ b/ui/tests/integration/job-diff-test.js
@@ -1,6 +1,7 @@
 import { findAll, find } from 'ember-native-dom-helpers';
 import { test, moduleForComponent } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
+import cleanWhitespace from './cleanWhitespace';
 
 moduleForComponent('job-diff', 'Integration | Component | job diff', {
   integration: true,
@@ -192,10 +193,3 @@ function field(name, type, newVal, oldVal) {
     Name: name,
   };
 }
-
-function cleanWhitespace(string) {
-  return string
-    .replace(/\n/g, '')
-    .replace(/ +/g, ' ')
-    .trim();
-}
diff --git a/ui/tests/integration/placement-failure-test.js b/ui/tests/integration/placement-failure-test.js
new file mode 100644
index 000000000..712c60696
--- /dev/null
+++ b/ui/tests/integration/placement-failure-test.js
@@ -0,0 +1,75 @@
+import { find } from 'ember-native-dom-helpers';
+import { test, moduleForComponent } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import cleanWhitespace from './cleanWhitespace';
+
+moduleForComponent('placement-failure', 'Integration | Component | placement failure', {
+  integration: true,
+});
+
+const commonTemplate = hbs`
+  <div class="boxed-section">
+    <div class="boxed-section-body">
+      {{#placement-failure taskGroup=taskGroup}}{{/placement-failure}}
+    </div>
+  </div>
+`;
+
+const name = 'My Name';
+const failures = 10;
+
+test('placement failure report', function(assert) {
+  this.set('taskGroup', {
+    name: name,
+    placementFailures: createFailures(failures),
+  });
+  this.render(commonTemplate);
+  assert.equal(
+    cleanWhitespace(find('.title').textContent),
+    `${name} ${failures} unplaced`,
+    'Title is rendered correctly with a count of unplaced'
+  );
+});
+
+function createFailures(count) {
+  return {
+    coalescedFailures: count,
+    nodesEvaluated: 0,
+    nodesAvailable: [
+      {
+        datacenter: 0,
+      },
+    ],
+    classFiltered: [
+      {
+        filtered: 1,
+      },
+    ],
+    constraintFiltered: [
+      {
+        'prop = val': 1,
+      },
+    ],
+    nodesExhausted: 3,
+    classExhausted: [
+      {
+        class: 3,
+      },
+    ],
+    dimensionExhausted: [
+      {
+        iops: 3,
+      },
+    ],
+    quotaExhausted: [
+      {
+        quota: 'dimension',
+      },
+    ],
+    scores: [
+      {
+        name: 3,
+      },
+    ],
+  };
+}