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 });