Interaction helpers also accept HTMLElements as first argument

README.md

@@ -103,14 +103,14 @@ assert.equal($(find('.my-class')).attr('aria-owns'), '#id123')
 
 ## Helpers
 
-- `click(selector, eventOptions)`
-- `tap(selector, eventOptions)`
-- `fillIn(selector, text)`
+- `click(selectorOrHTMLElement, eventOptions)`
+- `tap(selectorOrHTMLElement, eventOptions)`
+- `fillIn(selectorOrHTMLElement, text)`
 - `find(selector, contextHTMLElement)` (query for an element in test DOM, `#ember-testing`)
 - `findAll(selector, contextHTMLElement)` (query for elements in test DOM, `#ember-testing`)
 - `findWithAssert(selector, contextHTMLElement)` (same as `find`, but raises Error if no result)
-- `keyEvent(selector, type, keyCode)` (type being `keydown`, `keyup` or `keypress`)
-- `triggerEvent(selector, type, options)`
+- `keyEvent(selectorOrHTMLElement, type, keyCode)` (type being `keydown`, `keyup` or `keypress`)
+- `triggerEvent(selectorOrHTMLElement, type, options)`
 
 ## Notes of `tap`
 

addon-test-support/-private/get-element-with-assert.js

@@ -0,0 +1,16 @@
+import getElement from './get-element';
+
+/*
+  @method getElementWithAssert
+  @param {String|HTMLElement} selectorOrElement
+  @param {HTMLElement} contextEl to query within, query from its contained DOM
+  @return {Error|HTMLElement} element if found, or raises an error
+  @private
+*/
+export default function getElementWithAssert(selectorOrElement, contextEl) {
+  let el = getElement(selectorOrElement, contextEl);
+  if (el) {
+    return el;
+  }
+  throw new Error(`Element ${selectorOrElement} not found.`);
+}

addon-test-support/-private/get-element.js

@@ -0,0 +1,21 @@
+import settings from '../settings';
+
+/*
+  @method getElement
+  @param {String|HTMLElement} selectorOrElement
+  @param {HTMLElement} contextEl to query within, query from its contained DOM
+  @return HTMLElement
+  @private
+*/
+export default function getElement(selectorOrElement, contextEl) {
+  if (selectorOrElement instanceof HTMLElement) {
+    return selectorOrElement;
+  }
+  let result;
+  if (contextEl instanceof HTMLElement) {
+    result = contextEl.querySelector(selectorOrElement);
+  } else {
+    result = document.querySelector(`${settings.rootElement} ${selectorOrElement}`);
+  }
+  return result;
+}

addon-test-support/click.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import { findWithAssert } from './find-with-assert';
+import getElementWithAssert from './-private/get-element-with-assert';
 import { fireEvent } from './fire-event';
 import { focus } from './focus';
 import wait from 'ember-test-helpers/wait';
