github.com/aminovpavel/nomad@v0.11.8/ui/tests/integration/two-step-button-test.js (about)

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