Introduce new dom finders

implements #463

addon-test-support/-private/helpers.js

@@ -166,12 +166,20 @@ export function every(jqArray, cb) {
   return A(arr).every((element) => cb($(element)));
 }
 
-export function map(jqArray, cb, options = {}) {
-  let arr = jqArray.get();
-
-  const values =  A(arr).map(element => cb($(element)));
-
-  return options.multiple ? values : values[0];
+/**
+ * @private
+ *
+ * Check if all options are in whitelist
+ *
+ */
+export function filterWhitelistedOption(options, whitelist) {
+  const result = {};
+  for (let [key, value] of Object.entries(options)) {
+    if(whitelist.includes(key)) {
+      result[key] = value;
+    }
+  }
+  return result;
 }
 
 /**

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

@@ -1,4 +1,5 @@
 import { getExecutionContext } from '../-private/execution_context';
+import { deprecate } from '@ember/application/deprecations';
 
 /**
  * @public
@@ -36,5 +37,10 @@ import { getExecutionContext } from '../-private/execution_context';
  * @throws Will throw an error if multiple elements are matched by selector and multiple option is not set
  */
 export function findElementWithAssert(pageObjectNode, targetSelector, options = {}) {
+  deprecate('findElementWithAssert is deprecated, please use findOne or findMany instead', false, {
+    id: 'ember-cli-page-object.old-finders',
+    until: '2.0.0',
+    url: 'https://ember-cli-page-object.js.org/docs/v1.16.x/deprecations/#old-finders'
+  });
   return getExecutionContext(pageObjectNode).findWithAssert(targetSelector, options);
 }

addon-test-support/extend/find-element.js

@@ -1,4 +1,5 @@
 import { getExecutionContext } from '../-private/execution_context';
+import { deprecate } from '@ember/application/deprecations';
 
 /**
  * @public
@@ -34,5 +35,11 @@ import { getExecutionContext } from '../-private/execution_context';
  * @throws Will throw an error if multiple elements are matched by selector and multiple option is not set
  */
 export function findElement(pageObjectNode, targetSelector, options = {}) {
+  deprecate('findElement is deprecated, please use findOne or findMany instead', false, {
+    id: 'ember-cli-page-object.old-finders',
+    until: '2.0.0',
+    url: 'https://ember-cli-page-object.js.org/docs/v1.16.x/deprecations/#old-finders'
+  });
+
   return getExecutionContext(pageObjectNode).find(targetSelector, options);
 }

addon-test-support/extend/find-many.js

@@ -0,0 +1,40 @@
+import { getExecutionContext } from '../-private/execution_context';
+import { filterWhitelistedOption } from '../-private/helpers';
+/**
+ * @public
+ *
+ * Returns array of elements
+ *
+ * @example
+ *
+ * import { findMany } from '../extend';
+ *
+ * export default function count(selector, options = {}) {
+ *   return {
+ *     isDescriptor: true,
+ *
+ *     get() {
+ *       return findMany(this, selector, options).length;
+ *     }
+ *   };
+ * }
+ *
+ * @param {Ceibo} pageObjectNode - Node of the tree
+ * @param {string} targetSelector - Specific CSS selector
+ * @param {Object} options - Additional options
+ * @param {boolean} options.resetScope - Do not use inherited scope
+ * @param {string} options.contains - Filter by using :contains('foo') pseudo-class
+ * @param {string} options.scope
+ * @param {number} options.at - Filter by index using :eq(x) pseudo-class
+ * @param {boolean} options.last - Filter by using :last pseudo-class
+ * @param {boolean} options.visible - Filter by using :visible pseudo-class
+ * @param {string} options.testContainer - Context where to search elements in the DOM
+ * @return {Array} of Element
+ */
+export function findMany(pageObjectNode, targetSelector, options = {}) {
+  const filteredOptions = filterWhitelistedOption(options, [
+    'resetScope', 'visible', 'testContainer', 'contains', 'scope', 'at', 'last'
+  ]);
+  const opts = Object.assign({}, filteredOptions, { multiple: true });
+  return getExecutionContext(pageObjectNode).find(targetSelector, opts).get();
+}

addon-test-support/extend/find-one.js

@@ -0,0 +1,45 @@
+import { getExecutionContext } from '../-private/execution_context';
+import { filterWhitelistedOption } from "../-private/helpers";
+
+/**
+ * @public
+ *
+ * Returns a element
+ *
+ * @example
+ *
+ * import { findOne } from 'ember-cli-page-object';
+ *
+ * export default function isDisabled(selector, options = {}) {
+ *   return {
+ *     isDescriptor: true,
+ *
+ *     get() {
+ *       return findOne(this, selector, options).disabled;
+ *     }
+ *   };
+ * }
+ *
+ * @param {Ceibo} pageObjectNode - Node of the tree
+ * @param {string} targetSelector - Specific CSS selector
+ * @param {Object} options - Additional options
+ * @param {boolean} options.resetScope - Do not use inherited scope
+ * @param {string} options.contains - Filter by using :contains('foo') pseudo-class
+ * @param {string} options.scope
+ * @param {number} options.at - Filter by index using :eq(x) pseudo-class
+ * @param {boolean} options.last - Filter by using :last pseudo-class
+ * @param {boolean} options.visible - Filter by using :visible pseudo-class
+ * @param {string} options.testContainer - Context where to search elements in the DOM
+ * @param {string} options.pageObjectKey - Used in the error message when the element is not found
+ * @return {Element}
+ *
+ * @throws If no elements found
+ * @throws If more than one element found
+ */
+export function findOne(pageObjectNode, targetSelector, options = {}) {
+  const filteredOptions = filterWhitelistedOption(options, [
+    'resetScope', 'visible', 'testContainer', 'contains', 'at', 'last', 'scope', 'pageObjectKey'
+  ]);
+  const opts = Object.assign({}, filteredOptions, { multiple: false });
+  return getExecutionContext(pageObjectNode).findWithAssert(targetSelector, opts).get(0);
+}

addon-test-support/extend/index.js

@@ -1,5 +1,7 @@
 export { findElement } from './find-element';
 export { findElementWithAssert } from './find-element-with-assert';
+export { findOne } from './find-one';
+export { findMany } from './find-many';
 export { buildSelector, getContext, fullScope } from '../-private/helpers';
 import {
   register as registerExecutionContext

addon-test-support/properties/attribute.js

@@ -1,5 +1,5 @@
-import { assign, map } from '../-private/helpers';
-import { findElementWithAssert } from '../extend';
+import { assign } from '../-private/helpers';
+import { findMany, findOne } from '../extend';
 
 /**
  * @public
@@ -82,9 +82,11 @@ export function attribute(attributeName, selector, userOptions = {}) {
     get(key) {
       let options = assign({ pageObjectKey: key }, userOptions);
 
-      let elements = findElementWithAssert(this, selector, options);
-
-      return map(elements, element => element.attr(attributeName), options);
+      if (options.multiple) {
+        return findMany(this, selector, options).map(element => element.getAttribute(attributeName), options);
+      } else {
+        return findOne(this, selector, options).getAttribute(attributeName);
+      }
     }
   };
 }

addon-test-support/properties/contains.js

@@ -1,5 +1,6 @@
-import { assign, every } from '../-private/helpers';
-import { findElementWithAssert } from '../extend';
+import { assign } from '../-private/helpers';
+import { findMany, findOne } from '../extend';
+import { A } from '@ember/array';
 
 /**
  * Returns a boolean representing whether an element or a set of elements contains the specified text.
@@ -97,11 +98,9 @@ export function contains(selector, userOptions = {}) {
       return function(textToSearch) {
         let options = assign({ pageObjectKey: `${key}("${textToSearch}")` }, userOptions);
 
-        let elements = findElementWithAssert(this, selector, options);
+        let elements = options.multiple ? findMany(this, selector, options) : [findOne(this, selector, options)];
 
-        return every(elements, function(element) {
-          return element.text().indexOf(textToSearch) >= 0;
-        });
+        return A(elements).every((element) => element.innerText.indexOf(textToSearch) >= 0);
       };
     }
   };

addon-test-support/properties/count.js

@@ -1,5 +1,5 @@
 import { assign } from '../-private/helpers';
-import { findElement } from '../extend';
+import { findMany } from '../extend';
 
 /**
  * @public
@@ -90,7 +90,7 @@ export function count(selector, userOptions = {}) {
 
       options = assign(options, { multiple: true });
 
-      return findElement(this, selector, options).length;
+      return findMany(this, selector, options).length;
     }
   };
 }

addon-test-support/properties/has-class.js

@@ -1,5 +1,6 @@
-import { assign, every } from '../-private/helpers';
-import { findElementWithAssert } from '../extend'
+import { assign } from '../-private/helpers';
+import { findOne, findMany } from '../extend';
+import { A } from '@ember/array';
 
 /**
  * Validates if an element or a set of elements have a given CSS class.
@@ -99,11 +100,9 @@ export function hasClass(cssClass, selector, userOptions = {}) {
     get(key) {
       let options = assign({ pageObjectKey: key }, userOptions);
 
-      let elements = findElementWithAssert(this, selector, options);
+      let elements = options.multiple ? findMany(this, selector, options) : [findOne(this, selector, options)];
 
-      return every(elements, function(element) {
-        return element.hasClass(cssClass);
-      });
+      return A(elements).every((element) => element.classList.contains(cssClass));
     }
   };
 }

addon-test-support/properties/is-hidden.js

@@ -1,5 +1,7 @@
-import { assign, every } from '../-private/helpers';
-import { findElement } from '../extend';
+import { assign, guardMultiple } from '../-private/helpers';
+import { findMany } from '../extend';
+import { A } from '@ember/array';
+import $ from '-jquery';
 
 /**
  * Validates if an element or set of elements is hidden or does not exist in the DOM.
@@ -106,9 +108,12 @@ export function isHidden(selector, userOptions = {}) {
     get(key) {
       let options = assign({ pageObjectKey: key }, userOptions);
 
-      let elements = findElement(this, selector, options);
+      let elements = findMany(this, selector, options);
 
-      return every(elements, element => element.is(':hidden'));
+      guardMultiple(elements, selector, options.multiple);
+
+      return elements.length === 0 ||
+        A(elements).every(element => $(element).is(':hidden'));
     }
   };
 }

addon-test-support/properties/is-present.js

@@ -1,4 +1,5 @@
-import { findElement } from 'ember-cli-page-object';
+import { findMany } from '../extend';
+import { guardMultiple } from "../-private/helpers";
 
 /**
  * Validates if any element matching the target selector is rendered in the DOM.
@@ -17,7 +18,7 @@ import { findElement } from 'ember-cli-page-object';
  * // Lorem <span>ipsum</span>
  *
  * import { create, isPresent } from 'ember-cli-page-object';
- * 
+ *
  * const page = create({
  *   spanIsPresent: isPresent('span')
  * });
@@ -30,7 +31,7 @@ import { findElement } from 'ember-cli-page-object';
  * // <span style="display:none">dolor</span>
  *
  * import { create, isPresent } from 'ember-cli-page-object';
- * 
+ *
  * const page = create({
  *   spanIsPresent: isPresent('span', { multiple: true })
  * });
@@ -44,7 +45,7 @@ import { findElement } from 'ember-cli-page-object';
  * // </head>
  *
  * import { create, isPresent } from 'ember-cli-page-object';
- * 
+ *
  * const page = create({
  *   notIndexed: isPresent(`meta[name='robots'][content='noindex']`, {
  *     testContainer: 'head'
@@ -58,7 +59,7 @@ import { findElement } from 'ember-cli-page-object';
  * // Lorem <strong>ipsum</strong>
  *
  * import { create, isPresent } from 'ember-cli-page-object';
- * 
+ *
  * const page = create({
  *   spanIsPresent: isPresent('span')
  * });
@@ -79,11 +80,13 @@ import { findElement } from 'ember-cli-page-object';
  *
  * @throws Will throw an error if multiple elements are matched by selector and multiple option is not set
  */
-export function isPresent(selector, options) {
+export function isPresent(selector, options = {}) {
   return {
     isDescriptor: true,
     get() {
-      return !!findElement(this, selector, options).length;
+      let elements = findMany(this, selector, options);
+      guardMultiple(elements, selector, options.multiple);
+      return elements.length > 0;
     }
   };
 }

addon-test-support/properties/is-visible.js

@@ -1,5 +1,7 @@
-import { assign, every } from '../-private/helpers';
-import { findElement } from '../extend';
+import { assign, guardMultiple } from '../-private/helpers';
+import { findMany } from '../extend';
+import { A } from '@ember/array';
+import $ from '-jquery';
 
 /**
  * Validates if an element or set of elements are visible.
@@ -112,15 +114,14 @@ export function isVisible(selector, userOptions = {}) {
     get(key) {
       let options = assign({ pageObjectKey: key }, userOptions);
 
-      let elements = findElement(this, selector, options);
+      let elements = findMany(this, selector, options);
+      guardMultiple(elements, selector, options.multiple);
 
       if (elements.length === 0) {
         return false;
       }
 
-      return every(elements, function(element) {
-        return element.is(':visible');
-      });
+      return A(elements).every((element) => $(element).is(':visible'));
     }
   };
 }

addon-test-support/properties/not-has-class.js

@@ -1,5 +1,6 @@
-import { assign, every } from '../-private/helpers';
-import { findElementWithAssert } from '../extend';
+import { assign } from '../-private/helpers';
+import { findOne, findMany } from '../extend';
+import { A } from '@ember/array';
 
 /**
  * @public
@@ -103,11 +104,9 @@ export function notHasClass(cssClass, selector, userOptions = {}) {
     get(key) {
       let options = assign({ pageObjectKey: key }, userOptions);
 
-      let elements = findElementWithAssert(this, selector, options);
+      let elements = options.multiple ? findMany(this, selector, options) : [findOne(this, selector, options)];
 
-      return every(elements, function(element) {
-        return !element.hasClass(cssClass);
-      });
+      return A(elements).every((element) => !element.classList.contains(cssClass));
     }
   };
 }