@@ -19,13 +19,12 @@ export function clickEventSequence(el, options) {
 
 /*
   @method click
-  @param {String} selector
+  @param {String|HTMLElement} selector
   @param {Object} options
   @return {RSVP.Promise}
   @public
 */
 export function click(selector, options = {}) {
-  let el = findWithAssert(selector);
-  clickEventSequence(el, options);
+  clickEventSequence(getElementWithAssert(selector), options);
   return wait();
 }

addon-test-support/fill-in.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import { findWithAssert } from './find-with-assert';
+import getElementWithAssert from './-private/get-element-with-assert';
 import { focus } from './focus';
 import { fireEvent } from './fire-event';
 import wait from 'ember-test-helpers/wait';
@@ -8,13 +8,13 @@ const { run } = Ember;
 
 /*
   @method fillIn
-  @param {String} selector
+  @param {String|HTMLElement} selector
   @param {String} text
   @return {RSVP.Promise}
   @public
 */
 export function fillIn(selector, text) {
-  let el = findWithAssert(selector);
+  let el = getElementWithAssert(selector);
   run(() => focus(el));
   run(() => el.value = text);
   run(() => fireEvent(el, 'input'));

addon-test-support/find-with-assert.js

@@ -1,4 +1,4 @@
-import { find } from './find';
+import getElementWithAssert from './-private/get-element-with-assert';
 
 /*
   @method findWithAssert
@@ -8,10 +8,5 @@ import { find } from './find';
   @public
 */
 export function findWithAssert(selector, contextEl) {
-  let el = find(selector, contextEl);
-  if (el === null) {
-    throw new Error(`Element ${selector} not found.`);
-  } else {
-    return el;
-  }
+  return getElementWithAssert(selector, contextEl);
 }

addon-test-support/find.js

@@ -1,4 +1,4 @@
-import settings from './settings';
+import getElement from './-private/get-element';
 
 /*
   The find test helper uses `querySelector` to search inside the test
@@ -14,11 +14,5 @@ import settings from './settings';
   @public
 */
 export function find(selector, contextEl) {
-  let result;
-  if (contextEl instanceof HTMLElement) {
-    result = contextEl.querySelector(selector);
-  } else {
-    result = document.querySelector(`${settings.rootElement} ${selector}`);
-  }
-  return result;
+  return getElement(selector, contextEl);
 }

addon-test-support/key-event.js

@@ -2,7 +2,7 @@ import { triggerEvent } from './trigger-event';
 
 /*
   @method keyEvent
-  @param {String} selector
+  @param {String|HTMLElement} selector
   @param {String} type
   @param {Number} keyCode
 */

addon-test-support/tap.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import { findWithAssert } from './find-with-assert';
+import getElementWithAssert from './-private/get-element-with-assert';
 import { fireEvent } from './fire-event';
 import { clickEventSequence } from './click';
 import wait from 'ember-test-helpers/wait';
@@ -8,15 +8,14 @@ const { run } = Ember;
 
 /*
   @method tap
-  @param {String} selector
+  @param {String|HTMLElement} selector
   @param {Object} options
   @return {RSVP.Promise}
   @public
 */
 export function tap(selector, options = {}) {
-  let el = findWithAssert(selector);
-  let touchstartEv;
-  let touchendEv;
+  let el = getElementWithAssert(selector);
+  let touchstartEv, touchendEv;
   run(() => touchstartEv = fireEvent(el, 'touchstart', options));
   run(() => touchendEv = fireEvent(el, 'touchend', options));
   if (!touchstartEv.defaultPrevented && !touchendEv.defaultPrevented) {

addon-test-support/trigger-event.js

@@ -1,20 +1,20 @@
 import Ember from 'ember';
-import { findWithAssert } from './find-with-assert';
+import getElementWithAssert from './-private/get-element-with-assert';
 import { fireEvent } from './fire-event';
 import wait from 'ember-test-helpers/wait';
 
 const { run } = Ember;
 
 /*
   @method triggerEvent
-  @param {String} selector
+  @param {String|HTMLElement} selector
   @param {String} type
   @param {Object} options
   @return {RSVP.Promise}
   @public
 */
 export function triggerEvent(selector, type, options) {
-  let element = findWithAssert(selector);
-  run(() => fireEvent(element, type, options));
+  let el = getElementWithAssert(selector);
+  run(() => fireEvent(el, type, options));
   return wait();
 }

tests/integration/click-test.js

@@ -39,3 +39,14 @@ test('It fires mousedown, focus, mouseup and click events on the element with th
   `);
   click('.target-element');
 });
+
+test('It accepts an HTMLElement as first argument', function(assert) {
+  assert.expect(2);
+  this.onClick = (e) => {
+    assert.ok(true, 'a click event is fired');
+    assert.ok(e instanceof window.Event, 'It receives a native event');
+  };
+
+  this.render(hbs`<input class="target-element" onclick={{onClick}} />`);
+  click(document.querySelector('.target-element'));
+});

tests/integration/fill-in-test.js

@@ -38,3 +38,14 @@ test('It fires a focus, updates the value, fires input and fires change on the e
   `);
   fillIn('.target-element', 'new value');
 });
+
+test('It accepts an HTMLElement as first argument', function(assert) {
+  assert.expect(2);
+  this.onInput = (e) => {
+    assert.ok(true, 'a click event is fired');
+    assert.ok(e instanceof window.Event, 'It receives a native event');
+  };
+
+  this.render(hbs`<input class="target-element" oninput={{onInput}} />`);
+  fillIn(document.querySelector('.target-element'), 'foo');
+});

tests/integration/key-event-test.js

@@ -50,3 +50,14 @@ test('It can fire keypress events', function(assert) {
   this.render(hbs`<input class="target-element" onkeypress={{onKeyPress}} />`);
   keyEvent('.target-element', 'keypress', 40);
 });
+
+test('It accepts an HTMLElement as first argument', function(assert) {
+  assert.expect(2);
+  this.onKeyDown = (e) => {
+    assert.ok(true, 'a click event is fired');
+    assert.ok(e instanceof window.Event, 'It receives a native event');
+  };
+
+  this.render(hbs`<input class="target-element" onkeydown={{onKeyDown}} />`);
+  keyEvent(document.querySelector('.target-element'), 'keydown', 13);
+});

tests/integration/tap-test.js

@@ -118,3 +118,14 @@ test('It the touchend event is defaultPrevented, the focus and mouse events are
 
   tap('.target-element');
 });
+
+test('It accepts an HTMLElement as first argument', function(assert) {
+  assert.expect(2);
+  this.onTouchStart = (e) => {
+    assert.ok(true, 'a click event is fired');
+    assert.ok(e instanceof window.Event, 'It receives a native event');
+  };
+
+  this.render(hbs`<input class="target-element" ontouchstart={{onTouchStart}} />`);
+  tap(document.querySelector('.target-element'));
+});

tests/integration/trigger-event-test.js

@@ -17,3 +17,14 @@ test('It fires events of the given type, no questions asked', function(assert) {
   this.render(hbs`<input class="target-element" onmouseenter={{onMouseEnter}} />`);
   triggerEvent('.target-element', 'mouseenter');
 });
+
+test('It accepts an HTMLElement as first argument', function(assert) {
+  assert.expect(2);
+  this.onMouseEnter = (e) => {
+    assert.ok(true, 'a click event is fired');
+    assert.ok(e instanceof window.Event, 'It receives a native event');
+  };
+
+  this.render(hbs`<input class="target-element" onmouseenter={{onMouseEnter}} />`);
+  triggerEvent(document.querySelector('.target-element'), 'mouseenter');
+});