Toggle component should toggle on spacebar press

hashicorp · Dec 13, 2019 · 050f60a · 050f60a
1 parent 6eb6d32
commit 050f60a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/ui/app/components/toggle.js b/ui/app/components/toggle.js
@@ -1,5 +1,7 @@
 import Component from '@ember/component';
 
+const SPACE = 32;
+
 export default Component.extend({
   tagName: 'label',
   classNames: ['toggle'],
@@ -10,4 +12,11 @@ export default Component.extend({
   isActive: false,
   isDisabled: false,
   onToggle() {},
+  onSpacebar() {},
+
+  onKeypress(e) {
+    if (e.keyCode === SPACE) {
+      this.onSpacebar(e);
+    }
+  },
 });
diff --git a/ui/app/templates/components/toggle.hbs b/ui/app/templates/components/toggle.hbs
@@ -4,6 +4,7 @@
   checked={{isActive}}
   disabled={{isDisabled}}
   class="input"
-  onchange={{action onToggle}} />
+  onchange={{action onToggle}}
+  onkeypress={{action onKeypress}}/>
 <span data-test-toggler class="toggler" />
 {{yield}}
diff --git a/ui/tests/integration/toggle-test.js b/ui/tests/integration/toggle-test.js
@@ -16,13 +16,15 @@ module('Integration | Component | toggle', function(hooks) {
     isDisabled: false,
     label: 'Label',
     onToggle: sinon.spy(),
+    onSpacebar: sinon.spy(),
   });
 
   const commonTemplate = hbs`
     {{#toggle
       isActive=isActive
       isDisabled=isDisabled
-      onToggle=onToggle}}
+      onToggle=onToggle
+      onSpacebar=onSpacebar}}
       {{label}}
     {{/toggle}}
   `;
@@ -86,4 +88,16 @@ module('Integration | Component | toggle', function(hooks) {
     await Toggle.toggle();
     assert.equal(props.onToggle.callCount, 1);
   });
+
+  test('toggles can be toggled with the spacebar', async function(assert) {
+    const props = commonProperties();
+    this.setProperties(props);
+    await this.render(commonTemplate);
+
+    await Toggle.focus();
+    await Toggle.spaceBar();
+
+    assert.equal(props.onSpacebar.callCount, 1, 'This works');
+    assert.equal(props.onToggle.callCount, 1, 'This does not');
+  });
 });
diff --git a/ui/tests/pages/components/toggle.js b/ui/tests/pages/components/toggle.js
@@ -1,4 +1,15 @@
-import { attribute, property, clickable, hasClass, isPresent, text } from 'ember-cli-page-object';
+import {
+  attribute,
+  property,
+  clickable,
+  focusable,
+  hasClass,
+  isPresent,
+  text,
+  triggerable,
+} from 'ember-cli-page-object';
+
+const SPACE = 32;
 
 export default scope => ({
   scope,
@@ -13,4 +24,7 @@ export default scope => ({
   label: text('[data-test-label]'),
 
   toggle: clickable('[data-test-input]'),
+
+  focus: focusable('[data-test-input]'),
+  spaceBar: triggerable('keypress', '[data-test-input]', { eventProperties: { keyCode: SPACE } }),
 });