diff --git a/tests/acceptance/ember-keyboard-test.js b/tests/acceptance/ember-keyboard-test.js index 689407369..9bcb57ea4 100644 --- a/tests/acceptance/ember-keyboard-test.js +++ b/tests/acceptance/ember-keyboard-test.js @@ -2,6 +2,7 @@ import { click, fillIn, blur, visit } from '@ember/test-helpers'; import { setupApplicationTest } from 'ember-qunit'; import { set } from '@ember/object'; import { module, test } from 'qunit'; +import { gte } from 'ember-compatibility-helpers'; import { mouseDown, @@ -17,100 +18,102 @@ import { getValues, getMouseValues, getTouchValues } from '../helpers/get-values module('Acceptance | ember keyboard', function(hooks) { setupApplicationTest(hooks); - test('test standard functionality', async function(assert) { - assert.expect(11); + if (gte('3.10.0')) { + test('test standard functionality', async function(assert) { + assert.expect(11); - await visit('/test-scenario') + await visit('/test-scenario') - await mouseDown('left'); - assert.deepEqual(getMouseValues(), [1], 'left mouse'); + await mouseDown('left'); + assert.deepEqual(getMouseValues(), [1], 'left mouse'); - await mouseDown('right'); - assert.deepEqual(getMouseValues(), [11], 'right mouse'); + await mouseDown('right'); + assert.deepEqual(getMouseValues(), [11], 'right mouse'); - await mouseDown('middle'); - assert.deepEqual(getMouseValues(), [1], 'middle mouse'); + await mouseDown('middle'); + assert.deepEqual(getMouseValues(), [1], 'middle mouse'); - await touchStart(); - assert.deepEqual(getTouchValues(), [1], 'touch event'); + await touchStart(); + assert.deepEqual(getTouchValues(), [1], 'touch event'); - await keyDown('ArrowRight'); - assert.deepEqual(getValues(), [1, 1, 1], 'equal responders all respond'); + await keyDown('ArrowRight'); + assert.deepEqual(getValues(), [1, 1, 1], 'equal responders all respond'); - await fillIn(`${hook('counter-first')} ${hook('counter-priority-input')}`, '1'); + await fillIn(`${hook('counter-first')} ${hook('counter-priority-input')}`, '1'); - await blur(`${hook('counter-first')} ${hook('counter-priority-input')}`); + await blur(`${hook('counter-first')} ${hook('counter-priority-input')}`); - await keyDown('ArrowRight'); - assert.deepEqual(getValues(), [2, 1, 1], 'highest responder responds first'); + await keyDown('ArrowRight'); + assert.deepEqual(getValues(), [2, 1, 1], 'highest responder responds first'); - await click(`${hook('counter-second')} ${hook('counter-first-responder-toggle')}`); + await click(`${hook('counter-second')} ${hook('counter-first-responder-toggle')}`); - await keyDown('ArrowRight'); - assert.deepEqual(getValues(), [2, 2, 1], 'first responder responds first'); + await keyDown('ArrowRight'); + assert.deepEqual(getValues(), [2, 2, 1], 'first responder responds first'); - await click(`${hook('counter-second')} ${hook('counter-lax-priority-toggle')}`); + await click(`${hook('counter-second')} ${hook('counter-lax-priority-toggle')}`); - await keyDown('ArrowRight'); - assert.deepEqual(getValues(), [3, 3, 1], 'lax priority does not block lower priority responders'); + await keyDown('ArrowRight'); + assert.deepEqual(getValues(), [3, 3, 1], 'lax priority does not block lower priority responders'); - await click(`${hook('counter-first')} ${hook('counter-activated-toggle')}`); + await click(`${hook('counter-first')} ${hook('counter-activated-toggle')}`); - await keyDown('ArrowRight'); - assert.deepEqual(getValues(), [3, 4, 2], 'deactivating a responder removes it from the stack'); + await keyDown('ArrowRight'); + assert.deepEqual(getValues(), [3, 4, 2], 'deactivating a responder removes it from the stack'); - await keyDown('ArrowRight+ctrl+shift'); - assert.deepEqual(getValues(), [3, 104, 102], 'modifier keys work'); + await keyDown('ArrowRight+ctrl+shift'); + assert.deepEqual(getValues(), [3, 104, 102], 'modifier keys work'); - await keyUp('KeyR'); - assert.deepEqual(getValues(), [3, 0, 0], 'keyUp works'); - }); + await keyUp('KeyR'); + assert.deepEqual(getValues(), [3, 0, 0], 'keyUp works'); + }); - test('test event propagation', async function(assert) { - assert.expect(6); + test('test event propagation', async function(assert) { + assert.expect(6); - const keyboardService = getService('keyboard'); - set(keyboardService, 'isPropagationEnabled', true); + const keyboardService = getService('keyboard'); + set(keyboardService, 'isPropagationEnabled', true); - await visit('/test-scenario'); - await keyDown('ArrowRight'); - assert.deepEqual(getValues(), [1, 1, 1], 'equal responders all respond'); + await visit('/test-scenario'); + await keyDown('ArrowRight'); + assert.deepEqual(getValues(), [1, 1, 1], 'equal responders all respond'); - await fillIn(`${hook('counter-first')} ${hook('counter-priority-input')}`, '1'); - await blur(`${hook('counter-first')} ${hook('counter-priority-input')}`); + await fillIn(`${hook('counter-first')} ${hook('counter-priority-input')}`, '1'); + await blur(`${hook('counter-first')} ${hook('counter-priority-input')}`); - await keyDown('ArrowRight'); - assert.deepEqual(getValues(), [2, 2, 2], 'highest responder responds first, lower responders follow'); + await keyDown('ArrowRight'); + assert.deepEqual(getValues(), [2, 2, 2], 'highest responder responds first, lower responders follow'); - await fillIn(`${hook('counter-second')} ${hook('counter-priority-input')}`, '1'); - await blur(`${hook('counter-second')} ${hook('counter-priority-input')}`); - await click(`${hook('counter-first')} ${hook('counter-stop-immediate-propagation-toggle')}`); + await fillIn(`${hook('counter-second')} ${hook('counter-priority-input')}`, '1'); + await blur(`${hook('counter-second')} ${hook('counter-priority-input')}`); + await click(`${hook('counter-first')} ${hook('counter-stop-immediate-propagation-toggle')}`); - await keyDown('ArrowRight'); - assert.deepEqual(getValues(), [3, 2, 3], 'highest responder responds first and stops immediate propagation, lower responders follow'); + await keyDown('ArrowRight'); + assert.deepEqual(getValues(), [3, 2, 3], 'highest responder responds first and stops immediate propagation, lower responders follow'); - await click(`${hook('counter-first')} ${hook('counter-stop-immediate-propagation-toggle')}`); - await click(`${hook('counter-first')} ${hook('counter-stop-propagation-toggle')}`); + await click(`${hook('counter-first')} ${hook('counter-stop-immediate-propagation-toggle')}`); + await click(`${hook('counter-first')} ${hook('counter-stop-propagation-toggle')}`); - await keyDown('ArrowRight'); - assert.deepEqual(getValues(), [4, 3, 3], 'highest responders responds first and block propagation to lower priority responders'); + await keyDown('ArrowRight'); + assert.deepEqual(getValues(), [4, 3, 3], 'highest responders responds first and block propagation to lower priority responders'); - await click(`${hook('counter-first')} ${hook('counter-activated-toggle')}`); + await click(`${hook('counter-first')} ${hook('counter-activated-toggle')}`); - await keyDown('ArrowRight'); - assert.deepEqual(getValues(), [4, 4, 4], 'deactivating a responder removes it from the stack, deactivated responders do not block propagation'); + await keyDown('ArrowRight'); + assert.deepEqual(getValues(), [4, 4, 4], 'deactivating a responder removes it from the stack, deactivated responders do not block propagation'); - await fillIn(`${hook('counter-first')} ${hook('counter-priority-input')}`, '2'); - await blur(`${hook('counter-first')} ${hook('counter-priority-input')}`); - await click(`${hook('counter-first')} ${hook('counter-stop-propagation-toggle')}`); - await click(`${hook('counter-first')} ${hook('counter-activated-toggle')}`); - await click(`${hook('counter-first')} ${hook('counter-first-responder-toggle')}`); - await click(`${hook('counter-second')} ${hook('counter-first-responder-toggle')}`); - await click(`${hook('counter-second')} ${hook('counter-stop-immediate-propagation-toggle')}`); + await fillIn(`${hook('counter-first')} ${hook('counter-priority-input')}`, '2'); + await blur(`${hook('counter-first')} ${hook('counter-priority-input')}`); + await click(`${hook('counter-first')} ${hook('counter-stop-propagation-toggle')}`); + await click(`${hook('counter-first')} ${hook('counter-activated-toggle')}`); + await click(`${hook('counter-first')} ${hook('counter-first-responder-toggle')}`); + await click(`${hook('counter-second')} ${hook('counter-first-responder-toggle')}`); + await click(`${hook('counter-second')} ${hook('counter-stop-immediate-propagation-toggle')}`); - await click(`${hook('counter-third')} ${hook('counter-first-responder-toggle')}`); + await click(`${hook('counter-third')} ${hook('counter-first-responder-toggle')}`); - await keyDown('ArrowRight'); - assert.deepEqual(getValues(), [5, 5, 4], 'first responders get called in priority order.'); - }); + await keyDown('ArrowRight'); + assert.deepEqual(getValues(), [5, 5, 4], 'first responders get called in priority order.'); + }); + } }); diff --git a/tests/acceptance/keyboard-test.js b/tests/acceptance/keyboard-test.js index cd5013fe5..1c0fd24e7 100644 --- a/tests/acceptance/keyboard-test.js +++ b/tests/acceptance/keyboard-test.js @@ -1,66 +1,68 @@ import { visit } from '@ember/test-helpers'; import { setupApplicationTest } from 'ember-qunit'; import { module, test } from 'qunit'; - import { keyDown, keyUp, keyPress } from 'ember-keyboard/test-support/test-helpers'; - import { textChanged } from '../helpers/text-changed'; +import { gte } from 'ember-compatibility-helpers'; module('Acceptance | ember keyboard | keyboard', function(hooks) { setupApplicationTest(hooks); - hooks.beforeEach(async function() { - await visit('/test-scenario/keyboard'); - }); + if (gte('3.10.0')) { - module('keyDown', function() { - module('Arrow keys', function() { - test('Left is pressed', async function(assert) { - assert.expect(2); + hooks.beforeEach(async function() { + await visit('/test-scenario/keyboard'); + }); - await textChanged(assert, - () => keyDown('ArrowLeft'), { - selectorName: 'counter-counter', - beforeValue: '0', - afterValue: '-1', - }); + module('keyDown', function() { + module('Arrow keys', function() { + test('Left is pressed', async function(assert) { + assert.expect(2); + + await textChanged(assert, + () => keyDown('ArrowLeft'), { + selectorName: 'counter-counter', + beforeValue: '0', + afterValue: '-1', + }); + }); }); }); - }); - module('keyUp', function() { - module('Letters are pressed', function() { - module('R is configured to reset the counter', function(hooks) { - hooks.beforeEach(async function() { - await keyDown('ArrowRight'); + module('keyUp', function() { + module('Letters are pressed', function() { + module('R is configured to reset the counter', function(hooks) { + hooks.beforeEach(async function() { + await keyDown('ArrowRight'); + }); + + test('the counter is cleared', async function(assert) { + assert.expect(2); + + await textChanged(assert, + () => keyUp('KeyR'), { + selectorName: 'counter-counter', + beforeValue: '1', + afterValue: '0' + }); + }); }); + }); + }); - test('the counter is cleared', async function(assert) { + module('keyPress', function() { + module('Numbers are pressed', function() { + test('pressing 5 sets the the counter', async function(assert) { assert.expect(2); await textChanged(assert, - () => keyUp('KeyR'), { + () => keyPress('Digit5'), { selectorName: 'counter-counter', - beforeValue: '1', - afterValue: '0' + beforeValue: '0', + afterValue: '5' }); }); }); }); - }); - - module('keyPress', function() { - module('Numbers are pressed', function() { - test('pressing 5 sets the the counter', async function(assert) { - assert.expect(2); - - await textChanged(assert, - () => keyPress('Digit5'), { - selectorName: 'counter-counter', - beforeValue: '0', - afterValue: '5' - }); - }); - }); - }); + } }); diff --git a/tests/acceptance/mouse-down-test.js b/tests/acceptance/mouse-down-test.js index 9c4f81de1..c044dc155 100644 --- a/tests/acceptance/mouse-down-test.js +++ b/tests/acceptance/mouse-down-test.js @@ -1,87 +1,89 @@ import { visit } from '@ember/test-helpers'; import { setupApplicationTest } from 'ember-qunit'; import { module, test } from 'qunit'; - import { mouseDown } from 'ember-keyboard/test-support/test-helpers'; - import { textChanged } from '../helpers/text-changed'; +import { gte } from 'ember-compatibility-helpers'; module('Acceptance | ember keyboard | mouseDown', function(hooks) { setupApplicationTest(hooks); - hooks.beforeEach(async function() { - await visit('/test-scenario/mouse-down'); - }); - - module('left clicking', function() { - test('clicking once adjusts the counter by 1', async function(assert) { - assert.expect(2); - - await textChanged(assert, - () => mouseDown('left'), { - selectorName: 'mouse-down-counter', - beforeValue: '0', - afterValue: '1', - }); - }); - - test('clicking twice adjusts the counter by 1', async function(assert) { - assert.expect(2); + if (gte('3.10.0')) { - await textChanged(assert, - () => mouseDown('left') && mouseDown('left'), { - selectorName: 'mouse-down-counter', - beforeValue: '0', - afterValue: '2', - }); + hooks.beforeEach(async function() { + await visit('/test-scenario/mouse-down'); }); - }); - module('middle clicking', function() { - test('clicking once adjusts the counter by 1', async function(assert) { - assert.expect(2); - - await textChanged(assert, - () => mouseDown('middle'), { - selectorName: 'mouse-down-counter', - beforeValue: '0', - afterValue: '-10', - }); - }); - - test('clicking twice adjusts the counter by 1', async function(assert) { - assert.expect(2); - - await textChanged(assert, - () => mouseDown('middle') && mouseDown('middle'), { - selectorName: 'mouse-down-counter', - beforeValue: '0', - afterValue: '-20', - }); + module('left clicking', function() { + test('clicking once adjusts the counter by 1', async function(assert) { + assert.expect(2); + + await textChanged(assert, + () => mouseDown('left'), { + selectorName: 'mouse-down-counter', + beforeValue: '0', + afterValue: '1', + }); + }); + + test('clicking twice adjusts the counter by 1', async function(assert) { + assert.expect(2); + + await textChanged(assert, + () => mouseDown('left') && mouseDown('left'), { + selectorName: 'mouse-down-counter', + beforeValue: '0', + afterValue: '2', + }); + }); }); - }); - - module('right clicking', function() { - test('clicking once adjusts the counter by 1', async function(assert) { - assert.expect(2); - await textChanged(assert, - () => mouseDown('right'), { - selectorName: 'mouse-down-counter', - beforeValue: '0', - afterValue: '10', - }); + module('middle clicking', function() { + test('clicking once adjusts the counter by 1', async function(assert) { + assert.expect(2); + + await textChanged(assert, + () => mouseDown('middle'), { + selectorName: 'mouse-down-counter', + beforeValue: '0', + afterValue: '-10', + }); + }); + + test('clicking twice adjusts the counter by 1', async function(assert) { + assert.expect(2); + + await textChanged(assert, + () => mouseDown('middle') && mouseDown('middle'), { + selectorName: 'mouse-down-counter', + beforeValue: '0', + afterValue: '-20', + }); + }); }); - test('clicking twice adjusts the counter by 1', async function(assert) { - assert.expect(2); - - await textChanged(assert, - () => mouseDown('right') && mouseDown('right'), { - selectorName: 'mouse-down-counter', - beforeValue: '0', - afterValue: '20', - }); + module('right clicking', function() { + test('clicking once adjusts the counter by 1', async function(assert) { + assert.expect(2); + + await textChanged(assert, + () => mouseDown('right'), { + selectorName: 'mouse-down-counter', + beforeValue: '0', + afterValue: '10', + }); + }); + + test('clicking twice adjusts the counter by 1', async function(assert) { + assert.expect(2); + + await textChanged(assert, + () => mouseDown('right') && mouseDown('right'), { + selectorName: 'mouse-down-counter', + beforeValue: '0', + afterValue: '20', + }); + }); }); - }); + } }); diff --git a/tests/acceptance/touch-test.js b/tests/acceptance/touch-test.js index 743d1f760..03a7872d2 100644 --- a/tests/acceptance/touch-test.js +++ b/tests/acceptance/touch-test.js @@ -1,40 +1,42 @@ import { visit } from '@ember/test-helpers'; import { setupApplicationTest } from 'ember-qunit'; import { module, test } from 'qunit'; - import { touchStart } from 'ember-keyboard/test-support/test-helpers'; - import { textChanged } from '../helpers/text-changed'; +import { gte } from 'ember-compatibility-helpers'; module('Acceptance | ember keyboard | touch', function(hooks) { setupApplicationTest(hooks); - hooks.beforeEach(async function() { - await visit('/test-scenario/touch'); - }); - - module('start touching', function() { + if (gte('3.10.0')) { - test('increases the touch counter once', async function(assert) { - assert.expect(2); - - await textChanged(assert, - () => touchStart(), { - selectorName: 'touch-start-counter', - beforeValue: '0', - afterValue: '1', - }); + hooks.beforeEach(async function() { + await visit('/test-scenario/touch'); }); - test('increases the touch counter twice', async function(assert) { - assert.expect(2); - - await textChanged(assert, - () => touchStart() && touchStart(), { - selectorName: 'touch-start-counter', - beforeValue: '0', - afterValue: '2', - }); + module('start touching', function() { + + test('increases the touch counter once', async function(assert) { + assert.expect(2); + + await textChanged(assert, + () => touchStart(), { + selectorName: 'touch-start-counter', + beforeValue: '0', + afterValue: '1', + }); + }); + + test('increases the touch counter twice', async function(assert) { + assert.expect(2); + + await textChanged(assert, + () => touchStart() && touchStart(), { + selectorName: 'touch-start-counter', + beforeValue: '0', + afterValue: '2', + }); + }); }); - }); + } }); diff --git a/tests/dummy/app/templates/deprecations.hbs b/tests/dummy/app/templates/deprecations.hbs index eebe135ef..fdc9fcd30 100644 --- a/tests/dummy/app/templates/deprecations.hbs +++ b/tests/dummy/app/templates/deprecations.hbs @@ -12,6 +12,9 @@ most direct translation to the new API is to use the `@keyResponder` decorator, is to adopt the `on-key` helper and `on-key` element modifier to accomplish in templates what you previously did in your Javascript files. +Decorators require Ember 3.10 or higher. If you are using an Ember version earlier than that, you will +need to stick with template helpers/modifiers and, if needed, the deprecated mixins API. + Deprecated: ```js diff --git a/tests/dummy/app/templates/usage.hbs b/tests/dummy/app/templates/usage.hbs index 97b2d3d07..7f94d16e7 100644 --- a/tests/dummy/app/templates/usage.hbs +++ b/tests/dummy/app/templates/usage.hbs @@ -129,6 +129,9 @@ export default class extends Component { In addition to Glimmer Component classes, you can use these decorators on services, routes, controllers, etc, provided that they are ES6 classes. +Decorators require Ember 3.10 or higher. If you are using an Ember version earlier than that, you will +need to stick with template helpers/modifiers and, if needed, the deprecated mixins API. + For “classic” Ember classes, the usage of the decorator imports is a little different: ```js diff --git a/tests/integration/decorators/decorators-test.js b/tests/integration/decorators/decorators-test.js index d8bd60d8b..379ce0cfe 100644 --- a/tests/integration/decorators/decorators-test.js +++ b/tests/integration/decorators/decorators-test.js @@ -4,6 +4,7 @@ import { setupRenderingTest } from 'ember-qunit'; import { render, triggerEvent } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import { keyDown, keyUp } from 'ember-keyboard/test-support/test-helpers'; +import { gte } from 'ember-compatibility-helpers'; module('Integration | decorators', function(hooks) { setupRenderingTest(hooks); @@ -161,148 +162,150 @@ module('Integration | decorators', function(hooks) { }); }); - module('decorators with a classic component', function() { - module('lifecycle', function(hooks) { - hooks.beforeEach(function() { - this.set('shouldRenderOnKeyHelper', false); - this.renderWithConditional = () => { - return render(hbs` - {{#if this.shouldRenderOnKeyHelper}} - - {{/if}} - `); - } - }); - test('does not trigger if helper is not rendered', async function(assert) { - await this.renderWithConditional(); - await keyDown('shift+c'); - assert.ok(!onTriggerCalled, 'does not trigger action'); - }); - test('triggers if helper is rendered', async function(assert) { - await this.renderWithConditional(); - this.set('shouldRenderOnKeyHelper', true); - await keyDown('shift+c'); - assert.ok(onTriggerCalled, 'triggers action'); - }); - test('does not trigger if helper is no longer rendered', async function(assert) { - this.set('shouldRenderOnKeyHelper', true); - await this.renderWithConditional(); - this.set('shouldRenderOnKeyHelper', false); - await keyDown('shift+c'); - assert.ok(!onTriggerCalled, 'does not trigger action'); - }); - }); - test('with an event specified', async function(assert) { - let onTriggerCalledWith; - this.set('onTrigger', (ev) => { - onTriggerCalledWith = ev; + if (gte('3.10.0')) { + module('decorators with a classic component', function() { + module('lifecycle', function(hooks) { + hooks.beforeEach(function() { + this.set('shouldRenderOnKeyHelper', false); + this.renderWithConditional = () => { + return render(hbs` + {{#if this.shouldRenderOnKeyHelper}} + + {{/if}} + `); + } + }); + test('does not trigger if helper is not rendered', async function(assert) { + await this.renderWithConditional(); + await keyDown('shift+c'); + assert.ok(!onTriggerCalled, 'does not trigger action'); + }); + test('triggers if helper is rendered', async function(assert) { + await this.renderWithConditional(); + this.set('shouldRenderOnKeyHelper', true); + await keyDown('shift+c'); + assert.ok(onTriggerCalled, 'triggers action'); + }); + test('does not trigger if helper is no longer rendered', async function(assert) { + this.set('shouldRenderOnKeyHelper', true); + await this.renderWithConditional(); + this.set('shouldRenderOnKeyHelper', false); + await keyDown('shift+c'); + assert.ok(!onTriggerCalled, 'does not trigger action'); + }); }); - await render(hbs``); + test('with an event specified', async function(assert) { + let onTriggerCalledWith; + this.set('onTrigger', (ev) => { + onTriggerCalledWith = ev; + }); + await render(hbs``); - await keyUp('shift+c'); - assert.ok(!onTriggerCalledWith, 'not called in keyup if event is not specified'); + await keyUp('shift+c'); + assert.ok(!onTriggerCalledWith, 'not called in keyup if event is not specified'); - await keyDown('ctrl+alt+KeyE'); - assert.ok(!onTriggerCalledWith, 'not called in keydown if keyup is specified'); + await keyDown('ctrl+alt+KeyE'); + assert.ok(!onTriggerCalledWith, 'not called in keydown if keyup is specified'); - await keyUp('ctrl+alt+KeyE'); - assert.ok(onTriggerCalledWith instanceof KeyboardEvent); - }); - test('with multiple onKeys on one method', async function(assert) { - let onTriggerCalledWith; - this.set('onTrigger', (ev) => { - onTriggerCalledWith = ev; + await keyUp('ctrl+alt+KeyE'); + assert.ok(onTriggerCalledWith instanceof KeyboardEvent); }); - await render(hbs``); + test('with multiple onKeys on one method', async function(assert) { + let onTriggerCalledWith; + this.set('onTrigger', (ev) => { + onTriggerCalledWith = ev; + }); + await render(hbs``); - await keyDown('alt+ArrowLeft'); - assert.ok(onTriggerCalledWith instanceof KeyboardEvent); - onTriggerCalledWith = null; + await keyDown('alt+ArrowLeft'); + assert.ok(onTriggerCalledWith instanceof KeyboardEvent); + onTriggerCalledWith = null; - await keyDown('alt+ArrowRight'); - assert.ok(onTriggerCalledWith instanceof KeyboardEvent); - }); - module('stopping propagation', function(hooks) { - let triggered; - hooks.beforeEach(function() { - const keyboardService = this.owner.lookup('service:keyboard'); - keyboardService.set('isPropagationEnabled', true); - triggered = []; - this.set('trigger', (letter, stop, stopImmediate, event, ekEvent) => { - triggered.push(letter); - if (stop) { - ekEvent.stopPropagation(); - } - if (stopImmediate) { - ekEvent.stopImmediatePropagation(); - } - }); - }); - test('stopPropagation+stopImmediatePropagation', async function(assert) { - await render(hbs` - - - - `); - await triggerEvent(document.body, 'keydown', { code: 'Digit2' }); - assert.deepEqual(triggered, ['A2a']); + await keyDown('alt+ArrowRight'); + assert.ok(onTriggerCalledWith instanceof KeyboardEvent); }); + module('stopping propagation', function(hooks) { + let triggered; + hooks.beforeEach(function() { + const keyboardService = this.owner.lookup('service:keyboard'); + keyboardService.set('isPropagationEnabled', true); + triggered = []; + this.set('trigger', (letter, stop, stopImmediate, event, ekEvent) => { + triggered.push(letter); + if (stop) { + ekEvent.stopPropagation(); + } + if (stopImmediate) { + ekEvent.stopImmediatePropagation(); + } + }); + }); + test('stopPropagation+stopImmediatePropagation', async function(assert) { + await render(hbs` + + + + `); + await triggerEvent(document.body, 'keydown', { code: 'Digit2' }); + assert.deepEqual(triggered, ['A2a']); + }); - test('stopPropagation', async function(assert) { - await render(hbs` - - - - `); - await triggerEvent(document.body, 'keydown', { code: 'Digit2' }); - assert.deepEqual(triggered, ['A2a', 'A2b']); - }); + test('stopPropagation', async function(assert) { + await render(hbs` + + + + `); + await triggerEvent(document.body, 'keydown', { code: 'Digit2' }); + assert.deepEqual(triggered, ['A2a', 'A2b']); + }); - test('stopImmediatePropagation', async function(assert) { - await render(hbs` - - - - `); - await triggerEvent(document.body, 'keydown', { code: 'Digit2' }); - assert.deepEqual(triggered, ['A2a', 'A1']); - }); + test('stopImmediatePropagation', async function(assert) { + await render(hbs` + + + + `); + await triggerEvent(document.body, 'keydown', { code: 'Digit2' }); + assert.deepEqual(triggered, ['A2a', 'A1']); + }); - test('no stopping', async function(assert) { - await render(hbs` - - - - `); - await triggerEvent(document.body, 'keydown', { code: 'Digit2' }); - assert.deepEqual(triggered, ['A2a', 'A2b', 'A1']); - }); - }); - module('activated param', function(hooks) { - hooks.beforeEach(function() { - this.set('isActivated', false); - this.renderWithActivated = () => { - return render(hbs``); - } - }); - test('does not trigger if helper is not activated', async function(assert) { - await this.renderWithActivated(); - await keyDown('Digit2'); - assert.ok(!onTriggerCalled, 'does not trigger action'); - }); - test('triggers if helper is activated', async function(assert) { - await this.renderWithActivated(); - this.set('isActivated', true); - await keyDown('Digit2'); - assert.ok(onTriggerCalled, 'triggers action'); + test('no stopping', async function(assert) { + await render(hbs` + + + + `); + await triggerEvent(document.body, 'keydown', { code: 'Digit2' }); + assert.deepEqual(triggered, ['A2a', 'A2b', 'A1']); + }); }); - test('does not trigger if helper is no longer activated', async function(assert) { - this.set('shouldRenderOnKeyHelper', true); - await this.renderWithActivated(); - this.set('isActivated', false); - await keyDown('Digit2'); - assert.ok(!onTriggerCalled, 'does not trigger action'); + module('activated param', function(hooks) { + hooks.beforeEach(function() { + this.set('isActivated', false); + this.renderWithActivated = () => { + return render(hbs``); + } + }); + test('does not trigger if helper is not activated', async function(assert) { + await this.renderWithActivated(); + await keyDown('Digit2'); + assert.ok(!onTriggerCalled, 'does not trigger action'); + }); + test('triggers if helper is activated', async function(assert) { + await this.renderWithActivated(); + this.set('isActivated', true); + await keyDown('Digit2'); + assert.ok(onTriggerCalled, 'triggers action'); + }); + test('does not trigger if helper is no longer activated', async function(assert) { + this.set('shouldRenderOnKeyHelper', true); + await this.renderWithActivated(); + this.set('isActivated', false); + await keyDown('Digit2'); + assert.ok(!onTriggerCalled, 'does not trigger action'); + }); }); }); - }); + } }); diff --git a/tests/integration/helpers/on-key-test.js b/tests/integration/helpers/on-key-test.js index f82481c06..6bd80ae60 100644 --- a/tests/integration/helpers/on-key-test.js +++ b/tests/integration/helpers/on-key-test.js @@ -3,6 +3,7 @@ import { setupRenderingTest } from 'ember-qunit'; import { render, resetOnerror, setupOnerror, triggerEvent } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import { keyDown, keyPress, keyUp } from 'ember-keyboard/test-support/test-helpers'; +import { gte } from 'ember-compatibility-helpers'; module('Integration | Helper | on-key', function(hooks) { setupRenderingTest(hooks); @@ -212,18 +213,19 @@ module('Integration | Helper | on-key', function(hooks) { module('error cases', function(hooks) { hooks.afterEach(() => resetOnerror()); - // This doesn't work. I wish it did, but can't figure out why not. - test('errors if invoked without a handler', async function(assert) { - assert.expect(1); - setupOnerror(function(error) { - assert.strictEqual( - error.message, - "Assertion Failed: ember-keyboard: You must pass a function as the second argument to the `on-key` helper", - 'error is thrown' - ); - }); - await render(hbs`{{on-key "alt+a" doesNotExist}}`); - await triggerEvent(document.body, 'keydown', { altKey: true, key: 'c' }); - }); + if (gte('3.10.0')) { + test('errors if invoked without a handler', async function(assert) { + assert.expect(1); + setupOnerror(function(error) { + assert.strictEqual( + error.message, + "Assertion Failed: ember-keyboard: You must pass a function as the second argument to the `on-key` helper", + 'error is thrown' + ); + }); + await render(hbs`{{on-key "alt+a" doesNotExist}}`); + await triggerEvent(document.body, 'keydown', { altKey: true, key: 'c' }); + }); + } }); });