Test coverage for the two-step-button component

ui/app/templates/components/job-page/service.hbs

@@ -9,6 +9,14 @@
   <h1 class="title">
     {{job.name}}
     <span class="bumper-left tag {{job.statusClass}}" data-test-job-status>{{job.status}}</span>
+    {{#if (not (eq job.status "dead"))}}
+      {{two-step-button
+        idleText="Stop"
+        cancelText="Cancel"
+        confirmText="Yes, Stop"
+        confirmationMessage="Are you sure you want to stop this job?"
+        onConfirm=(action "stopJob")}}
+    {{/if}}
   </h1>
 
   <div class="boxed-section job-stats">

ui/app/templates/components/two-step-button.hbs

@@ -1,16 +1,16 @@
 {{#if isIdle}}
-  <button class="button is-warning is-small is-inline" onclick={{action "promptForConfirmation"}}>
+  <button data-test-idle-button class="button is-warning is-small is-inline" onclick={{action "promptForConfirmation"}}>
     {{idleText}}
   </button>
 {{else if isPendingConfirmation}}
-  <span class="confirmation-text">{{confirmationMessage}}</span>
-  <button class="button is-dark is-outlined is-small is-inline" onclick={{action (queue
+  <span data-test-confirmation-message class="confirmation-text">{{confirmationMessage}}</span>
+  <button data-test-cancel-button class="button is-dark is-outlined is-small is-inline" onclick={{action (queue
     (action "setToIdle")
     (action onCancel)
   )}}>
     {{cancelText}}
   </button>
-  <button class="button is-danger is-small is-inline" onclick={{action (queue
+  <button data-test-confirm-button class="button is-danger is-small is-inline" onclick={{action (queue
     (action "setToIdle")
     (action onConfirm)
   )}}>

ui/tests/integration/two-step-button-test.js

@@ -0,0 +1,111 @@
+import { find, click } from 'ember-native-dom-helpers';
+import { test, moduleForComponent } from 'ember-qunit';
+import wait from 'ember-test-helpers/wait';
+import hbs from 'htmlbars-inline-precompile';
+import sinon from 'sinon';
+
+moduleForComponent('two-step-button', 'Integration | Component | two step button', {
+  integration: true,
+});
+
+const commonProperties = () => ({
+  idleText: 'Idle State Button',
+  cancelText: 'Cancel Action',
+  confirmText: 'Confirm Action',
+  confirmationMessage: 'Are you certain',
+  onConfirm: sinon.spy(),
+  onCancel: sinon.spy(),
+});
+
+const commonTemplate = hbs`
+  {{two-step-button
+    idleText=idleText
+    cancelText=cancelText
+    confirmText=confirmText
+    confirmationMessage=confirmationMessage
+    onConfirm=onConfirm
+    onCancel=onCancel}}
+`;
+
+test('presents as a button in the idle state', function(assert) {
+  const props = commonProperties();
+  this.setProperties(props);
+  this.render(commonTemplate);
+
+  assert.ok(find('[data-test-idle-button]'), 'Idle button is rendered');
+  assert.equal(
+    find('[data-test-idle-button]').textContent.trim(),
+    props.idleText,
+    'Button is labeled correctly'
+  );
+
+  assert.notOk(find('[data-test-cancel-button]'), 'No cancel button yet');
+  assert.notOk(find('[data-test-confirm-button]'), 'No confirm button yet');
+  assert.notOk(find('[data-test-confirmation-message]'), 'No confirmation message yet');
+});
+
+test('clicking the idle state button transitions into the promptForConfirmation state', function(assert) {
+  const props = commonProperties();
+  this.setProperties(props);
+  this.render(commonTemplate);
+
+  click('[data-test-idle-button]');
+
+  return wait().then(() => {
+    assert.ok(find('[data-test-cancel-button]'), 'Cancel button is rendered');
+    assert.equal(
+      find('[data-test-cancel-button]').textContent.trim(),
+      props.cancelText,
+      'Button is labeled correctly'
+    );
+
+    assert.ok(find('[data-test-confirm-button]'), 'Confirm button is rendered');
+    assert.equal(
+      find('[data-test-confirm-button]').textContent.trim(),
+      props.confirmText,
+      'Button is labeled correctly'
+    );
+
+    assert.equal(
+      find('[data-test-confirmation-message]').textContent.trim(),
+      props.confirmationMessage,
+      'Confirmation message is shown'
+    );
+
+    assert.notOk(find('[data-test-idle-button]'), 'No more idle button');
+  });
+});
+
+test('canceling in the promptForConfirmation state calls the onCancel hook and resets to the idle state', function(assert) {
+  const props = commonProperties();
+  this.setProperties(props);
+  this.render(commonTemplate);
+
+  click('[data-test-idle-button]');
+
+  return wait().then(() => {
+    click('[data-test-cancel-button]');
+
+    return wait().then(() => {
+      assert.ok(props.onCancel.calledOnce, 'The onCancel hook fired');
+      assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
+    });
+  });
+});
+
+test('confirming the promptForConfirmation state calls the onConfirm hook and resets to the idle state', function(assert) {
+  const props = commonProperties();
+  this.setProperties(props);
+  this.render(commonTemplate);
+
+  click('[data-test-idle-button]');
+
+  return wait().then(() => {
+    click('[data-test-confirm-button]');
+
+    return wait().then(() => {
+      assert.ok(props.onConfirm.calledOnce, 'The onConfirm hook fired');
+      assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
+    });
+  });
+});