github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/stepper-input-test.js (about) 1 import { find, render, settled, triggerEvent, waitUntil } 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 stepperInput from 'nomad-ui/tests/pages/components/stepper-input'; 9 10 const StepperInput = create(stepperInput()); 11 const valueChange = () => { 12 const initial = StepperInput.input.value; 13 return () => StepperInput.input.value !== initial; 14 }; 15 16 module('Integration | Component | stepper input', function(hooks) { 17 setupRenderingTest(hooks); 18 19 const commonProperties = () => ({ 20 min: 0, 21 max: 10, 22 value: 5, 23 label: 'Stepper', 24 classVariant: 'is-primary', 25 disabled: false, 26 onChange: sinon.spy(), 27 }); 28 29 const commonTemplate = hbs` 30 <StepperInput 31 @debounce=50 32 @min={{min}} 33 @max={{max}} 34 @value={{value}} 35 @class={{classVariant}} 36 @disabled={{disabled}} 37 @onChange={{onChange}}> 38 {{label}} 39 </StepperInput> 40 `; 41 42 test('basic appearance includes a label, an input, and two buttons', async function(assert) { 43 this.setProperties(commonProperties()); 44 45 await render(commonTemplate); 46 47 assert.equal(StepperInput.label, this.label); 48 assert.equal(StepperInput.input.value, this.value); 49 assert.ok(StepperInput.decrement.isPresent); 50 assert.ok(StepperInput.increment.isPresent); 51 assert.ok(StepperInput.decrement.classNames.split(' ').includes(this.classVariant)); 52 assert.ok(StepperInput.increment.classNames.split(' ').includes(this.classVariant)); 53 54 await componentA11yAudit(this.element, assert); 55 }); 56 57 test('clicking the increment and decrement buttons immediately changes the shown value in the input but debounces the onUpdate call', async function(assert) { 58 this.setProperties(commonProperties()); 59 60 const baseValue = this.value; 61 62 await render(commonTemplate); 63 64 StepperInput.increment.click(); 65 await waitUntil(valueChange()); 66 assert.equal(StepperInput.input.value, baseValue + 1); 67 assert.notOk(this.onChange.called); 68 69 StepperInput.decrement.click(); 70 await waitUntil(valueChange()); 71 assert.equal(StepperInput.input.value, baseValue); 72 assert.notOk(this.onChange.called); 73 74 StepperInput.decrement.click(); 75 await waitUntil(valueChange()); 76 assert.equal(StepperInput.input.value, baseValue - 1); 77 assert.notOk(this.onChange.called); 78 79 await settled(); 80 assert.ok(this.onChange.calledWith(baseValue - 1)); 81 }); 82 83 test('the increment button is disabled when the internal value is the max value', async function(assert) { 84 this.setProperties(commonProperties()); 85 this.set('value', this.max); 86 87 await render(commonTemplate); 88 89 assert.ok(StepperInput.increment.isDisabled); 90 }); 91 92 test('the decrement button is disabled when the internal value is the min value', async function(assert) { 93 this.setProperties(commonProperties()); 94 this.set('value', this.min); 95 96 await render(commonTemplate); 97 98 assert.ok(StepperInput.decrement.isDisabled); 99 }); 100 101 test('the text input does not call the onUpdate function on oninput', async function(assert) { 102 this.setProperties(commonProperties()); 103 const newValue = 8; 104 105 await render(commonTemplate); 106 107 const input = find('[data-test-stepper-input]'); 108 109 input.value = newValue; 110 assert.equal(StepperInput.input.value, newValue); 111 assert.notOk(this.onChange.called); 112 113 await triggerEvent(input, 'input'); 114 assert.equal(StepperInput.input.value, newValue); 115 assert.notOk(this.onChange.called); 116 117 await triggerEvent(input, 'change'); 118 assert.equal(StepperInput.input.value, newValue); 119 assert.ok(this.onChange.calledWith(newValue)); 120 }); 121 122 test('the text input does call the onUpdate function on onchange', async function(assert) { 123 this.setProperties(commonProperties()); 124 const newValue = 8; 125 126 await render(commonTemplate); 127 128 await StepperInput.input.fill(newValue); 129 130 await settled(); 131 assert.equal(StepperInput.input.value, newValue); 132 assert.ok(this.onChange.calledWith(newValue)); 133 }); 134 135 test('text input limits input to the bounds of the min/max range', async function(assert) { 136 this.setProperties(commonProperties()); 137 let newValue = this.max + 1; 138 139 await render(commonTemplate); 140 141 await StepperInput.input.fill(newValue); 142 await settled(); 143 144 assert.equal(StepperInput.input.value, this.max); 145 assert.ok(this.onChange.calledWith(this.max)); 146 147 newValue = this.min - 1; 148 149 await StepperInput.input.fill(newValue); 150 await settled(); 151 152 assert.equal(StepperInput.input.value, this.min); 153 assert.ok(this.onChange.calledWith(this.min)); 154 }); 155 156 test('pressing ESC in the text input reverts the text value back to the current value', async function(assert) { 157 this.setProperties(commonProperties()); 158 const newValue = 8; 159 160 await render(commonTemplate); 161 162 const input = find('[data-test-stepper-input]'); 163 164 input.value = newValue; 165 assert.equal(StepperInput.input.value, newValue); 166 167 await StepperInput.input.esc(); 168 assert.equal(StepperInput.input.value, this.value); 169 }); 170 171 test('clicking the label focuses in the input', async function(assert) { 172 this.setProperties(commonProperties()); 173 174 await render(commonTemplate); 175 await StepperInput.clickLabel(); 176 177 const input = find('[data-test-stepper-input]'); 178 assert.equal(document.activeElement, input); 179 }); 180 181 test('focusing the input selects the input value', async function(assert) { 182 this.setProperties(commonProperties()); 183 184 await render(commonTemplate); 185 await StepperInput.input.focus(); 186 187 assert.equal( 188 window 189 .getSelection() 190 .toString() 191 .trim(), 192 this.value.toString() 193 ); 194 }); 195 196 test('entering a fractional value floors the value', async function(assert) { 197 this.setProperties(commonProperties()); 198 const newValue = 3.14159; 199 200 await render(commonTemplate); 201 202 await StepperInput.input.fill(newValue); 203 204 await settled(); 205 assert.equal(StepperInput.input.value, Math.floor(newValue)); 206 assert.ok(this.onChange.calledWith(Math.floor(newValue))); 207 }); 208 209 test('entering an invalid value reverts the value', async function(assert) { 210 this.setProperties(commonProperties()); 211 const newValue = 'NaN'; 212 213 await render(commonTemplate); 214 215 await StepperInput.input.fill(newValue); 216 217 await settled(); 218 assert.equal(StepperInput.input.value, this.value); 219 assert.notOk(this.onChange.called); 220 }); 221 });