github.com/emate/nomad@v0.8.2-wo-binpacking/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    onConfirm: sinon.spy(),
    17    onCancel: sinon.spy(),
    18  });
    19  
    20  const commonTemplate = hbs`
    21    {{two-step-button
    22      idleText=idleText
    23      cancelText=cancelText
    24      confirmText=confirmText
    25      confirmationMessage=confirmationMessage
    26      onConfirm=onConfirm
    27      onCancel=onCancel}}
    28  `;
    29  
    30  test('presents as a button in the idle state', function(assert) {
    31    const props = commonProperties();
    32    this.setProperties(props);
    33    this.render(commonTemplate);
    34  
    35    assert.ok(find('[data-test-idle-button]'), 'Idle button is rendered');
    36    assert.equal(
    37      find('[data-test-idle-button]').textContent.trim(),
    38      props.idleText,
    39      'Button is labeled correctly'
    40    );
    41  
    42    assert.notOk(find('[data-test-cancel-button]'), 'No cancel button yet');
    43    assert.notOk(find('[data-test-confirm-button]'), 'No confirm button yet');
    44    assert.notOk(find('[data-test-confirmation-message]'), 'No confirmation message yet');
    45  });
    46  
    47  test('clicking the idle state button transitions into the promptForConfirmation state', function(assert) {
    48    const props = commonProperties();
    49    this.setProperties(props);
    50    this.render(commonTemplate);
    51  
    52    click('[data-test-idle-button]');
    53  
    54    return wait().then(() => {
    55      assert.ok(find('[data-test-cancel-button]'), 'Cancel button is rendered');
    56      assert.equal(
    57        find('[data-test-cancel-button]').textContent.trim(),
    58        props.cancelText,
    59        'Button is labeled correctly'
    60      );
    61  
    62      assert.ok(find('[data-test-confirm-button]'), 'Confirm button is rendered');
    63      assert.equal(
    64        find('[data-test-confirm-button]').textContent.trim(),
    65        props.confirmText,
    66        'Button is labeled correctly'
    67      );
    68  
    69      assert.equal(
    70        find('[data-test-confirmation-message]').textContent.trim(),
    71        props.confirmationMessage,
    72        'Confirmation message is shown'
    73      );
    74  
    75      assert.notOk(find('[data-test-idle-button]'), 'No more idle button');
    76    });
    77  });
    78  
    79  test('canceling in the promptForConfirmation state calls the onCancel hook and resets to the idle state', function(assert) {
    80    const props = commonProperties();
    81    this.setProperties(props);
    82    this.render(commonTemplate);
    83  
    84    click('[data-test-idle-button]');
    85  
    86    return wait().then(() => {
    87      click('[data-test-cancel-button]');
    88  
    89      return wait().then(() => {
    90        assert.ok(props.onCancel.calledOnce, 'The onCancel hook fired');
    91        assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
    92      });
    93    });
    94  });
    95  
    96  test('confirming the promptForConfirmation state calls the onConfirm hook and resets to the idle state', function(assert) {
    97    const props = commonProperties();
    98    this.setProperties(props);
    99    this.render(commonTemplate);
   100  
   101    click('[data-test-idle-button]');
   102  
   103    return wait().then(() => {
   104      click('[data-test-confirm-button]');
   105  
   106      return wait().then(() => {
   107        assert.ok(props.onConfirm.calledOnce, 'The onConfirm hook fired');
   108        assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
   109      });
   110    });
   111  });