fix(ui-test-utils): fix query by text/contents

TEST PLAN:

findAll({ text: 'foo' })
  should return only immediate parent element of the text cotent
findAll({ contains: 'foo' })
  should return all elements that contain the text
findAll({ locator: '[data-foo="bar"]', text: 'foo' })
  should only return an element if: <span data-foo="bar">foo</span>

Change-Id: I6f1af6f563649395c026e4191f661e7f9af65a09
Reviewed-on: https://gerrit.instructure.com/165423
Tested-by: Jenkins
Reviewed-by: Stephen Jensen <sejensen@instructure.com>
Product-Review: Jennifer Stern <jstern@instructure.com>
QA-Review: Jennifer Stern <jstern@instructure.com>

Author: junyper

packages/ui-portal/src/components/Portal/__tests__/Portal.test.js

@@ -32,15 +32,15 @@ describe('<Portal />', () => {
     await mount(
       <Portal open>Hello World</Portal>
     )
-    const portal = await Portal.find({ text: 'Hello World' })
+    const portal = await Portal.find({ contains: 'Hello World' })
     expect(portal.getDOMNode()).to.exist()
   })
 
   it('should be accessible', async () => {
     await mount(
       <Portal open>Hello World</Portal>
     )
-    const portal = await Portal.find({ text: 'Hello World' })
+    const portal = await Portal.find({ contains: 'Hello World' })
     expect(await portal.accessible()).to.be.true()
   })
 
