invokeHelper: migrate fillable

addon-test-support/-private/execution_context/acceptance.js

@@ -46,21 +46,15 @@ AcceptanceExecutionContext.prototype = {
     click(element);
   },
 
-  fillIn(selector, container, options, content) {
-    let $selection = find(selector, container || findClosestValue(this.pageObjectNode, 'testContainer'));
-
+  fillIn(element, content) {
     /* global focus */
-    focus($selection);
+    focus(element);
 
-    fillElement($selection, content, {
-      selector,
-      pageObjectNode: this.pageObjectNode,
-      pageObjectKey: options.pageObjectKey
-    });
+    fillElement(element, content);
 
     /* global triggerEvent */
-    triggerEvent(selector, container, 'input');
-    triggerEvent(selector, container, 'change');
+    triggerEvent(element, 'input');
+    triggerEvent(element, 'change');
   },
 
   triggerEvent(element, eventName, eventOptions) {

addon-test-support/-private/execution_context/integration.js

@@ -47,17 +47,11 @@ IntegrationExecutionContext.prototype = {
     $(element).click();
   },
 
-  fillIn(selector, container, options, content) {
-    let $selection = this.$(selector, container);
+  fillIn(element, content) {
+    fillElement(element, content);
 
-    fillElement($selection, content, {
-      selector,
-      pageObjectNode: this.pageObjectNode,
-      pageObjectKey: options.pageObjectKey
-    });
-
-    $selection.trigger('input');
-    $selection.change();
+    $(element).trigger('input');
+    $(element).change();
   },
 
   $(selector, container) {

addon-test-support/-private/execution_context/native-events-context.js

@@ -46,19 +46,12 @@ ExecutionContext.prototype = {
     click(element);
   },
 
-  fillIn(selector, container, options, content) {
-    let elements = this.$(selector, container).toArray();
-
-    elements.forEach((el) => {
-      fillElement(el, content, {
-        selector,
-        pageObjectNode: this.pageObjectNode,
-        pageObjectKey: options.pageObjectKey
-      });
-
-      triggerEvent(el, 'input');
-      triggerEvent(el, 'change');
-    });
+  fillIn(element, content) {
+
+    fillElement(element, content);
+
+    triggerEvent(element, 'input');
+    triggerEvent(element, 'change');
   },
 
   $(selector, container) {

addon-test-support/-private/execution_context/rfc268.js

@@ -41,8 +41,8 @@ ExecutionContext.prototype = {
     return click(element);
   },
 
-  fillIn(selector, container, options, content) {
-    return this.invokeHelper(selector, options, fillIn, content);
+  fillIn(element, content) {
+    return fillIn(element, content);
   },
 
   triggerEvent(element, eventName, eventOptions) {

addon-test-support/properties/fillable.js

@@ -1,9 +1,11 @@
 import {
   assign,
   buildSelector,
-  findClosestValue
 } from '../-private/helpers';
 import { getExecutionContext } from '../-private/execution_context';
+import { throwBetterError, ELEMENT_NOT_FOUND } from '../-private/better-errors';
+import { findMany } from 'ember-cli-page-object/extend';
+import { invokeHelper } from '../-private/action';
 
 /**
  * Alias for `fillable`, which works for inputs, HTML select menus, and
@@ -117,45 +119,61 @@ import { getExecutionContext } from '../-private/execution_context';
  * @param {string} options.testContainer - Context where to search elements in the DOM
  * @return {Descriptor}
  */
-export function fillable(selector, userOptions = {}) {
+export function fillable(selector = '', userOptions = {}) {
   return {
     isDescriptor: true,
 
     get(key) {
       return function(contentOrClue, content) {
-        let clue;
+        let options = assign({ pageObjectKey: `${key}()` }, userOptions);
 
+        let clue;
         if (content === undefined) {
           content = contentOrClue;
         } else {
           clue = contentOrClue;
         }
 
         let executionContext = getExecutionContext(this);
-        let options = assign({ pageObjectKey: `${key}()` }, userOptions);
 
-        return executionContext.runAsync((context) => {
-          let fullSelector = buildSelector(this, selector, options);
-          let container = options.testContainer || findClosestValue(this, 'testContainer');
+        return executionContext.runAsync(({ fillIn }) => {
+          let scopeSelector = clue
+            ? `${selector} ${getSelectorByClue(this, selector, options, clue)}`
+            : selector;
 
-          if (clue) {
-            fullSelector = ['input', 'textarea', 'select', '[contenteditable]']
-              .map((tag) => [
-                `${fullSelector} ${tag}[data-test="${clue}"]`,
-                `${fullSelector} ${tag}[aria-label="${clue}"]`,
-                `${fullSelector} ${tag}[placeholder="${clue}"]`,
-                `${fullSelector} ${tag}[name="${clue}"]`,
-                `${fullSelector} ${tag}#${clue}`
-              ])
-              .reduce((total, other) => total.concat(other), [])
-              .join(',');
-          }
-
-          context.assertElementExists(fullSelector, options);
-
-          return context.fillIn(fullSelector, container, options, content);
+          return invokeHelper(this, scopeSelector, options, (element) => fillIn(element, content));
         });
       };
     }
   };
 }
+
+function getSelectorByClue(pageObject, selector, options, clue) {
+  let cssClues = ['input', 'textarea', 'select', '[contenteditable]'].map((tag) => [
+    `${tag}[data-test="${clue}"]`,
+    `${tag}[aria-label="${clue}"]`,
+    `${tag}[placeholder="${clue}"]`,
+    `${tag}[name="${clue}"]`,
+    `${tag}#${clue}`
+  ])
+  .reduce((total, other) => total.concat(other), [])
+
+  const clueScope = cssClues.find(extraScope => {
+    return findMany(pageObject, `${selector} ${extraScope}`, options)[0];
+  });
+
+  if (!clueScope) {
+    const pageObjectSelector = buildSelector(pageObject, '', options);
+    const possibleSelectors = cssClues.map((cssClue) => {
+      const childSelector = `${selector} ${cssClue}`.trim();
+
+      return `${pageObjectSelector} ${childSelector}`;
+    });
+
+    throwBetterError(pageObject, options.pageObjectKey, ELEMENT_NOT_FOUND, {
+      selector: possibleSelectors.join(',')
+    })
+  }
+
+  return clueScope;
+}

tests/unit/-private/properties/fillable-test.ts

@@ -227,7 +227,7 @@ moduleForProperty('fillable', function(test) {
 
   test('raises an error when the element has contenteditable="false"', async function(assert) {
     let page = create({
-      foo: fillable('div')
+      foo: fillable('[contenteditable]')
     });
 
     await this.adapter.createTemplate(this, page, '<div contenteditable="false">');