diff --git a/ui/app/templates/components/job-page/parts/latest-deployment.hbs b/ui/app/templates/components/job-page/parts/latest-deployment.hbs
index 04bb69caa34..a2a3aef3e6e 100644
--- a/ui/app/templates/components/job-page/parts/latest-deployment.hbs
+++ b/ui/app/templates/components/job-page/parts/latest-deployment.hbs
@@ -14,6 +14,7 @@
         </span>
         {{#if job.latestDeployment.requiresPromotion}}
           <button
+            data-test-promote-canary
             type="button"
             class="button is-warning is-small pull-right {{if promote.isRunning "is-loading"}}"
             disabled={{promote.isRunning}}
diff --git a/ui/mirage/config.js b/ui/mirage/config.js
index d3b2a977831..b485cc52acc 100644
--- a/ui/mirage/config.js
+++ b/ui/mirage/config.js
@@ -162,6 +162,9 @@ export default function() {
   });
 
   this.get('/deployment/:id');
+  this.post('/deployment/promote/:id', function() {
+    return new Response(204, {}, '');
+  });
 
   this.get('/job/:id/evaluations', function({ evaluations }, { params }) {
     return this.serialize(evaluations.where({ jobId: params.id }));
diff --git a/ui/mirage/factories/deployment-task-group-summary.js b/ui/mirage/factories/deployment-task-group-summary.js
index addc4c8aa48..b08f02fa87a 100644
--- a/ui/mirage/factories/deployment-task-group-summary.js
+++ b/ui/mirage/factories/deployment-task-group-summary.js
@@ -8,6 +8,8 @@ export default Factory.extend({
   autoRevert: () => Math.random() > 0.5,
   promoted: () => Math.random() > 0.5,
 
+  requiresPromotion: false,
+
   requireProgressBy: () => faker.date.past(0.5 / 365, REF_TIME),
 
   desiredTotal: faker.random.number({ min: 1, max: 10 }),
diff --git a/ui/mirage/factories/deployment.js b/ui/mirage/factories/deployment.js
index 8f26f086f72..e6800b0a4ee 100644
--- a/ui/mirage/factories/deployment.js
+++ b/ui/mirage/factories/deployment.js
@@ -27,6 +27,8 @@ export default Factory.extend({
       server.create('deployment-task-group-summary', {
         deployment,
         name: server.db.taskGroups.find(id).name,
+        desiredCanaries: 1,
+        promoted: false,
       })
     );
 
diff --git a/ui/tests/integration/job-page/service-test.js b/ui/tests/integration/job-page/service-test.js
index aef698a149c..981e534b936 100644
--- a/ui/tests/integration/job-page/service-test.js
+++ b/ui/tests/integration/job-page/service-test.js
@@ -1,16 +1,20 @@
 import { getOwner } from '@ember/application';
 import { assign } from '@ember/polyfills';
 import { test, moduleForComponent } from 'ember-qunit';
+import { click, find } from 'ember-native-dom-helpers';
 import wait from 'ember-test-helpers/wait';
 import hbs from 'htmlbars-inline-precompile';
 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
 import { stopJob, expectStopError, expectDeleteRequest } from './helpers';
 import Job from 'nomad-ui/tests/pages/jobs/detail';
+import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
+import { later } from '@ember/runloop';
 
 moduleForComponent('job-page/service', 'Integration | Component | job-page/service', {
   integration: true,
   beforeEach() {
     Job.setContext(this);
+    fragmentSerializerInitializer(getOwner(this));
     window.localStorage.clear();
     this.store = getOwner(this).lookup('service:store');
     this.server = startMirage();
@@ -165,3 +169,77 @@ test('Recent allocations shows an empty message when the job has no allocations'
       );
     });
 });
+
+test('Active deployment can be promoted', function(assert) {
+  let job;
+  let deployment;
+
+  this.server.create('node');
+  const mirageJob = makeMirageJob(this.server, { activeDeployment: true });
+
+  this.store.findAll('job');
+
+  return wait()
+    .then(() => {
+      job = this.store.peekAll('job').findBy('plainId', mirageJob.id);
+      deployment = job.get('latestDeployment');
+
+      this.setProperties(commonProperties(job));
+      this.render(commonTemplate);
+
+      return wait();
+    })
+    .then(() => {
+      click('[data-test-promote-canary]');
+      return wait();
+    })
+    .then(() => {
+      const requests = this.server.pretender.handledRequests;
+      assert.ok(
+        requests
+          .filterBy('method', 'POST')
+          .findBy('url', `/v1/deployment/promote/${deployment.get('id')}`),
+        'A promote POST request was made'
+      );
+    });
+});
+
+test('When promoting the active deployment fails, an error is shown', function(assert) {
+  this.server.pretender.post('/v1/deployment/promote/:id', () => [403, {}, null]);
+
+  let job;
+
+  this.server.create('node');
+  const mirageJob = makeMirageJob(this.server, { activeDeployment: true });
+
+  this.store.findAll('job');
+
+  return wait()
+    .then(() => {
+      job = this.store.peekAll('job').findBy('plainId', mirageJob.id);
+
+      this.setProperties(commonProperties(job));
+      this.render(commonTemplate);
+
+      return wait();
+    })
+    .then(() => {
+      click('[data-test-promote-canary]');
+      return wait();
+    })
+    .then(() => {
+      assert.equal(
+        find('[data-test-job-error-title]').textContent,
+        'Could Not Promote Deployment',
+        'Appropriate error is shown'
+      );
+      assert.ok(
+        find('[data-test-job-error-body]').textContent.includes('ACL'),
+        'The error message mentions ACLs'
+      );
+
+      click('[data-test-job-error-close]');
+      assert.notOk(find('[data-test-job-error-title]'), 'Error message is dismissable');
+      return wait();
+    });
+});