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