github.com/ferranbt/nomad@v0.9.3-0.20190607002617-85c449b7667c/ui/tests/integration/two-step-button-test.js (about)

     1  import { find, click } from 'ember-native-dom-helpers';
     2  import { module, test } from 'qunit';
     3  import { setupRenderingTest } from 'ember-qunit';
     4  import { render, settled } from '@ember/test-helpers';
     5  import hbs from 'htmlbars-inline-precompile';
     6  import sinon from 'sinon';
     7  import { create } from 'ember-cli-page-object';
     8  import twoStepButton from 'nomad-ui/tests/pages/components/two-step-button';
     9  
    10  const TwoStepButton = create(twoStepButton());
    11  
    12  module('Integration | Component | two step button', function(hooks) {
    13    setupRenderingTest(hooks);
    14  
    15    const commonProperties = () => ({
    16      idleText: 'Idle State Button',
    17      cancelText: 'Cancel Action',
    18      confirmText: 'Confirm Action',
    19      confirmationMessage: 'Are you certain',
    20      awaitingConfirmation: false,
    21      disabled: false,
    22      onConfirm: sinon.spy(),
    23      onCancel: sinon.spy(),
    24    });
    25  
    26    const commonTemplate = hbs`
    27      {{two-step-button
    28        idleText=idleText
    29        cancelText=cancelText
    30        confirmText=confirmText
    31        confirmationMessage=confirmationMessage
    32        awaitingConfirmation=awaitingConfirmation
    33        disabled=disabled
    34        onConfirm=onConfirm
    35        onCancel=onCancel}}
    36    `;
    37  
    38    test('presents as a button in the idle state', async function(assert) {
    39      const props = commonProperties();
    40      this.setProperties(props);
    41      await render(commonTemplate);
    42  
    43      assert.ok(find('[data-test-idle-button]'), 'Idle button is rendered');
    44      assert.equal(TwoStepButton.idleText, props.idleText, 'Button is labeled correctly');
    45  
    46      assert.notOk(find('[data-test-cancel-button]'), 'No cancel button yet');
    47      assert.notOk(find('[data-test-confirm-button]'), 'No confirm button yet');
    48      assert.notOk(find('[data-test-confirmation-message]'), 'No confirmation message yet');
    49    });
    50  
    51    test('clicking the idle state button transitions into the promptForConfirmation state', async function(assert) {
    52      const props = commonProperties();
    53      this.setProperties(props);
    54      await render(commonTemplate);
    55  
    56      TwoStepButton.idle();
    57  
    58      return settled().then(() => {
    59        assert.ok(find('[data-test-cancel-button]'), 'Cancel button is rendered');
    60        assert.equal(TwoStepButton.cancelText, props.cancelText, 'Button is labeled correctly');
    61  
    62        assert.ok(find('[data-test-confirm-button]'), 'Confirm button is rendered');
    63        assert.equal(TwoStepButton.confirmText, props.confirmText, 'Button is labeled correctly');
    64  
    65        assert.equal(
    66          TwoStepButton.confirmationMessage,
    67          props.confirmationMessage,
    68          'Confirmation message is shown'
    69        );
    70  
    71        assert.notOk(find('[data-test-idle-button]'), 'No more idle button');
    72      });
    73    });
    74  
    75    test('canceling in the promptForConfirmation state calls the onCancel hook and resets to the idle state', async function(assert) {
    76      const props = commonProperties();
    77      this.setProperties(props);
    78      await render(commonTemplate);
    79  
    80      TwoStepButton.idle();
    81  
    82      return settled().then(() => {
    83        TwoStepButton.cancel();
    84  
    85        return settled().then(() => {
    86          assert.ok(props.onCancel.calledOnce, 'The onCancel hook fired');
    87          assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
    88        });
    89      });
    90    });
    91  
    92    test('confirming the promptForConfirmation state calls the onConfirm hook and resets to the idle state', async function(assert) {
    93      const props = commonProperties();
    94      this.setProperties(props);
    95      await render(commonTemplate);
    96  
    97      TwoStepButton.idle();
    98  
    99      return settled().then(() => {
   100        TwoStepButton.confirm();
   101  
   102        return settled().then(() => {
   103          assert.ok(props.onConfirm.calledOnce, 'The onConfirm hook fired');
   104          assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
   105        });
   106      });
   107    });
   108  
   109    test('when awaitingConfirmation is true, the cancel and submit buttons are disabled and the submit button is loading', async function(assert) {
   110      const props = commonProperties();
   111      props.awaitingConfirmation = true;
   112      this.setProperties(props);
   113      await render(commonTemplate);
   114  
   115      TwoStepButton.idle();
   116  
   117      return settled().then(() => {
   118        assert.ok(TwoStepButton.cancelIsDisabled, 'The cancel button is disabled');
   119        assert.ok(TwoStepButton.confirmIsDisabled, 'The confirm button is disabled');
   120        assert.ok(TwoStepButton.isRunning, 'The confirm button is in a loading state');
   121      });
   122    });
   123  
   124    test('when in the prompt state, clicking outside will reset state back to idle', async function(assert) {
   125      const props = commonProperties();
   126      this.setProperties(props);
   127      await render(commonTemplate);
   128  
   129      TwoStepButton.idle();
   130      await settled();
   131  
   132      assert.ok(find('[data-test-cancel-button]'), 'In the prompt state');
   133  
   134      click(document.body);
   135      await settled();
   136  
   137      assert.ok(find('[data-test-idle-button]'), 'Back in the idle state');
   138    });
   139  
   140    test('when in the prompt state, clicking inside will not reset state back to idle', async function(assert) {
   141      const props = commonProperties();
   142      this.setProperties(props);
   143      await render(commonTemplate);
   144  
   145      TwoStepButton.idle();
   146      await settled();
   147  
   148      assert.ok(find('[data-test-cancel-button]'), 'In the prompt state');
   149  
   150      click('[data-test-confirmation-message]');
   151      await settled();
   152  
   153      assert.notOk(find('[data-test-idle-button]'), 'Still in the prompt state');
   154    });
   155  
   156    test('when awaitingConfirmation is true, clicking outside does nothing', async function(assert) {
   157      const props = commonProperties();
   158      props.awaitingConfirmation = true;
   159      this.setProperties(props);
   160      await render(commonTemplate);
   161  
   162      TwoStepButton.idle();
   163      await settled();
   164  
   165      assert.ok(find('[data-test-cancel-button]'), 'In the prompt state');
   166  
   167      click(document.body);
   168      await settled();
   169  
   170      assert.notOk(find('[data-test-idle-button]'), 'Still in the prompt state');
   171    });
   172  
   173    test('when disabled is true, the idle button is disabled', async function(assert) {
   174      const props = commonProperties();
   175      props.disabled = true;
   176      this.setProperties(props);
   177      await render(commonTemplate);
   178  
   179      assert.ok(TwoStepButton.isDisabled, 'The idle button is disabled');
   180  
   181      TwoStepButton.idle();
   182      assert.ok(find('[data-test-idle-button]'), 'Still in the idle state after clicking');
   183    });
   184  });