github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/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 { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
     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      <TwoStepButton
    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      await componentA11yAudit(this.element, assert);
    51    });
    52  
    53    test('clicking the idle state button transitions into the promptForConfirmation state', async function(assert) {
    54      const props = commonProperties();
    55      this.setProperties(props);
    56      await render(commonTemplate);
    57  
    58      await TwoStepButton.idle();
    59  
    60      assert.ok(find('[data-test-cancel-button]'), 'Cancel button is rendered');
    61      assert.equal(TwoStepButton.cancelText, props.cancelText, 'Button is labeled correctly');
    62  
    63      assert.ok(find('[data-test-confirm-button]'), 'Confirm button is rendered');
    64      assert.equal(TwoStepButton.confirmText, props.confirmText, 'Button is labeled correctly');
    65  
    66      assert.equal(
    67        TwoStepButton.confirmationMessage,
    68        props.confirmationMessage,
    69        'Confirmation message is shown'
    70      );
    71  
    72      assert.notOk(find('[data-test-idle-button]'), 'No more idle button');
    73      await componentA11yAudit(this.element, assert);
    74    });
    75  
    76    test('canceling in the promptForConfirmation state calls the onCancel hook and resets to the idle state', async function(assert) {
    77      const props = commonProperties();
    78      this.setProperties(props);
    79      await render(commonTemplate);
    80  
    81      await TwoStepButton.idle();
    82  
    83      await TwoStepButton.cancel();
    84  
    85      assert.ok(props.onCancel.calledOnce, 'The onCancel hook fired');
    86      assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
    87    });
    88  
    89    test('confirming the promptForConfirmation state calls the onConfirm hook and resets to the idle state', async function(assert) {
    90      const props = commonProperties();
    91      this.setProperties(props);
    92      await render(commonTemplate);
    93  
    94      await TwoStepButton.idle();
    95  
    96      await TwoStepButton.confirm();
    97  
    98      assert.ok(props.onConfirm.calledOnce, 'The onConfirm hook fired');
    99      assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
   100    });
   101  
   102    test('when awaitingConfirmation is true, the cancel and submit buttons are disabled and the submit button is loading', async function(assert) {
   103      const props = commonProperties();
   104      props.awaitingConfirmation = true;
   105      this.setProperties(props);
   106      await render(commonTemplate);
   107  
   108      await TwoStepButton.idle();
   109  
   110      assert.ok(TwoStepButton.cancelIsDisabled, 'The cancel button is disabled');
   111      assert.ok(TwoStepButton.confirmIsDisabled, 'The confirm button is disabled');
   112      assert.ok(TwoStepButton.isRunning, 'The confirm button is in a loading state');
   113  
   114      await componentA11yAudit(this.element, assert);
   115    });
   116  
   117    test('when in the prompt state, clicking outside will reset state back to idle', async function(assert) {
   118      const props = commonProperties();
   119      this.setProperties(props);
   120      await render(commonTemplate);
   121  
   122      await TwoStepButton.idle();
   123  
   124      assert.ok(find('[data-test-cancel-button]'), 'In the prompt state');
   125  
   126      await click(document.body);
   127  
   128      assert.ok(find('[data-test-idle-button]'), 'Back in the idle state');
   129    });
   130  
   131    test('when in the prompt state, clicking inside will not reset state back to idle', async function(assert) {
   132      const props = commonProperties();
   133      this.setProperties(props);
   134      await render(commonTemplate);
   135  
   136      await TwoStepButton.idle();
   137  
   138      assert.ok(find('[data-test-cancel-button]'), 'In the prompt state');
   139  
   140      await click('[data-test-confirmation-message]');
   141  
   142      assert.notOk(find('[data-test-idle-button]'), 'Still in the prompt state');
   143    });
   144  
   145    test('when awaitingConfirmation is true, clicking outside does nothing', async function(assert) {
   146      const props = commonProperties();
   147      props.awaitingConfirmation = true;
   148      this.setProperties(props);
   149      await render(commonTemplate);
   150  
   151      await TwoStepButton.idle();
   152  
   153      assert.ok(find('[data-test-cancel-button]'), 'In the prompt state');
   154  
   155      await click(document.body);
   156  
   157      assert.notOk(find('[data-test-idle-button]'), 'Still in the prompt state');
   158    });
   159  
   160    test('when disabled is true, the idle button is disabled', async function(assert) {
   161      const props = commonProperties();
   162      props.disabled = true;
   163      this.setProperties(props);
   164      await render(commonTemplate);
   165  
   166      assert.ok(TwoStepButton.isDisabled, 'The idle button is disabled');
   167  
   168      await TwoStepButton.idle();
   169      assert.ok(find('[data-test-idle-button]'), 'Still in the idle state after clicking');
   170  
   171      await componentA11yAudit(this.element, assert);
   172    });
   173  });