github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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      assert.expect(6);
    40  
    41      const props = commonProperties();
    42      this.setProperties(props);
    43      await render(commonTemplate);
    44  
    45      assert.ok(find('[data-test-idle-button]'), 'Idle button is rendered');
    46      assert.equal(
    47        TwoStepButton.idleText,
    48        props.idleText,
    49        'Button is labeled correctly'
    50      );
    51  
    52      assert.notOk(find('[data-test-cancel-button]'), 'No cancel button yet');
    53      assert.notOk(find('[data-test-confirm-button]'), 'No confirm button yet');
    54      assert.notOk(
    55        find('[data-test-confirmation-message]'),
    56        'No confirmation message yet'
    57      );
    58  
    59      await componentA11yAudit(this.element, assert);
    60    });
    61  
    62    test('clicking the idle state button transitions into the promptForConfirmation state', async function (assert) {
    63      assert.expect(7);
    64  
    65      const props = commonProperties();
    66      this.setProperties(props);
    67      await render(commonTemplate);
    68  
    69      await TwoStepButton.idle();
    70  
    71      assert.ok(find('[data-test-cancel-button]'), 'Cancel button is rendered');
    72      assert.equal(
    73        TwoStepButton.cancelText,
    74        props.cancelText,
    75        'Button is labeled correctly'
    76      );
    77  
    78      assert.ok(find('[data-test-confirm-button]'), 'Confirm button is rendered');
    79      assert.equal(
    80        TwoStepButton.confirmText,
    81        props.confirmText,
    82        'Button is labeled correctly'
    83      );
    84  
    85      assert.equal(
    86        TwoStepButton.confirmationMessage,
    87        props.confirmationMessage,
    88        'Confirmation message is shown'
    89      );
    90  
    91      assert.notOk(find('[data-test-idle-button]'), 'No more idle button');
    92      await componentA11yAudit(this.element, assert);
    93    });
    94  
    95    test('canceling in the promptForConfirmation state calls the onCancel hook and resets to the idle state', async function (assert) {
    96      const props = commonProperties();
    97      this.setProperties(props);
    98      await render(commonTemplate);
    99  
   100      await TwoStepButton.idle();
   101  
   102      await TwoStepButton.cancel();
   103  
   104      assert.ok(props.onCancel.calledOnce, 'The onCancel hook fired');
   105      assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
   106    });
   107  
   108    test('confirming the promptForConfirmation state calls the onConfirm hook and resets to the idle state', async function (assert) {
   109      const props = commonProperties();
   110      this.setProperties(props);
   111      await render(commonTemplate);
   112  
   113      await TwoStepButton.idle();
   114  
   115      await TwoStepButton.confirm();
   116  
   117      assert.ok(props.onConfirm.calledOnce, 'The onConfirm hook fired');
   118      assert.ok(find('[data-test-idle-button]'), 'Idle button is back');
   119    });
   120  
   121    test('when awaitingConfirmation is true, the cancel and submit buttons are disabled and the submit button is loading', async function (assert) {
   122      assert.expect(4);
   123  
   124      const props = commonProperties();
   125      props.awaitingConfirmation = true;
   126      this.setProperties(props);
   127      await render(commonTemplate);
   128  
   129      await TwoStepButton.idle();
   130  
   131      assert.ok(TwoStepButton.cancelIsDisabled, 'The cancel button is disabled');
   132      assert.ok(
   133        TwoStepButton.confirmIsDisabled,
   134        'The confirm button is disabled'
   135      );
   136      assert.ok(
   137        TwoStepButton.isRunning,
   138        'The confirm button is in a loading state'
   139      );
   140  
   141      await componentA11yAudit(this.element, assert);
   142    });
   143  
   144    test('when in the prompt state, clicking outside will reset state back to idle', async function (assert) {
   145      const props = commonProperties();
   146      this.setProperties(props);
   147      await render(commonTemplate);
   148  
   149      await TwoStepButton.idle();
   150  
   151      assert.ok(find('[data-test-cancel-button]'), 'In the prompt state');
   152  
   153      await click(document.body);
   154  
   155      assert.ok(find('[data-test-idle-button]'), 'Back in the idle state');
   156    });
   157  
   158    test('when in the prompt state, clicking inside will not reset state back to idle', async function (assert) {
   159      const props = commonProperties();
   160      this.setProperties(props);
   161      await render(commonTemplate);
   162  
   163      await TwoStepButton.idle();
   164  
   165      assert.ok(find('[data-test-cancel-button]'), 'In the prompt state');
   166  
   167      await click('[data-test-confirmation-message]');
   168  
   169      assert.notOk(find('[data-test-idle-button]'), 'Still in the prompt state');
   170    });
   171  
   172    test('when awaitingConfirmation is true, clicking outside does nothing', async function (assert) {
   173      const props = commonProperties();
   174      props.awaitingConfirmation = true;
   175      this.setProperties(props);
   176      await render(commonTemplate);
   177  
   178      await TwoStepButton.idle();
   179  
   180      assert.ok(find('[data-test-cancel-button]'), 'In the prompt state');
   181  
   182      await click(document.body);
   183  
   184      assert.notOk(find('[data-test-idle-button]'), 'Still in the prompt state');
   185    });
   186  
   187    test('when disabled is true, the idle button is disabled', async function (assert) {
   188      assert.expect(2);
   189  
   190      const props = commonProperties();
   191      props.disabled = true;
   192      this.setProperties(props);
   193      await render(commonTemplate);
   194  
   195      assert.ok(TwoStepButton.isDisabled, 'The idle button is disabled');
   196  
   197      await componentA11yAudit(this.element, assert);
   198    });
   199  });