github.com/zoomfoo/nomad@v0.8.5-0.20180907175415-f28fd3a1a056/ui/tests/integration/two-step-button-test.js (about)

     1  import { find, click } from 'ember-native-dom-helpers';
     2  import { test, moduleForComponent } from 'ember-qunit';
     3  import wait from 'ember-test-helpers/wait';
     4  import hbs from 'htmlbars-inline-precompile';
     5  import sinon from 'sinon';
     6  
     7  moduleForComponent('two-step-button', 'Integration | Component | two step button', {
     8    integration: true,
     9  });
    10  
    11  const commonProperties = () => ({
    12    idleText: 'Idle State Button',
    13    cancelText: 'Cancel Action',
    14    confirmText: 'Confirm Action',
    15    confirmationMessage: 'Are you certain',
    16    awaitingConfirmation: false,
    17    onConfirm: sinon.spy(),
    18    onCancel: sinon.spy(),
    19  });
    20  
    21  const commonTemplate = hbs`
    22    {{two-step-button
    23      idleText=idleText
    24      cancelText=cancelText
    25      confirmText=confirmText
    26      confirmationMessage=confirmationMessage
    27      awaitingConfirmation=awaitingConfirmation
    28      onConfirm=onConfirm
    29      onCancel=onCancel}}
    30  `;
    31  
    32  test('presents as a button in the idle state', function(assert) {
    33    const props = commonProperties();
    34    this.setProperties(props);
    35    this.render(commonTemplate);
    36  
    37    assert.ok(find('[data-test-idle-button]'), 'Idle button is rendered');
    38    assert.equal(
    39      find('[data-test-idle-button]').textContent.trim(),
    40      props.idleText,
    41      'Button is labeled correctly'
    42    );
    43  
    44    assert.notOk(find('[data-test-cancel-button]'), 'No cancel button yet');
    45    assert.notOk(find('[data-test-confirm-button]'), 'No confirm button yet');
    46    assert.notOk(find('[data-test-confirmation-message]'), 'No confirmation message yet');
    47  });
    48  
    49  test('clicking the idle state button transitions into the promptForConfirmation state', function(assert) {
    50    const props = commonProperties();
    51    this.setProperties(props);
    52    this.render(commonTemplate);
    53  
    54    click('[data-test-idle-button]');
    55  
    56    return wait().then(() => {
    57      assert.ok(find('[data-test-cancel-button]'), 'Cancel button is rendered');
    58      assert.equal(
    59        find('[data-test-cancel-button]').textContent.trim(),
    60        props.cancelText,
    61        'Button is labeled correctly'
    62      );
    63  
    64      assert.ok(find('[data-test-confirm-button]'), 'Confirm button is rendered');
    65      assert.equal(
    66        find('[data-test-confirm-button]').textContent.trim(),
    67        props.confirmText,
    68        'Button is labeled correctly'
    69      );
    70  
    71      assert.equal(
    72        find('[data-test-confirmation-message]').textContent.trim(),
    73        props.confirmationMessage,
    74        'Confirmation message is shown'
    75      );
    76  
    77      assert.notOk(find('[data-test-idle-button]'), 'No more idle button');
    78    });
    79  });
    80  
    81  test('canceling in the promptForConfirmation state calls the onCancel hook and resets to the idle state', function(assert) {
    82    const props = commonProperties();
    83    this.setProperties(props);
    84    this.render(commonTemplate);
    85  
    86    click('[data-test-idle-button]');
    87  
    88    return wait().then(() => {
    89      click('[data-test-cancel-button]');
    90  
    91      return wait().then(() => {
    92        assert.ok(props.onCancel.calledOnce, 'The onCancel hook fired');
    93        assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
    94      });
    95    });
    96  });
    97  
    98  test('confirming the promptForConfirmation state calls the onConfirm hook and resets to the idle state', function(assert) {
    99    const props = commonProperties();
   100    this.setProperties(props);
   101    this.render(commonTemplate);
   102  
   103    click('[data-test-idle-button]');
   104  
   105    return wait().then(() => {
   106      click('[data-test-confirm-button]');
   107  
   108      return wait().then(() => {
   109        assert.ok(props.onConfirm.calledOnce, 'The onConfirm hook fired');
   110        assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
   111      });
   112    });
   113  });
   114  
   115  test('when awaitingConfirmation is true, the cancel and submit buttons are disabled and the submit button is loading', function(assert) {
   116    const props = commonProperties();
   117    props.awaitingConfirmation = true;
   118    this.setProperties(props);
   119    this.render(commonTemplate);
   120  
   121    click('[data-test-idle-button]');
   122  
   123    return wait().then(() => {
   124      assert.ok(
   125        find('[data-test-cancel-button]').hasAttribute('disabled'),
   126        'The cancel button is disabled'
   127      );
   128      assert.ok(
   129        find('[data-test-confirm-button]').hasAttribute('disabled'),
   130        'The confirm button is disabled'
   131      );
   132      assert.ok(
   133        find('[data-test-confirm-button]').classList.contains('is-loading'),
   134        'The confirm button is in a loading state'
   135      );
   136    });
   137  });