@@ -102,7 +102,7 @@ describe('<Portal />', () => {
         </Portal>
       )
 
-      const portal = await Portal.find({ text: 'Hello World' })
+      const portal = await Portal.find({ contains: 'Hello World' })
       const button = await within(portal).find('button')
 
       button.keyDown('Enter')
@@ -127,7 +127,7 @@ describe('<Portal />', () => {
         </div>
       )
       const portal = await Portal.find({
-        text: 'Hello World',
+        contains: 'Hello World',
         timeout: 0,
         errorIfNotFound: false
       })
@@ -148,7 +148,7 @@ describe('<Portal />', () => {
         </div>
       )
 
-      const portal = await Portal.find({ text: 'Hello World'})
+      const portal = await Portal.find({ contains: 'Hello World'})
 
       expect(portal.getDOMNode().parentNode)
         .to.equal(document.getElementById('portal-mount-node'))

packages/ui-test-utils/src/utils/__tests__/queries.test.js

@@ -53,7 +53,7 @@ describe('find, findAll', () => {
   describe('by text', () => {
     it('can get elements by matching their text content', async () => {
       await mount(
-        <div>
+        <div data-locator="TestLocator">
           <span>Currently showing</span>
           <span>
             {`Step
@@ -67,17 +67,49 @@ describe('find, findAll', () => {
       expect(await findAll({ text: 'Step 1 of 4' })).to.have.length(1)
     })
 
+    it('can get elements by matching their nested contents', async () => {
+      await mount(
+        <div>
+          <span>Currently showing</span>
+        </div>
+      )
+
+      expect(await findAll({
+        contains: 'Currently showing'
+      }))
+        .to.have.length(3) // div (mount node), div, span
+    })
+
+    it('should filter out non-matching results', async () => {
+      await mount(
+        <div data-locator="TestLocator">
+          <span>Currently showing</span>
+        </div>
+      )
+
+      expect(await findAll({
+        locator: '[data-locator="TestLocator"]',
+        text: 'Foo',
+        errorIfNotFound: false,
+        timeout: 0
+      })).to.have.length(0)
+    })
+
     it('can get elements by matching their text across adjacent text nodes', async () => {
-      const textDiv = document.createElement('div')
+      const div = document.createElement('div')
       const textNodeContent = ['£', '24', '.', '99']
       textNodeContent
         .map(text => document.createTextNode(text))
-        .forEach(textNode => textDiv.appendChild(textNode))
+        .forEach(textNode => div.appendChild(textNode))
 
       const subject = await mount(<div />)
-      subject.getDOMNode().appendChild(textDiv)
+      subject.getDOMNode().appendChild(div)
 
-      expect(await findAll({ text: '£24.99' })).to.have.length(1)
+      const nodes = await findAll({
+        text: '£24.99'
+      })
+
+      expect(nodes).to.have.length(1)
     })
 
     it('matches case with RegExp matcher', async () => {
@@ -86,7 +118,6 @@ describe('find, findAll', () => {
       expect(await findAll({ text: /Step 1 of 4/, errorIfNotFound: false, timeout: 0 }))
         .to.have.length(0)
     })
-
   })
 
   describe('by label', () => {

packages/ui-test-utils/src/utils/filters.js

@@ -21,7 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { matchElementByAttribute, matchElementByText, matchElementBySelector } from './matchers'
+import {
+  matchElementByAttribute,
+  matchElementByText,
+  matchElementBySelector,
+  matchElementByContents
+} from './matchers'
 
 function filterBySelector (container, results, selector, options) {
   if (Array.isArray(results)) {
@@ -33,12 +38,12 @@ function filterBySelector (container, results, selector, options) {
 }
 
 function filterByAttribute (container, results, name, value, options = {}) {
-  return Array.isArray(results) ? results : queryAllBySelector(container, `[${name}]`)
+  return (Array.isArray(results) ? results : queryAllBySelector(container, `[${name}]`))
     .filter(element => matchElementByAttribute(element, name, value, options))
 }
 
 function filterByTitle (container, results, title, options) {
-  return Array.isArray(results) ? results : queryAllBySelector(container, '[title], svg > title')
+  return (Array.isArray(results) ? results : queryAllBySelector(container, '[title], svg > title'))
     .filter((element) => {
       if (matchElementBySelector(element, 'svg > title')) {
         return matchElementByText(element, title, options)
@@ -50,12 +55,16 @@ function filterByTitle (container, results, title, options) {
     })
 }
 
+function filterByContents (container, results, elementOrString, options) {
+  return (Array.isArray(results) ? results : queryAllBySelector(container, '*'))
+    .filter(element => matchElementByContents(element, elementOrString, options))
+}
+
 function filterByText (container, results, text, options) {
-  return Array.isArray(results) ? results : queryAllBySelector(container, '*')
+  return (Array.isArray(results) ? results : queryAllBySelector(container, '*'))
     .filter(element => matchElementByText(element, text, options))
 }
 
-
 function filterByLabelText (container, results, text, options = {}) {
   // aria-labelledby may not refer to a label element, so we get elements with ids too
   const matches = queryAllBySelector(container, 'label, [id]')
@@ -102,6 +111,7 @@ function queryAllBySelector (element = document.documentElement, selector = '*')
 
 export {
   filterByLabelText,
+  filterByContents,
   filterByText,
   filterByTitle,
   filterByAttribute,

packages/ui-test-utils/src/utils/helpers.js

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import runAxeCheck from '@instructure/ui-axe-check'
-import { fireEvent, prettyDOM, getNodeText } from 'dom-testing-library'
+import { fireEvent, prettyDOM } from 'dom-testing-library'
 
 function typeIn (element, value) {
   element.value = value // eslint-disable-line no-param-reassign
@@ -34,7 +34,7 @@ function typeIn (element, value) {
 }
 
 function text (element) {
-  return getNodeText(element)
+  return element.textContent
 }
 
 function visible (element) {

packages/ui-test-utils/src/utils/matchers.js

@@ -35,6 +35,17 @@ function matchElementByText (element, text, options = {}) {
   return matcher(getNodeText(element), element, text, { collapseWhitespace, trim })
 }
 
+function matchElementByContents (element, elementOrString, options = {}) {
+  const { exact, collapseWhitespace, trim } = options
+  const matcher = exact ? matches : fuzzyMatches
+
+  if (elementOrString instanceof Element) {
+    return element.contains(elementOrString)
+  } else {
+    return matcher(element.textContent, element, elementOrString, { collapseWhitespace, trim })
+  }
+}
+
 function matchElementByAttribute (element, name, value, options = {}) {
   const { exact, collapseWhitespace, trim } = options
   const matcher = exact ? matches : fuzzyMatches
@@ -47,6 +58,7 @@ function matchElementBySelector (element, selector) {
 
 export {
   matchElementByText,
+  matchElementByContents,
   matchElementByAttribute,
   matchElementBySelector
 }

packages/ui-test-utils/src/utils/queries.js

@@ -31,6 +31,7 @@ import { waitForQueryResult } from './waitForQueryResult'
 import {
   filterByLabelText,
   filterByText,
+  filterByContents,
   filterByTitle,
   filterByAttribute,
   filterBySelector
@@ -53,6 +54,7 @@ async function findAll (...args) {
     css,
     tag,
     text,
+    contains,
     label,
     title,
     value,
@@ -82,6 +84,10 @@ async function findAll (...args) {
       result = filterByText(element, result, text, options)
     }
 
+    if (contains) {
+      result = filterByContents(element, result, contains, options)
+    }
+
     if (value) {
       result = filterByAttribute(element, result, 'value', value, options)
     }
@@ -152,6 +158,7 @@ function parseQueryArguments () {
       css,
       tag,
       text,
+      contains,
       label,
       value,
       attribute,
@@ -163,6 +170,7 @@ function parseQueryArguments () {
       title,
       tag,
       text,
+      contains,
       label,
       value,
       attribute