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