feat(expect-puppeteer): enhance toMatchElement / toClick text option

BREAKING CHANGE: Text is now trimmed and no longer evaluated as a RegExp. If you want this behaviour, use a true RegExp.

Closes #51
Closes #50

packages/expect-puppeteer/README.md

@@ -85,7 +85,7 @@ Expect an element to be in the page or element, then click on it.
  * `raf` - to constantly execute `pageFunction` in `requestAnimationFrame` callback. This is the tightest polling mode which is suitable to observe styling changes.
  * `mutation` - to execute `pageFunction` on every DOM mutation.
  * `timeout` <[number]> maximum time to wait for in milliseconds. Defaults to `500`.
- * `text` <[string]> A text or a RegExp to match in element `textContent`.
+ * `text` <[string]|[RegExp]> A text or a RegExp to match in element `textContent`.
 
 ```js
 await expect(page).toClick('button', { text: 'Home' })
@@ -172,7 +172,7 @@ Expect an element be present in the page or element.
  * `raf` - to constantly execute `pageFunction` in `requestAnimationFrame` callback. This is the tightest polling mode which is suitable to observe styling changes.
  * `mutation` - to execute `pageFunction` on every DOM mutation.
  * `timeout` <[number]> maximum time to wait for in milliseconds. Defaults to `500`.
- * `text` <[string]> A text or a RegExp to match in element `textContent`.
+ * `text` <[string]|[RegExp]> A text or a RegExp to match in element `textContent`.
 
 ```js
 // Select a row containing a text
@@ -246,6 +246,7 @@ MIT
 [number]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type 'Number'
 [object]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object 'Object'
 [promise]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise 'Promise'
+[regexp]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp 'RegExp'
 [string]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type 'String'
 [error]: https://nodejs.org/api/errors.html#errors_class_error 'Error'
 [element]: https://developer.mozilla.org/en-US/docs/Web/API/element 'Element'

packages/expect-puppeteer/src/matchers/toMatchElement.js

@@ -1,31 +1,73 @@
 import { getContext, enhanceError } from '../utils'
 import { defaultOptions } from '../options'
 
-async function toMatchElement(instance, selector, { text, ...options } = {}) {
+const isRegExp = input =>
+ Object.prototype.toString.call(input) === '[object RegExp]'
+
+const expandSearchExpr = expr => {
+ if (isRegExp(expr)) return { text: null, regexp: expr.toString() }
+ if (typeof expr === 'string') return { text: expr, regexp: null }
+ return { text: null, regexp: null }
+}
+
+async function toMatchElement(
+ instance,
+ selector,
+ { text: searchExpr, ...options } = {},
+) {
  options = defaultOptions(options)
 
  const { page, handle } = await getContext(instance, () => document)
 
- const getElement = (handle, selector, text) => {
+ const { text, regexp } = expandSearchExpr(searchExpr)
+
+ const getElement = (handle, selector, text, regexp) => {
  const elements = handle.querySelectorAll(selector)
- if (text !== undefined) {
- return [...elements].find(({ textContent }) => textContent.match(text))
+ if (regexp !== null) {
+ const [, pattern, flags] = regexp.match(/\/(.*)\/(.*)?/)
+ return [...elements].find(({ textContent }) =>
+ textContent
+ .replace(/\s+/g, ' ')
+ .trim()
+ .match(new RegExp(pattern, flags)),
+ )
+ }
+ if (text !== null) {
+ return [...elements].find(({ textContent }) =>
+ textContent
+ .replace(/\s+/g, ' ')
+ .trim()
+ .includes(text),
+ )
  }
  return elements[0]
  }
 
  try {
- await page.waitForFunction(getElement, options, handle, selector, text)
+ await page.waitForFunction(
+ getElement,
+ options,
+ handle,
+ selector,
+ text,
+ regexp,
+ )
  } catch (error) {
  throw enhanceError(
  error,
  `Element ${selector}${
- text !== undefined ? ` (text: "${text}") ` : ' '
+ text !== null || regexp !== null ? ` (text: "${text || regexp}") ` : ' '
  }not found`,
  )
  }
 
- const jsHandle = await page.evaluateHandle(getElement, handle, selector, text)
+ const jsHandle = await page.evaluateHandle(
+ getElement,
+ handle,
+ selector,
+ text,
+ regexp,
+ )
  return jsHandle.asElement()
 }
 

packages/expect-puppeteer/src/matchers/toMatchElement.test.js

@@ -11,13 +11,22 @@ describe('toMatchElement', () => {
  expect(textContent).toBe('Page 2')
  })
 
- it('should match using text', async () => {
+ it('should match using text (string)', async () => {
  const element = await expect(page).toMatchElement('a', { text: 'Page 2' })
  const textContentProperty = await element.getProperty('textContent')
  const textContent = await textContentProperty.jsonValue()
  expect(textContent).toBe('Page 2')
  })
 
+ it('should match using text (RegExp)', async () => {
+ const element = await expect(page).toMatchElement('a', {
+ text: /Page\s2/,
+ })
+ const textContentProperty = await element.getProperty('textContent')
+ const textContent = await textContentProperty.jsonValue()
+ expect(textContent).toBe('Page 2')
+ })
+
  it('should return an error if element is not found', async () => {
  expect.assertions(3)
 
@@ -39,7 +48,7 @@ describe('toMatchElement', () => {
  expect(textContent).toMatch('A div in the main')
  })
 
- it('should match using text', async () => {
+ it('should match using text (string)', async () => {
  const main = await page.$('main')
  const element = await expect(main).toMatchElement('*', {
  text: 'in the main',
@@ -49,6 +58,16 @@ describe('toMatchElement', () => {
  expect(textContent).toMatch('A div in the main')
  })
 
+ it('should match using text (RegExp)', async () => {
+ const main = await page.$('main')
+ const element = await expect(main).toMatchElement('*', {
+ text: /in.the\smain/g,
+ })
+ const textContentProperty = await element.getProperty('textContent')
+ const textContent = await textContentProperty.jsonValue()
+ expect(textContent).toMatch('A div in the main')
+ })
+
  it('should return an error if element is not found', async () => {
  const main = await page.$('main')
  expect.assertions(3)